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="urge-tag" v-if="order.urgeStatus == 1">催发货</span>

            <span class="mr-4">创建时间: {{ order.createTime }}</span>
            <span class="mr-4"
                >支付渠道:
                <dict-data
                    v-if="order.payType"
                    code="shop_order_pay_type"
                    type="text"
                    :model-value="order.payType"
                />
                <span v-else>-</span>
            </span>
            <span class="mr-4">
                订单来源:
                <span v-if="order.orderFrom == 1">微信小程序</span>
                <span v-else-if="order.orderFrom == 2">支付宝小程序</span>
                <span v-else>商城小程序</span>
                <el-image
                    :src="order.orderFrom == 2 ? alipayIcon : wxIcon"
                    v-if="order.orderFrom == 1 || order.orderFrom == 2"
                    style="
                        width: 16px;
                        height: 16px;
                        margin-left: 4px;
                        vertical-align: text-bottom;
                    "
                />
            </span>
            <span
                class="flag-icon cursor-pointer"
                @click="$emit('add-remark', order)"
                ><el-icon size="23" :color="order.remarkLabel">
                    <Flag /> </el-icon
            ></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"
                                    >回收折扣:
                                    <span
                                        style="
                                            color: #67c23a;
                                            font-weight: bold;
                                        "
                                        >{{
                                            product.recycleDiscount || 1
                                        }}折</span
                                    ></span
                                >
                                <span class="tag"
                                    >(回收状态:
                                    <span
                                        style="
                                            color: #67c23a;
                                            font-weight: bold;
                                        "
                                        >{{
                                            getRecycleStatusText(
                                                product.recycleStatus
                                            )
                                        }}</span
                                    >)</span
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col-price">¥ {{ product.price }}</div>
                    <div class="col-qty">x{{ product.num }}</div>
                    <div class="col-aftersales">
                        <span
                            class="cursor-pointer"
                            @click="$emit('view-refund-detail', product)"
                            :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">{{
                        formatPhone(order.receiverMobile)
                    }}</div>
                </div>
            </div>
            <div class="col-merged col-payment">
                <div class="payment-amount">¥ {{ order.payMoney }}</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">
                <dict-data
                    code="shop_order_status"
                    type="text"
                    :model-value="order.status"
                />

                <el-button
                    link
                    type="primary"
                    @click="$emit('view-detail', order)"
                    >[查看详情]</el-button
                >
            </div>
            <div class="col-merged col-action">
                <el-button
                    v-if="order.status == 2"
                    link
                    type="primary"
                    @click="$emit('manual-delivery', order)"
                    >[手工发货]</el-button
                >
                <el-button link type="primary" @click="$emit('push-sms', order)"
                    >[短信记录]</el-button
                >
                <el-button link type="warning" @click="$emit('refund', order)"
                    >[缺货退款]</el-button
                >
                <el-button link type="primary" @click="$emit('view-log', 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';
    import wxIcon from '@/assets/wx.png';
    import alipayIcon from '@/assets/alipay.png';
    import { formatPhone } from '@/utils/common';

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

    defineEmits([
        'view-detail',
        'view-refund-detail',
        'push-sms',
        'refund',
        'view-log',
        'add-remark',
        'manual-delivery'
    ]);

    const { copy } = useClipboard();

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

    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] || '-';
    };
</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: #fef0f0;
        padding: 8px 20px;
        color: #f56c6c;
        border-top: 1px solid #fde2e2;
    }

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

    .text-red {
        color: #f56c6c;
        cursor: pointer;
    }

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

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

    .tag {
        padding: 2px 0;
        border-radius: 4px;
        margin-right: 5px;
        font-size: 13px;
        font-weight: 400;
    }

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