shuhi-ui/src/views/recycleOrder/detail/order-base-info.vue

<template>
    <div class="base-info">
        <ele-data-table ref="tableRef" row-key="userId" :columns="columns" :data="datasource" :tools="false"
            :pagination="false">
            <template #orderTime="{ row }">
                <div class="common-text">
                    <el-text>建单：</el-text>
                    <el-text>{{ row.createTime }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>提交：</el-text>
                    <el-text>{{ row.orderTime || '-' }}</el-text>
                </div>
            </template>
            <template #status="{ row }">
                <el-tag effect="dark" :type="row.status < 5 ? 'warning' : 'success'">{{ row.status < 5 ? '未发货' : '已发货'
                        }}</el-tag>
                        <el-tag style="margin-left: 15px" effect="dark"
                            :type="row.status < 8 ? 'warning' : 'success'">{{ row.status < 8 ? '未收货' : '已收货' }}</el-tag>

                                <el-tag style="margin-left: 15px" effect="dark"
                                    :type="row.status == 11 ? ' success' : 'warning'">{{ row.status == 11
                                        ? '已支付' : '未支付' }}</el-tag>
            </template>
        </ele-data-table>
        <el-row :gutter="12" style="padding: 16px 10px; padding-bottom: 0">
            <el-col :span="8">
                <div class="common-text">
                    <el-text>物流类型：</el-text>
                    <el-text>平台物流</el-text>
                </div>
                <div class="common-text">
                    <el-text>快递单号：</el-text>
                    <el-text>{{ detail.waybillCode }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>快递公司：</el-text>
                    <el-text>{{ finalExpressText }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>预约时间：</el-text>
                    <el-text>{{ formatTime }}</el-text>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="common-text">
                    <el-text>发件人：</el-text>
                    <el-text>{{ formatName(detail.sendName) }}(ID：{{ detail.userId }})</el-text>
                </div>
                <div class="common-text">
                    <el-text>电 话：</el-text>
                    <el-text>{{ formatPhone(detail.sendMobile) }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>地 址：</el-text>
                    <el-text>{{ detail.sendAddress }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>备 注：</el-text>
                    <el-text>{{ detail.userExpress || '暂无信息' }}</el-text>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="common-text">
                    <el-text>收货仓库：</el-text>
                    <el-text>{{ detail.recipientGodown }}-{{ detail.recipientName }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>收 件 人：</el-text>
                    <el-text>{{ detail.recipientName || '-' }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>电  话：</el-text>
                    <el-text>{{ detail.recipientMobile || '-' }}</el-text>
                </div>
                <div class="common-text">
                    <el-text>地  址：</el-text>
                    <el-text>{{ detail.recipientAddress || '-' }}</el-text>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { formatName, formatPhone } from '@/utils/common';
import { ref, reactive, watch } from 'vue';
const props = defineProps({
    detail: { type: Object, default: () => ({}) }
});

import { useDictData } from '@/utils/use-dict-data';

/** 字典数据 */
const [expressDicts, orderFormDicts] = useDictData([
    'final_express',
    'order_form'
]);

const finalExpressText = computed(() => {
    if (props.detail.finalExpress == '0' || !props.detail.finalExpress) {
        return '暂无信息';
    }
    return (
        expressDicts.value.find((d) => d.dictValue == props.detail.finalExpress)
            ?.dictLabel || '暂无信息'
    );
});

const formatTime = computed(() => {
    if (!props.detail.schedulePickupStartTime) return '-';
    return (
        props.detail.schedulePickupStartTime +
        '-' +
        props.detail.schedulePickupEndTime.split(' ')[1]
    );
});

const datasource = ref([]);
watch(
    () => props.detail,
    (newVal) => {
        console.log(newVal, 'newVal');
        datasource.value = newVal ? [newVal] : [];
        console.log(datasource.value);
    },
    { immediate: true, deep: true }
);

const columns = ref([
    { label: '订单编号', prop: 'orderId' },
    {
        label: '订单来源',
        prop: 'orderFrom',
        formatter: (row) =>
            orderFormDicts.value.find((d) => d.dictValue == row.orderFrom)
                ?.dictLabel
    },
    { label: '用户', prop: 'userNick' },
    {
        label: '预估书款',
        prop: 'expectMoney',
        formatter: (row) => '￥' + row.expectMoney
    },
    {
        label: '审核书款',
        prop: 'finalMoney',
        formatter: (row) => row.finalMoney ? '￥' + row.finalMoney : '待核算'
    },
    { label: '下单时间', prop: 'orderTime', slot: 'orderTime', width: 200 },
    { label: '交易状态', prop: 'status', slot: 'status', width: 240 }
]);
</script>