CommunityApp/pagesM/pages/coupon_center.vue

<template>
  <view class="dt-page">
    <template v-if="emptyType==0">
      <view class="voucher-list">
        <view v-for="(item, idx) in dataList" :key="idx" class="voucher">
          <DtCoupon :dataDetail="item"
          @visible="onVisible($event,idx)" @receive="onRecieve" @use="onUse" />
        </view>
      </view>
      
      <FootToolbar bgColor="#fff">
        <view slot="main" class="btn-voucher-wrap">
          <button @tap="tapToMineCoupon" class="dt-btn-submit btn-voucher">查看我的优惠券</button>
        </view>
      </FootToolbar>
    </template>
    <DtEmpty :type="emptyType" :tips="errMsg"/>
  </view>
</template>
<script>
import DtCoupon from '../comps/dt_coupon.vue'
import FootToolbar from '../comps/foot_toolbar.vue'
import DtEmpty from '../comps/dt_empty.vue'

export default {
  components:{
    DtCoupon,
    FootToolbar,
    DtEmpty
  },
  data () {
    return {
      sourceList:[],
      dataList: [
        // {
        //   isReceive:1,
        //   voucher_type:1,
        //   status:1,
        // },{
        //   isReceive:0,
        //   voucher_type:2,
        //   status:1,
        // },{
        //   isReceive:1,
        //   voucher_type:1,
        //   status:2,
        // }
      ],
      memberId:''
    }
  },
  methods:{
    //查看详情
    onVisible(ev, idx) {
      let dataList = this.dataList.slice(0)
      dataList[idx].isShowDetail = !dataList[idx].isShowDetail
      this.$set(this, 'dataList', dataList)
    },
    // 领取优惠券
    async onRecieve(item){
      console.log('get Voucher',item)
      let resp = await this.$api.couponExchange({
        memberId: this.memberId,
        couponId: item.id
      })
      if(resp.result){
        this.$dialog.success('领取成功')
        this.queryDataList()
      }else{
        this.$dialog.error('领取失败')
      }
    },
    onUse(){
      uni.navigateBack({ delta: 1 })
    },

    tapToMineCoupon(){
      uni.navigateTo({
        url:'/pagesM/pages/coupon_list'
      })
    },
    
    async queryDataList(){
      let resp = await this.$api.getCouponByStoreId({
        _isShowLoading:true,
        memberId:this.memberId
      })
      let list = resp || []
      list = list.slice(0,3)
      if(this.isLogin){
        list = list.filter((item)=>{
          return !item.isReceive
        })
      }else{// 未登录全部显示未领取
        list.map((item)=>{
          item.isReceive = false
          return item
        })
      }
      if(list.length>0){
        this.emptyType = 0
      }else{
        this.emptyType = 1
        this.errMsg = '已领取全部优惠券'
      }
      this.dataList.length = 0
      this.dataList = this.dataList.concat(list)
    },

    onLoadPage(){
	  wx.hideShareMenu();
      this.isLogin = this.$auth.isAuth
      this.memberId = this.$auth.getMemberId()
      this.queryDataList()
    }
  },
}
</script>

<style lang="scss" scoped>

.dt-page{
  min-height:100vh;
  background-color:#f2f2f2;
  .voucher-list {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 10upx;
    padding-top:30upx;
    margin:0 30upx;
    .voucher{
      margin-bottom:30upx;
    }
  }

  .btn-voucher-wrap{
    display:flex;
    justify-content: center;
    align-items: center;
    width:100vw;
    height:110upx;
    background-color:#fff;
    .btn-voucher{
      width:690upx;
      height:80upx;
      line-height:80upx;
      color:#fff;
      background-color:$dt-color-primary; 
      font-size: 30upx;
    }
  }
}
</style>