index.vue 2.9 KB
<template>
  <view class="content">
    <!-- 导航+背景 -->
    <common-top-nav title="接单大厅" />
    <!-- main -->
    <view class="main-content">
      <!-- 时间 -->
      <show-time />
      <!-- 数据展示 -->
      <show-data />
      <!-- 快捷入口 -->
      <function-card>
        <template>
          <view class="entry-item" v-for="(item,index) in entryList" :key="index" @click="toDetails(index+2)">
            <image :src="item.icon" mode=""></image>
            <text>{{item.text}}</text>
          </view>
        </template>
      </function-card>
      <!-- 数据总揽 -->
      <function-card title="数据总揽">
        <template>
          <view class="entry-item" v-for="(item,index) in allDataList" :key="index">
            <view style="margin: 32rpx 0 12rpx 0; font-size: 40rpx;">{{item.count}}</view>
            <text>{{item.text}}</text>
          </view>
        </template>
      </function-card>
    </view>
  </view>
</template>

<script>
  import commonTopNav from '@/components/common-top-nav.vue'
  import showTime from './c-cpns/show-time.vue'
  import showData from './c-cpns/show-data.vue'
  import functionCard from './c-cpns/function-card.vue'
  import { getAllData } from '@/services/modules/index.js'
  export default {
    data() {
      return {
        entryList: [
          { icon: '/static/status-icon1.png', text: '待接单' },
          { icon: '/static/status-icon2.png', text: '待取货' },
          { icon: '/static/status-icon3.png', text: '派送中' },
          { icon: '/static/status-icon4.png', text: '已完成' },
        ],
        allDataList: [
          { count: '600', text: '所有待接订单' },
          { count: '50', text: '我的待取货' },
          { count: '80', text: '我的派送中' },
        ]
      }
    },
    components: {
      showTime,
      showData,
      functionCard,
      commonTopNav
    },
    onLoad() {
      this.fetchAllData() // 数据展示和数据总览
    },
    methods: {
		// 快捷入口分类跳转
      toDetails(status) {
        uni.navigateTo({
          url: `/pages/order-details/order-details?status=${status}`
        })
      },
	  // 数据展示和数据总览
      async fetchAllData() {
        const res = await getAllData()
        uni.setStorageSync('orderData', res) //用来渲染数据展示
        this.allDataList[0].count = res.taotal_noorder_num  //所有待接单数量
        this.allDataList[1].count = res.quhuo_order_num //我的待取货
        this.allDataList[2].count = res.give_order_num // 我的配送中
        console.log(res, '数据总揽');
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F5F5F5;
  }

  .main-content {
    position: relative;
    @include wrap(702rpx);

    .entry-item {
      @include flexColumn();

      image {
        @include commonIconWh(48rpx, 0);
        margin-top: 34rpx;
        margin-bottom: 16rpx;
      }
    }
  }
</style>