订单列表增加退款功能

src/api/orders.ts

@@ -14,4 +14,8 @@ export function getOrderDetail(params ?: any) {
     //     url: `/order/dish/${id}`,
     //     method: 'get'
     // })
+}
+//订单退款
+export function refundReq(params ?: any) {
+    return request.get({ url: '/order/refund', params })
 }

src/views/orders/list.vue

@@ -80,16 +80,23 @@
                 <el-table-column label="备注" prop="remark"></el-table-column>
                 <el-table-column label="类型" prop="type"
                     :formatter="(row) => (row.type == 0 ? '后台点单' : '扫码点单')"></el-table-column>
-                <el-table-column label="状态" prop="status" :formatter="
-                        (row) =>
-                            row.status == 2 ? '已完成' : row.status == 0 ? '待下单' : '待结账'
-                    "></el-table-column>
+                <el-table-column label="状态" min-width="160" prop="status" >
+                    <template #default="{ row }">
+                        <div>
+                            {{ row.status == 4 ? '退款成功' : row.status == 2 ? '已完成' : row.status == 0 ? '待下单' : row.status == 1 ? '待支付' : '已取消' }}
+                            <div v-if="row.status == 4" class="refund-info">
+                                <div>退款时间：{{ row.refundTime }}</div>
+                                <div>退款金额：￥{{ row.refundAmount }}</div>
+                            </div>
+                        </div>
+                    </template>
+                </el-table-column>
                 <el-table-column label="结账时间" prop="checkoutTime"></el-table-column>
                 <el-table-column label="创建时间" prop="createTime"></el-table-column>
                 <el-table-column label="操作" width="200" fixed="right">
                     <template #default="{ row }">
                         <el-button type="primary" link @click="showDetail(row)">查看已点菜品</el-button>
-                        <el-button v-if="row.status=='2'" type="danger" link @click="refund(row)">退款</el-button>
+                        <el-button v-if="row.type == 1 && row.status=='2'" type="danger" link @click="refund(row)">退款</el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -122,7 +129,7 @@
 </template>
 
 <script setup lang="ts">
-    import { ordersList, getOrderDetail } from '@/api/orders'
+    import { ordersList, getOrderDetail, refundReq } from '@/api/orders'
     import { usePaging } from '@/hooks/usePaging'
     import { timeFormat } from '@/utils/util'
     import feedback from '@/utils/feedback'
@@ -167,26 +174,36 @@
     // 添加这些变量到组件顶层
     const refundDialogVisible = ref(false)
     const refundAmount = ref(0)
-
+    var refundOrder: {
+        status: number; id: any; 
+    };
     // 修改refund函数
     const refund = async (row: any) => {
         refundDialogVisible.value = true
+        refundOrder = row;
     }
 
     const confirmRefund = async () => {
-        // try {
-        //     const res = await processRefund({ id: row.id, amount: refundAmount.value })
-        //     if (res.success) {
-        //         feedback.msgSuccess('退款成功')
-        //     } else {
-        //         feedback.msgError('退款失败')
-        //     }
-        // } catch (error) {
-        //     console.error('退款失败:', error)
-        //     feedback.msgError('退款失败')
-        // } finally {
-        //     refundDialogVisible.value = false
-        // }
+        try {
+            if(!refundAmount.value || refundAmount.value<=0){
+                return feedback.msgError('退款金额不合法')
+            }
+            if(refundAmount.value > refundOrder.amount){
+                return feedback.msgError('退款金额不能大于订单总金额')
+            }
+            const res = await refundReq({ orderId: refundOrder.id, amount: refundAmount.value })
+            if (res) {
+                feedback.msgSuccess('退款成功')
+                refundOrder.status = 4;
+            } else {
+                feedback.msgError('退款失败')
+            }
+        } catch (error) {
+            console.error('退款失败:', error)
+            feedback.msgError('退款失败')
+        } finally {
+            refundDialogVisible.value = false
+        }
     }
 
     // 展示订单详情
@@ -306,4 +323,10 @@
             margin-left: 12px;
         }
     }
+
+    .refund-info {
+        font-size: 12px;
+        color: #999;
+        margin-top: 4px;
+    }
 </style>