aiot-app/pages/sparepart/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 :class="pickTabIndex == 4 ? 'pb40' : ''">
      <view class="" v-if="pickTabIndex !== 4">
        <OrderTask
          v-for="(item, index) in tabList"
          :key="index"
          v-show="index === pickTabIndex"
          :list="item.list"
        >
        </OrderTask>
      </view>

      <!-- <	<OrderTask> v-if="pickTabIndex == 0" :list="worksheetList" :type="pickTabIndex"></OrderTask>
			<OrderTask v-if="pickTabIndex == 1" :list="worksheetList" :type="pickTabIndex"></OrderTask>
			<OrderTask v-if="pickTabIndex == 2" :list="worksheetList" :type="pickTabIndex"></OrderTask>
			<OrderTask v-if="pickTabIndex == 3" :list="worksheetList" :type="pickTabIndex"></OrderTask>-->
      <OrderSpare
        v-if="pickTabIndex == 4"
        :list="tabList[pickTabIndex].list"
      ></OrderSpare>
    </view>

    <view class="fixed" v-if="pickTabIndex == 4">
      <u-button type="primary">归还</u-button>
    </view>
  </view>
</template>

<script>
import OrderTask from './OrderTask.vue'
import OrderSpare from './OrderSpare.vue'
import { post } from '@/utils/api.js'
export default {
  components: {
    OrderTask,
    OrderSpare
  },
  data () {
    return {
      params: {
        page: 1,
        size: 10
      },
      isEnd: true,
      // tabList: ['全部', '未归还', '已归还', '已使用', '所有备件'],
      tabList: [
        {
          value: '0',
          label: '全部',
          list: []
        },
        {
          value: '1',
          label: '未归还',
          list: []
        },
        {
          value: '2',
          label: '已归还',
          list: []
        },
        {
          value: '3',
          label: '已使用',
          list: []
        },
        {
          value: '4',
          label: '所有备件',
          list: []
        }
      ],
      pickTabIndex: 0
    }
  },
  onLoad () {
    //this.getList()
  },
  onReachBottom: function () {
    if (this.isEnd) {
      return
    }
    this.params.page++
    this.getList()
  },
  methods: {
    getList () {
      uni.showLoading({
        title: '加载中'
      })
      let url = null,
        params = {
          ...this.params
        }
      if (this.tabList[this.pickTabIndex].value == 4) {
        url = `${this.apiUrl}/feature/book/spareparts/sparepartList`
        params.sparepartTypeCode = '03000000000000000000'
      }
      //2 - 99 [已完成]
      post(url, params)
        .then(res => {
          if (this.params.page === 1) {
            this.tabList[this.pickTabIndex].list = res.data.items
          } else {
            res.data.items.forEach(element => {
              this.tabList[this.pickTabIndex].list.push(element)
            })
          }
          this.params.page < res.data.pageTotal
            ? (this.isEnd = false)
            : (this.isEnd = true)
        })
        .then(() => {
          uni.hideLoading()
        })
    },
    changeChartsTab (index) {
      this.pickTabIndex = index
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-title {
  position: fixed;
  z-index: 9;
  width: 100%;
  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: 25%;
    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;
  }
}
.pb40 {
  padding-bottom: 80rpx;
}
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>