Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
60ac8d7c 1 parent be95b23d

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

实现订单取消功能，包括添加取消订单API接口和在订单管理页面添加取消操作按钮及确认弹窗
Inline Side-by-side
Showing 2 changed files with 128 additions and 35 deletions
/*
* @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));
......
<!--
* @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,37 +820,25 @@ const performDeleteOrder = async (orderId) => {
deletingOrderId.value = orderId
try {
// 真实的API调用（当前注释掉，使用模拟数据）
// const response = await deleteOrderAPI({ orderId })
// if (response.code) {
// // API删除成功后的处理
// const orders = viewMode.value === 'buy' ? boughtOrders : soldOrders
// 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)
if (orderIndex !== -1) {
orders.value.splice(orderIndex, 1)
Taro.showToast({
title: '订单删除成功',
icon: 'success',
duration: 2000
})
// 调用删除订单API
const response = await deleteOrderAPI({ id: orderId })
if (response.code) {
// API删除成功后的处理
const orders = viewMode.value === 'buy' ? boughtOrders : soldOrders
const orderIndex = orders.value.findIndex(order => order.id === orderId)
if (orderIndex !== -1) {
orders.value.splice(orderIndex, 1)
Taro.showToast({
title: response.message || '订单删除成功',
icon: 'success',
duration: 2000
})
}
} else {
throw new Error('订单不存在')
throw new Error(response.message || '删除失败')
}
} catch (error) {
......