myCouponDetail.vue
3.72 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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<template>
<div class="zj-main">
<mt-header title="优惠券详情">
<span @click="gotoback" slot="left">
<mt-button icon="back"></mt-button>
</span>
</mt-header>
<div class="my-coupon-content">
<div class="ctopbg-l"></div>
<div class="top" :style="{'background':myCouponDetail.cplBgcolor}">
<div class="title">{{myCouponDetail.cplName}}</div>
<div class="time">使用期限：{{startTime}} 至 {{endTime}}</div>
<div class="num-tel"><span class="num"><span class="big-num">{{myCouponDetail.cplValue }}</span>折<span
class="tel">券号：{{myCouponDetail.cplCode}}</span></span></div>
<span class="double-line-left"></span><span class="double-line-right"></span>
</div>
<div class="ctopbg-r"></div>
<div class="middle">
<div id="qrcode"></div>
<div id="barcode"></div>
<div class="use-if">
<span class="left">使用条件：</span>
<div class="right">
<p> 1、只能在使用网店使用；</p>
<p> 2、优惠券在使用期限内使用；</p>
<p> 3、线上线下都可使用。</p>
</div>
</div>
<div class="bottom">
<mt-cell title="适用网点" to="/matchNet" is-link></mt-cell>
</div>
</div>
<div class="bottom-bg" :style="{'background':myCouponDetail.cplBgcolor}">
<div class="cbottombg-l"></div>
<div class="cbottombg-r"></div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import {getmyCouponDetail} from '../../vuex/actions';
export default {
data() {
return {
startTime: '',
endTime: ''
}
},
computed: {
cplCode(){
return this.myCouponDetail.cplCode;
}
},
methods: {
gotoback(){
this.$router.go(-1)
},
createQRcode(){
// 设置参数方式
var qrcode = new QRCode('qrcode', {
text: this.cplCode,
width: 150,
height: 150,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});
return qrcode;
},
createBarCode(){
$("#barcode").empty().barcode("22222", "code11", {barWidth: 2, barHeight: 30});
},
beginTime(){
this.startTime = this.myCouponDetail.cplStartTime.substring(0, 11);
},
finishTime(){
this.endTime = this.myCouponDetail.cplEndTime.substring(0, 11);
}
},
vuex: {
getters: {
myCouponDetail: ({personCenterData}) => {
return personCenterData.myCouponDetail;
},
},
actions: {
getmyCouponDetail
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.getmyCouponDetail(vm.$route.params.cplId).then(function () {
vm.beginTime();
vm.finishTime();
vm.createQRcode();
vm.createBarCode();
});
});
},
beforeRouteLeave(to, from, next) {
next();
}
}
</script>