<template>
  <div class="view-voucher">
    <van-list
      v-model="loading"
      :finished="finished"
      offset="50"
      finished-text="没有更多了"
      @load="handleGetCouponList"
    >
      <template v-for="item in voucherList">
        <voucherCard
          :key="item.couponId"
          :voucherData="item"
        />
      </template>
    </van-list>
  </div>
</template>

<script>
import voucherCard from '@/pageComponents/voucherCard'
import { getCouponList } from '@/api'
export default {
  name: 'Voucher',
  components: {
    voucherCard,
  },
  data () {
    return {
      finished: false,
      loading: false,
      formData: {
        pageIndex: 1,
        pageSize: 20,
      },
      disabledCoupons: false,
      voucherList: [],
    }
  },
  methods: {
    handleGetCouponList () {
      getCouponList(this.formData).then(res => {
        if (res.length < 20) {
          this.finished = true
        }
        this.loading = false
        this.voucherList.push(...res)
        this.formData.pageIndex++
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.view-voucher {
  font-size: 16px;
  padding: 10px 12px;
  background-color: $themBgColor;
}
</style>