adminPhysical/src/views/list/Home.vue

<template>
  <page-header-wrapper>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="订单状态数量统计"
      sub-title='点击数字可以跳转到对应的订单列表'
      @back="() => null"
    />
    <div style="padding: 10px">
      <a-row :gutter="16">
        <a-col :span="4" v-for="order in orderStatusList" :key="order.status" style='background: #ffffff;border: none'>
          <a-card  :title="order.status_text" style='border: none '>
            <router-link style='cursor: pointer;color: red;font-size: 40px;' :to="{ name: 'logistics_orderList', query: { order_status: order.status} }">{{ order.count }}单</router-link>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="订单状态流程说明"
      sub-title=''
      @back="() => null"
    />
    <a-card :bordered="false">
      <a-steps class="steps" :current="5" direction='vertical'>
        <a-step title="拆包中" subTitle='触发条件：用户申请打包；' description="物流商需操作：拆包->打包->【物流商后台-订单列表】点击【打包完成】录入相关信息；" status='process' />
        <a-step title="未付款" subTitle='触发条件：物流商录入打包信息' description="无需物流商操作，待用户付款通知发货" status='process' />
        <a-step title="待发货" subTitle="触发条件：用户订单付完款" description="物流商需操作：发货->【物流商后台-订单列表】点击【已发货】录入相关信息；" status='process' />
        <a-step title="已发货" subTitle="触发条件：物流商在订单列表点击已发货" description="物流商需操作：在用户收货后，在【物流商后台-订单列表】点击【完成】录入相关信息；" status='process' />
        <a-step title="已完成" subTitle="触发条件：用户收货后，物流商在【物流商后台-订单列表】点击【完成】；" description="流程完成" status='process' />
      </a-steps>
    </a-card>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="包裹状态流程说明"
      sub-title=''
      @back="() => null"
    />
    <a-card :bordered="false">
      <a-steps class="steps" :current="5" direction='vertical'>
        <a-step title="待入库" subTitle='触发条件：用户包裹报备入库；' description="物流商需操作：如果包裹已到仓库，需在【物流商后台-包裹列表】中点击【入库】的录入相关信息" status='process' />
        <a-step title="运输中" subTitle='触发条件：用户录入物流单号，api查询物流信息' description="物流商需操作：如果包裹已到仓库，需在【物流商后台-包裹列表】中点击【入库】的录入相关信息" status='process' />
        <a-step title="待认领" subTitle="触发条件：物流商录入包裹信息中，用户没有报备的包裹；" description="无需物流商操作" status='process' />
        <a-step title="已入库" subTitle="触发条件：物流商录入包裹信息中，用户已报备（或已认领）的包裹；" description="无需物流商操作" status='process' />
        <a-step title="申请打包" subTitle="触发条件：用户申请打包；" description="物流商需操作：拆包->打包->【物流商后台-订单列表】找到对应包裹的订单录入相关信息；" status='process' />
        <a-step title="已发货" subTitle="触发条件：物流商在【物流商后台-订单列表】找到对应包裹的订单点击【已发货】；" description="" status='process' />
        <a-step title="已完成" subTitle="触发条件：物流商在【物流商后台-订单列表】找到对应包裹的订单点击【完成】；" description="流程完成" status='process' />
      </a-steps>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { orderStatusStatApi } from '@/api/manage'
export default {
  name: 'StandardList',
  data () {
    return {
      orderStatusList: []
    }
  },
  methods: {
    orderStatusStat () {
      orderStatusStatApi().then(res => {
        this.orderStatusList = res.data
      })
    }
  },
  created () {
    this.orderStatusStat()
  }
}
</script>

<style lang="less" scoped>
.ant-avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
}

.list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
    span {
        line-height: 20px;
    }
    p {
        margin-top: 4px;
        margin-bottom: 0;
        line-height: 22px;
    }
}
.steps {
  max-width: 750px;
}
</style>