Commit 8b40a4fc08d679f6b302b7bda79af9e6877e42e1

Authored by 刘淇
1 parent 2690b31c

会员卡

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 }