Explorar el Código

feat(mallOrder/refund): 添加确认退款弹窗组件

- 新增 confirm-refund-dialog.vue 组件用于处理退款确认操作
- 在退款列表项中为状态为“8”的订单添加“同意退款”按钮
- 点击按钮触发弹窗,确认后调用退款接口并刷新列表
ylong hace 4 días
padre
commit
4b64defeba

+ 60 - 0
src/views/mallOrder/refund/components/confirm-refund-dialog.vue

@@ -0,0 +1,60 @@
+<template>
+    <ele-modal :width="400" v-model="visible" title="确定后退款将立即退到买家账户" :body-style="{ padding: '30px 40px' }">
+        <div class="text-base text-gray-700 mb-6">
+            同意申请并退款 ¥{{ refundAmount }} 给买家吗?
+        </div>
+        
+        <template #footer>
+            <div class="flex justify-end gap-3">
+                <el-button @click="visible = false" class="rounded-full px-6">取消</el-button>
+                <el-button type="primary" :loading="loading" @click="handleSubmit" class="rounded-full px-6">同意退款</el-button>
+            </div>
+        </template>
+    </ele-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EleMessage } from 'ele-admin-plus/es';
+import request from '@/utils/request';
+
+const visible = ref(false);
+const loading = ref(false);
+const currentRefundOrderId = ref('');
+const refundAmount = ref('0.00');
+
+const emit = defineEmits(['success']);
+
+const open = (refundOrderId, amount) => {
+    currentRefundOrderId.value = refundOrderId;
+    refundAmount.value = amount || '0.00';
+    visible.value = true;
+};
+
+const handleSubmit = () => {
+    loading.value = true;
+    request.post('/shop/shopOrder/refund/refundMoney', {
+        refundOrderId: currentRefundOrderId.value
+    })
+    .then(res => {
+        if (res.data.code === 200) {
+            EleMessage.success('退款成功');
+            visible.value = false;
+            emit('success');
+        } else {
+            EleMessage.error(res.data.msg || '退款失败');
+        }
+    })
+    .catch(e => {
+        console.error(e);
+        EleMessage.error('网络错误');
+    })
+    .finally(() => {
+        loading.value = false;
+    });
+};
+
+defineExpose({
+    open
+});
+</script>

+ 7 - 6
src/views/mallOrder/refund/components/refund-item.vue

@@ -64,11 +64,12 @@
             </div>
 
             <!-- Logistics (Flex 1.5) -->
-            <div class="col-merged col-logistics flex flex-col justify-center w-full">
-                <div class="logistics-row flex items-center mb-2 w-full">
+            <div class="col-merged col-logistics flex flex-col justify-center items-center w-full">
+                <div class="logistics-row flex justify-center items-center mb-2 w-full">
                     <span class="text-gray-600">商家发货:已收货</span>
                 </div>
-                <div class="logistics-row flex items-center w-full" v-if="String(item.refundType) !== '2'">
+                <div class="logistics-row flex justify-center items-center w-full"
+                    v-if="String(item.refundType) !== '2'">
                     <span class="text-gray-600">买家退货:{{ getBuyerLogisticsStatus(item) }}</span>
                 </div>
             </div>
@@ -76,9 +77,9 @@
             <!-- Status (Flex 1) -->
             <div class="col-merged col-status">
                 <div class="text-red-500 font-bold mb-1">
-                        <dict-data code="shop_refund_status" v-model="item.status" type="text" />
+                    <dict-data code="shop_refund_status" v-model="item.status" type="text" />
 
-                    <el-button link type="primary" size="small" @click="$emit('view-logistics', item)"
+                    <el-button class="ml-2" type="primary" size="small" @click="$emit('confirm-refund', item)"
                         v-if="item.status == 8">同意退款</el-button>
                 </div>
                 <el-button link type="primary" size="small" @click="$emit('view-detail', item)">[查看详情]</el-button>
@@ -105,7 +106,7 @@
         }
     });
 
-    defineEmits(['push-sms', 'send-packet', 'view-detail', 'view-logistics']);
+    defineEmits(['push-sms', 'send-packet', 'view-detail', 'view-logistics', 'confirm-refund']);
 
     const { copy } = useClipboard();
 

+ 10 - 1
src/views/mallOrder/refund/index.vue

@@ -67,7 +67,7 @@
             <div class="refund-list" v-loading="loading">
                 <div v-if="list.length === 0" class="empty-text text-center py-10 text-gray-400">暂无数据</div>
                 <refund-item v-for="(item, index) in list" :key="index" :item="item" @push-sms="handlePushSms"
-                    @send-packet="handleSendPacket" @view-detail="handleViewDetail" />
+                    @send-packet="handleSendPacket" @view-detail="handleViewDetail" @confirm-refund="handleConfirmRefund" />
             </div>
 
             <!-- Pagination -->
@@ -81,6 +81,7 @@
         <!-- Dialogs -->
         <push-sms-dialog ref="pushSmsDialogRef" @success="fetchData" />
         <refund-detail-dialog ref="refundDetailDialogRef" />
+        <confirm-refund-dialog ref="confirmRefundDialogRef" @success="fetchData" />
     </ele-page>
 </template>
 
@@ -93,6 +94,7 @@
     import RefundItem from './components/refund-item.vue';
     import PushSmsDialog from './components/push-sms-dialog.vue';
     import RefundDetailDialog from './components/refund-detail-dialog.vue';
+    import ConfirmRefundDialog from './components/confirm-refund-dialog.vue';
 
     const activeTab = ref('');
     const loading = ref(false);
@@ -110,6 +112,7 @@
 
     const pushSmsDialogRef = ref(null);
     const refundDetailDialogRef = ref(null);
+    const confirmRefundDialogRef = ref(null);
 
     const fetchData = () => {
         loading.value = true;
@@ -181,6 +184,12 @@
         refundDetailDialogRef.value?.handleOpen(item);
     };
 
+    const handleConfirmRefund = (item) => {
+        if (confirmRefundDialogRef.value) {
+            confirmRefundDialogRef.value.open(item.refundOrderId, item.refundMoney);
+        }
+    };
+
     onMounted(() => {
         fetchData();
     });