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

<template>
    <div class="refund-item">
        <!-- Header -->
        <div class="refund-header">
            <el-checkbox v-model="item.checked" style="margin-right:12px" />
            <el-tag type="success" size="small" class="mr-2" effect="plain">
                {{ getRefundTypeText(item.refundType) }}
            </el-tag>
            <span class="mr-4 text-black-600">退款编号: {{ item.refundOrderId }}</span>
            <span class="mr-4 text-black-600">原订单编号: {{ item.originOrderId }}</span>
            <span class="mr-4 text-black-600">申请时间: {{ item.createTime }}</span>
            <span class="mr-4 text-black-600" v-if="item.cancelStatus == 2">
                <el-tag type="info" size="small">已撤销</el-tag>
            </span>
        </div>

        <!-- Body -->
        <div class="refund-body">
            <!-- Product Info (Flex 3) -->
            <div class="col-product-wrapper">
                <div v-for="(product, idx) in item.detailList" :key="idx" class="product-row">
                    <div class="product-info">
                        <el-image :src="product.cover" class="product-img" fit="cover" />
                        <div class="product-detail">
                            <div class="product-title">{{ product.bookName }}</div>
                            <div class="product-isbn">
                                ISBN: <span class="link">{{ product.isbn }}</span>
                                <el-icon class="cursor-pointer ml-1" @click="handleCopy(product.isbn)">
                                    <CopyDocument />
                                </el-icon>
                            </div>
                            <div class="product-price">
                                <span class="mr-2">退回数量: {{ product.refundNum }}</span>
                                <span>单价: ¥ {{ product.price }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 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="money-status text-xs text-gray-400 mt-1">
                    {{ getMoneyStatusText(item.moneyStatus) }}
                </div>
            </div>

            <!-- Buyer (Flex 1) -->
            <div class="col-merged col-buyer">
                <div class="buyer-info">
                    <el-avatar :size="30" :src="item.avatar" />
                    <div class="buyer-name">{{ item.userNick }}</div>
                    <div class="buyer-id text-xs text-gray-400">ID: {{ item.userId }}</div>
                </div>
            </div>

            <!-- Reason (Flex 1) -->
            <div class="col-merged col-reason">
                <div class="font-bold">{{ item.refundReason }}</div>
                <div class="text-xs text-gray-500 mt-1">货物状态: {{ getShopStatusText(item.shopStatus) }}</div>
            </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>
                <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>
            </div>

            <!-- Status (Flex 1) -->
            <div class="col-merged col-status">
                <div class="text-red-500 font-bold mb-1">{{ getStatusText(item.status) }}</div>
                <el-button link type="primary" size="small" @click="$emit('view-detail', item)">[查看详情]</el-button>
            </div>

            <!-- Action (Flex 1) -->
            <div class="col-merged col-action">
                <div class="action-btn text-green-500" @click="$emit('push-sms', item)">[推送短信]</div>
                <div class="action-btn text-orange-500" @click="$emit('send-packet', item)">[发红包]</div>
            </div>
        </div>
    </div>
</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']);

const { copy } = useClipboard();

const handleCopy = async (text) => {
    try {
        await copy(text);
        EleMessage.success('复制成功');
    } catch (e) {
        EleMessage.error('复制失败');
    }
};

const getRefundTypeText = (type) => {
    const map = {
        '0': '极速退款',
        '1': '退货退款',
        '2': '仅退款'
    };
    return map[type] || type;
};

const getStatusText = (status) => {
    const map = {
        '1': '申请退款',
        '2': '审核通过',
        '3': '审核驳回',
        '4': '超时关闭',
        '5': '卖家已发货',
        '6': '已完成'
    };
    return map[status] || status;
};

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

const getSendTypeText = (type) => {
    const map = {
        '1': '上门取件',
        '2': '寄件点自寄',
        '3': '自行寄回'
    };
    return map[type] || '-';
};

const getMoneyStatusText = (status) => {
    const map = {
        '1': '未退还',
        '2': '已退还',
        '3': '已到账'
    };
    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;

        .col-product-wrapper {
            flex: 3;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #ebeef5;

            .product-row {
                display: flex;
                padding: 15px;
                border-bottom: 1px solid #ebeef5;

                &:last-child {
                    border-bottom: none;
                }

                .product-info {
                    display: flex;
                    width: 100%;

                    .product-img {
                        width: 80px;
                        height: 80px;
                        margin-right: 15px;
                        border-radius: 4px;
                        border: 1px solid #eee;
                    }

                    .product-detail {
                        font-size: 13px;
                        flex: 1;

                        .product-title {
                            font-weight: 500;
                            margin-bottom: 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;

            &: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;

                .logistics-row {
                    display: flex;
                    align-items: center;
                    margin-bottom: 4px;
                    color: #666;
                    font-size: 12px;
                }
            }
            &.col-status { flex: 1; }
            &.col-action { flex: 1; }
        }
    }

    .action-btn {
        cursor: pointer;
        margin-bottom: 5px;
        font-size: 13px;

        &:hover {
            opacity: 0.8;
        }
    }
}
</style>