multiStoreAdmin/src/components/orderDetail/index.vue

<!-- 订单详情 -->
<template>
    <el-drawer v-model="showDetail" direction="rtl" :destroy-on-close="true" title="订单详情" size="50%">
        <template #header>
            <h4>订单详情</h4>
        </template>
        <template #default>
            <!-- head -->
            <div class="flex">
                <el-image class="w-[50px] h-[50px]" :src="url" :fit="fit" />
                <div class="flex flex-col ml-3 justify-between">
                    <div style="font-size:16px">
                        【收银订单】
                    </div>
                    <div>
                        订单编号： {{ detailData.order_id }}
                    </div>
                </div>
            </div>
            <ul class="flex justify-between w-[70%] mt-[20px]">
                <li>
                    <div>订单状态</div>
                    <div>{{ detailData.status_name }}</div>
                </li>
                <li>
                    <div>实际支付</div>
                    <div>{{ detailData.pay_price }}</div>
                </li>
                <li>
                    <div>支付方式</div>
                    <div>{{ detailData.pay_type }}</div>
                </li>
                <li>
                    <div>支付时间</div>
                    <div>{{ detailData.pay_time }}</div>
                </li>
            </ul>

            <!-- content -->
            <el-tabs v-model="activeName" class="mt-[20px]">
                <el-tab-pane label="订单信息" name="first" v-if="Object.keys(detailData).length">
                    <el-descriptions :column="3" border title="用户信息" class="mb-[30px]"
                        v-for="(item, index) in orderInfoCongig" :key="index">
                        <el-descriptions-item :label="el.name" label-class-name="my-label" v-for="el in item.child">
                            {{ el.value }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>

                <el-tab-pane label="商品信息" name="second">
                    <el-table border :data="detailData.product">
                        <el-table-column label="商品信息" prop="build_area_text" show-overflow-tooltip>
                            <template #default="{ row }">
                                <div class="flex items-center w-[300px] items-center">
                                    <el-image class="w-[50px] h-[50px] mr-2" :src="row.cart_info.image" />
                                    <span> {{ row.cart_info.name }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="价格" prop="cart_info.price" show-overflow-tooltip />
                        <el-table-column label="数量" prop="cart_info.cart_num" show-overflow-tooltip width="120" />
                        <el-table-column label="小计" prop="cart_info.total" show-overflow-tooltip />
                    </el-table>
                </el-tab-pane>

                <!-- <el-tab-pane label="订单记录" name="third">
                    <el-table border :data="formData.detail2">
                        <el-table-column label="订单id" prop="project_level_text" show-overflow-tooltip />
                        <el-table-column label="操作记录" prop="total_investment" show-overflow-tooltip width="120" />
                        <el-table-column label="操作时间" prop="engineering_status_text" show-overflow-tooltip />
                    </el-table>
                </el-tab-pane> -->
            </el-tabs>
        </template>
        <!-- <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="showDetail = false">确定</el-button>
            </div>
        </template> -->
    </el-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive, defineEmits, defineProps, onMounted } from "vue"

const showDetail = ref(false)
const url =
    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
const props = defineProps({
    detailData: {
        type: Object,
    },
})

let form = props.detailData

const formData = reactive({
    detail: [
        {}
    ],
    detail2: [],
})



const orderInfoCongig = ref(
    [
        {
            title: '用户信息',
            child: [
                {
                    name: "用户昵称",
                    value: props.detailData?.nickname
                },
                {
                    name: "绑定电话",
                    value: props.detailData?.mobile
                },


            ]
        },
        {
            title: '收货人信息',
            child: [
                {
                    name: "收货人",
                    value: props.detailData?.real_name
                },
                {
                    name: "收获电话",
                    value: props.detailData?.user_phone
                },
                {
                    name: "收获地址",
                    value: props.detailData?.user_address
                },

            ]
        },
        {
            title: '订单信息',
            child: [
                {
                    name: "创建时间",
                    value: props.detailData?.create_time
                },
                {
                    name: "商品总数",
                    value: props.detailData?.total_num
                },
                {
                    name: "商品总价",
                    value: props.detailData?.total_price
                },
                {
                    name: "店员名称",
                    value: props.detailData?.staff_name
                },
                {
                    name: "会员商品优惠",
                    value: " props.detailData?.total_num"
                },

                {
                    name: "支付时间",
                    value: props.detailData?.pay_time
                },
                {
                    name: "支付方式",
                    value: props.detailData?.pay_type
                },
            ]
        },

    ])

const activeName = 'first'



const open = () => {
    showDetail.value = true
}

const close = () => {
    showDetail.value = false
}

defineExpose({
    open,
    close

})



</script>