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

<template>
    <div class="order-base-info">
        <ele-card header="订单基本信息">
            <div class="info-layout">
                <!-- Left Column: Order Info -->
                <div class="info-column">
                    <div class="info-item">
                        <span class="label">订单编号：</span>
                        <span class="value">{{ detail.orderId }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">订单来源：</span>
                        <span class="value">
                            <span v-if="detail.orderFrom == 1">微信小程序</span>
                            <span v-else-if="detail.orderFrom == 2">支付宝小程序</span>
                            <span v-else>商城小程序</span>
                            <el-image v-if="[1, 2].includes(detail.orderFrom)"
                                :src="detail.orderFrom == 2 ? alipayIcon : wxIcon"
                                style="width: 16px; height: 16px; margin-left: 4px; vertical-align: text-bottom;" />
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="label">支付渠道：</span>
                        <span class="value">
                            <dict-data v-if="detail.payType" code="shop_order_pay_type" type="text"
                                :model-value="detail.payType" />
                            <span v-else>-</span>
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="label">交易状态：</span>
                        <span class="value">
                            <dict-data v-if="detail.status" code="shop_order_status" type="tag"
                                :model-value="detail.status" />
                            <span v-else>-</span>
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="label">平台备注：</span>
                        <span class="value">{{ detail.remark || '正常发货' }}</span>
                    </div>
                </div>

                <!-- Center Column: User/Receiver Info -->
                <div class="info-column">
                    <div class="info-item">
                        <span class="label">用户名：</span>
                        <span class="value">{{ detail.userNick }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">收 件 人：</span>
                        <span class="value">{{ detail.receiverName }}</span>
                        <el-button link type="success" class="ml-2" @click="$emit('edit-receiver')">修改</el-button>
                    </div>
                    <div class="info-item">
                        <span class="label">电 话：</span>
                        <span class="value">{{ formatPhone(detail.receiverMobile) }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">地 址：</span>
                        <span class="value">{{ detail.receiverAddress }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">用户备注：</span>
                        <span class="value" :style="{ color: detail.remark ? '#f56c6c' : '' }">{{ detail.remark || '无' }}</span>
                    </div>
                    <div class="info-item warning-text" v-if="detail.shortageNote">
                        <span class="label" style="color: #f56c6c;">如遇缺货：</span>
                        <span class="value" style="color: #f56c6c;">{{ detail.shortageNote }}</span>
                    </div>
                </div>

                <!-- Right Column: Logistics Info -->
                <div class="info-column">
                    <div class="info-item">
                        <span class="label">发货物流：</span>
                        <span class="value">{{ detail.expressName || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">发货单号：</span>
                        <span class="value">{{ detail.waybillCode || '-' }}</span>

                        <el-popover placement="bottom" title="物流动态" :width="300" trigger="hover">
                            <template #reference>
                                <el-button link type="success" class="ml-2" v-if="detail.waybillCode"
                                    @click="viewLogistics">查看</el-button>
                            </template>
                            <el-timeline>
                                <el-timeline-item v-for="(activity, index) in activities" :key="index"
                                    :timestamp="activity.timestamp">
                                    {{ activity.content }}
                                </el-timeline-item>
                            </el-timeline>
                        </el-popover>
                    </div>

                    <div class="action-area mt-2">
                        <el-button type="success" @click="$emit('add-package')">新增额外包裹 <el-icon class="el-icon--right">
                                <Lightning />
                            </el-icon></el-button>
                    </div>

                    <div class="status-tags mt-2">
                        <el-tag :type="detail.status >= 3 ? 'success' : 'warning'" effect="dark" class="mr-2">
                            {{ detail.status >= 3 ? '已发货' : '未发货' }}
                        </el-tag>
                        <el-tag :type="detail.status == 4 ? 'success' : 'warning'" effect="dark">
                            {{ detail.status == 4 ? '已完成' : '未完成' }}
                        </el-tag>
                    </div>
                </div>
            </div>
        </ele-card>
    </div>
</template>

<script setup>
    import { Lightning } from '@element-plus/icons-vue';
import { EleMessage } from 'ele-admin-plus/es';
import { ref } from 'vue';
import wxIcon from '@/assets/wx.png';
import alipayIcon from '@/assets/alipay.png';
import { formatPhone } from '@/utils/common';

const props = defineProps({
        detail: {
            type: Object,
            required: true,
            default: () => ({})
        }
    });

    defineEmits(['add-package', 'edit-receiver']);

    const activities = ref([]);

    const viewLogistics = () => {
        EleMessage.info('物流详情功能开发中');
    };
</script>

<style scoped>
    .order-base-info {
        font-size: 13px;
    }

    .info-layout {
        display: flex;
        gap: 20px;
    }

    .info-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .info-item {
        display: flex;
        align-items: flex-start;
        line-height: 1.4;
    }

    .label {
        color: #909399;
        width: 70px;
        flex-shrink: 0;
    }

    .value {
        color: #303133;
        word-break: break-all;
    }

    .action-area {
        margin-top: auto;
    }
</style>