aiot-app/pages/maintenance/order/order copy.vue

<template>
  <view>
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="保养工单"
      @clickLeft="back"
    ></uni-nav-bar>
    <template>
      <view class="tab-title">
        <view
          v-for="(item, index) in tabList"
          :key="index"
          class="tab-item"
          :class="index === pickTabIndex ? 'active' : ''"
          @click="changeChartsTab(index)"
        >
          {{ item.label }}
          <text v-if="index == 0" class="title-red">{{ item.number }}</text>
          <text v-else class="title-num">({{ item.number }})</text>
        </view>
      </view>
      <view class="tab-title__placeholder"></view>
    </template>

    <OrderTask
      v-for="(item, index) in tabList"
      :key="index"
      v-show="index === pickTabIndex"
      :list="pageList"
    ></OrderTask>
  </view>
</template>

<script>
import OrderTask from './OrderTask.vue'
import { post, get, postJ } from '@/utils/api.js'
let [page, size, isEnd] = [1, 10, true]
export default {
  components: {
    OrderTask
  },
  data () {
    return {
      tabList: [
        {
          value: 0,
          label: '待接收',
          list: [],
          number: 0
        },
        {
          value: 1,
          label: '执行中',
          list: [],
          number: 0
        },
        {
          value: 3,
          label: '已完成',
          list: [],
          number: 0
        }
      ],
      pageList: [],
      pickTabIndex: 0
    }
  },
  onLoad () {
    // this.getList()
  },
  onShow () {
    this.getFirstList()
    this.getStatus()
  },
  onReachBottom: function () {
    if (isEnd) {
      return
    }

    // 显示加载图标
    uni.showLoading({
      title: '数据加载中'
    })
    this.getMoreLists()
  },
  methods: {
    getStatus () {
      postJ(this.apiUrl + `/workOrder/getWorkOrderTotal`, {
        workOrderType: 2
      }).then(res => {
        let data = res.data
        this.tabList[0].number = data.waitExecutionNum
        this.tabList[1].number = data.executoryNum
        this.tabList[2].number = data.finishNum
      })
    },
    getFirstList: function () {
      page = 1
      isEnd = true
      this.getList()
    },
    getMoreLists: function () {
      //获取更多数据
      page++
      this.getList()
    },
    //获取列表数据
    getList () {
      let data = {
        page,
        size
      }
      const pickTabIndex = this.pickTabIndex
      let status = this.tabList[pickTabIndex].value
      post(
        this.apiUrl +
          `/workOrder/getWorkOrderListApp?page=${page}&size=${size}`,
        { status, workOrderType: 2 },
        true
      ).then(res => {
        let data = res.data.records
        if (page === 1) {
          this.pageList = res.data.records
        } else {
          this.pageList.push(...data)
        }
        isEnd = this.pageList.length >= res.data.total
        // page < pageTotal ? (isEnd = false) : (isEnd = true);
      })
    },
    //切换选项卡
    changeChartsTab (index) {
      this.pickTabIndex = index
      this.getFirstList()
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-title {
  position: fixed;
  z-index: 9;
  width: 100%;
  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
  height: $tab-height;
  line-height: $tab-height;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  box-sizing: border-box;
  .tab-item {
    width: 30%;
    text-align: center;
    font-size: 32rpx;
    color: $uni-text-color-grey;
  }

  .tab-item.active {
    color: $j-primary-border-green;
    border-bottom: 1px solid $j-primary-border-green;
  }
  .title-num {
    font-size: 26rpx;
  }
  .title-red {
    display: inline-block;
    font-size: 22rpx;
    padding: 0 10rpx;
    border-radius: 50rpx;
    color: #ffffff;
    background: red;
    line-height: 38rpx;
    position: absolute;
    top: 10rpx;
    min-width: 18rpx;
  }
}
</style>