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

<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" />
        <refuse-dialog ref="refuseDialogRef" @success="handleNegotiationSuccess" />
        <agree-dialog ref="agreeDialogRef" @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';
    import RefuseDialog from './refuse-dialog.vue';
    import AgreeDialog from './agree-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 refuseDialogRef = ref(null);
    const agreeDialogRef = ref(null);

    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 = () => {
        if (refuseDialogRef.value) {
            refuseDialogRef.value.open(form.value.refundOrderId);
        }
    };

    const handleAgree = () => {
        if (agreeDialogRef.value) {
            agreeDialogRef.value.open(form.value.refundOrderId);
        }
    };

    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>