indexCouponItem.vue
1.66 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<template>
<router-link :to="{ name: 'couponCenterDetail', params: { cplId: item.id }}" tag="div" class="index-coupon-item">
<div class="coupon-left">
<!--优惠券类型-->
<div class="coupon-type">
<div class="coupon-type-left" :style="{'color':item.bgColor}">{{item.useVal}}</div>
<div class="coupon-type-right">
<!--<div class="type-up">{{item.cplTypeName}}</div>-->
<div class="type-down">{{item.cplUnit}}</div>
</div>
</div>
<!--优惠券名称-->
<div class="coupon-name"><span :style="{'color':item.bgColor,'border-color':item.bgColor}" class="typer">{{item.cplTypeName}}</span>{{item.cplName}}
</div>
<!--优惠券有效期--->
<div class="coupon-time">{{StartTime}} 至 {{EndTime}}</div>
</div>
<div class="coupon-right" :style="{'background':item.bgColor}">
<div class="coupon-num">{{item.faceMoney}}</div>
<div class="coupon-jg-type">{{siteUnitName}}</div>
<div class="coupon-btn">立即兑换</div>
</div>
</router-link>
</template>
<script type="text/ecmascript-6">
export default {
props: {
item: '',
siteUnitName: ''
},
data() {
return {
popupVisible: false
};
},
computed: {
StartTime(){
return this.item.grantStartTime.substring(0, 11);
},
EndTime(){
return this.item.grantEndTime.substring(0, 11);
}
}
};
</script>