|
@@ -1,62 +1,248 @@
|
|
|
<template>
|
|
|
<div id="game_record_container">
|
|
|
- <van-tabs :active="active" @change="" color="#4B3AB0">
|
|
|
+ <van-tabs :active="active" @change="clearShow" color="#4B3AB0" line-width=54px>
|
|
|
<van-tab title="待领取" name="0">
|
|
|
- <div class="quan_list" v-if="rec_list.length > 0">
|
|
|
+ <div class="quan_list margin-top-sm" v-if="rec_list.length > 0">
|
|
|
+ <text class="padding-left">共{{rec_list.length}}张</text>
|
|
|
|
|
|
- <div class="quan_container" v-for="(item,index) in rec_list" :key="index">
|
|
|
+ <div v-for="(item,index) in rec_list" :key="index">
|
|
|
+ <div class="quan_container" >
|
|
|
<van-row gutter="10">
|
|
|
- <van-col span="14" offset="1">
|
|
|
- <div class="padding-top-sm">
|
|
|
+ <van-col span="15" offset="1">
|
|
|
+ <div class="padding-top">
|
|
|
<text class="title">{{ item.name }}</text>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <text class="subtitle">{{ item.end_time }}之前领取有效</text>
|
|
|
+ <div v-if="item.validity_time.type==0">
|
|
|
+ <text class="subtitle text-sm">{{ item.validity_time.start_time }} 至 {{ item.validity_time.end_time }} 领取有效</text>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="item.validity_time.type==1">
|
|
|
+ <text class="subtitle text-sm">{{ item.validity_time.time }} 之前领取有效</text>
|
|
|
</div>
|
|
|
+
|
|
|
+ <van-row gutter="9">
|
|
|
+ <van-col span="17" >
|
|
|
+ <!-- 核销券 -->
|
|
|
+ <view class="padding-tb" v-if="item.type==1">
|
|
|
+ <text class="time">{{ 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 class="padding-tb" v-if="item.type==2">
|
|
|
+ <text class="time_text">满</text>
|
|
|
+ <text class="time">{{ item.discount.full }}</text>
|
|
|
+ <text class="time_text">减</text>
|
|
|
+ <text class="time">{{ item.discount.reduce }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 折扣券 -->
|
|
|
+ <view class="padding-tb" v-if="item.type==3">
|
|
|
+ <text class="time_text">打</text>
|
|
|
+ <text class="time">{{ item.discount.discount*10 }}</text>
|
|
|
+ <text class="time_text">折</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 随机券 -->
|
|
|
+ <view class="padding-tb" v-if="item.type==4">
|
|
|
+ <text class="time_text">随机</text>
|
|
|
+ <text class="time">{{ item.discount.start }}</text>
|
|
|
+ <text class="time_text">至</text>
|
|
|
+ <text class="time">{{ 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>
|
|
|
|
|
|
- <view class="padding-tb">
|
|
|
- <text class="time">{{ item.play_time }}</text>
|
|
|
- <text class="time_text">分钟</text>
|
|
|
- </view>
|
|
|
</van-col>
|
|
|
- <van-col span="5" offset="4" class="" @click="get_ticket(item.coupon_category_id)">
|
|
|
+ <van-col span="5" offset="3" class="" @click="get_ticket(item.coupon_category_id)">
|
|
|
<view class="get_ticket_text">领取</view>
|
|
|
</van-col>
|
|
|
</van-row>
|
|
|
- </div>
|
|
|
+ </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">
|
|
|
+ <div class="quan_list margin-top-sm ">
|
|
|
+ <text class="padding-left">共{{cp_list.length}}张</text>
|
|
|
|
|
|
- <div class="quan_container_gray" v-for="(item,index) in cp_list" :key="index">
|
|
|
+ <div v-for="(item,index) in cp_list" :key="index">
|
|
|
+ <div class="quan_container_get">
|
|
|
<van-row gutter="10">
|
|
|
- <van-col span="14" offset="1">
|
|
|
- <div class="padding-top-sm">
|
|
|
+ <van-col span="15" offset="1">
|
|
|
+ <div class="padding-top">
|
|
|
<text class="title">{{ item.name }}</text>
|
|
|
</div>
|
|
|
+
|
|
|
<div>
|
|
|
- <!-- <text class="subtitle">{{ item.validity_time }}之前领取有效</text>-->
|
|
|
+ <text class="subtitle text-sm">{{ item.start_time }} 至 {{ item.end_time }} 可使用</text>
|
|
|
</div>
|
|
|
+
|
|
|
+ <van-row gutter="9">
|
|
|
+ <van-col span="17" >
|
|
|
+ <!-- 核销券 -->
|
|
|
+ <view class="padding-tb" v-if="item.type==1">
|
|
|
+ <text class="time">{{ 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 class="padding-tb" v-if="item.type==2">
|
|
|
+ <text class="time_text">满</text>
|
|
|
+ <text class="time">{{ item.full }}</text>
|
|
|
+ <text class="time_text">减</text>
|
|
|
+ <text class="time">{{ item.reduce }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 折扣券 -->
|
|
|
+ <view class="padding-tb" v-if="item.type==3">
|
|
|
+ <text class="time_text">打</text>
|
|
|
+ <text class="time">{{ item.discount*10 }}</text>
|
|
|
+ <text class="time_text">折</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 随机券 -->
|
|
|
+ <view class="padding-tb" v-if="item.type==4">
|
|
|
+ <text class="time_text">减</text>
|
|
|
+ <text class="time">{{ 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>
|
|
|
|
|
|
- <view class="padding-tb">
|
|
|
- <text class="time">10</text>
|
|
|
- <text class="time_text">分钟</text>
|
|
|
- </view>
|
|
|
</van-col>
|
|
|
- <van-col span="5" offset="3">
|
|
|
+ <van-col span="5" offset="2">
|
|
|
<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-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">
|
|
|
+ <van-row gutter="10">
|
|
|
+ <van-col span="15" 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 class="padding-tb" v-if="item.type==1">
|
|
|
+ <text class="time">{{ 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 class="padding-tb" v-if="item.type==2">
|
|
|
+ <text class="time_text">满</text>
|
|
|
+ <text class="time">{{ item.full }}</text>
|
|
|
+ <text class="time_text">减</text>
|
|
|
+ <text class="time">{{ item.reduce }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 折扣券 -->
|
|
|
+ <view class="padding-tb" v-if="item.type==3">
|
|
|
+ <text class="time_text">打</text>
|
|
|
+ <text class="time">{{ item.discount*10 }}</text>
|
|
|
+ <text class="time_text">折</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 随机券 -->
|
|
|
+ <view class="padding-tb" v-if="item.type==4">
|
|
|
+ <text class="time_text">减</text>
|
|
|
+ <text class="time">{{ 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="2">
|
|
|
+ <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"/>
|
|
|
|
|
@@ -67,8 +253,8 @@
|
|
|
import Toast from '../../../static/vant/toast/toast';
|
|
|
|
|
|
|
|
|
-import {couponReceive, getCouponList, getCouponReceiveList} from "../../requests/coupons";
|
|
|
-import {formatValidityTime} from '@/utils/index'
|
|
|
+import {couponReceive, getCouponList, getCouponReceiveList, getOverdueCouponList} from "../../requests/coupons";
|
|
|
+import {timestampTwoNum} from '@/utils/index'
|
|
|
|
|
|
var $this
|
|
|
export default {
|
|
@@ -76,20 +262,36 @@ export default {
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- active: '1',
|
|
|
+ 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['validity_time'] = formatValidityTime($val['validity_time'])
|
|
|
+ $val['end_time'] = timestampTwoNum($val['end_time'])
|
|
|
+ $val['start_time'] = timestampTwoNum($val['start_time'])
|
|
|
+ $val['random'] = parseInt($val['random'])
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //已过期优惠券列表
|
|
|
+ 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'])
|
|
|
})
|
|
|
})
|
|
|
},
|
|
@@ -99,7 +301,9 @@ export default {
|
|
|
let $res = res.data;
|
|
|
$this.rec_list = $res.data.list;
|
|
|
$this.rec_list.forEach(($val, $index) => {
|
|
|
- $val['end_time'] = formatValidityTime($val['end_time'])
|
|
|
+ $val.validity_time['end_time'] = timestampTwoNum($val.validity_time['end_time'])
|
|
|
+ $val.validity_time['start_time'] = timestampTwoNum($val.validity_time['start_time'])
|
|
|
+ $val.validity_time['time'] = timestampTwoNum($val.validity_time['time'])
|
|
|
})
|
|
|
})
|
|
|
},
|
|
@@ -113,21 +317,38 @@ export default {
|
|
|
onClose() {
|
|
|
$this.get_coupon_list()
|
|
|
$this.get_rec_coupon_list()
|
|
|
+ $this.get_overdue_list()
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
Toast.fail($res.errmsg)
|
|
|
}
|
|
|
})
|
|
|
+ },
|
|
|
+ //使用规则
|
|
|
+ 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>
|
|
|
|
|
@@ -139,7 +360,16 @@ export default {
|
|
|
background-size: 100% 100%;
|
|
|
width: 340px;
|
|
|
height: 115px;
|
|
|
- margin: 10px auto;
|
|
|
+ margin: 3px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.quan_container_get{
|
|
|
+ background-image: url("https://img.shuimuai.com/discount_get.png");
|
|
|
+ background-position: center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 340px;
|
|
|
+ height: 115px;
|
|
|
+ margin: 3px auto;
|
|
|
}
|
|
|
|
|
|
.quan_container_gray {
|
|
@@ -148,7 +378,7 @@ export default {
|
|
|
background-size: 100% 100%;
|
|
|
width: 340px;
|
|
|
height: 115px;
|
|
|
- margin: 10px auto;
|
|
|
+ margin: 3px auto;
|
|
|
}
|
|
|
|
|
|
/*标题*/
|
|
@@ -171,7 +401,7 @@ export default {
|
|
|
|
|
|
/*分钟数*/
|
|
|
.time {
|
|
|
- font-size: 36px;
|
|
|
+ font-size: 34px;
|
|
|
font-weight: 400;
|
|
|
color: #030000;
|
|
|
line-height: 24px;
|
|
@@ -194,6 +424,18 @@ export default {
|
|
|
margin: 45px 0px;
|
|
|
}
|
|
|
|
|
|
+/*使用规则*/
|
|
|
+.rule{
|
|
|
+ text-decoration: underline;
|
|
|
+}
|
|
|
+
|
|
|
+.desc {
|
|
|
+ width: 320px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #6B6B6B;
|
|
|
+ line-height: 18px;
|
|
|
+ margin-bottom: 26px
|
|
|
+}
|
|
|
.quan_list {
|
|
|
}
|
|
|
</style>
|