jsm-mall-h5-front/src/packageAttachment/pages/orderOfSales/index.vue

<template>
  <view class="return_of_parts" style="width: 100%; height: 100vh">
    <zj-page-container>
      <view class="list_info_state">
        <scroll-view scroll-x="true" class="scroll">
          <view class="box" v-for="(item, index) in stateList" :key="index" @tap.stop="stateIndex = index">
            <view
              :class="{
                selectox: stateIndex === index
              }"
              >{{ item.name }}</view
            >
            <view v-if="stateIndex === index" class="xhxh"></view>
          </view>
        </scroll-view>
      </view>
      <zj-page-fill
        @scrolltolower="carScrolltolower"
        @refresherrefresh="carRefresherrefresh"
        @refresherrestore="carRefresherrestore"
        :scrollAttribute="{
          'refresher-enabled': true,
          'refresher-triggered': refresherTriggered
        }"
      >
        <view class="list_view_lay">
          <block v-for="(item, index) in list" :key="index">
            <card :item="item" />
          </block>
        </view>
      </zj-page-fill>
    </zj-page-container>
  </view>
</template>

<script>
import zjPageContainer from '@/components/zj-page-container/zj-page-container.vue'
import zjPageFill from '@/components/zj-page-container/zj-page-fill.vue'
import card from './card.vue'
import { getStorage } from '@/common/utils/storage.js'
export default {
  components: {
    zjPageContainer,
    zjPageFill,
    card
  },
  data() {
    return {
      stateList: [
        {
          name: '全部',
          num: 0,
          type: ''
        },
        {
          name: '已保存',
          num: 0,
          type: 'SAVE'
        },
        {
          name: '已提交',
          num: 0,
          type: 'SUBMIT'
        },
        {
          name: '已支付',
          num: 0,
          type: 'PAYED'
        },
        {
          name: '已完成',
          num: 0,
          type: 'END'
        },
        {
          name: '已取消',
          num: 0,
          type: 'CANCEL'
        }
      ],
      stateIndex: 0,
      // 下拉刷新状态
      refresherTriggered: false,
      redcbol: false,
      pageNo: 1,
      pageSize: 20,
      list: [],
      partsNumber: '',
      isMore: true
    }
  },
  onLoad: function (option) {
    this.partsNumber = option.partsNumber || ''
    this.redc(true)
    uni.$on('updateOrderOfSales', () => {
      if (this.list.length % this.pageSize > 0) {
        this.redc(true, parseInt(this.list.length / this.pageSize) + this.pageSize)
      } else {
        this.redc(true, parseInt(this.list.length / this.pageSize))
      }
    })
  },
  onUnload() {
    uni.$off('updateOrderOfSales')
  },
  computed: {
    stateType() {
      return this.stateList[this.stateIndex].type
    },
    userInfo() {
      return getStorage('user')
    },
    idcard() {
      return this.userInfo.idCard
    }
  },
  watch: {
    stateType(newv) {
      this.redc(true)
    }
  },
  methods: {
    // 获取新件返还管理列表
    getList(pageSize) {
      this.$api
        .post('/app/worker/parts-sales/list', {
          pageNo: this.pageNo,
          pageSize: pageSize || this.pageSize,
          identity: this.idcard,
          partsNumber: this.partsNumber,
          status: this.stateType
        })
        .then(res => {
          if (pageSize) {
            if (res.data.records.length % this.pageSize > 0) {
              this.pageNo = parseInt(res.data.records.length / this.pageSize) + 1
            } else {
              this.pageNo = parseInt(res.data.records.length / this.pageSize)
            }
            if (res.data.records.length < pageSize) {
              this.isMore = false
            }
          } else if (res.data.records.length < this.pageSize) {
            this.isMore = false
          }
          if (this.refresherTriggered || this.redcbol) {
            this.list = res.data.records
            this.refresherTriggered = false
            this.redcbol = false
          } else {
            this.list = [...this.list, ...res.data.records]
          }
        })
        .catch(() => {
          if (this.refresherTriggered) {
            this.list = []
            this.refresherTriggered = false
          }
        })
    },
    // 滚动到底部
    carScrolltolower(e) {
      if (this.isMore) {
        this.pageNo++
        this.getList()
      }
    },
    // 触发下拉刷新
    carRefresherrefresh(e) {
      this.refresherTriggered = true
      this.redc()
    },
    // 切换更新数据
    redc(v, size) {
      this.redcbol = v
      this.isMore = true
      this.pageNo = 1
      this.getList(size)
    },
    // 下拉刷新结束
    carRefresherrestore(e) {}
  }
}
</script>

<style scoped lang="scss">
.return_of_parts {
  .list_info_state {
    width: 100%;
    height: 88rpx;
    box-sizing: border-box;
    background: #ffffff;
    position: relative;

    .scroll {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
    }

    .box {
      display: inline-block;
      width: auto;
      height: 88upx;
      margin-right: 30upx;
      position: relative;
      line-height: 88upx;

      .xhxh {
        position: absolute;
        left: 10%;
        bottom: 0;
        width: 80%;
        height: 6upx;
        background: #6da7ff;
      }
    }

    .selectox {
      color: #6da7ff;
    }

    .box:first-child {
      margin-left: 30upx;
    }
  }

  .list_view_lay {
    width: 100%;
    box-sizing: border-box;
    padding: 30upx;
  }
}
</style>