aiot-app/pages/repair/order/order.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"
          v-text="item.label"
          :class="index === pickTabIndex ? 'active' : ''"
          @click="changeChartsTab(index)"
        ></view>
      </view>
      <view class="tab-title__placeholder"></view>
    </template>

    <view>
      <OrderTask
        v-for="(item, index) in tabList"
        :key="index"
        v-show="index === pickTabIndex"
        :list="item.list"
      >
      </OrderTask>
      <view class="fixed add">
        <u-button class="button" type="primary" @click="jump">报修</u-button>
      </view>
    </view>
    <!-- <view class="" v-if="pickTabIndex == 1">
			<OrderTask v-for="(item,index) in tabList" :key="index" :type="pickTabIndex+1" v-show="index === pickTabIndex"
			:list="item.list"></OrderTask>
		</view> -->
  </view>
</template>

<script>
import OrderTask from './OrderTask.vue'
import { post, postJ } from '@/utils/api.js'
let [page, size, isEnd] = [1, 10, true]
export default {
  components: {
    OrderTask
  },
  data () {
    return {
      tabList: [
        {
          label: '待执行',
          value: '0',
          list: []
        },
        {
          label: '执行中',
          value: '1',
          list: []
        },
        {
          label: '已完成',
          value: '2',
          list: []
        }
      ],
      pickTabIndex: 0,
      worksheetList: []
    }
  },
  onShow () {
    this.getFirstList()
  },
  onReachBottom: function () {
    if (isEnd) {
      return
    }
    this.getMoreLists()
  },
  methods: {
    jump () {
      uni.navigateTo({
        url: '../repair/index'
      })
    },
    getFirstList: function () {
      page = 1
      isEnd = true
      this.getList()
    },
    getMoreLists: function () {
      //获取更多数据
      page++
      this.getList()
    },
    changeChartsTab (index) {
      this.pickTabIndex = index
      this.getFirstList()
    },
    getList () {
      uni.showLoading({
        title: '加载中'
      })
      let paging = this.URLSearchParams({
        page,
        size
      })
      //2 - 99 [已完成]
      let searchStatus = this.tabList[this.pickTabIndex].value

      postJ(this.apiUrl + `/repair/info/getPage?` + paging, {
        searchStatus: searchStatus
      })
        .then(res => {
          let data = res.data.records
          //let data = [{repairsCode:'asd',sourceCode:'sad',status:'2',id:'1'}]
          let pageTotal = res.data.pages
          if (page === 1) {
            this.tabList[this.pickTabIndex].list = data
          } else {
            data.forEach(element => {
              this.tabList[this.pickTabIndex].list.push(element)
            })
          }
          console.log(this.tabList)
          page < pageTotal ? (isEnd = false) : (isEnd = true)
        })
        .then(() => {
          uni.hideLoading()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-title {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 82rpx;
  line-height: 82rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  z-index: 99;
  box-sizing: border-box;

  .tab-item {
    width: 50%;
    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;
  }
}
.fixed {
  position: fixed;
  width: 100%;
  left: 0;
}
.add {
  bottom: 0;
}
.button {
  background-color: #157a2c;
  border: none;
}
</style>