跳到主要内容

完成未支付订单

在订单列表中，我们需要实现一个功能，即用户可以点击“去支付”按钮来支付未完成的订单，而不是创建一个新的订单。在修改相关代码之前，我们需要先进行一些准备工作。

创建支付页面​

首先，在0rder.vue文件中，我们给“去支付”按钮添加了一个v-on:click事件，并指定了pay(order)

frontend/src/views/Orders.vue
<tbody class="bg-white dark:bg-slate-800">

    <tr v-for="order in info.results">
      <td class="border-b border-slate-100 dark:border-slate-700 p-4  text-slate-500 dark:text-slate-400">{{ order.order_sn }}</td>
      <td class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">{{ order.card.card_name }}</td>
      <td class="border-b border-slate-100 dark:border-slate-700 p-4  text-slate-500 dark:text-slate-400"> {{ order.created_at }}</td>
      <td class="border-b border-slate-100 dark:border-slate-700 p-4  text-slate-500 dark:text-slate-400">{{ order.order_mount }}元</td>
      <td class="border-b border-slate-100 dark:border-slate-700 py-4  text-slate-500 dark:text-slate-400">
        <button v-if="order.pay_status == 'PAYING'" v-on:click="pay(order)" class="pay rounded border bg-gray-500 hover:bg-blue-500 hover:text-white text-sm h-8 w-16 text-primary-100">去支付</button> 
        <button v-else-if="order.pay_status == 'TRADE_CLOSED'" class="rounded border bg-gray-500 text-white text-sm h-8 w-16 cursor-not-allowed">已关闭</button>
        <button v-else-if="order.pay_status == 'TRADE_SUCCESS' || order.pay_status == 'TRADE_FINISHED'" class="rounded border bg-blue-500 text-white text-sm h-8 w-16 cursor-default">已完成</button>
      </td>
    </tr>
</tbody>

然后，我们编写业务逻辑，执行pay()方法，代码如下：

frontend/src/views/Orders.vue
// 支付
pay(order) {
    axios
        .get('/api/alipay/?card_id='+ order.card.id + '&order_sn='+ order.order_sn)
        .then(response => {
            console.log(response.data)
            window.location.href = response.data
        })
}
🔒 试读结束

继续阅读完整内容

以上为免费预览。前往「Django + Vue 全栈课程」，查看后续完整讲解、案例演示和配套资料。

查看课程详情