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>
                        订单编号： 5754545
                    </div>
                </div>
            </div>
            <ul class="flex justify-between w-[70%] mt-[20px]">
                <li>
                    <div>订单状态</div>
                    <div>未核销</div>
                </li>
                <li>
                    <div>实际支付</div>
                    <div>未核销</div>
                </li>
                <li>
                    <div>支付方式</div>
                    <div>未核销</div>
                </li>
                <li>
                    <div>支付时间</div>
                    <div>未核销</div>
                </li>
            </ul>

            <!-- content -->
            <el-tabs v-model="activeName" class="mt-[20px]">
                <el-tab-pane label="订单信息" name="first">
                    <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="formData.detail">
                        <el-table-column label="商品信息" prop="build_area_text" show-overflow-tooltip>
                            <template #default="{ row }">
                                <div class="flex items-center w-[300px] ">
                                    <el-image class="w-[50px] h-[50px] mr-2" :src="url" />
                                    受到广泛接
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="价格" 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-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 } from "vue"

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

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

const orderInfoCongig = reactive([
    {
        title: '用户信息',
        child: [
            {
                name: "用户昵称",
                value: '军哥'
            },
            {
                name: "绑定电话",
                value: '19130550023'
            },


        ]
    },
    {
        title: '收货人信息',
        child: [
            {
                name: "收货人",
                value: '好天气'
            },
            {
                name: "收获电话",
                value: '19130550023'
            },
            {
                name: "收获地址",
                value: '19130550023'
            },

        ]
    },
    {
        title: '订单信息',
        child: [
            {
                name: "创建时间",
                value: '好天气'
            },
            {
                name: "商品总数",
                value: '19130550023'
            },
            {
                name: "商品总价",
                value: '19130550023'
            },
            {
                name: "优惠券金额",
                value: '好天气'
            },
            {
                name: "积分抵扣",
                value: '19130550023'
            },
            {
                name: "支付邮费",
                value: '19130550023'
            },
            {
                name: "会员商品优惠",
                value: '好天气'
            },
            {
                name: "门店名称",
                value: '19130550023'
            },
            {
                name: "核销码",
                value: '19130550023'
            },
            {
                name: "支付时间",
                value: '19130550023'
            },
            {
                name: "支付方式",
                value: '19130550023'
            },
        ]
    },

])

const activeName = 'first'



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

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

defineExpose({
    open,
    close

})





</script>