orderResult.vue
3.27 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<template>
<div class="orderResult">
<div class="container">
<icon-svg style="font-size: 250px;" icon-class="order-result-success" />
<article>
<h1>恭喜您，支付成功</h1>
<p>请耐心等待发货，保持手机畅通</p>
</article>
<div class="btns">
<el-button class="common order" @click="linkTo('/myOrder')">查看订单</el-button>
<el-button class="common index" @click="linkTo('/index')">继续购物</el-button>
</div>
<div v-show="showPolite" class="discount">
<icon-svg class="icon" icon-class="order-result-pa" />
<div class="content">
<p v-if="credit">恭喜获得额外积分 <span>{{ credit }}</span></p>
<p v-if="growth">恭喜获得额外会员成长值 <span>{{ growth }}</span></p>
<p v-for="(item, index) in couponList"
:key="index"
>
恭喜获得
<span>{{ item.discount }}</span>
<span v-if="item.couponType ===1">元</span>
<span v-if="item.couponType ===2">折</span>优惠券1张</p>
</div>
</div>
</div>
</div>
</template>
<script>
import {
getPoliteList
} from '@/api/Activity/ActivityPolite.js'
export default {
data () {
return {
showPolite: false,
growth: 0,
credit: 0,
couponList: []
}
},
created () {
this.getPolite()
},
methods: {
async getPolite () {
const response = await getPoliteList({ orderId: this.$route.query.orderId })
const res = response.data
if (res.code === '200') {
this.growth = res.data.growth
this.credit = res.data.credit
this.couponList = res.data.couponList
if (this.growth || this.credit || (this.couponList && this.couponList.length > 0)) {
this.showPolite = true
}
} else {
this.$message.error(res.message)
}
},
linkTo (path) {
if (!path) {
return
}
this.$router.push({
path: path
})
}
}
}
</script>
<style lang="scss" scoped>
.orderResult{
max-width: 1250px;
height: 800px;
margin: auto;
.container{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
article{
margin: 30px 0;
text-align: center;
font-family: Microsoft YaHei;
h1{
font-size: 18px;
color: #333333;
}
p{
margin-top: 10px;
font-size: 14px;
color: #999999;
}
}
.btns{
width: 420px;
margin-bottom: 30px;
display: flex;
justify-content: space-between;
.common{
width: 200px;
height: 50px;
padding: 0;
border-radius: 0;
}
.order{
color: #999;
border: 1px solid #999;
}
.index{
color: #FFEBC4;
background: #333333;
}
}
.discount{
width: 385px;
min-height: 120px;
padding: 0 25px;
background: #FFF9F6;
border: 1px solid #FBE9E6;
display: flex;
.icon{
font-size: 120px;
}
.content{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
span{
color: #C83732;
}
}
}
}
</style>