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

<template>
  <div class="mainPage">
    <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='courseOrderList.list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>
      <div class="box">
        <div class="order-card flex-h" v-for="(item,index) in courseOrderList.list" :key='index' :class="{'opacity' : item.status === 1}" @click="toDetail(item)">
          <div class="card-pic">
            <div :class="{'gray-location' : item.status === 1}"><span>{{returnLocationName(item.LocationId)}}</span></div>
            <img src="" class="cover" width="100%" height="100%" alt="">
          </div>
          <div class="card-msg">
            <div class="title">{{item.CourseName}}</div>
            <div class="text">付款方式：{{item.CourseObtaimType === 'cheng-coin' ? '城币支付' : '优惠券抵用'}}</div>
            <div class="text">下单时间：{{toolClass.dateFormat(item.CreateDate)}}</div>
          </div>
          <div class="card-price">
            <div class="price" style="white-space: nowrap;">￥ {{item.Price}}</div>
            <div class="type" :class="{'un-use' : item.IsDone === 0}">{{item.IsDone === 0 ? '未使用' : '已使用'}}</div>
          </div>
        </div>
        <!-- <noMore v-if="hasPic"></noMore> -->
      </div>
    </scroll>
  </div>
</template>

<script>
// 上拉加载组件
import scroll from '../../../components/scroll/scroll'
import noMore from '../../../components/noMore/noMore'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapUserActions, mapState: mapUserState } = createNamespacedHelpers('userCenter')
export default {
  data () {
    return {
      hasPic: false,
      pullUpLoad: true,
      pullUpLoadThreshold: 40,
      startY: 0,
      page: 1,
      isloading: true,
      hasMore: true,
      list: []
    }
  },
  components: {
    scroll,
    noMore
  },
  created () {
    var _that = this
    this.getCourseLocationList().then((res) => {
      // console.log(JSON.stringify(res))
      this.getCourseOrderList({ page: this.page })
    })
  },
  computed: {
    ...mapUserState({
      courseOrderList: x => x.courseOrderList,
      courseLocationList: x => x.courseLocationList,
    }),
    pullUpLoadObj: function () {
      return this.pullUpLoad
        ? {
          threshold: parseInt(this.pullUpLoadThreshold),
          txt: {
            more: this.pullUpLoadMoreTxt,
            noMore: this.pullUpLoadNoMoreTxt
          }
        }
        : false
    }
  },
  methods: {
    ...mapUserActions([
      'getCourseOrderList',
      'getCourseLocationList',
    ]),
    returnLocationName (id) {
      for (var n = 0; n < this.courseLocationList.length; n++) {
        if (this.courseLocationList[n].LocationId === id) {
          return this.courseLocationList[n].LocationName
        }
      }
    },
    getList () {
      var _that = this
      Math.ceil(this.courseOrderList.pagenum / this.courseOrderList.pagesize) > this.page ? this.hasMore = true : this.hasMore = false
      // this.list.length <= 8 ? this.hasMore = true : this.hasMore = false
      if (this.hasMore) {
        setTimeout(() => {
          this.getCourseOrderList({
            page: _that.page + 1
          }).then((res) => {
            if (res.list.length) {
              _that.page += 1
            }
          })
        }, 1000)
      } else {
        this.$refs.scroll.forceUpdate()
        return false
      }
    },
    toDetail (item) {
      this.$router.push({ name: 'lessonDetail', query: {id: item.CustomerCourseId} })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'page.scss';
</style>