shuhi-ui/src/views/recycleOrder/components/order-number.vue

<template>
    <div class="recycle-order-number">
        <div class="common-text" v-if="!isReturn">
            <el-text>订单号：</el-text>
            <el-text type="danger">{{ row.orderId }}</el-text>
        </div>
        <div class="common-text" v-if="isReturn">
            <el-text>退回编号：</el-text>
            <el-text type="danger">31231321321321</el-text>
        </div>
        <div class="common-text">
            <el-text>快递单号：</el-text>
            <el-text v-if="!row.waybillCode">暂无信息</el-text>
            <el-text v-else type="success">{{ row.waybillCode }}</el-text>
        </div>
        <div class="common-text">
            <el-text>快递公司：</el-text>
            <el-text :type="row.finalExpress != '0' ? 'success' : ''">{{ finalExpressText }}</el-text>
        </div>
        <template v-if="!isReturn">
            <div class="common-text">
                <el-text>订单来源：</el-text>
                <el-text>{{ orderFormText }}</el-text>
            </div>
            <div class="common-text">
                <el-text>订单备注：</el-text>
                <el-text>{{ row.userExpress || '-' }}</el-text>
            </div>
        </template>

        <div class="common-text" v-if="isReturn">
            <el-text>回收订单：</el-text>
            <el-text>2732781321</el-text>
        </div>
    </div>
</template>

<script setup>
import { useDictData } from '@/utils/use-dict-data';

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


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

const orderFormText = computed(() => {
    return orderFormDicts.value.find((d) => d.dictValue == props.row.orderFrom)?.dictLabel || '暂无信息'
})

const props = defineProps({
    row: {
        type: Object,
        default: () => { }
    },
    isReturn: {
        type: Boolean,
        default: false
    }
});
</script>