Vue3电商项目实战-个人中心模块9【19-订单详情-取消订单、20-订单详情-确认收货、21-再次购买】

---

19-订单详情-取消订单

完成订单详情的取消订单

src/views/member/order/index.vue

// 封装逻辑-取消订单
+ export const useCancelOrder = () => {

src/views/member/order/components/order-action.vue

import OrderCancel from './order-cancel'
import { useCancelOrder } from '../index'

  setup () {
+    return { orderStatus, ...useCancelOrder() }
  }

    <!-- 取消订单组件 -->
    <Teleport to="#dailog">
      <OrderCancel ref="orderCancelCom" />
    </Teleport>

      <template v-if="order.orderState===1">
        <XtxButton @click="$router.push('/member/pay?id='+order.id)" type="primary" size="small">立即付款</XtxButton>
+       <XtxButton @click="onCancelOrder(order)" type="gray" size="small">取消订单</XtxButton>
      </template>

20-订单详情-确认收货

完成订单详情的确认收货

src/views/member/order/index.vue

// 封装逻辑-确认收货
+ export const useConfirmOrder = () => {

src/views/member/order/components/order-action.vue

+import { useCancelOrder, useConfirmOrder } from '../index'

  setup () {
+    return { orderStatus, ...useCancelOrder(), ...useConfirmOrder() }
  }

        <XtxButton @click="onConfirmOrder(order)" type="primary" size="small">确认收货</XtxButton>

21-再次购买

目的：完成再次购买

大致步骤：

• 当你点击再次购物车，传递订单ID到结算页面
• 在结算页码根据地址栏是否又订单ID来判断结算方式
  • 没有ID：结算购物车种选中的商品
  • 如有ID：结算该订单ID下的商品
    • 提供一个API函数去生成结算信息

落的代码：

src/api/order.js 订单商品结算函数

/**
 * 获取再次购买的订单结算信息
 * @param {String} id - 订单ID
 * @returns
 */
export const findOrderRepurchase = (id) => {
  return request(`/member/order/repurchase/${id}`, 'get')
}

所有的再次购买跳转到结算页面

order-item.vue

        <p v-if="[2,3,4,5].includes(order.orderState)"><a @click="$router.push(`/member/checkout?orderId=${order.id}`)" href="javascript:;">再次购买</a></p>

detail-action.vue

     <template v-if="order.orderState===2">
+        <XtxButton @click="$router.push(`/member/checkout?orderId=${order.id}`)" type="plain" size="small">再次购买</XtxButton>
      </template>
      <template v-if="order.orderState===3">
        <XtxButton @click="onConfirmOrder(order)" type="primary" size="small">确认收货</XtxButton>
+        <XtxButton @click="$router.push(`/member/checkout?orderId=${order.id}`)" type="plain" size="small">再次购买</XtxButton>
      </template>
      <template v-if="order.orderState===4">
        <XtxButton type="primary" size="small">评价商品</XtxButton>
+        <XtxButton @click="$router.push(`/member/checkout?orderId=${order.id}`)" type="plain" size="small">再次购买</XtxButton>
        <XtxButton type="gray" size="small">申请售后</XtxButton>
      </template>
      <template v-if="order.orderState===5">
        <XtxButton type="primary" size="small">查看评价</XtxButton>
+        <XtxButton @click="$router.push(`/member/checkout?orderId=${order.id}`)" type="plain" size="small">再次购买</XtxButton>
        <XtxButton type="gray" size="small">申请售后</XtxButton>
      </template>

来到结算页码，区分下结算场景 src/views/member/pay/checkout.vue

    const route = useRoute()
    if (route.query.orderId) {
      // 再次购买结算
      findOrderRepurchase(route.query.orderId).then(data => {
        checkoutInfo.value = data.result
        // 设置订单商品数据
        order.goods = data.result.goods.map(({ skuId, count }) => ({ skuId, count }))
      })
    } else {
      // 购物车结算
      findOrderPre().then(data => {
        checkoutInfo.value = data.result
        // 设置订单商品数据
        order.goods = data.result.goods.map(({ skuId, count }) => ({ skuId, count }))
      })
    }