wechat/src/pages/user/orderList/index.vue

<template>
  <div class="mainPage flex-v">
    <!-- <div class="top">
      <topCaseInfo :data="topCaseInfoData" :userName="userInfo.customer != undefined ? userInfo.customer.CustomerName : ''"></topCaseInfo>
    </div> -->
    <div class="flex-item">
      <div class="flex-h">
        <div class="flex-item">
          <!-- <ul>
            <li v-for="(item,index) in orders.list" :key="index">
              <orderListItem :data="item"></orderListItem>
            </li>
          </ul> -->
          <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='orders.list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>
            <ul>
              <li v-for="(item,index) in orders.list" :key="index">
                <orderListItem :data="item"></orderListItem>
              </li>
            </ul>
          </scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import scroll from '../../../components/scroll/scroll'
import noMore from '../../../components/noMore/noMore'
import topCaseInfo from '../../../components/topCaseInfo/index'
import orderListItem from '../../../components/orderListItem/index'
import { mapState, createNamespacedHelpers } from 'vuex'
// const { mapActions: actions } = createNamespacedHelpers('app')

const { mapState: mapOrdersState, mapActions: mapOrdersActions } = createNamespacedHelpers('goodsOrder')

export default {
  name: '',
  data () {
    return {
      pullUpLoad: true,
      pullUpLoadThreshold: 40,
      startY: 0,
      page: 1,
      pagesize: 10,
      isloading: true,
      hasMore: true,
    }
  },
  computed: {
    ...mapState({
      userInfo: x => x.userCenter.userInfo,
    }),
    ...mapOrdersState({
      orders: x => x.orders,
    }),
    pullUpLoadObj: function () {
      return this.pullUpLoad
        ? {
          threshold: parseInt(this.pullUpLoadThreshold),
          txt: {
            more: this.pullUpLoadMoreTxt,
            noMore: this.pullUpLoadNoMoreTxt
          }
        }
        : false
    }
  },
  components: {
    topCaseInfo,
    orderListItem,
    scroll,
    noMore,
  },
  created () {
    this.getCustomerGoodsOrder({
      page: this.page,
      pagesize: this.pagesize,
    })
  },
  methods: {
    ...mapOrdersActions([
      'getCustomerGoodsOrder',
    ]),
    getList () {
      var _that = this
      Math.ceil(this.orders.pagenum / this.orders.pagesize) > this.page ? this.hasMore = true : this.hasMore = false
      // this.list.length <= 8 ? this.hasMore = true : this.hasMore = false
      if (this.hasMore) {
        this.page = this.page+1
        setTimeout(() => {
          _that.getCustomerGoodsOrder({
            page: _that.page,
            pagesize: _that.pagesize,
          })
        }, 1000)
      } else {
        this.$refs.scroll.forceUpdate()
        return false
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>