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">{{ row.refundOrderId }}</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 v-if="row.expressName" type="success">{{ row.expressName }}</el-text>
      <el-text v-else :type="row.finalExpress && 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>{{ row.originOrderId }}</el-text>
    </div>
  </div>
</template>

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

  /** 字典数据 */
  const [expressDicts, orderFormDicts] = useDictData([
    'final_express',
    '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>