program/src/pages/coupons/index.vue

<template>
  <div id="game_record_container">
    <van-tabs :active="active" @change="clearShow" color="#4B3AB0" line-width=54px>
      <van-tab title="待领取" name="0">
        <div class="quan_list margin-top-sm" v-if="rec_list.length > 0">
          <text class="padding-left">共{{rec_list.length}}张</text>

          <div v-for="(item,index) in rec_list" :key="index">
            <div class="quan_container container" >
            <van-row gutter="10">
              <van-col span="17" offset="1">
                <div class="padding-top">
                  <text class="title">{{ item.name }}</text>
                </div>
                <div v-if="item.validity_time.type==0"> 
                  <text class="subtitle text-sm">{{ item.validity_time.start_time_format }} 至 {{ item.validity_time.end_time_format }} 领取有效</text>
                </div>
                
                <div v-if="item.validity_time.type==1">
                  <text class="subtitle text-sm">{{ item.validity_time.time_format }} 之前领取有效</text>
                </div>
 
                <van-row gutter="9"> 
                  <van-col span="17" >
                   <!-- 核销券 -->
                   <view style="margin-top:36rpx" v-if="item.type==1">
                     <text class="time margin-right-xs">{{ item.discount.time }}</text>
                     <text class="time_text" v-if="item.discount.type==0">分钟</text>
                     <text class="time_text" v-if="item.discount.type==1">次</text>
                   </view>

                   <!-- 满减券 -->
                   <view style="margin-top:36rpx" v-if="item.type==2">
                     <text class="time_text">满</text>
                     <text class="time margin-lr-xs">{{ item.discount.full }}</text>
                     <text class="time_text">减</text>
                     <text class="time margin-left-xs">{{ item.discount.reduce }}</text>
                   </view>

                   <!-- 折扣券 -->
                   <view style="margin-top:36rpx" v-if="item.type==3">
                     <text class="time_text">打</text>
                     <text class="time margin-lr-xs">{{ item.discount.discount_format }}</text>
                     <text class="time_text">折</text>
                   </view>

                   <!-- 随机券 -->
                   <view style="margin-top:36rpx" v-if="item.type==4">
                     <text class="time_text">随机</text>
                     <text class="time margin-lr-xs">{{ item.discount.start }}</text>
                     <text class="time_text">至</text>
                     <text class="time margin-lr-xs">{{ item.discount.end }}</text>
                     <text class="time_text">元</text>
                   </view>
                 </van-col> 

                  <van-col span="7">
                    <view class="margin-top-xl" @click="ruleShow(item.coupon_category_id)">
                      <text class="text-sm text-grey rule">使用规则</text>
                    </view>
                  </van-col>  
               </van-row>

              </van-col>
              <van-col span="5" offset="1" class="" @click="get_ticket(item)">
                <view class="get_ticket_text">领取</view>
              </van-col>
            </van-row>
           </div>
                     
           <!--    描述-->
           <view v-if="is_ruleShow == item.coupon_category_id">
             <view class="flex justify-center">
              <view
              class="desc"
              v-html="item.explain"
              >

             </view>
            </view>
          </view>
         </div>

        </div>
        <van-empty image="error" description="暂无可领券" v-else/>
      </van-tab>

      <van-tab title="已领取" name="1">
        <div class="quan_list margin-top-sm ">
          <text class="padding-left">共{{cp_list.length}}张</text>

          <div v-for="(item,index) in cp_list" :key="index">
            <div class="quan_container_get container">
            <van-row gutter="10">
              <van-col span="17" offset="1">
                <div :class="item.type==1?'margin-bottom padding-top':'padding-top'">
                  <text class="title">{{ item.name }}</text>
                </div>

                <div>
                  <text v-if="!(item.type==1)" class="subtitle text-sm">{{ item.start_time }} 至 {{ item.end_time }} 可使用</text>
                </div>
               
                <van-row gutter="9"> 
                  <van-col span="17" >
                    <!-- 核销券 -->
                    <view style="margin-top:36rpx" v-if="item.type==1">
                      <text class="time margin-right-xs">{{ item.time }}</text>
                      <text class="time_text" v-if="item.discount_type==0">分钟</text>
                      <text class="time_text" v-if="item.discount_type==1">次</text>
                    </view>

                    <!-- 满减券 -->
                    <view style="margin-top:36rpx" v-if="item.type==2">
                      <text class="time_text">满</text>
                      <text class="time margin-lr-xs">{{ item.full }}</text>
                      <text class="time_text">减</text>
                      <text class="time margin-left-xs">{{ item.reduce }}</text>
                    </view>

                    <!-- 折扣券 -->
                    <view style="margin-top:36rpx" v-if="item.type==3">
                      <text class="time_text">打</text>
                      <text class="time margin-lr-xs">{{ item.discount_format }}</text>
                      <text class="time_text">折</text>
                    </view>

                    <!-- 随机券 -->
                    <view style="margin-top:36rpx" v-if="item.type==4">
                      <text class="time_text">减</text>
                      <text class="time margin-lr-xs">{{ item.random }}</text>
                      <text class="time_text">元</text>
                    </view>
                  </van-col> 

                  <van-col span="7">
                    <view class="margin-top-xl" @click="ruleShow(item.coupon_category_id)">
                      <text class="text-sm text-grey rule">使用规则</text>
                    </view>
                  </van-col>  
                </van-row>

              </van-col>
              <van-col span="5" offset="0">
                <view class="get_ticket_text" v-if="item.status==2">已使用</view>
                <view class="get_ticket_text" v-else>已领取</view>
              </van-col>
            </van-row>
            </div>

            <!--    描述-->
           <view v-if="is_ruleShow == item.coupon_category_id">
             <view class="flex justify-center">
              <view
              class="desc"
              v-html="item.explain"
              >

             </view>
            </view>
          </view>
          </div>


        </div>
      </van-tab>

      <van-tab title="已过期" name="2">
        <div class="quan_list margin-top-sm ">
          <text class="padding-left">共{{ov_list.length}}张</text>

          <div v-for="(item,index) in ov_list" :key="index">
            <div class="quan_container_gray container">
            <van-row gutter="10">
              <van-col span="17" offset="1">
                <div class="padding-top">
                  <text class="title">{{ item.name }}</text>
                </div>

                <div>
                  <text class="subtitle text-sm">{{ item.start_time }} 至 {{ item.end_time }} 可使用</text>
                </div>
              
               <van-row gutter="9"> 
                  <van-col span="17" >
                    <!-- 核销券 -->
                    <view style="margin-top:36rpx" v-if="item.type==1">
                      <text class="time margin-right-xs">{{ item.time }}</text>
                      <text class="time_text" v-if="item.discount_type==0">分钟</text>
                      <text class="time_text" v-if="item.discount_type==1">次</text>
                    </view>

                    <!-- 满减券 -->
                     <view style="margin-top:36rpx" v-if="item.type==2">
                      <text class="time_text">满</text>
                      <text class="time margin-lr-xs">{{ item.full }}</text>
                      <text class="time_text">减</text>
                      <text class="time margin-left-xs">{{ item.reduce }}</text>
                    </view>

                    <!-- 折扣券 -->
                    <view style="margin-top:36rpx" v-if="item.type==3">
                      <text class="time_text">打</text>
                      <text class="time margin-lr-xs">{{ item.discount_format }}</text>
                      <text class="time_text">折</text>
                    </view>

                    <!-- 随机券 -->
                    <view style="margin-top:36rpx" v-if="item.type==4">
                      <text class="time_text">减</text>
                      <text class="time margin-lr-xs">{{ item.random }}</text>
                      <text class="time_text">元</text>
                    </view>
                  </van-col> 

                  <van-col span="7" >
                    <view class="margin-top-xl" @click="ruleShow(item.coupon_category_id)">
                      <text class="text-sm text-grey rule">使用规则</text>
                    </view>
                  </van-col>  
                </van-row>

              </van-col>
              <van-col span="5" offset="0">
                <view class="get_ticket_text">已过期</view>
              </van-col>
            </van-row>
            </div>

             <!--    描述-->
           <view v-if="is_ruleShow == item.coupon_category_id">
             <view class="flex justify-center">
              <view
              class="desc"
              v-html="item.explain"
              >

             </view>
            </view>
          </view>
          </div>


        </div>
      </van-tab>

    </van-tabs>
    <van-toast id="van-toast"/>

  </div>
</template>

<script>
import Toast from '../../../static/vant/toast/toast';


import {couponReceive, getCouponList, getCouponReceiveList, getOverdueCouponList} from "../../requests/coupons";
import {timestampTwoNum} from '@/utils/index'

var $this
export default {
  name: "game_record_container",
  components: {},
  data() {
    return {
      is_ruleShow: 0,
      active: '0',
      rec_list: [],
      cp_list: [],
      ov_list:[],
      limit: 10
    }
  },
  methods: {
    //获取已领取优惠券列表
    get_coupon_list() {
      getCouponList($this.limit).then((res) => {
        let $res = res.data;
        $this.cp_list = $res.data;
        $this.cp_list.forEach(($val, $index) => {
          $val['end_time'] = timestampTwoNum($val['end_time'])
          $val['start_time'] = timestampTwoNum($val['start_time'])
          $val['random'] = parseInt($val['random'])
          $val['discount_format'] = Math.round(($val['discount']*10)*100)/100
        })
      })
    },
    //已过期优惠券列表
    get_overdue_list() {
      getOverdueCouponList($this.limit).then((res) => {
        let $res = res.data;
        $this.ov_list = $res.data;
        $this.ov_list.forEach(($val, $index) => {
          $val['end_time'] = timestampTwoNum($val['end_time'])
          $val['start_time'] = timestampTwoNum($val['start_time'])
          $val['random'] = parseInt($val['random'])
          $val['discount_format'] = Math.round(($val['discount']*10)*100)/100
        })
      })
    },
    //获取待领取优惠券列表
    get_rec_coupon_list() {
      getCouponReceiveList($this.limit).then((res) => {
        let $res = res.data;
        $this.rec_list = $res.data.list;
        $this.rec_list.forEach(($val, $index) => {
          $val.validity_time['end_time_format'] = timestampTwoNum($val.validity_time['end_time'])
          $val.validity_time['start_time_format'] = timestampTwoNum($val.validity_time['start_time'])
          $val.validity_time['time_format'] = timestampTwoNum($val.validity_time['time'])
          $val.discount['discount_format'] = Math.round(($val.discount['discount']*10)*100)/100
        })
      })
    },
    //  领取优惠券
    get_ticket($item) {
      couponReceive($item).then((res) => {
        let $res = res.data;
        if ($res.code == 0) {
          Toast.success({
            message: $res.errmsg,
            duration:800,
            onClose() {
              $this.get_rec_coupon_list()
              $this.get_coupon_list()
              $this.get_overdue_list()
            }
          })
          // $this.get_rec_coupon_list()
          // $this.get_coupon_list()
          // $this.get_overdue_list()
        } else {
          Toast.fail({
            message: $res.errmsg,
            duration:800,
            onClose() {
              $this.get_rec_coupon_list()
              $this.get_coupon_list()
              $this.get_overdue_list()
            }
          })
          // $this.get_rec_coupon_list()
          // $this.get_coupon_list()
          // $this.get_overdue_list()
        }
      }).catch((err)=>{
        console.log("错误",err)
      })
    },
    //使用规则
    ruleShow($id){
      // console.log($id);
      if ($this.is_ruleShow == $id) {
        $this.is_ruleShow = 0;
      } else {
        $this.is_ruleShow = $id;
      }
    },
    clearShow(){
      $this.is_ruleShow = 0;
    }
  },
  mounted() {
    $this.get_coupon_list()
    $this.get_rec_coupon_list()
    $this.get_overdue_list()
  },
  created() {
    $this = this
  },
  onUnload(){
    $this.is_ruleShow = 0
  },
}
</script>

<style scoped>

.container{
  background-position: center;
  background-size: 100% 100%;
  width: 340px;
  height: 115px;
  margin: 3px auto;
}

.quan_container {
  background-image: url("https://img.shuimuai.com/web/index_item_quan.png");
}

.quan_container_get{
  background-image: url("https://img.shuimuai.com/discount_get.png");
}

.quan_container_gray {
  background-image: url("https://img.shuimuai.com/web/quan_huise.png");
}

/*标题*/
.title {
  font-size: 15px;
  font-weight: 400;
  color: #030000;
  line-height: 24px;

}

/*子标题*/
.sub-title {
  font-size: 10px;
  font-weight: 400;
  color: #030000;
  line-height: 23px;

}

/*分钟数*/
.time {
  font-size: 19px;
  font-weight: bold;
  color: #030000;
  line-height: 28px;
  display:inline-block;
  -webkit-transform:scale(1,1.1);
}

/*分钟二字*/
.time_text {
  font-size: 12px;
  font-weight: 400;
  color: #030000;
  line-height: 28px;
}

/*领取二字*/
.get_ticket_text {
  font-size: 18px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 24px;
  margin: 45px 0px;
}

/*使用规则*/
.rule{
  text-decoration: underline;
}

.desc {
  width: 320px;
  font-size: 12px;
  color: #6B6B6B;
  line-height: 18px;
  margin-bottom: 26px
}
</style>