|
@@ -1,55 +1,52 @@
|
1
|
1
|
<template>
|
2
|
2
|
<div class="mainPage">
|
3
|
3
|
<div class="title">课程详情</div>
|
4
|
|
- <div class="content" :class="{'opacity' : useType == '已失效' || useType == '已使用', 'gray': useType == '已使用' || useType == '已失效'}">
|
|
4
|
+ <div class="content" :class="{'opacity' : courseOrderDetail.IsDone === 1, 'gray': courseOrderDetail.IsDone === 1}">
|
5
|
5
|
<div class="list-item">
|
6
|
6
|
<span>订单编号</span>
|
7
|
|
- <span>144215646445464</span>
|
|
7
|
+ <span>{{courseOrderDetail.OrdersNo !== undefined ? courseOrderDetail.OrdersNo : ''}}</span>
|
8
|
8
|
</div>
|
9
|
9
|
<div class="list-item">
|
10
|
|
- <span>订单名称</span>
|
11
|
|
- <span>拉伸柔韧度</span>
|
|
10
|
+ <span>课程名称</span>
|
|
11
|
+ <span>{{courseOrderDetail.CourseName}}</span>
|
12
|
12
|
</div>
|
13
|
13
|
<div class="list-item">
|
14
|
|
- <span>节课数</span>
|
15
|
|
- <span>2节课</span>
|
|
14
|
+ <span>课时数</span>
|
|
15
|
+ <span>{{courseOrderDetail.JoinNum}}/{{courseOrderDetail.CourseNum}}</span>
|
16
|
16
|
</div>
|
17
|
17
|
<div class="list-item">
|
18
|
18
|
<span>类型</span>
|
19
|
|
- <span>健身</span>
|
|
19
|
+ <span>{{returnLocationName(courseOrderDetail.LocationId)}}</span>
|
20
|
20
|
</div>
|
21
|
21
|
<div class="list-item">
|
22
|
22
|
<span>商品价格</span>
|
23
|
|
- <span>¥1999</span>
|
|
23
|
+ <span>¥{{courseOrderDetail.Price}}</span>
|
24
|
24
|
</div>
|
25
|
25
|
<div class="list-item">
|
26
|
26
|
<span>下单时间</span>
|
27
|
|
- <span>2018/04/12 14:26:09</span>
|
|
27
|
+ <span>{{toolClass.dateFormat(courseOrderDetail.CreateDate)}}</span>
|
28
|
28
|
</div>
|
29
|
|
- <div class="list-item">
|
30
|
|
- <span>课程时间</span>
|
31
|
|
- <span>2018/04/12 12:00至14:00 计划备注(每周六 19:30)</span>
|
32
|
|
- </div>
|
33
|
|
- <div class="list-item">
|
|
29
|
+ <!-- <div class="list-item">
|
34
|
30
|
<span>地点</span>
|
35
|
|
- <span>悦见山G99</span>
|
36
|
|
- </div>
|
|
31
|
+ <span>{{returnCaseName(courseOrderDetail.CaseId)}}</span>
|
|
32
|
+ </div> -->
|
37
|
33
|
<div class="list-item">
|
38
|
34
|
<span>付款方式</span>
|
39
|
|
- <span>优惠券抵用 <div class="coupon-name">小拉伸柔韧度体验券</div></span>
|
|
35
|
+ <span>{{courseOrderDetail.CourseObtaimType === 'cheng-coin' ? '城币支付' : '优惠券抵用'}}</span>
|
|
36
|
+ <!-- <span>优惠券抵用 <div class="coupon-name">小拉伸柔韧度体验券</div></span> -->
|
40
|
37
|
</div>
|
41
|
38
|
<div class="half-cic">
|
42
|
39
|
<span></span>
|
43
|
40
|
<span></span>
|
44
|
41
|
</div>
|
45
|
|
- <div class="qr-code">
|
46
|
|
- <qrCode :msg='msg'></qrCode>
|
47
|
|
- <div class="number">32237489123</div>
|
|
42
|
+ <div class="qr-code" v-if="courseOrderDetail.IsDone === 0">
|
|
43
|
+ <qrCode :msg="courseOrderDetail.QrCodeString"></qrCode>
|
|
44
|
+ <!-- <div class="number">32237489123</div> -->
|
48
|
45
|
</div>
|
49
|
46
|
</div>
|
50
|
47
|
<div class="useType">
|
51
|
|
- <img :src="used" alt="已使用" v-if="useType == '已使用'" width="100%" height="100%">
|
52
|
|
- <img :src="failure" alt="已失效" v-if="useType == '已失效'" width="100%" height="100%">
|
|
48
|
+ <img :src="used" alt="已使用" v-if="courseOrderDetail.IsDone === 1" width="100%" height="100%">
|
|
49
|
+ <!-- <img :src="failure" alt="已失效" v-if="useType == '已失效'" width="100%" height="100%"> -->
|
53
|
50
|
</div>
|
54
|
51
|
</div>
|
55
|
52
|
</template>
|
|
@@ -58,6 +55,9 @@
|
58
|
55
|
import qrCode from '../../../components/qrCodeCard/qrCodeCard'
|
59
|
56
|
import used from '../../../common/icon/already.png'
|
60
|
57
|
import failure from '../../../common/icon/inv.png'
|
|
58
|
+import { mapState, createNamespacedHelpers } from 'vuex'
|
|
59
|
+const { mapActions: actions } = createNamespacedHelpers('app')
|
|
60
|
+const { mapActions: mapUserActions, mapState: mapUserState } = createNamespacedHelpers('userCenter')
|
61
|
61
|
export default {
|
62
|
62
|
data () {
|
63
|
63
|
return {
|
|
@@ -70,15 +70,55 @@ export default {
|
70
|
70
|
failure,
|
71
|
71
|
}
|
72
|
72
|
},
|
|
73
|
+ created () {
|
|
74
|
+ this.getCourseLocationList().then(() => {
|
|
75
|
+ this.getCaseList().then(() => {
|
|
76
|
+ this.getCourseOrderDetail({
|
|
77
|
+ id: this.$route.query.id
|
|
78
|
+ }).then((res) => {
|
|
79
|
+ // console.log(JSON.stringify(res))
|
|
80
|
+ })
|
|
81
|
+ })
|
|
82
|
+ })
|
|
83
|
+ },
|
|
84
|
+ computed: {
|
|
85
|
+ ...mapUserState({
|
|
86
|
+ courseOrderDetail: x => x.courseOrderDetail,
|
|
87
|
+ courseLocationList: x => x.courseLocationList,
|
|
88
|
+ }),
|
|
89
|
+ ...mapState({
|
|
90
|
+ CaseList: x => x.app.CaseList,
|
|
91
|
+ })
|
|
92
|
+ },
|
73
|
93
|
methods: {
|
74
|
|
-
|
|
94
|
+ ...mapUserActions([
|
|
95
|
+ 'getCourseOrderDetail',
|
|
96
|
+ 'getCourseLocationList',
|
|
97
|
+ ]),
|
|
98
|
+ ...actions([
|
|
99
|
+ 'getCaseList',
|
|
100
|
+ ]),
|
|
101
|
+ returnLocationName (id) {
|
|
102
|
+ for (var n = 0; n < this.courseLocationList.length; n++) {
|
|
103
|
+ if (this.courseLocationList[n].LocationId === id) {
|
|
104
|
+ return this.courseLocationList[n].LocationName
|
|
105
|
+ }
|
|
106
|
+ }
|
|
107
|
+ },
|
|
108
|
+ returnCaseName (id) {
|
|
109
|
+ for (var n = 0; n < this.CaseList.length; n++) {
|
|
110
|
+ if (this.CaseList[n].CaseId === id) {
|
|
111
|
+ return this.CaseList[n].CaseName
|
|
112
|
+ }
|
|
113
|
+ }
|
|
114
|
+ },
|
75
|
115
|
},
|
76
|
116
|
components: {
|
77
|
|
- qrCode
|
|
117
|
+ qrCode,
|
78
|
118
|
}
|
79
|
119
|
}
|
80
|
120
|
</script>
|
81
|
121
|
|
82
|
122
|
<style lang="scss" scoped>
|
83
|
|
-@import "page.scss";
|
|
123
|
+@import 'page.scss';
|
84
|
124
|
</style>
|