Commit 8b40a4fc08d679f6b302b7bda79af9e6877e42e1
1 parent
2690b31c
会员卡
Showing
7 changed files
with
315 additions
and
69 deletions
src/api/cards/cards.js
0 → 100644
1 | +import request from '@/utils/request' | ||
2 | + | ||
3 | + | ||
4 | +// 查询用户已购买的会员卡 | ||
5 | +export function queryVipCardsByCustId(params) { | ||
6 | + return request({ | ||
7 | + url: 'parkvip/queryVipCardsByCustId', | ||
8 | + method: 'post', | ||
9 | + data: params | ||
10 | + }) | ||
11 | +} | ||
12 | + | ||
13 | + | ||
14 | +// 根据组织id查询区域卡/时域卡规则信息 | ||
15 | +export function queryVipAreaCardByOrgId(params) { | ||
16 | + return request({ | ||
17 | + url: 'vipAreaCardRule/queryVipAreaCardByOrgId', | ||
18 | + method: 'post', | ||
19 | + data: params | ||
20 | + }) | ||
21 | +} | ||
22 | + | ||
23 | + | ||
24 | + | ||
25 | + | ||
26 | + | ||
27 | + | ||
28 | + |
src/assets/images/cards/cards.png
0 → 100644
3.97 KB
src/assets/images/cards/nodata.png
0 → 100644
12.8 KB
src/router/index.js
@@ -167,6 +167,25 @@ export default new Router({ | @@ -167,6 +167,25 @@ export default new Router({ | ||
167 | } | 167 | } |
168 | }, | 168 | }, |
169 | 169 | ||
170 | + { | ||
171 | + path: '/Cards', | ||
172 | + name: 'Cards', | ||
173 | + component: () => import("@/views/cards/Cards.vue"), | ||
174 | + meta:{ | ||
175 | + title:'我的卡' | ||
176 | + } | ||
177 | + }, | ||
178 | + { | ||
179 | + path: '/CardList', | ||
180 | + name: 'CardList', | ||
181 | + component: () => import("@/views/cards/CardList.vue"), | ||
182 | + meta:{ | ||
183 | + title:'购买会员卡' | ||
184 | + } | ||
185 | + }, | ||
186 | + | ||
187 | + | ||
188 | + | ||
170 | 189 | ||
171 | // | 190 | // |
172 | // // ------------------------购买会员卡提示 | 191 | // // ------------------------购买会员卡提示 |
@@ -177,12 +196,15 @@ export default new Router({ | @@ -177,12 +196,15 @@ export default new Router({ | ||
177 | // }, | 196 | // }, |
178 | // | 197 | // |
179 | // | 198 | // |
180 | - // // ------------------------购买会员卡 | ||
181 | - // { | ||
182 | - // path: '/buyCard', | ||
183 | - // name: 'buyCard', | ||
184 | - // component: () => import("@/views/cards/buyCard.vue") | ||
185 | - // }, | 199 | + // ------------------------购买会员卡 |
200 | + { | ||
201 | + path: '/buyCard', | ||
202 | + name: 'buyCard', | ||
203 | + component: () => import("@/views/cards/buyCard.vue"), | ||
204 | + meta:{ | ||
205 | + title:'会员卡费用支付' | ||
206 | + } | ||
207 | + }, | ||
186 | 208 | ||
187 | 209 | ||
188 | 210 |
src/views/cards/CardList.vue
0 → 100644
1 | +<template> | ||
2 | + <div style="padding: 15px"> | ||
3 | + <div class="cardBg"> | ||
4 | + <ul class="cardList" @click="$router.push({path:'buyCard'})"> | ||
5 | + <li style="display: flex;justify-content: space-between"> | ||
6 | + <span style="background: blue;padding: 2px 8px;">月卡</span> <span>测试</span> | ||
7 | + </li> | ||
8 | + <li> | ||
9 | + + 购买会员卡 | ||
10 | + </li> | ||
11 | + <li> | ||
12 | + ¥ 100.00 | ||
13 | + </li> | ||
14 | + <li> | ||
15 | + 活动有效期: 2021.05.11 - 2022.01.31 | ||
16 | + </li> | ||
17 | + </ul> | ||
18 | + </div> | ||
19 | + <div class="cardBg"> | ||
20 | + <ul class="cardList"> | ||
21 | + <li style="display: flex;justify-content: space-between"> | ||
22 | + <span style="background: blue;padding: 2px 8px;">月卡</span> <span>测试</span> | ||
23 | + </li> | ||
24 | + <li> | ||
25 | + + 购买会员卡 | ||
26 | + </li> | ||
27 | + <li> | ||
28 | + ¥ 100.00 | ||
29 | + </li> | ||
30 | + <li> | ||
31 | + 活动有效期: 2021.05.11 - 2022.01.31 | ||
32 | + </li> | ||
33 | + </ul> | ||
34 | + </div> | ||
35 | + </div> | ||
36 | +</template> | ||
37 | + | ||
38 | +<script> | ||
39 | +import { queryVipAreaCardByOrgId } from "@/api/cards/cards"; | ||
40 | + | ||
41 | +export default { | ||
42 | + name: "CardList", | ||
43 | + data(){ | ||
44 | + return{ | ||
45 | + | ||
46 | + } | ||
47 | + }, | ||
48 | + mounted(){ | ||
49 | + this.queryVipAreaCardByOrgId() | ||
50 | + }, | ||
51 | + methods:{ | ||
52 | + queryVipAreaCardByOrgId: function() { | ||
53 | + let jsondata = this.$utils.commonParams(); | ||
54 | + jsondata.saleChannel = '3' // 售卖渠道:1-APP、2-公众号、3-平台 | ||
55 | + jsondata.sign = this.$utils.signObject(jsondata); | ||
56 | + queryVipAreaCardByOrgId(jsondata).then(data => { | ||
57 | + console.log(data); | ||
58 | + if (data.code == 0) { | ||
59 | + let res = data.data; | ||
60 | + } else { | ||
61 | + this.$vux.toast.text(data.message, "top"); | ||
62 | + } | ||
63 | + }); | ||
64 | + } | ||
65 | + } | ||
66 | +}; | ||
67 | +</script> | ||
68 | + | ||
69 | +<style scoped lang="scss"> | ||
70 | + .cardBg { | ||
71 | + width: 100%; | ||
72 | + height: 150px; | ||
73 | + background: #0099FF url("../../assets/images/cards/cards.png") no-repeat 20px 20px; | ||
74 | + background-size: 90% 90%; | ||
75 | + border-radius: 8px; | ||
76 | + margin-bottom: 15px; | ||
77 | + } | ||
78 | + | ||
79 | + .cardList { | ||
80 | + padding: 20px 20px 0 20px; | ||
81 | + color: #fff; | ||
82 | + li { | ||
83 | + margin-bottom: 10px; | ||
84 | + /*line-height: 30px;*/ | ||
85 | + } | ||
86 | + } | ||
87 | +</style> |
src/views/cards/Cards.vue
0 → 100644
1 | +<template> | ||
2 | + <div style="height: 100%;display: flex;flex-direction: column;"> | ||
3 | + <div style="flex: 1;overflow-y: auto;padding: 15px"> | ||
4 | + <div v-if="cardList.length == 0" class="noCardData"> | ||
5 | + <p>您目前没有任何会员卡,</p> | ||
6 | + <p>请绑定车牌通过认证后再购买会员卡!</p> | ||
7 | + </div> | ||
8 | + <div class="cardBg"> | ||
9 | + <ul class="cardList"> | ||
10 | + <li> | ||
11 | + 会员卡- 月卡 | ||
12 | + </li> | ||
13 | + <li> | ||
14 | + 绑定车牌号: 京A12312 | ||
15 | + </li> | ||
16 | + <li> | ||
17 | + 有效时间段: 2021-11-11 至 2021-12-10 | ||
18 | + </li> | ||
19 | + <li> | ||
20 | + 适用停车场: 万达停车场 | ||
21 | + </li> | ||
22 | + </ul> | ||
23 | + </div> | ||
24 | + <div class="cardBg"> | ||
25 | + <ul class="cardList"> | ||
26 | + <li> | ||
27 | + 会员卡- 月卡 | ||
28 | + </li> | ||
29 | + <li> | ||
30 | + 绑定车牌号: 京A12312 | ||
31 | + </li> | ||
32 | + <li> | ||
33 | + 有效时间段: 2021-11-11 至 2021-12-10 | ||
34 | + </li> | ||
35 | + <li> | ||
36 | + 适用停车场: 万达停车场 | ||
37 | + </li> | ||
38 | + </ul> | ||
39 | + </div> | ||
40 | + </div> | ||
41 | + <x-button type="primary" @click.native="$router.push({path:'CardList'})">购买会员卡</x-button> | ||
42 | + </div> | ||
43 | +</template> | ||
44 | + | ||
45 | +<script> | ||
46 | +import { queryVipCardsByCustId } from "@/api/cards/cards"; | ||
47 | +export default { | ||
48 | + name: "Cards", | ||
49 | + data() { | ||
50 | + return { | ||
51 | + cardList: [] | ||
52 | + }; | ||
53 | + }, | ||
54 | + mounted() { | ||
55 | + this.queryVipCardsByCustId(); | ||
56 | + }, | ||
57 | + methods: { | ||
58 | + queryVipCardsByCustId: function() { | ||
59 | + let jsondata = this.$utils.commonParams(); | ||
60 | + jsondata.sign = this.$utils.signObject(jsondata); | ||
61 | + queryVipCardsByCustId(jsondata).then(data => { | ||
62 | + console.log(data); | ||
63 | + if (data.code == 0) { | ||
64 | + let res = data.data; | ||
65 | + } else { | ||
66 | + this.$vux.toast.text(data.message, "top"); | ||
67 | + } | ||
68 | + }); | ||
69 | + } | ||
70 | + } | ||
71 | +}; | ||
72 | +</script> | ||
73 | + | ||
74 | +<style scoped lang="scss"> | ||
75 | + .noCardData { | ||
76 | + padding-top: 130px; | ||
77 | + background: url("../../assets/images/cards/nodata.png") no-repeat center 0; | ||
78 | + background-size: 121px 100px; | ||
79 | + text-align: center; | ||
80 | + } | ||
81 | + | ||
82 | + .cardBg { | ||
83 | + width: 100%; | ||
84 | + height: 150px; | ||
85 | + background: #26a2ff url("../../assets/images/cards/cards.png") no-repeat 20px 20px; | ||
86 | + background-size: 90% 90%; | ||
87 | + border-radius: 8px; | ||
88 | + margin-bottom: 15px; | ||
89 | + } | ||
90 | + .cardList{ | ||
91 | + padding: 20px 0 0 20px; | ||
92 | + color: #fff; | ||
93 | + li{ | ||
94 | + line-height: 30px; | ||
95 | + } | ||
96 | + } | ||
97 | + | ||
98 | +</style> |
src/views/cards/buyCard.vue
@@ -8,8 +8,8 @@ | @@ -8,8 +8,8 @@ | ||
8 | 8 | ||
9 | <li> | 9 | <li> |
10 | <div style="color: #666">选择卡类型</div> | 10 | <div style="color: #666">选择卡类型</div> |
11 | - <div @click="popupVisible = true">{{carType}}</div> | ||
12 | - <div class="arrow">></div> | 11 | + <div>{{carType}}</div> |
12 | + <!--<div class="arrow">></div>--> | ||
13 | </li> | 13 | </li> |
14 | 14 | ||
15 | 15 | ||
@@ -21,7 +21,7 @@ | @@ -21,7 +21,7 @@ | ||
21 | 21 | ||
22 | <li> | 22 | <li> |
23 | <div style="color: #A31414">生效时间</div> | 23 | <div style="color: #A31414">生效时间</div> |
24 | - <div style="color: #A31414" @click="selectData">{{ $utils.timestampToTime(time) }}</div> | 24 | + <div style="color: #A31414" @click="selectData">{{ $utils.timestampToTime(startData) }}</div> |
25 | <div class="arrow">></div> | 25 | <div class="arrow">></div> |
26 | </li> | 26 | </li> |
27 | 27 | ||
@@ -42,7 +42,7 @@ | @@ -42,7 +42,7 @@ | ||
42 | 42 | ||
43 | <li> | 43 | <li> |
44 | <div style="color: #666">单价</div> | 44 | <div style="color: #666">单价</div> |
45 | - <div>¥10.00</div> | 45 | + <div>¥{{unitPrice}}</div> |
46 | </li> | 46 | </li> |
47 | 47 | ||
48 | 48 | ||
@@ -53,7 +53,7 @@ | @@ -53,7 +53,7 @@ | ||
53 | 53 | ||
54 | <li> | 54 | <li> |
55 | <div style="color: #666">应付金额</div> | 55 | <div style="color: #666">应付金额</div> |
56 | - <div style="color: #A31414">¥30.00</div> | 56 | + <div style="color: #A31414">¥{{needPay}}</div> |
57 | </li> | 57 | </li> |
58 | 58 | ||
59 | </ul> | 59 | </ul> |
@@ -67,7 +67,7 @@ | @@ -67,7 +67,7 @@ | ||
67 | <p>停车场停车场停车停车场</p> | 67 | <p>停车场停车场停车停车场</p> |
68 | </div> | 68 | </div> |
69 | 69 | ||
70 | - <div style="margin-top: 34px" class="leftRightPadding"> | 70 | + <div style="margin-top: 34px" class="leftRightPadding"> |
71 | <mt-button type="danger" size="large">确定购买</mt-button> | 71 | <mt-button type="danger" size="large">确定购买</mt-button> |
72 | </div> | 72 | </div> |
73 | 73 | ||
@@ -99,7 +99,7 @@ | @@ -99,7 +99,7 @@ | ||
99 | 99 | ||
100 | <mt-popup | 100 | <mt-popup |
101 | v-model="parkMoreVisible" class="park-list-wrap" | 101 | v-model="parkMoreVisible" class="park-list-wrap" |
102 | - > | 102 | + > |
103 | <ul class="park-list"> | 103 | <ul class="park-list"> |
104 | <li v-for="(i, index) in 10">{{index+1}}、停车场{{i}}</li> | 104 | <li v-for="(i, index) in 10">{{index+1}}、停车场{{i}}</li> |
105 | </ul> | 105 | </ul> |
@@ -109,76 +109,81 @@ | @@ -109,76 +109,81 @@ | ||
109 | </template> | 109 | </template> |
110 | 110 | ||
111 | <script> | 111 | <script> |
112 | -import { timestampToTime } from '../../utils/utils.js' | ||
113 | - | 112 | +import { timestampToTime } from "../../utils/utils.js"; |
114 | export default { | 113 | export default { |
115 | - name: 'buyCard', | 114 | + name: "buyCard", |
116 | data() { | 115 | data() { |
117 | return { | 116 | return { |
118 | startDate: new Date(), | 117 | startDate: new Date(), |
119 | - dateVal: '', | ||
120 | - selectedValue: '', | ||
121 | - time: new Date(), | ||
122 | - endDate:new Date(), | 118 | + dateVal: "", |
119 | + selectedValue: "", | ||
120 | + startData: new Date(), | ||
121 | + endDate: new Date(), | ||
123 | popupVisible: false, | 122 | popupVisible: false, |
124 | actions: [ | 123 | actions: [ |
125 | - {name:'月卡',num:1, method: this.clickAction }, | ||
126 | - {name:'季卡',num:3, method: this.clickAction }, | ||
127 | - {name:'年卡',num:12, method: this.clickAction }, | ||
128 | - | 124 | + { name: "月卡", num: 1, method: this.clickAction }, |
125 | + { name: "季卡", num: 3, method: this.clickAction }, | ||
126 | + { name: "年卡", num: 12, method: this.clickAction } | ||
129 | ], | 127 | ], |
130 | - carType:'月卡', | ||
131 | - carNumList:[ | ||
132 | - {name:'停车场1',method: this.clickActionCarNum }, | ||
133 | - {name:'停车场2',method: this.clickActionCarNum }, | ||
134 | - {name:'停车场3',method: this.clickActionCarNum }, | ||
135 | - {name:'停车场4',method: this.clickActionCarNum }, | ||
136 | - {name:'停车场5',method: this.clickActionCarNum }, | 128 | + carType: "月卡", |
129 | + carNumList: [ | ||
130 | + { name: "停车场1", method: this.clickActionCarNum }, | ||
131 | + { name: "停车场2", method: this.clickActionCarNum }, | ||
132 | + { name: "停车场3", method: this.clickActionCarNum }, | ||
133 | + { name: "停车场4", method: this.clickActionCarNum }, | ||
134 | + { name: "停车场5", method: this.clickActionCarNum } | ||
137 | ], | 135 | ], |
138 | - carNumber:'', | ||
139 | - carNumberVisible:false, | ||
140 | - parkMoreVisible:false, | ||
141 | - cardNum:1 | ||
142 | - } | 136 | + carNumber: "京A12334", |
137 | + carNumberVisible: false, | ||
138 | + parkMoreVisible: false, | ||
139 | + cardNum: 1, | ||
140 | + unitPrice: 10, | ||
141 | + needPay: 0 | ||
142 | + }; | ||
143 | }, | 143 | }, |
144 | methods: { | 144 | methods: { |
145 | //打开时间选择器 | 145 | //打开时间选择器 |
146 | selectData() { | 146 | selectData() { |
147 | - | ||
148 | - this.$refs['datePicker'].open() | 147 | + this.$refs["datePicker"].open(); |
148 | + // console.log(this.startData) | ||
149 | + // this.endDate = this.startData.setMonth(this.startData.getMonth()+1) | ||
150 | + // console.log(this.endDate) | ||
149 | }, | 151 | }, |
150 | handleConfirm() { | 152 | handleConfirm() { |
151 | - console.log(this.dateVal) | ||
152 | - this.time = this.$utils.timestampToTime(this.dateVal); | 153 | + console.log(this.dateVal); |
154 | + this.startData = this.$utils.timestampToTime(this.dateVal); | ||
155 | + this.endDate = this.dateVal.setMonth(this.dateVal.getMonth() + 1); | ||
153 | }, | 156 | }, |
154 | - clickAction(e){ | ||
155 | - console.log(e.name) | ||
156 | - this.carType = e.name | ||
157 | - this.endDate = this.time | 157 | + clickAction(e) { |
158 | + console.log(e.name); | ||
159 | + this.carType = e.name; | ||
160 | + this.endDate = this.startData; | ||
158 | }, | 161 | }, |
159 | - clickActionCarNum(e){ | ||
160 | - this.carNumber = e.name | 162 | + clickActionCarNum(e) { |
163 | + this.carNumber = e.name; | ||
161 | }, | 164 | }, |
162 | - addCardNum(){ // 增加购买数量 | ||
163 | - this.cardNum ++ | 165 | + addCardNum() { // 增加购买数量 |
166 | + this.cardNum++; | ||
167 | + this.calcMoney() | ||
164 | }, | 168 | }, |
165 | - reduceCarNum(){ // 增加购买数量 | ||
166 | - if(this.cardNum==1){ | ||
167 | - return | 169 | + reduceCarNum() { // 增加购买数量 |
170 | + if (this.cardNum == 1) { | ||
171 | + return; | ||
168 | } | 172 | } |
169 | - this.cardNum -- | 173 | + this.cardNum--; |
174 | + this.calcMoney() | ||
170 | }, | 175 | }, |
171 | - | ||
172 | - | ||
173 | - | 176 | + calcMoney() { |
177 | + this.needPay = this.cardNum*this.unitPrice | ||
178 | + } | ||
174 | }, | 179 | }, |
175 | filters: { | 180 | filters: { |
176 | formatDate(time) { | 181 | formatDate(time) { |
177 | var date = new Date(time); | 182 | var date = new Date(time); |
178 | - return formatDate(date) | 183 | + return formatDate(date); |
179 | } | 184 | } |
180 | - }, | ||
181 | -} | 185 | + } |
186 | +}; | ||
182 | </script> | 187 | </script> |
183 | 188 | ||
184 | <style scoped lang="scss"> | 189 | <style scoped lang="scss"> |
@@ -205,27 +210,28 @@ export default { | @@ -205,27 +210,28 @@ export default { | ||
205 | border-bottom: 0; | 210 | border-bottom: 0; |
206 | } | 211 | } |
207 | } | 212 | } |
208 | - .choose-num{ | 213 | + |
214 | + .choose-num { | ||
209 | height: 28px; | 215 | height: 28px; |
210 | margin-top: 5px; | 216 | margin-top: 5px; |
211 | line-height: 28px; | 217 | line-height: 28px; |
212 | display: flex; | 218 | display: flex; |
213 | border: 1px solid #D8D8D8; | 219 | border: 1px solid #D8D8D8; |
214 | - span{ | 220 | + span { |
215 | display: inline-block; | 221 | display: inline-block; |
216 | - &:nth-of-type(1){ | 222 | + &:nth-of-type(1) { |
217 | width: 28px; | 223 | width: 28px; |
218 | height: 28px; | 224 | height: 28px; |
219 | text-align: center; | 225 | text-align: center; |
220 | cursor: pointer; | 226 | cursor: pointer; |
221 | } | 227 | } |
222 | - &:nth-of-type(2){ | 228 | + &:nth-of-type(2) { |
223 | width: 50px; | 229 | width: 50px; |
224 | text-align: center; | 230 | text-align: center; |
225 | border-left: 1px solid #D8D8D8; | 231 | border-left: 1px solid #D8D8D8; |
226 | border-right: 1px solid #D8D8D8; | 232 | border-right: 1px solid #D8D8D8; |
227 | } | 233 | } |
228 | - &:nth-of-type(3){ | 234 | + &:nth-of-type(3) { |
229 | width: 28px; | 235 | width: 28px; |
230 | height: 28px; | 236 | height: 28px; |
231 | text-align: center; | 237 | text-align: center; |
@@ -233,31 +239,36 @@ export default { | @@ -233,31 +239,36 @@ export default { | ||
233 | } | 239 | } |
234 | } | 240 | } |
235 | } | 241 | } |
236 | - .parkArea{ | 242 | + |
243 | + .parkArea { | ||
237 | padding-top: 10px; | 244 | padding-top: 10px; |
238 | padding-bottom: 10px; | 245 | padding-bottom: 10px; |
239 | margin-top: 10px; | 246 | margin-top: 10px; |
240 | background: #fff; | 247 | background: #fff; |
241 | color: #999; | 248 | color: #999; |
242 | } | 249 | } |
243 | - .parkAreaTitle{ | 250 | + |
251 | + .parkAreaTitle { | ||
244 | display: flex; | 252 | display: flex; |
245 | justify-content: space-between; | 253 | justify-content: space-between; |
246 | color: #666; | 254 | color: #666; |
247 | } | 255 | } |
248 | - .parkMore{ | 256 | + |
257 | + .parkMore { | ||
249 | cursor: pointer; | 258 | cursor: pointer; |
250 | } | 259 | } |
251 | - .park-list-wrap{ | 260 | + |
261 | + .park-list-wrap { | ||
252 | width: 80%; | 262 | width: 80%; |
253 | max-height: 70%; | 263 | max-height: 70%; |
254 | overflow-y: scroll; | 264 | overflow-y: scroll; |
255 | border-radius: 5px; | 265 | border-radius: 5px; |
256 | } | 266 | } |
257 | - .park-list{ | 267 | + |
268 | + .park-list { | ||
258 | 269 | ||
259 | /*width: 80%;*/ | 270 | /*width: 80%;*/ |
260 | - li{ | 271 | + li { |
261 | padding-left: 20px; | 272 | padding-left: 20px; |
262 | line-height: 25px; | 273 | line-height: 25px; |
263 | } | 274 | } |