LSM_OIL_SITE/pages/orderList/orderList.vue

<template>
  <view class="content my-bg">
    <cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
      <block slot="backText">返回</block>
      <block slot="content">加油记录</block>
    </cu-custom>
    <scroll-view scroll-x class="bg-white nav">
      <view class="flex text-center">
        <view
          class="cu-item flex-sub"
          :class="index==TabCur?'text-orange cur':''"
          v-for="(item,index) in tabList"
          :key="index"
          @tap="tabSelect"
          :data-id="index"
        >{{item}}</view>
      </view>
    </scroll-view>
    <view class="padding　 padding-bottom-0">
      <view v-show="TabCur==0" class="order-list">
        <view 　v-for="item in allOrder" v-if="allOrder.length" :key="item.orderID">
          <OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
        </view>
        <view v-if="allOrder.length<1">
          <Empty />
        </view>
        <view v-show="load.isLoadMore1">
          <uni-load-more :status="load.loadStatus1"></uni-load-more>
        </view>
      </view>
      <view v-show="TabCur==1" class="order-list">
        <view v-for="item in payingOrder" v-if="payingOrder.length" :key="item.orderID">
          <OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
        </view>
        <view v-if="payingOrder.length<1">
          <Empty />
        </view>
        <view v-show="load.isLoadMore2">
          <uni-load-more :status="load.loadStatus2"></uni-load-more>
        </view>
      </view>
      <view v-show="TabCur==2" class="order-list">
        <view 　 v-for="item in finishedOrder" v-if="finishedOrder.length" :key="item.orderID">
          <OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
        </view>
        <view v-if="finishedOrder.length<1">
          <Empty />
        </view>
        <view v-show="load.isLoadMore3">
          <uni-load-more :status="loadStatus3"></uni-load-more>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import cloudSiteApi from '@/api/cloud-site.js'
import OrderItem from '@/components/order-item'
import UniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
import Empty from '@/components/Empty'
export default {
  components: {
    OrderItem,
    Empty,
    UniLoadMore
  },
  data() {
    return {
      tabList: [
        '全部', '待支付', '已支付'
      ],
      TabCur: 0,
      pageNumber: 1,
      istate: -3,
      scrollLeft: 0,
      order: {
        istate: 0,
        vol: 3,
        oilName: '0#',
        orderID: '15979997825872',
        oilCode: '12396989',
        oilSiteName: '疯疯疯加油站',
        carNo: '皖A12354',
        sourceType: 3,
        realamount: 4.66,
        credateDatetime: '2020-10-12 12:30:10'
      },
      allOrder: [],
      finishedOrder: [],
      payingOrder: [],
      loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      isLoadMore: false, //是否加载中
      pageNumber1: 1,
      pageNumber2: 1,
      pageNumber3: 1,
      load: {
        isLoadMore1: false,
        loadStatus1: 'loading',
        isLoadMore2: false,
        loadStatus2: 'loading',
        isLoadMore3: false,
        loadStatus3: 'loading',
      }
    }
  },
  created() {
    this.loadList(-3, this.pageNumber1)
    this.loadList(0, this.pageNumber2)
    this.loadList(1, this.pageNumber3)
  },

  onReachBottom() { //上拉触底函数
    if (this.TabCur === 0) {
      if (!this.load.isLoadMore1) { //此处判断，上锁，防止重复请求
        this.load.isLoadMore1 = true
        this.calcIstate(this.TabCur)
      }
    }
    if (this.TabCur === 1) {
      if (!this.load.isLoadMore2) { //此处判断，上锁，防止重复请求
        this.load.isLoadMore2 = true
        this.calcIstate(this.TabCur)
      }
    }
    if (this.TabCur === 2) {
      if (!this.load.isLoadMore3) { //此处判断，上锁，防止重复请求
        this.load.isLoadMore3 = true
        this.calcIstate(this.TabCur)
      }
    }
  },
  methods: {
    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
    },

    calcIstate(id) {
      switch (id) {
        case 0:
          this.istate = -3
          this.loadList(this.istate, this.pageNumber1)
          break
        case 1:
          this.istate = 0
          this.loadList(this.istate, this.pageNumber2)
          break
        case 2:
          this.istate = 1
          this.loadList(this.istate, this.pageNumber3)
          break
      }
    },
    loadList(istate, pageNumber) {
      const data2 = {
        istate: istate, //类型：Number  必有字段  备注：订单状态 0待支付 1支付成功 -3 查所有
        pageIndex: pageNumber //类型：Number  必有字段  备注：查询第几页,默认一页10条
      }
      cloudSiteApi.getSiteOrder(data2).then(res => {
        console.log(data2.istate, data2.pageIndex)
        if (res.code === 20000) {
          switch (istate) {
            case -3:
              this.allOrder = this.allOrder.concat(res.data)
              if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
                this.load.isLoadMore1 = true
                this.load.loadStatus1 = 'nomore'
              } else {
                this.pageNumber1++
                this.load.isLoadMore1 = false
              }
              break
            case 0:
              this.payingOrder = this.payingOrder.concat(res.data)
              if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
                this.load.isLoadMore2 = true
                this.load.loadStatus2 = 'nomore'
              } else {
                this.pageNumber2++
                this.load.isLoadMore2 = false
              }
              break
            case 1:
              this.finishedOrder = this.finishedOrder.concat(res.data)
              if (res.data.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
                this.load.isLoadMore3 = true
                this.load.loadStatus3 = 'nomore'
              } else {
                this.pageNumber3++
                this.load.isLoadMore3 = false
              }
              break

          }
        }
      })
    }
  }
}
</script>

<style scoped>
.content {
  min-height: 100%;
}

.order-list .order-item:last-of-type {
  margin-bottom: 0;
}
</style>