Vue3电商项目实战-个人中心模块5【11-订单管理-取消订单、12-订单管理-删除订单、13-订单管理-确认收货】

/*** 取消订单* @param {String} orderId - 订单ID* @param {String} cancelReason - 取消原因* @returns Promise*/
export const cancelOrder = (orderId, cancelReason) => {return request(`/member/order/${orderId}/cancel`, 'put', { cancelReason })
}

export const cancelReason = ['配送信息有误','商品买错了','重复下单/误下单','忘记使用优惠券、兔币等','其他渠道价格更低','不想买了'
]

+    // setup中的returnreturn {activeName,orderStatus,tabClick,requestParams,orderList,loading,total,changePager,
+      ...useCancelOrder()}

// 封装逻辑-取消订单
const useCancelOrder = () => {const orderCancelCom = ref(null)const onCancelOrder = (item) => {// item 就是你要取消的订单orderCancelCom.value.open(item)}return { onCancelOrder, orderCancelCom }
}

        
+        立即付款确认收货
+        
查看详情
+        
取消订单
再次购买
申请售后

  // 组件本身触发的自定义事件可以在这里申明emits: ['on-cancel-order'],

/*** 删除订单* @param {Array} ids - 删除订单，id集合* @returns*/
export const delteOrder = (ids) => {return request('/member/order', 'delete', { ids })
}

      
+      删除

  // 组件本身触发的自定义事件可以在这里申明
+  emits: ['on-cancel-order', 'on-delete-order'],

src/views/member/order/index.vue

import { reactive, ref, watch } from 'vue'
import { orderStatus } from '@/api/constants'
import { delteOrder, findOrderList } from '@/api/order'
import OrderItem from './components/order-item'
import OrderCancel from './components/order-cancel'
import Confirm from '@/components/library/Confirm'
import Message from '@/components/library/Message'
export default {name: 'MemberOrderPage',components: {OrderItem,OrderCancel},setup () {const activeName = ref('all')const tabClick = (tab) => {// 此时：tab.index 就是订单的状态requestParams.orderState = tab.indexrequestParams.page = 1}// 筛选条件const requestParams = reactive({page: 1,pageSize: 5,orderState: 0})// 发请求获取数据const orderList = ref([])const loading = ref(false)const total = ref(0)// 使用侦听器，监听 requestParams 的改变
+   const findOrderListFn = () => {
+     loading.value = true
+     findOrderList(requestParams).then(data => {
+       orderList.value = data.result.items
+       total.value = data.result.counts
+       loading.value = false
+     })
+   }watch(requestParams, () => {
+      findOrderListFn()}, { immediate: true })// 分页事件const changePager = (np) => {requestParams.page = np}+    // 删除订单
+    const onDeleteOrder = (item) => {
+      Confirm({ text: '您确认删除该条订单吗？' }).then(() => {
+        delteOrder([item.id]).then(() => {
+          Message({ text: '删除订单成功', type: 'success' })
+          findOrderListFn()
+        })
+      }).catch(e => {})
+    }return {activeName,orderStatus,tabClick,requestParams,orderList,loading,total,changePager,
+      onDeleteOrder,...useCancelOrder()}}
}

13-订单管理-确认收货

温馨提示：

• 接口服务器地址 + member/order/consignment/ + 订单ID
• 改成已发货状态，后面订单号改成，自己的订单编号。

http://pcapi-xiaotuxian-front-devtest.itheima.net//member/order/consignment/1394116427400613890

大致步骤：

• 定义确认收货API接口
• 完成确认收货业务逻辑

落的代码：

src/views/member/order/index.vue

// 封装逻辑-确认收货
const useConfirmOrder = () => {const onConfirmOrder = (item) => {// item 就是你要确认收货的订单Confirm({ text: '您确认收到货吗？确认后货款将会打给卖家。' }).then(() => {confirmOrder(item.id).then(() => {Message({ text: '确认收货成功', type: 'success' })// 确认收货后状态变成 待评价item.orderState = 4})})}return { onConfirmOrder }
}

    return {activeName,orderStatus,tabClick,requestParams,orderList,loading,total,changePager,onDeleteOrder,...useCancelOrder(),
+      ...useConfirmOrder()}

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

        
取消订单

  // 组件本身触发的自定义事件可以在这里申明emits: ['on-cancel-order', 'on-delete-order', 'on-confirm-order'],