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">{{ detail.source }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">支付渠道：</span>
                        <span class="value">{{ detail.payChannel }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">交易状态：</span>
                        <span class="value">{{ detail.status }}</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.buyer?.name }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">收 件 人：</span>
                        <span class="value">{{ detail.receiver?.name }}</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">{{ detail.receiver?.phone }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">地 址：</span>
                        <span class="value">{{ detail.receiver?.address }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">用户备注：</span>
                        <span class="value">{{ detail.buyerNote || '无' }}</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.logistics?.company || '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">发货单号：</span>
                        <span class="value">{{ detail.logistics?.no || '-' }}</span>

                        <el-popover placement="bottom" title="物流动态" :width="300" trigger="hover">
                            <template #reference>
                                <el-button link type="success" class="ml-2" v-if="detail.logistics?.no"
                                    @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.isShipped ? 'success' : 'warning'" effect="dark" class="mr-2">
                            {{ detail.isShipped ? '已发货' : '未发货' }}
                        </el-tag>
                        <el-tag :type="detail.isCompleted ? 'success' : 'warning'" effect="dark">
                            {{ detail.isCompleted ? '已完成' : '未完成' }}
                        </el-tag>
                    </div>
                </div>
            </div>
        </ele-card>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { Lightning } from '@element-plus/icons-vue';

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

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

const activities = [
    {
        content: '已签收,签收人是拍照签收',
        timestamp: '2024-04-12 20:46',
    },
    {
        content: '派送中',
        timestamp: '2024-04-12 20:46',
    },
    {
        content: '已发货',
        timestamp: '2024-04-11 20:46',
    },
];

const viewLogistics = () => {
    // Logic to view full logistics
};
</script>

<style lang="scss" scoped>
.info-layout {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    .info-column {
        flex: 1;

        .info-item {
            margin-bottom: 12px;
            font-size: 14px;
            display: flex;

            .label {
                color: #606266;
                width: 80px;
                flex-shrink: 0;
            }

            .value {
                color: #303133;
                font-weight: 500;
                flex: 1;
            }
        }

        .warning-text {
            color: #f56c6c;
            font-weight: bold;
        }
    }
}

.status-box {
    background-color: #fdf6ec;
    border: 1px solid #faecd8;
    color: #e6a23c;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 10px;

    .status-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #e6a23c;
        border-radius: 50%;
        margin-right: 5px;
    }
}

.ml-2 {
    margin-left: 8px;
}

.mr-2 {
    margin-right: 8px;
}

.mt-2 {
    margin-top: 8px;
}
</style>