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

<template>
  <div class="mainPage">
    <nav class="flex-h" v-if='false'>
      <a class="flex-item" v-for="(item,index) in nav" :key="index" :class="{'active':index==active}" @click="change(item,index)">{{item}}</a>
    </nav>
    <div style="background:#fff;">
    <!-- <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='data[active].list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'> -->
      <div class="box">
        <div v-if="active == 0">
          <discounts v-for="(item,index) in data[0].list" :key='index' @toUse='toUse' :data='item' @toDetail="toCardDetail(item)"></discounts>
          <noMore v-if="data[active].hasPic"></noMore>
        </div>
        <div v-if="active == 1">
          <div class="fitness-card" v-for="(item,index) in data[1].list" :key='index'>
            <div :class="{'opacity' : item.CardStatus == 'expire' || item.CardStatus == 'used', 'gray': item.CardStatus == 'used'}" @click="toGymCardDetail(item)">
              <div class="card-top">
                <div class="top-left">
                  <img :src="logo" alt="">
                  <div class="price">
                    <span>￥</span>
                    <h1>{{parseInt(item.Price)}}</h1>
                    <span>元</span>
                  </div>
                </div>
                <div class="top-right">
                  <img :src="Line3" alt="">
                  <div>{{item.CustomerGymName}}</div>
                  <div>{{item.CardShareInfo}}</div>
                </div>
              </div>
              <div class="card-bottom">
                <img :src="line" alt="">
                <div class="time">有效期：{{toolClass.dateFormat(item.EndDate,'yyyy-MM-dd')}}</div>
                <div class="status" :class="{'gray-location' : item.CardStatus == 'used'}">
                  <span v-if="item.GymType == 'year'">年卡</span>
                  <span v-if="item.GymType == 'quarter'">季卡</span>
                  <span v-if="item.GymType == 'month'">月卡</span>
                  <span v-if="item.GymType == 'once'">次卡</span>
                </div>
              </div>
            </div>
            <div class="useType">
              <img :src="used" alt="已使用" v-if="item.CardStatus == 'used'" width="100%" height="100%">
              <img :src="failure" alt="已失效" v-if="item.CardStatus == 'expire'" width="100%" height="100%">
            </div>
          </div>
          <noMore v-if="data[active].hasPic"></noMore>
        </div>
      </div>
    </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'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapCardState, mapActions: mapCardActions } = createNamespacedHelpers('card')
export default {
  data () {
    return {
      nav: ['课程体验卡', '健身卡'],
      active: 0,
      logo,
      Line3,
      used,
      failure,
      pullUpLoad: true,
      pullUpLoadThreshold: 40,
      startY: 0,
      isloading: true,
      data: [
        {
          hasPic: false,
          hasMore: true,
          page: 1,
          pagesize: 1,
          list: []
        },
        {
          hasPic: false,
          hasMore: true,
          page: 0,
          pagesize: 10000,
          list: []
        }
      ],
      line
    }
  },
  components: {
    scroll,
    noMore,
    discounts
  },
  computed: {
    pullUpLoadObj: function () {
      return this.pullUpLoad
        ? {
          threshold: parseInt(this.pullUpLoadThreshold),
          txt: {
            more: this.pullUpLoadMoreTxt,
            noMore: this.pullUpLoadNoMoreTxt
          }
        }
        : false
    },
    ...mapCardState({
      gymCardList: x => x.gymCardList
    })
  },
  created () {
    this.change('', 0)
    this.getCardList().then((res) => {
      if (res) {
        for (var n = 0; n < res.length; n++) {
          let useType = '已使用'
          let nowDate = new Date().valueOf()
          let endDate = new Date(res[n].EndDate).valueOf()
          // if (res[n].Status === 2) {
          //   useType = '已使用'
          // } else if (res[n].Status === 1 && nowDate > endDate) {
          //   useType = '已失效'
          // } else {
          //   useType = '未使用'
          // }
          this.data[0].list.push({
            title: res[n].CustomerCardName,
            desc: res[n].Share.CardUseRule,
            time: this.toolClass.dateFormat(res[n].EndDate, 'yyyy-MM-dd'),
            useType: useType,
            tag: '共享',
            CustomerCourseId: res[n].CustomerCourseId,
            CustomerCardId: res[n].CustomerCardId
          })
        }
      } else {
        this.data[this.active].hasPic = true
      }
    })
  },
  methods: {
    ...mapCardActions([
      'getgymCardList',
      'getCardList',
    ]),
    change (item, index) {
      this.active = index
      this.getList('change')
    },
    toUse (item) {
      console.log(item)
      this.$router.push({ name: 'lessonDetail', query: { id: item.CustomerCourseId } })
    },
    getList (param) {
      if (this.active === 0) {

      } else {
        if (param === 'change') {
          this.data[this.active].page = 0
        }
        if (this.data[this.active].hasMore) {
          this.getgymCardList({ page: this.data[this.active].page, pagesize: this.data[this.active].pagesize }).then((res) => {
            this.data[this.active].list = this.data[this.active].list.concat(this.gymCardList)
            this.data[this.active].page++
            if (this.gymCardList.length < this.data[this.active].pagesize) {
              this.data[this.active].hasMore = false
            }
            if (this.data[this.active].list.length <= 0) {
              this.data[this.active].hasPic = true
            }
          })
        } else {
          this.$refs.scroll.forceUpdate()
        }
      }
    },
    toGymCardDetail (item) {
      this.$router.push({ name: 'gymCardDetail', query: { CustomerGymId: item.CustomerGymId } })
    },
    toCardDetail (item) {
      this.$router.push({ name: 'cardDetail', query: { id: item.CustomerCardId } })
    }
  }
}
</script>

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