shuhi-ui/src/views/mallOrder/all/components/order-item.vue

<template>
    <div class="order-item">
        <!-- Order Header -->
        <div class="order-header">
            <el-checkbox v-model="order.checked" style="margin-right: 12px;" />
            <span class="mr-4">订单编号: {{ order.orderId }} <el-button link type="primary" size="small"
                    @click="handleCopy(order.orderId)">复制</el-button></span>
            <span class="mr-4">创建时间: {{ order.createTime }}</span>
            <span class="mr-4">支付渠道: {{ getPayType(order.payType) }}</span>
            <span class="mr-4">订单来源: 商城小程序</span>
            <span class="flag-icon" v-if="order.flag"><el-icon>
                    <Flag />
                </el-icon></span>
            <span class="urge-tag" v-if="order.isUrge">催发货</span>
        </div>

        <!-- Order Body -->
        <div class="order-body">
            <!-- Products Column -->
            <div class="col-products-wrapper">
                <div v-for="(product, idx) in order.detailList" :key="idx" class="product-row">
                    <div class="col-product product-info mr-2">
                        <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" @click="handleCopy(product.isbn)">
                                    <CopyDocument />
                                </el-icon> (品相: {{ getConditionText(product.conditionType) }})
                            </div>
                            <div class="product-tags">
                                <span class="tag">回收折扣: {{ product.discount || 1 }}折</span>
                                <span class="tag success">(回收状态: {{ getRecycleStatusText(product.recycleStatus) }})</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-price">¥ {{ product.price }}</div>
                    <div class="col-qty">x1</div>
                    <div class="col-aftersales">
                        <span
                            :class="{ 'text-blue': product.status === '3', 'text-red': product.status === '2' }">
                            {{ getDetailStatusText(product.status) }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Merged Columns -->
            <div class="col-merged col-buyer">
                <div class="buyer-info">
                    <el-avatar :size="30" :src="order.avatar" />
                    <div class="buyer-name">{{ order.userNick }}</div>
                    <div class="buyer-phone">{{ order.receiverMobile }}</div>
                </div>
            </div>
            <div class="col-merged col-payment">
                <div class="payment-amount">¥ {{ order.totalMoney }}</div>
                <div class="shipping-fee">(含邮费: ¥ {{ order.expressMoney }})</div>
            </div>
            <div class="col-merged col-logistics">
                <div>{{ order.expressName }}</div>
                <div>{{ order.waybillCode }}</div>
            </div>
            <div class="col-merged col-status">
                <div :class="getStatusColor(order.status)">{{ getStatusText(order.status) }}</div>
                <el-button link type="primary" @click="$emit('view-detail', order)">[查看详情]</el-button>
            </div>
            <div class="col-merged col-action">
                <el-button link type="primary" @click="$emit('push-sms', order)">[推送短信]</el-button>
                <el-button link type="warning" @click="$emit('refund', order)">[缺货退款]</el-button>
            </div>
        </div>

        <!-- Buyer Note -->
        <div class="buyer-note" v-if="order.remark">
            <span class="note-label">买家备注:</span>
            <span class="note-content">{{ order.remark }}</span>
        </div>
    </div>
</template>

<script setup>
import { Flag, CopyDocument } from '@element-plus/icons-vue';
import { EleMessage } from 'ele-admin-plus/es';
import { useClipboard } from '@vueuse/core';

const props = defineProps({
    order: {
        type: Object,
        required: true
    }
});

defineEmits(['view-detail', 'push-sms', 'refund']);

const { copy } = useClipboard();

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

const getStatusText = (status) => {
    const statusMap = {
        '1': '等待买家付款',
        '2': '等待卖家发货',
        '3': '等待买家确认收货',
        '4': '已完成',
        '5': '退款成功',
        '6': '退款中',
        '7': '已取消'
    };
    return statusMap[status] || status;
};

const getStatusColor = (status) => {
    // Implement color logic if needed, e.g. return 'text-red'
    return '';
};

const getDetailStatusText = (status) => {
    const map = {
        '1': '正常',
        '2': '退款中',
        '3': '已退款'
    };
    return map[status] || '';
};

const getConditionText = (type) => {
    const map = {
        '1': '良好',
        '2': '中等',
        '3': '次品',
        '4': '全新'
    };
    return map[type] || '-';
};

const getRecycleStatusText = (status) => {
    const map = {
        '1': '正在回收',
        '2': '暂停回收',
        '3': '未加入回收书单',
        '4': '黑名单',
        '5': '手动暂停'
    };
    return map[status] || '-';
};

const getPayType = (type) => {
    if (!type) {
        return '-';
    }
    const map = {
        '1': '余额',
        '2': '微信',
        '3': '支付宝'
    };
    return map[type] || type;
};
</script>

<style scoped>
.order-item {
    border: 1px solid #e4e7ed;
    margin-bottom: 20px;
    font-size: 13px;
}

.order-header {
    background-color: #f5f7fa;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e4e7ed;
}

.order-body {
    display: flex;
    align-items: stretch;
}

.col-products-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e4e7ed;
}

.product-row {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #ebeef5;
}

.product-row:last-child {
    border-bottom: none;
}

.col-product {
    flex: 1;
    min-width: 200px;
    padding-left: 20px;
    display: flex;
}

.product-img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    margin-right: 10px;
}

.product-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-title {
    font-weight: 500;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.col-price {
    width: 100px;
    flex: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.col-qty {
    width: 80px;
    flex: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.col-aftersales {
    width: 100px;
    flex: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.col-merged {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #e4e7ed;
    padding: 10px;
    text-align: center;
}

.col-merged:last-child {
    border-right: none;
}

.col-buyer {
    width: 150px;
    flex: none;
}

.col-payment {
    width: 120px;
    flex: none;
}

.col-logistics {
    width: 150px;
    flex: none;
}

.col-status {
    width: 120px;
    flex: none;
}

.col-action {
    width: 120px;
    flex: none;
}

.buyer-note {
    background-color: #fff8e6;
    padding: 8px 20px;
    color: #e6a23c;
    border-top: 1px solid #faecd8;
}

.text-blue {
    color: #409eff;
}

.text-red {
    color: #f56c6c;
}

.flag-icon {
    color: #f56c6c;
    margin-left: 10px;
}

.urge-tag {
    background-color: #f56c6c;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
}

.tag {
    background-color: #f0f2f5;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 5px;
    font-size: 12px;
}

.tag.success {
    background-color: #f0f9eb;
    color: #67c23a;
}
</style>