feat(mallOrder/refund): 新增退款详情弹窗与协商申请功能

src/views/mallOrder/refund/components/negotiation-apply-dialog.vue

@@ -0,0 +1,181 @@
+<template>
+    <ele-modal :width="700" v-model="visible" title="申请协商" :body-style="{ padding: '20px' }" @closed="handleClosed">
+        <div class="negotiate-content">
+            <!-- Step 1 -->
+            <div class="step-item">
+                <div class="step-title font-bold mb-3 flex items-center">
+                    <span
+                        class="step-num bg-blue-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-2">1</span>
+                    <span class="step-text">选择协商类型</span>
+                </div>
+                <div class="step-content pl-7 mb-4">
+                    <el-radio-group v-model="form.type">
+                        <el-radio :label="1">退款金额协商</el-radio>
+                        <el-radio :label="2">退货商品异常</el-radio>
+                    </el-radio-group>
+                </div>
+            </div>
+
+            <!-- Step 2 -->
+            <div class="step-item" v-if="form.type === 1">
+                <div class="step-title font-bold mb-3 flex items-center">
+                    <span
+                        class="step-num bg-blue-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-2">2</span>
+                    <span class="step-text" style="width:120px">确认协商方案</span>
+                    <span class="text-xs text-gray-400 ml-2 font-normal"
+                        style="max-width:500px">若消费者接受协商，则按协商方案执行；若消费者拒绝协商，您需重新审核退款单，建议先与消费者协商一致。</span>
+                </div>
+                <div class="step-content pl-7 mb-4">
+                    <div class="form-item mb-3">
+                        <div class="label mb-1 text-sm text-gray-600">* 建议退款金额</div>
+                        <el-input-number v-model="form.disposeMoney" :min="0" :max="maxRefundAmount" :precision="2"
+                            :step="0.01" controls-position="right" style="width: 200px" />
+                        <span class="text-xs text-gray-400 ml-2">最大可退金额: {{ maxRefundAmount }}元</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Step 3 (Only for Type 2) -->
+            <div class="step-item">
+                <div class="step-title font-bold mb-3 flex items-center">
+                    <span
+                        class="step-num bg-blue-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-2">{{
+                            form.type
+                        === 1? '3' : '2'}}</span>
+                    <span class="step-text">配置拒绝方案</span>
+                </div>
+                <div class="step-content pl-7">
+                    <div class="form-item mb-3">
+                        <div class="label mb-1 text-sm text-gray-600">* 拒绝原因</div>
+                        <dict-data code="shop_refund_reason" v-model="form.reason" placeholder="请选择拒绝原因"
+                            class="w-full" />
+                    </div>
+                    <div class="form-item mb-3">
+                        <div class="label mb-1 text-sm text-gray-600">拒绝说明</div>
+                        <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入拒绝说明"
+                            maxlength="200" show-word-limit />
+                    </div>
+                    <div class="form-item">
+                        <div class="label mb-1 text-sm text-gray-600">上传凭证</div>
+                        <ImageUpload v-model="imgUrlsStr" :limit="9" />
+                        <div class="text-xs text-gray-400 mt-1">支持上传图片或视频，视频大小不超过100M，时长不超过1分钟</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <template #footer>
+            <el-button @click="visible = false">取消</el-button>
+            <el-button type="primary" :loading="loading" @click="handleSubmit">提交协商</el-button>
+        </template>
+    </ele-modal>
+</template>
+
+<script setup>
+    import { ref, reactive, watch, defineModel, defineProps, defineEmits } from 'vue';
+    import { EleMessage } from 'ele-admin-plus/es';
+    import request from '@/utils/request';
+    import ImageUpload from '@/components/ImageUpload/index.vue';
+
+    const visible = defineModel({ type: Boolean });
+    const props = defineProps({
+        refundOrderId: {
+            type: [String, Number],
+            required: true
+        },
+        maxRefundAmount: {
+            type: Number,
+            default: 0
+        }
+    });
+
+    const emit = defineEmits(['success']);
+
+    const loading = ref(false);
+    const imgUrlsStr = ref('');
+
+    const form = reactive({
+        type: 1,
+        disposeMoney: 0,
+        reason: '',
+        description: '',
+        imgUrls: []
+    });
+
+    // Reset form when dialog opens
+    watch(() => visible.value, (val) => {
+        if (val) {
+            form.type = 1;
+            form.disposeMoney = 0;
+            form.reason = '';
+            form.description = '';
+            form.imgUrls = [];
+            imgUrlsStr.value = '';
+        }
+    });
+
+    const handleClosed = () => {
+        // Reset handled in watch
+    };
+
+    const handleSubmit = () => {
+        if (form.type === 1) {
+            if (form.disposeMoney === undefined || form.disposeMoney === null) {
+                EleMessage.warning('请输入建议退款金额');
+                return;
+            }
+        }
+
+        if (!form.reason) {
+            EleMessage.warning('请选择拒绝原因');
+            return;
+        }
+
+        form.imgUrls = imgUrlsStr.value ? imgUrlsStr.value.split(',') : [];
+
+        const params = {
+            refundOrderId: props.refundOrderId,
+            type: form.type,
+            disposeMoney: form.type === 1 ? form.disposeMoney : 0,
+            reason: form.reason,
+            description: form.description,
+            imgUrls: form.imgUrls
+        };
+
+        loading.value = true;
+        request.post('/shop/shopOrder/refund/auditDispose', params)
+            .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;
+            });
+    };
+</script>
+
+<style scoped lang="scss">
+    .step-item {
+        .step-num {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 20px;
+            height: 20px;
+            background-color: #409eff;
+            color: white;
+            border-radius: 50%;
+            font-size: 12px;
+            margin-right: 8px;
+        }
+    }
+</style>

src/views/mallOrder/refund/components/refund-detail-dialog.vue

@@ -0,0 +1,469 @@
+<template>
+    <ele-modal :width="1200" v-model="visible" title="退款详情" fullscreen
+        :body-style="{ padding: '0 20px', height: 'calc(100vh - 120px)' }">
+        <div v-loading="loading" class="h-full flex flex-col">
+            <!-- 顶部状态栏 -->
+            <div class="status-bar mb-6">
+                <div class="flex items-start mb-4">
+                    <div class="status-info">
+                        <div class="text-xl font-bold mb-2 flex items-center">
+                            <span>{{ getStatusText(form.status) }}</span>
+                            <span class="text-orange-500 text-sm ml-3 font-normal"
+                                v-if="['1', '2', '3', '7', '8', '9'].includes(String(form.status))">还剩 {{ form.countDown
+                                    || '1天11时19分' }}</span>
+                        </div>
+                        <div class="text-sm text-gray-500 space-y-1">
+                            <template v-if="['1', '3'].includes(String(form.status))">
+                                <div>请及时联系买家协商退货事宜</div>
+                                <div v-if="form.refundType == 1">该退款为卖家原因退款，若您同意买家退货，退货运费将由您承担。</div>
+                            </template>
+
+                            <template v-else-if="String(form.status) === '8'">
+                                <div>收到买家退货时，请验货后同意退款</div>
+                                <div>如果买家在超时结束前未退货，退货申请将自动关闭</div>
+                            </template>
+
+                            <template v-else-if="String(form.status) === '9'">
+                                <div>买家已退货，收到买家退货时，请验货后同意退款</div>
+                            </template>
+
+                            <template v-else-if="String(form.status) === '7'">
+                                <div>因买家信誉良好，平台已优先垫付退款给买家</div>
+                            </template>
+
+                            <template v-else-if="String(form.status) === '2'">
+                                <div>买家修改退款申请后，需要您重新处理</div>
+                                <div>如果买家超时未响应，退款申请将自动关闭</div>
+                            </template>
+
+                            <template v-else-if="String(form.status) === '10'">
+                                <div>退款成功时间：{{ form.finishTime }}</div>
+                                <div>退款金额：¥ {{ form.refundMoneyFinal || form.refundMoney }}元</div>
+                                <div>退款规则：符合未发货秒退，点击查看规则详情 <span class="text-blue-500 cursor-pointer">《淘宝网超时说明》</span>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                    <div style="min-width:600px" class="pt-2">
+                        <el-steps :active="currentStep" align-center finish-status="success">
+                            <el-step title="买家申请退货退款" />
+                            <el-step title="卖家处理退货申请" />
+                            <el-step title="买家退货" />
+                            <el-step title="退款完毕" />
+                        </el-steps>
+                    </div>
+                </div>
+            </div>
+
+            <div class="detail-container flex flex-1 min-h-0 overflow-hidden">
+                <!-- 左侧：退款信息 -->
+                <div class="section refund-info flex-1 overflow-y-auto">
+                    <div class="section-title">退款信息</div>
+                    <div class="info-item">
+                        <span class="label">退款金额：</span>
+                        <span class="value text-red-500 font-bold">
+                            ¥{{ form.refundMoney }}
+                            <span v-if="form.refundMoneyFinal" class="text-xs text-gray-500 ml-1">
+                                (实退: ¥{{ form.refundMoneyFinal }})
+                            </span>
+                        </span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">申请件数：</span>
+                        <span class="value">{{ form.totalNum || refundCount }}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">退款原因：</span>
+                        <span class="value">{{ form.refundReason }}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">要求：</span>
+                        <span class="value">{{ getRefundTypeText(form.refundType) }}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">货物状态：</span>
+                        <span class="value">{{ getShopStatusText(form.shopStatus) }}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">买家留言：</span>
+                        <span class="value">{{ form.description || '-' }}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">退款编号：</span>
+                        <span class="value">{{ form.refundOrderId }}</span>
+                        <el-icon class="copy-icon" @click="handleCopy(form.refundOrderId)">
+                            <CopyDocument />
+                        </el-icon>
+                    </div>
+                </div>
+
+                <!-- 中间：交易信息 -->
+                <div class="section transaction-info flex-[1.2] overflow-y-auto">
+                    <div class="section-title">交易信息</div>
+                    <div class="product-list mb-4">
+                        <div v-for="(prod, idx) in form.detailList" :key="idx" class="product-item flex mb-2">
+                            <el-image :src="prod.cover" class="w-16 h-16 rounded mr-2" fit="cover" />
+                            <div class="flex-1">
+                                <div class="text-sm font-bold truncate-2-lines">{{ prod.bookName }}</div>
+                                <div class="text-xs text-gray-500 mt-1">{{ prod.isbn }}</div>
+                                <div class="text-xs text-gray-500 mt-1">{{ prod.price }} × {{ prod.refundNum }}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="info-item">
+                        <span class="label">买家：</span>
+                        <div class="flex items-center">
+                            <el-avatar :size="20" :src="form.avatar" class="mr-2" />
+                            <span class="value text-blue-500">{{ form.userNick }}</span>
+                        </div>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">商品总价：</span>
+                        <span class="value">¥{{ totalAmount }}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">邮费：</span>
+                        <span class="value">¥{{ form.expressMoney || '0.00' }}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">订单标签：</span>
+                        <dict-data code="shop_refund_status" v-model="form.status" type="tag" />
+                    </div>
+                    <div class="info-item">
+                        <span class="label">成交时间：</span>
+                        <span class="value">{{ form.orderTime }}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">订单编号：</span>
+                        <span class="value text-blue-500">{{ form.originOrderId }}</span>
+                        <el-icon class="copy-icon" @click="handleCopy(form.originOrderId)">
+                            <CopyDocument />
+                        </el-icon>
+                    </div>
+
+                    <div class="logistics-info mt-4 p-3 bg-gray-50 rounded">
+                        <div class="font-bold mb-2">发货物流信息：</div>
+                        <div v-if="form.waybillCode">
+                            <div class="text-sm mb-1">
+                                {{ form.expressName }} {{ form.waybillCode }}
+                                <el-icon class="copy-icon" @click="handleCopy(form.waybillCode)">
+                                    <CopyDocument />
+                                </el-icon>
+                            </div>
+                            <div class="text-xs text-gray-500">
+                                您已在云南财大南苑荟华1栋菜鸟驿站完成取件，感谢使用菜鸟驿站，期待再次为您服务。
+                            </div>
+                        </div>
+                        <div v-else class="text-sm text-gray-400">暂无物流信息</div>
+                    </div>
+                </div>
+
+                <!-- 右侧：协商历史 -->
+                <div class="section history-info flex-[1.5] flex flex-col overflow-hidden">
+                    <div class="flex justify-between items-center mb-4 flex-shrink-0">
+                        <div class="section-title mb-0">协商历史</div>
+                        <el-button link type="primary" @click="handleLeaveMessage">我要留言</el-button>
+                    </div>
+
+                    <div class="history-list flex-1 overflow-y-auto pr-2">
+                        <div v-for="(activity, index) in historyList" :key="index"
+                            class="history-item flex mb-4 pb-4 border-b border-gray-100 last:border-0">
+                            <div class="avatar-wrapper mr-3">
+                                <el-avatar :size="40" :src="activity.imgPath" shape="square" class="rounded-lg" />
+                            </div>
+                            <div class="content-wrapper flex-1">
+                                <div class="header flex justify-between items-start mb-1">
+                                    <span class="name font-bold text-gray-800">{{ activity.userName ||
+                                        (activity.userType === '2' ?
+                                            '客服' : '用户') }}</span>
+                                    <span class="time text-xs text-gray-400">{{ activity.createTime }}</span>
+                                </div>
+                                <div class="main-content text-sm text-gray-600">
+                                    <div v-if="activity.title" class="font-bold mb-1 text-gray-900">{{ activity.title }}
+                                    </div>
+                                    <div class="whitespace-pre-wrap mb-2">{{ activity.content }}</div>
+
+                                    <div v-if="activity.imgList && activity.imgList.length"
+                                        class="mt-2 flex flex-wrap gap-2">
+                                        <el-image v-for="(img, i) in activity.imgList" :key="i" :src="img"
+                                            class="w-20 h-20 rounded border border-gray-200"
+                                            :preview-src-list="activity.imgList" fit="cover" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="policy-tip mt-4 text-xs text-gray-400">
+                · 如果您同意，请点击“同意退货”，将正确退货地址发给买家。<br>
+                · 如果您拒绝，买家可以申请客服介入。<br>
+                · 如果您逾期未处理申请，视作同意买家申请。系统会自动将当前交易的退货地址发给买家<br>
+            </div>
+
+        </div>
+
+        <template #footer>
+            <div class="flex justify-center gap-4">
+                <el-button>备注</el-button>
+                <el-button @click="handleRefuse" :disabled="!canOperate">拒绝退货申请</el-button>
+                <el-button @click="handleAgree" :disabled="!canOperate">同意退货</el-button>
+                <el-button type="primary" @click="handleNegotiate" :disabled="!canOperate">与买家协商</el-button>
+            </div>
+        </template>
+        <negotiation-apply-dialog v-model="negotiationDialogVisible" :refund-order-id="form.refundOrderId"
+            :max-refund-amount="Number(form.refundMoney) || 0" @success="handleNegotiationSuccess" />
+    </ele-modal>
+</template>
+
+<script setup>
+    import { ref, reactive, computed } from 'vue';
+    import { EleMessage } from 'ele-admin-plus/es';
+    import { CopyDocument } from '@element-plus/icons-vue';
+    import { useClipboard } from '@vueuse/core';
+    import request from '@/utils/request';
+    import NegotiationApplyDialog from './negotiation-apply-dialog.vue';
+
+    const visible = defineModel({ type: Boolean });
+    const loading = ref(false);
+    const form = ref({});
+    const historyList = ref([]);
+    const { copy } = useClipboard();
+    const negotiationDialogVisible = ref(false);
+
+    const refundCount = computed(() => {
+        if (form.value.totalNum) return form.value.totalNum;
+        if (!form.value.detailList) return 0;
+        return form.value.detailList.reduce((sum, item) => sum + (Number(item.refundNum) || 0), 0);
+    });
+
+    const totalAmount = computed(() => {
+        if (!form.value.detailList) return '0.00';
+        const sum = form.value.detailList.reduce((acc, item) => {
+            return acc + (Number(item.price) * Number(item.refundNum));
+        }, 0);
+        return sum.toFixed(2);
+    });
+
+    // 当前步骤
+    const currentStep = computed(() => {
+        const status = Number(form.value.status);
+        // 1-申请退款
+        if (status === 1) return 1;
+        // 2-协商中待用户确认 3-协商中待商家确认 -> 都在协商/处理中
+        if (status === 2 || status === 3) return 2;
+        // 7-卖家已发货 -> 可能是退货流程的一部分
+        if (status === 7) return 3;
+        // 4-审核通过 5-审核驳回 6-超时关闭 -> 结束状态
+        if ([4, 5, 6].includes(status)) return 4;
+        return 1;
+    });
+
+    // 是否可操作（仅在待商家处理状态下可用）
+    const canOperate = computed(() => {
+        // 1: 申请退款, 3: 协商中待商家确认
+        return ['1', '3'].includes(String(form.value.status));
+    });
+
+    const handleOpen = (row) => {
+        if (row && row.refundOrderId) {
+            visible.value = true;
+            loading.value = true;
+
+            request.get(`/shop/shopOrder/getRefundInfo/${row.refundOrderId}`)
+                .then(res => {
+                    if (res.data.code === 200) {
+                        const data = res.data.data || {};
+                        form.value = data;
+                        if (!form.value.orderTime) {
+                            form.value.orderTime = form.value.createTime;
+                        }
+                        // 处理协商历史数据
+                        if (data.complaintsLogList && data.complaintsLogList.length) {
+                            historyList.value = data.complaintsLogList;
+                        } else {
+                            historyList.value = [];
+                        }
+                    } else {
+                        EleMessage.error(res.data.msg || '获取详情失败');
+                        fallbackToRow(row);
+                    }
+                })
+                .catch(e => {
+                    console.error(e);
+                    EleMessage.error('获取详情失败');
+                    fallbackToRow(row);
+                })
+                .finally(() => {
+                    loading.value = false;
+                });
+        } else if (row) {
+            visible.value = true;
+            fallbackToRow(row);
+        }
+    };
+
+    const fallbackToRow = (row) => {
+        form.value = JSON.parse(JSON.stringify(row));
+        if (!form.value.orderTime) {
+            form.value.orderTime = form.value.createTime;
+        }
+        historyList.value = [];
+
+        // Fallback时也添加初始申请记录
+        const startEvent = {
+            createTime: form.value.createTime,
+            userName: form.value.userNick,
+            userType: '1',
+            imgPath: form.value.avatar || '',
+            title: '发起了退款申请',
+            content: `货物状态：${getShopStatusText(form.value.shopStatus)}\n原因：${form.value.refundReason}\n金额：¥${form.value.refundMoney}\n说明：${form.value.description || '无'}`,
+            imgList: []
+        };
+        historyList.value.push(startEvent);
+    };
+
+    const handleCopy = async (text) => {
+        try {
+            await copy(text);
+            EleMessage.success('复制成功');
+        } catch (e) {
+            EleMessage.error('复制失败');
+        }
+    };
+
+    const mockHistory = (row) => {
+        // 移除模拟数据
+    };
+
+    const getRefundTypeText = (type) => {
+        const map = { '0': '极速退款', '1': '退货退款', '2': '仅退款' };
+        return map[type] || type;
+    };
+
+    const getStatusText = (status) => {
+        const map = {
+            '1': '请处理退货申请', // 原 申请退款
+            '2': '请等待买家响应', // 协商中待用户确认
+            '3': '请处理退货申请', // 协商中待商家确认
+            '4': '审核通过',
+            '5': '审核驳回',
+            '6': '超时关闭',
+            '7': '拦截快递后处理退款', // 卖家已发货
+            '8': '请等待买家退货',
+            '9': '请确认收货',
+            '10': '退款成功'
+        };
+        return map[status] || status;
+    };
+
+    const getShopStatusText = (status) => {
+        const map = { '1': '未收到货', '2': '已收到货' };
+        return map[status] || '-';
+    };
+
+    const handleNegotiate = () => {
+        negotiationDialogVisible.value = true;
+    };
+
+    const handleNegotiationSuccess = () => {
+        // Refresh data
+        handleOpen(form.value);
+    };
+
+    const handleRefuse = () => {
+        EleMessage.warning('功能开发中');
+    };
+
+    const handleAgree = () => {
+        EleMessage.warning('功能开发中');
+    };
+
+    const handleLeaveMessage = () => {
+        EleMessage.info('点击了我要留言');
+    };
+
+    defineExpose({
+        handleOpen
+    });
+</script>
+
+<style scoped lang="scss">
+    .status-bar {
+        background: #fff;
+        padding: 15px;
+        border-bottom: 1px solid #eee;
+    }
+
+    .detail-container {
+        gap: 20px;
+
+        .section {
+            background: #fff;
+
+            .section-title {
+                font-size: 16px;
+                font-weight: bold;
+                margin-bottom: 15px;
+                color: #333;
+                padding-left: 10px;
+                border-left: 3px solid #409eff;
+                line-height: 1;
+            }
+
+            .info-item {
+                margin-bottom: 10px;
+                font-size: 13px;
+                display: flex;
+
+                .label {
+                    color: #999;
+                    width: 70px;
+                    flex-shrink: 0;
+                }
+
+                .value {
+                    color: #333;
+                    flex: 1;
+                    word-break: break-all;
+                }
+
+                .copy-icon {
+                    cursor: pointer;
+                    color: #409eff;
+                    margin-left: 5px;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        .transaction-info {
+            padding: 0 10px;
+            border-left: 1px solid #eee;
+            border-right: 1px solid #eee;
+        }
+
+        .history-info {
+            padding-left: 10px;
+        }
+    }
+
+    .history-card {
+        background: #f9f9f9;
+        padding: 10px;
+        border-radius: 4px;
+
+        .detail-rows {
+            line-height: 1.6;
+        }
+    }
+
+    .truncate-2-lines {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+</style>

src/views/mallOrder/refund/components/refund-item.vue

@@ -41,7 +41,8 @@
             <!-- Refund Amount (Flex 1) -->
             <div class="col-merged col-amount">
                 <div class="amount">申请: ¥ {{ item.refundMoney }}</div>
-                <div class="final-amount text-green-500" v-if="item.refundMoneyFinal">实退: ¥ {{ item.refundMoneyFinal }}</div>
+                <div class="final-amount text-green-500" v-if="item.refundMoneyFinal">实退: ¥ {{ item.refundMoneyFinal }}
+                </div>
                 <div class="money-status text-xs text-gray-400 mt-1">
                     {{ getMoneyStatusText(item.moneyStatus) }}
                 </div>
@@ -63,27 +64,23 @@
             </div>
 
             <!-- Logistics (Flex 1.5) -->
-            <div class="col-merged col-logistics">
-                <div class="logistics-row">
-                    <span class="font-bold">{{ getSendTypeText(item.sendType) }}</span>
-                </div>
-                <div class="logistics-row" v-if="item.expressName">
-                    <span>{{ item.expressName }}</span>
+            <div class="col-merged col-logistics flex flex-col justify-center w-full">
+                <div class="logistics-row flex items-center mb-2 w-full">
+                    <span class="text-gray-600">商家发货：已收货</span>
                 </div>
-                <div class="logistics-row" v-if="item.waybillCode">
-                    <span>{{ item.waybillCode }}</span>
-                    <el-icon class="cursor-pointer ml-1" @click="handleCopy(item.waybillCode)">
-                        <CopyDocument />
-                    </el-icon>
-                </div>
-                <div class="logistics-row" v-if="item.pickupCode">
-                    <span>取件码: {{ item.pickupCode }}</span>
+                <div class="logistics-row flex items-center w-full" v-if="String(item.refundType) !== '2'">
+                    <span class="text-gray-600">买家退货：{{ getBuyerLogisticsStatus(item) }}</span>
                 </div>
             </div>
 
             <!-- Status (Flex 1) -->
             <div class="col-merged col-status">
-                <div class="text-red-500 font-bold mb-1">{{ getStatusText(item.status) }}</div>
+                <div class="text-red-500 font-bold mb-1">
+                        <dict-data code="shop_refund_status" v-model="item.status" type="text" />
+
+                    <el-button link type="primary" size="small" @click="$emit('view-logistics', item)"
+                        v-if="item.status == 8">同意退款</el-button>
+                </div>
                 <el-button link type="primary" size="small" @click="$emit('view-detail', item)">[查看详情]</el-button>
             </div>
 
@@ -97,196 +94,196 @@
 </template>
 
 <script setup>
-import { CopyDocument } from '@element-plus/icons-vue';
-import { EleMessage } from 'ele-admin-plus/es';
-import { useClipboard } from '@vueuse/core';
-
-const props = defineProps({
-    item: {
-        type: Object,
-        required: true
-    }
-});
-
-defineEmits(['push-sms', 'send-packet', 'view-detail']);
+    import { CopyDocument } from '@element-plus/icons-vue';
+    import { EleMessage } from 'ele-admin-plus/es';
+    import { useClipboard } from '@vueuse/core';
+
+    const props = defineProps({
+        item: {
+            type: Object,
+            required: true
+        }
+    });
 
-const { copy } = useClipboard();
+    defineEmits(['push-sms', 'send-packet', 'view-detail', 'view-logistics']);
 
-const handleCopy = async (text) => {
-    try {
-        await copy(text);
-        EleMessage.success('复制成功');
-    } catch (e) {
-        EleMessage.error('复制失败');
-    }
-};
+    const { copy } = useClipboard();
 
-const getRefundTypeText = (type) => {
-    const map = {
-        '0': '极速退款',
-        '1': '退货退款',
-        '2': '仅退款'
+    const handleCopy = async (text) => {
+        try {
+            await copy(text);
+            EleMessage.success('复制成功');
+        } catch (e) {
+            EleMessage.error('复制失败');
+        }
     };
-    return map[type] || type;
-};
-
-const getStatusText = (status) => {
-    const map = {
-        '1': '申请退款',
-        '2': '审核通过',
-        '3': '审核驳回',
-        '4': '超时关闭',
-        '5': '卖家已发货',
-        '6': '已完成'
+
+    const getRefundTypeText = (type) => {
+        const map = {
+            '0': '极速退款',
+            '1': '退货退款',
+            '2': '仅退款'
+        };
+        return map[type] || type;
     };
-    return map[status] || status;
-};
 
-const getShopStatusText = (status) => {
-    const map = {
-        '1': '未收到货',
-        '2': '已收到货'
+    const getShopStatusText = (status) => {
+        const map = {
+            '1': '未收到货',
+            '2': '已收到货'
+        };
+        return map[status] || '-';
     };
-    return map[status] || '-';
-};
-
-const getSendTypeText = (type) => {
-    const map = {
-        '1': '上门取件',
-        '2': '寄件点自寄',
-        '3': '自行寄回'
+
+    const getBuyerLogisticsStatus = (item) => {
+        const status = String(item.status);
+        if (status === '7') return '运输中';
+        if (item.finishTime) return '已收货';
+        return '未发货';
     };
-    return map[type] || '-';
-};
-
-const getMoneyStatusText = (status) => {
-    const map = {
-        '1': '未退还',
-        '2': '已退还',
-        '3': '已到账'
+
+    const getMoneyStatusText = (status) => {
+        const map = {
+            '1': '未退还',
+            '2': '已退还',
+            '3': '已到账'
+        };
+        return map[status] || '未退还';
     };
-    return map[status] || '未退还';
-};
 </script>
 
 <style lang="scss" scoped>
-.refund-item {
-    border: 1px solid #ebeef5;
-    margin-bottom: 15px;
-    background: #fff;
-
-    .refund-header {
-        background-color: #f5f7fa;
-        padding: 8px 15px;
-        font-size: 13px;
-        display: flex;
-        align-items: center;
-        border-bottom: 1px solid #ebeef5;
-    }
-
-    .refund-body {
-        display: flex;
-        align-items: stretch;
+    .refund-item {
+        border: 1px solid #ebeef5;
+        margin-bottom: 15px;
+        background: #fff;
+
+        .refund-header {
+            background-color: #f5f7fa;
+            padding: 8px 15px;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #ebeef5;
+        }
 
-        .col-product-wrapper {
-            flex: 3;
+        .refund-body {
             display: flex;
-            flex-direction: column;
-            border-right: 1px solid #ebeef5;
+            align-items: stretch;
 
-            .product-row {
+            .col-product-wrapper {
+                flex: 3;
                 display: flex;
-                padding: 15px;
-                border-bottom: 1px solid #ebeef5;
+                flex-direction: column;
+                border-right: 1px solid #ebeef5;
 
-                &:last-child {
-                    border-bottom: none;
-                }
-
-                .product-info {
+                .product-row {
                     display: flex;
-                    width: 100%;
-
-                    .product-img {
-                        width: 80px;
-                        height: 80px;
-                        margin-right: 15px;
-                        border-radius: 4px;
-                        border: 1px solid #eee;
+                    padding: 15px;
+                    border-bottom: 1px solid #ebeef5;
+
+                    &:last-child {
+                        border-bottom: none;
                     }
 
-                    .product-detail {
-                        font-size: 13px;
-                        flex: 1;
+                    .product-info {
+                        display: flex;
+                        width: 100%;
 
-                        .product-title {
-                            font-weight: 500;
-                            margin-bottom: 5px;
-                            color: #333;
+                        .product-img {
+                            width: 80px;
+                            height: 80px;
+                            margin-right: 15px;
+                            border-radius: 4px;
+                            border: 1px solid #eee;
                         }
 
-                        .product-isbn {
-                            color: #666;
-                            margin-bottom: 3px;
-                            font-size: 12px;
+                        .product-detail {
+                            font-size: 13px;
+                            flex: 1;
 
-                            .link {
-                                color: #409eff;
+                            .product-title {
+                                font-weight: 500;
+                                margin-bottom: 5px;
+                                color: #333;
                             }
-                        }
 
-                        .product-price {
-                            margin-top: 5px;
-                            color: #333;
+                            .product-isbn {
+                                color: #666;
+                                margin-bottom: 3px;
+                                font-size: 12px;
+
+                                .link {
+                                    color: #409eff;
+                                }
+                            }
+
+                            .product-price {
+                                margin-top: 5px;
+                                color: #333;
+                            }
                         }
                     }
                 }
             }
-        }
 
-        .col-merged {
-            border-right: 1px solid #ebeef5;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            padding: 10px;
-            text-align: center;
-            font-size: 13px;
+            .col-merged {
+                border-right: 1px solid #ebeef5;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                padding: 10px;
+                text-align: center;
+                font-size: 13px;
 
-            &:last-child {
-                border-right: none;
-            }
+                &:last-child {
+                    border-right: none;
+                }
 
-            &.col-amount { flex: 1; }
-            &.col-buyer { flex: 1; }
-            &.col-reason { flex: 1; }
-            &.col-logistics {
-                flex: 1.5;
-                align-items: flex-start;
-                padding-left: 15px;
+                &.col-amount {
+                    flex: 1;
+                }
 
-                .logistics-row {
-                    display: flex;
-                    align-items: center;
-                    margin-bottom: 4px;
-                    color: #666;
-                    font-size: 12px;
+                &.col-buyer {
+                    flex: 1;
+                }
+
+                &.col-reason {
+                    flex: 1;
+                }
+
+                &.col-logistics {
+                    flex: 1.5;
+                    align-items: flex-start;
+                    padding-left: 15px;
+
+                    .logistics-row {
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 4px;
+                        color: #666;
+                    }
+                }
+
+                &.col-status {
+                    flex: 1;
+                }
+
+                &.col-action {
+                    flex: 1;
                 }
             }
-            &.col-status { flex: 1; }
-            &.col-action { flex: 1; }
         }
-    }
 
-    .action-btn {
-        cursor: pointer;
-        margin-bottom: 5px;
-        font-size: 13px;
+        .action-btn {
+            cursor: pointer;
+            margin-bottom: 5px;
+            font-size: 13px;
 
-        &:hover {
-            opacity: 0.8;
+            &:hover {
+                opacity: 0.8;
+            }
         }
     }
-}
 </style>

src/views/mallOrder/refund/index.vue

@@ -80,6 +80,7 @@
 
         <!-- Dialogs -->
         <push-sms-dialog ref="pushSmsDialogRef" @success="fetchData" />
+        <refund-detail-dialog ref="refundDetailDialogRef" />
     </ele-page>
 </template>
 
@@ -91,6 +92,7 @@
     import RefundTableHeader from './components/refund-table-header.vue';
     import RefundItem from './components/refund-item.vue';
     import PushSmsDialog from './components/push-sms-dialog.vue';
+    import RefundDetailDialog from './components/refund-detail-dialog.vue';
 
     const activeTab = ref('');
     const loading = ref(false);
@@ -107,6 +109,7 @@
     const list = ref([]);
 
     const pushSmsDialogRef = ref(null);
+    const refundDetailDialogRef = ref(null);
 
     const fetchData = () => {
         loading.value = true;
@@ -118,6 +121,10 @@
 
         request.get('/shop/shopOrder/refundPagelist', { params })
             .then(res => {
+                if(res.data.code !== 200) {
+                    EleMessage.error(res.data.msg);
+                    return;
+                }
                 const data = res.data;
                 list.value = data.rows || [];
                 total.value = data.total || 0;
@@ -171,7 +178,7 @@
     };
 
     const handleViewDetail = (item) => {
-        EleMessage.warning('详情页暂未实现');
+        refundDetailDialogRef.value?.handleOpen(item);
     };
 
     onMounted(() => {