feat(订单): 添加取消订单功能

实现订单取消功能，包括添加取消订单API接口和在订单管理页面添加取消操作按钮及确认弹窗

feat(订单): 添加取消订单功能
实现订单取消功能，包括添加取消订单API接口和在订单管理页面添加取消操作按钮及确认弹窗
hookehuyr
Commit 60ac8d7cf433c4a5ce56a0931abaaa99b83ab100 60ac8d7c 1 parent be95b23d
Showing 2 changed files with 118 additions and 25 deletions
src/api/orders.js
src/pages/myOrders/index.vue
--- a/src/api/orders.js
View file @60ac8d7
+++ b/src/api/orders.js
View file @60ac8d7
 /*
  * @Date: 2025-07-03 17:21:45
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-14 09:34:58
+ * @LastEditTime: 2025-07-14 14:43:05
  * @FilePath: /jgdl/src/api/orders.js
  * @Description: 文件描述
  */
@@ -13,6 +13,7 @@ const Api = {
   CREATE_ORDER: '/srv/?a=order&t=add',
   REVIEW_ORDER: '/srv/?a=order&t=review',
   DELETE_ORDER: '/srv/?a=order&t=del',
+  CANCEL_ORDER: '/srv/?a=order&t=cancel',
 }
 /**
@@ -55,3 +56,10 @@ export const reviewOrderAPI = (params) => fn(fetch.post(Api.REVIEW_ORDER, params
  * @returns data{}
  */
 export const deleteOrderAPI = (params) => fn(fetch.post(Api.DELETE_ORDER, params));
+
+/**
+ * @description: 取消订单
+ * @param order_id 订单ID
+ * @returns data{}
+ */
+export const cancelOrderAPI = (params) => fn(fetch.post(Api.CANCEL_ORDER, params));
--- a/src/pages/myOrders/index.vue
View file @60ac8d7
+++ b/src/pages/myOrders/index.vue
View file @60ac8d7
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-14 14:36:50
+ * @LastEditTime: 2025-07-14 14:51:17
  * @FilePath: /jgdl/src/pages/myOrders/index.vue
  * @Description: 订单管理页面
 -->
@@ -81,7 +81,11 @@
             <view class="order-actions">
               <!-- 买车模式：待支付状态 -->
               <template v-if="viewMode === 'buy' && order.status === 3">
-                <nut-button type="primary" size="small" @click="handlePayment(order)" color="orange">
+                <nut-button type="default" size="small" @click="handleCancelOrder(order.id)"
+                  :loading="cancelingOrderId === order.id" :disabled="cancelingOrderId === order.id">
+                  {{ cancelingOrderId === order.id ? '取消中...' : '取消订单' }}
+                </nut-button>
+                <nut-button type="primary" size="small" @click="handlePayment(order)" color="orange" class="ml-2">
                   去支付
                 </nut-button>
               </template>
@@ -270,7 +274,7 @@
       </view>
     </nut-popup>
-    <!-- Confirmation Modal -->
+    <!-- Delete Confirmation Modal -->
     <nut-dialog
         v-model:visible="showConfirmModal"
         title="温馨提示"
@@ -285,6 +289,22 @@
         </view>
       </template>
     </nut-dialog>
+
+    <!-- Cancel Order Confirmation Modal -->
+    <nut-dialog
+        v-model:visible="showCancelConfirmModal"
+        title="温馨提示"
+        cancel-text="我再想想"
+        ok-text="确定取消"
+        @cancel="showCancelConfirmModal = false"
+        @ok="performCancelOrder(pendingCancelOrderId)"
+    >
+      <template #default>
+        <view>
+          <text style="font-size: 1rem;">取消订单后将无法恢复，确定要取消吗？</text>
+        </view>
+      </template>
+    </nut-dialog>
   </view>
 </template>
@@ -295,7 +315,7 @@ import './index.less'
 import { $ } from '@tarojs/extend'
 import payCard from '@/components/payCard.vue'
 // 导入接口
-import { getOrderListAPI, getOrderDetailAPI, reviewOrderAPI } from '@/api/orders'
+import { getOrderListAPI, getOrderDetailAPI, reviewOrderAPI, cancelOrderAPI, deleteOrderAPI } from '@/api/orders'
 import { DEFAULT_COVER_IMG } from '@/utils/config'
 const scrollStyle = ref({
@@ -683,6 +703,9 @@ const submitRate = async () => {
   }
 }
+// 取消订单相关状态
+const cancelingOrderId = ref('')
+
 // 删除订单相关状态
 const deletingOrderId = ref('')
@@ -697,6 +720,80 @@ const showConfirmModal = ref(false)
 const pendingDeleteOrderId = ref('')
 /**
+ * 取消订单确认弹窗显示状态
+ */
+const showCancelConfirmModal = ref(false)
+
+/**
+ * 待取消的订单ID
+ */
+const pendingCancelOrderId = ref('')
+
+/**
+ * 取消订单
+ * @param {string} orderId - 订单ID
+ */
+const handleCancelOrder = async (orderId) => {
+  try {
+    // 保存待取消的订单ID
+    pendingCancelOrderId.value = orderId
+    showCancelConfirmModal.value = true
+  } catch (error) {
+     // 用户取消操作或其他错误
+     // console.log('取消订单操作被取消或出错:', error)
+  }
+}
+
+/**
+ * 执行取消订单操作
+ * @param {string} orderId - 订单ID
+ */
+const performCancelOrder = async (orderId) => {
+  // 关闭确认弹窗
+  showCancelConfirmModal.value = false
+
+  // 设置取消状态，用于显示加载效果
+  cancelingOrderId.value = orderId
+
+  try {
+    // 调用取消订单API
+    const response = await cancelOrderAPI({ id: orderId })
+
+    if (response.code) {
+      // API取消成功后的处理
+      const orders = viewMode.value === 'buy' ? boughtOrders : soldOrders
+      const order = orders.value.find(o => o.id === orderId)
+
+      if (order) {
+        // 更新订单状态为已取消
+        order.status = 7
+
+        Taro.showToast({
+          title: '订单已取消',
+          icon: 'success',
+          duration: 2000
+        })
+      }
+    } else {
+      throw new Error(response.message || '取消失败')
+    }
+  } catch (error) {
+     // console.error('取消订单失败:', error)
+
+    Taro.showToast({
+      title: error.message || '取消订单失败，请重试',
+      icon: 'error',
+      duration: 2000
+    })
+  } finally {
+    // 清除取消状态
+    cancelingOrderId.value = ''
+    // 清除待取消订单ID
+    pendingCancelOrderId.value = ''
+  }
+}
+
+/**
  * 删除订单
  * @param {string} orderId - 订单ID
  */
@@ -723,24 +820,11 @@ const performDeleteOrder = async (orderId) => {
   deletingOrderId.value = orderId
   try {
-    // 真实的API调用（当前注释掉，使用模拟数据）
+    // 调用删除订单API
-    // const response = await deleteOrderAPI({ orderId })
+    const response = await deleteOrderAPI({ id: orderId })
-    // if (response.code) {
+
-    //   // API删除成功后的处理
+    if (response.code) {
-    //   const orders = viewMode.value === 'buy' ? boughtOrders : soldOrders
+      // API删除成功后的处理
-    //   const orderIndex = orders.value.findIndex(order => order.id === orderId)
-    //   if (orderIndex !== -1) {
-    //     orders.value.splice(orderIndex, 1)
-    //   }
-    //   Toast.success(response.message || '订单删除成功')
-    // } else {
-    //   throw new Error(response.message || '删除失败')
-    // }
-
-    // 模拟API调用延迟（开发阶段使用）
-    await new Promise(resolve => setTimeout(resolve, 1000))
-
-    // 从本地数据中移除订单
       const orders = viewMode.value === 'buy' ? boughtOrders : soldOrders
       const orderIndex = orders.value.findIndex(order => order.id === orderId)
@@ -748,12 +832,13 @@ const performDeleteOrder = async (orderId) => {
         orders.value.splice(orderIndex, 1)
         Taro.showToast({
-        title: '订单删除成功',
+          title: response.message || '订单删除成功',
           icon: 'success',
           duration: 2000
         })
+      }
     } else {
-      throw new Error('订单不存在')
+      throw new Error(response.message || '删除失败')
     }
   } catch (error) {