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

<template>
  <div class="mainPage">
    <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>
      <div class="box">
        <discounts v-for="(item,index) in list" :key='index' @toUse='toUse' :data='item'></discounts>
        <noMore v-if="hasPic"></noMore>
      </div>
    </scroll>
  </div>
</template>

<script>
import line from '../../../common/icon/cicyle.png'
import logo from '../../../common/icon/logo-t.png'
import Line3 from '../../../common/icon/Line3.png'
import used from '../../../common/icon/already.png'
import failure from '../../../common/icon/inv.png'
// 上拉加载组件
import scroll from '../../../components/scroll/scroll'
import noMore from '../../../components/noMore/noMore'
import discounts from '../../../components/discounts/discounts'
export default {
  data () {
    return {
      logo,
      Line3,
      used,
      failure,
      pullUpLoad: true,
      pullUpLoadThreshold: 40,
      startY: 0,
      isloading: true,
      hasPic: false,
      hasMore: true,
      list: [
        {
          title: '小小外交官体验卡',
          desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
          time: '2018年02月17日',
          useType: '未使用',
          tag: '共享'
        },
        {
          title: '小小外交官体验卡',
          desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
          time: '2018年02月17日',
          useType: '已使用',
          tag: '商品'
        },
        {
          title: '小小外交官体验卡',
          desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程',
          time: '2018年02月17日',
          useType: '已失效',
          tag: '商品'
        }
      ],
      line
    }
  },
  components: {
    scroll,
    noMore,
    discounts
  },
  computed: {
    pullUpLoadObj: function () {
      return this.pullUpLoad
        ? {
          threshold: parseInt(this.pullUpLoadThreshold),
          txt: {
            more: this.pullUpLoadMoreTxt,
            noMore: this.pullUpLoadNoMoreTxt
          }
        }
        : false
    }
  },
  methods: {
    change (item, index) {
      this.active = index
    },
    toUse (item) {
      // console.log(item)
    },
    getList () {
      // console.log(111)
    }
  }
}
</script>

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