
<template>
  <sail-page type="loading-view" title="我的优惠券" isHead>
    <div slot="content">
       <emptyPageCard :isEmptyType="myGetCouponListInfo.length===0?'coupon':'normal'"/>
    	<div class="coupon">
        <!-- <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
          :offset="10"
        > -->
      		<div class="coupon-wrap" v-for="(myCoupon,index) in myGetCouponListInfo" :key="index">
      			<div class="coupon-wrap__theme">
      				<p class="coupon-wrap__theme_img">
      					<img v-if="myCoupon.status == 2 && myCoupon.isOverTime == 2" class="coupon-wrap_img" src="@/assets/img/common_pic_coupon@3x.png" alt="">
                <img v-if="myCoupon.status == 2 && myCoupon.isOverTime == 3" class="coupon-wrap_img" src="@/assets/img/common_pic_coupon@3x.png" alt="">
                <img v-if="myCoupon.status == 3" class="coupon-wrap_img" src="@/assets/img/common_pic_coupon_d@3x.png" alt="">
                <img v-if="myCoupon.status == 2 && myCoupon.isOverTime == 1" class="coupon-wrap_img" src="@/assets/img/common_pic_coupon_d@3x.png" alt="">
      				</p>
      				<div class="coupon_content">
      					<p class="coupon_size">{{myCoupon.couponName}}</p>
      					<p>
      						<span class="coupon_price"><b class="money">￥</b>{{myCoupon.couponFee}}</span>
      						<span class="coupon_size coupon_opacity">满{{myCoupon.minimumFee}}元使用</span>
      					</p>
                <p class="coupon_code"> 优惠码：{{myCoupon.couponCode}}</p>
      					<div class="coupon-details coupon_opacity coupon_flex">
      					 <p class="coupon_line"> </p>               
      					 <p class="coupon-details coupon_opacity" v-if="myCoupon.status == 2 && myCoupon.isOverTime == 2">                    
                   一 有效期：{{myCoupon.useStartTime}} - {{myCoupon.useEndTime}}  一
                 </p>
                 <p class="coupon-details coupon_opacity" v-if="myCoupon.status == 3">
                  此券已使用
                 </p>
                 <p class="coupon-details coupon_opacity" v-if="myCoupon.status == 2 &&myCoupon.isOverTime == 1">
                  此券已过期
                 </p>
      					 <p class="coupon_line"> </p>
      					</div>

      				</div>
      			</div>
      		</div>
    	<!-- 	</van-list> -->
    	</div>
    </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import emptyPageCard from "@/common/widget/emptyPageCard.vue";
import { mapState } from "vuex";
import { List } from "vant"; //继续加载后面数据
export default {
  components: {
    sailPage,
    emptyPageCard
  },
  computed:{
    ...mapState({
      myGetCouponListInfo:state => state.couponModule.myGetCouponListInfo
    })
  },
  data: function(){
    return {
      list: [],
      loading: false,
      finished: false,
      currentPage: 0
         
    }; 
  },
  asyncData({store,route}) {
    return store.dispatch("couponModule/getMyCouponInfo",{
      pn:1,
      pageSize:1000
    }).then(res=>{
          
          
    });
  },
  methods: {
    // onLoad() {
    //  this.currentPage++;
    // // 
    //  this.$store.dispatch('couponModule/getMyCouponInfo',{
    //    pn:this.currentPage,
    //    pageSixe:10
    //   }).then(res=> {
    //     this.loading = false          
    //     if(res.data.data.list.length === 0) {
    //      this.finished = true;
    //      return
    //     }
    //     this.$store.commit('couponModule/SET_COUPON_LIST_ADD_INFO', res.data.data.list)
    //     //
    //   })       
    // }
  }
};
</script>
<style lang="less">
   .coupon {
     .van-list {
       height: 90vh;
       overflow: scroll;
     }
   }
</style>
<style lang="less" scoped>
.cube-page {
  background: #ffffff
}
.coupon {
	background: #ffffff;
  width: 100vw;
  min-height: 100vh;
}
.coupon-wrap {
	margin-top: 10px;
}
  .coupon-wrap__theme {
  	width: 356px;
  	min-height:120px;
  	margin: 0 auto;
  	position: relative;
  	.coupon-wrap__theme_img {
  		//padding: 15px 0;     
  	}
    .coupon_code {
      width: 100%;
      line-height: 20px;
      text-align: center;
      font-size: 13px;
      color: #fff;
    }
  	.coupon-wrap_img {
  		width: 356px;
  		height:120px;
  	}
  	.coupon_content {
  		position: absolute;
  		z-index: 10;
      overflow: hidden;
  		line-height: 30px;
  		top:10px;
      text-align: center;
      width: 100%;
  		//left: 27%;
  		/* transform: translate(-50%); */
  	}
  	.coupon_size {
      margin-left: 5px;
  		font-size: 15px;
  		color: #FFFFFF;
      width: 100%;  
  	}
  	.coupon_price {
  		font-size: 30px;
  		color: #fff;
      width: 100%;
      
      .money {
        display: inline-block;
        height: 30px;
        font-size: 14px;
      }
  	}
  	.coupon_opacity {
  		opacity: 0.65;
  	}
  	.coupon-details {
      width: 100%;
      height: 20px;
      line-height: 20px;
      text-align: center;
  		font-size: 13px;
  		color: #fff;
  	}
  }
</style>
