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>
                        </div>

                        <!-- 倒计时组件 -->
                        <div
                            v-if="deadline > 0"
                            class="flex items-center text-red-500 text-sm mb-3"
                        >
                            <span class="mr-2">剩余</span>
                            <el-countdown
                                format="DD [天] HH [时] mm [分]"
                                :value="deadline"
                                :value-style="{
                                    fontSize: '14px',
                                    color: '#ef4444',
                                    lineHeight: '1'
                                }"
                            />
                        </div>

                        <div class="text-sm text-gray-500 space-y-1">
                            <template
                                v-if="['1', '3'].includes(String(form.status))"
                            >
                                <div>{{
                                    isRefundOnly
                                        ? '请及时联系买家协商退款事宜'
                                        : '请及时联系买家协商退货事宜'
                                }}</div>
                                <div v-if="form.refundType == 1"
                                    >该退款为卖家原因退款，若您同意买家退货，退货运费将由您承担。</div
                                >
                            </template>

                            <template
                                v-else-if="
                                    String(form.status) === '7' &&
                                    String(form.refundType) === '1'
                                "
                            >
                                <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) === '9'">
                                <div>退款成功时间：{{ form.finishTime }}</div>
                                <div
                                    >退款金额：¥
                                    {{
                                        form.refundMoneyFinal ||
                                        form.refundMoney
                                    }}元</div
                                >
                                <div>退款规则：符合未发货秒退 </div>
                            </template>
                        </div>
                    </div>
                    <div style="min-width: 600px" class="pt-2">
                        <el-steps
                            :active="currentStep"
                            align-center
                            finish-status="success"
                            :process-status="processStatus"
                        >
                            <template v-if="isRefundOnly">
                                <el-step
                                    :title="`买家申请${getRefundTypeText(form.refundType)}`"
                                />
                                <el-step
                                    :title="
                                        String(form.status) === '10'
                                            ? '退款已撤销'
                                            : '卖家处理退款申请'
                                    "
                                />
                                <el-step title="退款完毕" />
                            </template>
                            <template v-else>
                                <el-step title="买家申请退货退款" />
                                <el-step
                                    :title="
                                        String(form.status) === '10'
                                            ? '退款已撤销'
                                            : '卖家处理退货申请'
                                    "
                                />
                                <el-step title="买家退货" />
                                <el-step title="退款完毕" />
                            </template>
                        </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.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.payPrice }} × {{ prod.num }}</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 }}/{{ form.userId }}</span
                            >
                        </div>
                    </div>
                    <div class="info-item">
                        <span class="label">申请退款：</span>
                        <span class="value"
                            >¥{{ form.refundMoney || '0.00' }}</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">
                <template v-if="isRefundOnly">
                    · 如果您同意，请点击“同意退款”，退款将立即退到买家账户。<br />
                    · 如果您拒绝，买家可以申请客服介入。<br />
                    · 如果您逾期未处理申请，视作同意买家申请。<br />
                </template>
                <template v-else>
                    · 如果您同意，请点击“同意退货”，将正确退货地址发给买家。<br />
                    · 如果您拒绝，买家可以申请客服介入。<br />
                    ·
                    如果您逾期未处理申请，视作同意买家申请。系统会自动将当前交易的退货地址发给买家<br />
                </template>
            </div>
        </div>

        <template #footer>
            <div class="flex justify-center gap-4">
                <el-button
                    :disabled="
                        !canOperate && !['4', '5'].includes(String(form.status))
                    "
                    >备注</el-button
                >
                <el-button @click="handleRefuse" :disabled="!canOperate">{{
                    isRefundOnly ? '拒绝退款申请' : '拒绝退货申请'
                }}</el-button>
                <el-button @click="handleAgree" :disabled="!canOperate">{{
                    isRefundOnly ? '同意退款' : '同意退货'
                }}</el-button>
                <el-button
                    v-if="isRefundOnly"
                    type="primary"
                    @click="handleExpressIntercept"
                    :disabled="form.interceptStatus === '1'"
                    >快递拦截</el-button
                >
                <el-button
                    v-if="isRefundOnly"
                    type="primary"
                    @click="handleNegotiateReturn"
                    :disabled="
                        !canOperate && !['4', '5'].includes(String(form.status))
                    "
                    >协商退货退款</el-button
                >
                <el-button
                    type="primary"
                    @click="handleNegotiate"
                    :disabled="
                        !canOperate && !['4', '5'].includes(String(form.status))
                    "
                    >与买家协商</el-button
                >
            </div>
        </template>
        <negotiation-apply-dialog
            v-model="negotiationDialogVisible"
            :refund-order-id="form.refundOrderId"
            :refund-type="Number(form.refundType)"
            :max-refund-amount="Number(form.refundMoney) || 0"
            @success="handleNegotiationSuccess"
        />
        <refuse-dialog
            ref="refuseDialogRef"
            @success="handleNegotiationSuccess"
        />
        <agree-dialog
            ref="agreeDialogRef"
            @success="handleNegotiationSuccess"
        />
        <confirm-refund-dialog
            ref="confirmRefundDialogRef"
            @success="handleNegotiationSuccess"
        />
        <negotiate-return-dialog
            ref="negotiateReturnDialogRef"
            @success="handleNegotiationSuccess"
        />
        <leave-message-dialog
            ref="leaveMessageDialogRef"
            @success="handleNegotiationSuccess"
        />
    </ele-modal>
</template>

<script setup>
    import { ref, computed } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import { ElMessageBox } from 'element-plus';
    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';
    import ConfirmRefundDialog from './confirm-refund-dialog.vue';
    import NegotiateReturnDialog from './negotiate-return-dialog.vue';
    import LeaveMessageDialog from './leave-message-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 confirmRefundDialogRef = ref(null);
    const negotiateReturnDialogRef = ref(null);
    const leaveMessageDialogRef = ref(null);

    const deadline = ref(0);

    const isRefundOnly = computed(() =>
        ['0', '2', '3'].includes(String(form.value.refundType))
    );

    // 进度条状态
    const processStatus = computed(() => {
        const status = Number(form.value.status);
        if ([5, 6, 10].includes(status)) {
            return 'error';
        }
        return 'process';
    });

    // 当前步骤
    const currentStep = computed(() => {
        const status = Number(form.value.status);
        if (isRefundOnly.value) {
            // 1:申请, 2,3:协商中, 5:驳回, 6:超时关闭 -> 停在第2步(卖家处理)
            if ([1, 2, 3, 5, 6].includes(status)) return 1;
            // 4:审核通过, 7:买家已发货, 8:确认收货 -> 停在第3步(退款完毕前)
            if ([4, 7, 8].includes(status)) return 2;
            // 9:退款成功 -> 全绿(第3步完成)
            if (status === 9) return 3;
            // 10:退款已撤销 -> 停在第2步
            if (status === 10) return 1;
            return 1;
        }

        // 退货退款
        // 1:申请, 2,3:协商中, 5:驳回, 6:超时关闭 -> 停在第2步(卖家处理)
        if ([1, 2, 3, 5, 6].includes(status)) return 1;
        // 4:审核通过(商家同意退货，等待买家退货) -> 停在第3步(买家退货)
        if (status === 4) return 2;
        // 7:买家已发货, 8:确认收货 -> 停在第4步(退款完毕前)
        if ([7, 8].includes(status)) return 3;
        // 9:退款成功 -> 全绿(第4步完成)
        if (status === 9) return 4;
        // 10:退款已撤销 -> 停在第2步
        if (status === 10) return 1;
        return 1;
    });

    // 是否可操作主流程（拒绝、同意）
    const canOperate = computed(() => {
        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.restSecond) {
                            deadline.value =
                                Date.now() + data.restSecond * 1000;
                        } else {
                            deadline.value = 0;
                        }
                        // 处理协商历史数据
                        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;
        }
        if (form.value.restSecond) {
            deadline.value = Date.now() + form.value.restSecond * 1000;
        } else {
            deadline.value = 0;
        }
        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 getRefundTypeText = (type) => {
        const map = {
            0: '极速退款',
            1: '退货退款',
            2: '仅退款',
            3: '缺货退款'
        };
        return map[type] || type;
    };

    const getStatusText = (status) => {
        const key = String(status);
        const map = {
            1: '申请退款',
            2: '协商中待用户确认',
            3: '协商中待商家确认',
            4: '审核通过',
            5: '审核驳回',
            6: '超时关闭',
            7: '买家已发货',
            8: '确认收货',
            9: '退款成功',
            10: '退款已撤销'
        };
        return map[key] || status;
    };

    const getShopStatusText = (status) => {
        const map = { 1: '未收到货', 2: '已收到货' };
        return map[status] || '-';
    };

    const handleNegotiate = () => {
        negotiationDialogVisible.value = true;
    };

    const handleNegotiateReturn = () => {
        if (negotiateReturnDialogRef.value) {
            negotiateReturnDialogRef.value.open(form.value);
        }
    };

    const handleNegotiationSuccess = () => {
        handleOpen(form.value);
    };

    const handleExpressIntercept = () => {
        ElMessageBox.confirm('确定要拦截该快递吗？', '提示', {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
        })
            .then(() => {
                loading.value = true;
                request
                    .post(
                        `/shop/shopOrder/refundExpressIntercept/${form.value.refundOrderId}`
                    )
                    .then((res) => {
                        if (res.data.code === 200) {
                            EleMessage.success('快递拦截成功');
                            handleOpen(form.value);
                        } else {
                            EleMessage.error(res.data.msg || '快递拦截失败');
                        }
                    })
                    .catch((e) => {
                        console.error(e);
                        EleMessage.error('网络错误');
                    })
                    .finally(() => {
                        loading.value = false;
                    });
            })
            .catch(() => {});
    };

    const handleRefuse = () => {
        if (refuseDialogRef.value) {
            refuseDialogRef.value.open(form.value.refundOrderId, Number(form.value.refundType));
        }
    };

    const handleAgree = () => {
        if (isRefundOnly.value) {
            confirmRefundDialogRef.value?.open(
                form.value.refundOrderId,
                form.value.refundMoneyFinal || form.value.refundMoney
            );
            return;
        }
        agreeDialogRef.value?.open(form.value.refundOrderId);
    };

    const handleLeaveMessage = () => {
        if (leaveMessageDialogRef.value) {
            leaveMessageDialogRef.value.open(form.value.refundOrderId);
        }
    };

    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>