wanyu_frontend/pages/index/index.vue

<template>
	<view class="ctr">
    <view class="fixed-top">
      <me-top title="接单大厅"></me-top>
    </view>

    <me-empty-space :height="listMarginTop"></me-empty-space>
    <view class="list">
      <view class="order-item" v-for="(item, index) in data.list" :key="index">
        <view class="top flex-sb">
          <view class="type flex-l">{{item.order_info.item_title}}</view>
          <view class="price flex-r important-color" v-if="item.order_info.receive_type === 1">上门报价</view>
          <view class="price flex-r" v-else>平台已收款</view>
        </view>
        <view class="content flex-sb">
          <view class="left" @click="toDetail(item.id)">
            <view class="address-name flex-l">
              {{item.order_info.address}}
            </view>
            <view class="address flex-l">
              安徽省蚌埠市禹会区
            </view>
            <view class="time-ctr flex-l" v-if="item.order_info.plan_time !== null">
              <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
              <text class="time">{{helpers.formatDate(item.order_info.plan_time)}}</text>
            </view>
          </view>
          <view class="right">
            <view class="icon-ctr flex-c">
              <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
            </view>
            <view class="distance flex-c">8.34公里</view>
          </view>
        </view>
        <view class="btn-ctr flex-sb">
          <me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
          <me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
        </view>
      </view>
      <view class="order-item">
        <view class="top flex-sb">
          <view class="type flex-l">日常保洁</view>
          <view class="price flex-r important-color">上门报价</view>
        </view>
        <view class="content flex-sb">
          <view class="left">
            <view class="address-name flex-l">
              金城花园(天府二街)336号
            </view>
            <view class="address flex-l">
              四川省成都市武侯区
            </view>
            <view class="time-ctr flex-l">
              <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
              <text class="time">周日 10月08日 12:30</text>
            </view>
          </view>
          <view class="right">
            <view class="icon-ctr flex-c">
              <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
            </view>
            <view class="distance flex-c">8.34公里</view>
          </view>
        </view>
        <view class="discount flex-l">已支付订金：30元抵扣50元</view>
        <view class="btn-ctr flex-sb">
          <me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
          <me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
        </view>

      </view>
      <view class="order-item">
        <view class="top flex-sb">
          <view class="type flex-l">日常保洁</view>
          <view class="price flex-r important-color">上门报价</view>
        </view>
        <view class="content flex-sb">
          <view class="left">
            <view class="address-name flex-l">
              金城花园(天府二街)
            </view>
            <view class="address">
              广东省茂名市茂南区金城路26号大院附近
            </view>
            <view class="time-ctr flex-l">
              <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
              <text class="time">周日 10月08日 12:30</text>
            </view>
          </view>
          <view class="right">
            <view class="icon-ctr flex-c">
              <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
            </view>
            <view class="distance flex-c">8.34公里</view>
          </view>
        </view>
        <view class="discount flex-l">已支付订金：30元抵扣50元</view>
        <view class="btn-ctr flex-sb">
          <me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
          <me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
        </view>
      </view>
    </view>
    <me-empty-space height="100"></me-empty-space>
	</view>
</template>

<script setup>
import {onLoad, onShow} from '@dcloudio/uni-app'
import {ref, reactive, computed, watch, inject} from 'vue'
import MeIcon from "../../components/me-icon/me-icon";
import MeButton from "../../components/me-button/me-button";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeTop from "../../components/me-top/me-top.vue";
import helpers from "../../utils/helpers";
import api from "../../api/api";

const listMarginTop = computed(() => {
  return (inject('globalData').statusBarH + (inject('globalData').customBarH - inject('globalData').statusBarH)) * 2
})

const toDetail = (id) => {
  helpers.jumpToPage('order-info', `id=${id}`)
}

onLoad(() => {
  getList()
})

const data = reactive({
  page: 1,
  page_size: 10,
  last_page: 0,
  refresherTriggered: false,
  list: []
})
const getList = () => {
  api.orderDispatchList({page: data.page, page_size: data.page_size}).then(res => {
    data.last_page = res.last_page
    if (data.page === 1) {
      data.list = res.data;
      data.refresherTriggered = false;
    } else {
      data.list = data.list.concat(helpers.deepObj(res.data))
    }
    // data.isShowSkeleton = false
  }).catch(() => {})
}

const refresh = () => {
  data.refresherTriggered = true
  data.page = 1
  getList()
}
</script>

<style lang="scss" scoped>
.ctr {
  padding: 0 32rpx;
  box-sizing: border-box;
  .fixed-top {
    position: fixed;
    top: 0;
    background-color: var(--pageBgColor);
    width: 100%;
  }
}
</style>