shuhi-ui/src/views/index/components/order-stat.vue

<template>
  <ele-card>
    <el-row :gutter="24" justify="center">
      <el-col :span="8">
        <div class="flex justify-center items-center mb-5 border-b">
          <div class="flex items-center flex-col flex-1 pb-6">
            <div class="text-2xl text-theme">{{ detail?.waitFirstCheckOrderNum || 0 }}</div>
            <div class="text-base text-theme">待初审订单</div>
          </div>
          <div class="flex items-center flex-col flex-1 border-l">
            <div class="text-2xl text-theme">{{ detail?.waitReceiveOrderNum || 0 }}</div>
            <div class="text-base text-theme">待收货订单</div>
          </div>
        </div>
        <div class="flex justify-center items-center">
          <div class="flex items-center flex-col flex-1">
            <div class="text-2xl text-theme">{{ detail?.waitCheckOrderNum || 0 }}</div>
            <div class="text-base text-theme">待审核订单</div>
          </div>
          <div class="flex items-center flex-col flex-1 border-l">
            <div class="text-2xl text-theme">{{ detail?.waitPayOrderNum || 0 }}</div>
            <div class="text-base text-theme">待付款订单</div>
          </div>
        </div>
      </el-col>
      <el-col :span="3"></el-col>
      <el-col :span="8">
        <div class="flex justify-center items-center mb-5 border-b">
          <div class="flex items-center flex-col flex-1 pb-6">
            <div class="text-2xl text-theme">{{ detail?.stockWarnNum || 0 }}</div>
            <div class="text-base text-theme">库存预警</div>
          </div>
          <div class="flex items-center flex-col flex-1 border-l">
            <div class="text-2xl text-theme">{{ detail?.stockFullNum || 0 }}</div>
            <div class="text-base text-theme">库存已满</div>
          </div>
        </div>
        <div class="flex justify-center items-center">
          <div class="flex items-center flex-col flex-1">
            <div class="text-2xl text-theme">{{ detail?.noFirstCheckNum || 0 }}</div>
            <div class="text-base text-theme">24小时未初审</div>
          </div>
          <div class="flex items-center flex-col flex-1 border-l">
            <div class="text-2xl text-theme">{{ detail?.recyclePriceAbnormalNum || 0 }}</div>
            <div class="text-base text-theme">回收价>出售价（中等）</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </ele-card>
</template>

<script setup>
defineProps({
  detail: {
    type: Object,
    default: () => ({})
  }
});
</script>