BJ_web_developers / wxgzh

Commit 9ca4681963bb72e03643c73a79332d8978bbef5b

Authored by 刘淇
1 parent e7ca4bcb

购买会员卡

Inline Side-by-side
Showing 6 changed files with 323 additions and 59 deletions
src/api/card/card.js
  View file @9ca4681
... ... @@ -24,3 +24,23 @@ export function queryVipCardByPlNo(params) { //查询æŸä¸ªåœè½¦åœºçš„ 具体çš
24 24 data: params
25 25 })
26 26 }
  27 +
  28 +
  29 +export function queryUserCars(params) { //车辆信æ¯æŸ¥è¯¢
  30 + return request({
  31 + url: 'user/car/queryUserCars',
  32 + method: 'post',
  33 + data: params
  34 + })
  35 +}
  36 +
  37 +
  38 +export function createVipCardOrder2022(params) { //会员å¡è´­ä¹°ç»­è´¹2022
  39 + return request({
  40 + url: 'vip/createVipCardOrder2022',
  41 + method: 'post',
  42 + data: params
  43 + })
  44 +}
  45 +
  46 +
... ...
src/router/index.js
  View file @9ca4681
... ... @@ -73,7 +73,8 @@ export default new Router({
73 73 {
74 74 path: "/parkNotes",
75 75 name: "parkNotes",
76   - component: () => import("@/views/mySelf/parkNotes/parkNotes.vue")
  76 + component: () => import("@/views/mySelf/parkNotes/parkNotes.vue"),
  77 + meta: { title: "停车记录" }
77 78 },
78 79 // ------------------------登录
79 80 {
... ...
src/utils/filters.js
  View file @9ca4681
... ... @@ -18,7 +18,15 @@ const vFilter = {
18 18 break;
19 19  
20 20 }
21   - }
  21 + },
  22 +
  23 +}
  24 +
  25 +const numFilter=function (value) {
  26 + // 截取当前数据到小数点后两位
  27 + let realVal = (Number(value)/100).toFixed(2)
  28 + return realVal
22 29 }
23 30  
24   -export default vFilter
  31 +
  32 +export default {vFilter,numFilter}
... ...
src/utils/utils.js
  View file @9ca4681
... ... @@ -117,7 +117,7 @@ export default {
117 117 myVxAppId: "wx1489e48e6a547023",
118 118 userToken:localStorage.getItem('userToken'),
119 119 userPhoneNum:localStorage.getItem('userPhoneNum'),
120   - openId: "",
  120 + openId: "oWw3o5rY_bFsiT_nFd2CEQWGZfhs",
121 121 myOrgId: "10120", // 归属地 赤峰id 10003 黄石 10079
122 122  
123 123 // myVxAppId: 'wx1489e48e6a547023',
... ... @@ -160,5 +160,6 @@ export default {
160 160 strmd5 = md5(strmd5);
161 161 strmd5 = strmd5.toUpperCase();
162 162 return strmd5;
163   - }
  163 + },
  164 +
164 165 };
... ...
src/views/cards/buyCardDetail.vue
  View file @9ca4681
1 1 <template>
2 2 <section class="">
3 3 <div class="vipCardBg">
4   - <ul class="cardTypeList">
5   - <li>年卡</li>
6   - <li>月卡</li>
7   - <li>半年卡</li>
8   - </ul>
  4 + <!--<ul class="cardTypeList">-->
  5 + <!--<li>年卡</li>-->
  6 + <!--<li>月卡</li>-->
  7 + <!--<li>半年卡</li>-->
  8 + <!--</ul>-->
9 9  
10   - <div class="van-ellipsis" style="padding: 20px 0 10px 20px">万达停车场plName</div>
11   - <div class="van-ellipsis" style="padding: 0 0 0 20px">万达停车场plAddress</div>
  10 + <div class="van-ellipsis" style="padding: 20px 0 10px 20px"> {{plName}}</div>
  11 + <div class="van-ellipsis" style="padding: 0 0 0 20px">{{plAddress}}</div>
12 12 </div>
13   - <van-cell-group inset style="margin-bottom: 10px;" v-for="i in list" @click="LinkBuyCard">
14   - <van-cell >
  13 + <van-cell-group inset style="margin-bottom: 10px;" v-for="(i,index) in list" @click="LinkBuyCard(i)" :key="index">
  14 + <van-cell>
15 15 <template #title>
16   - <span style="font-size: 20px;font-weight: 600;">年卡</span>
  16 + <span style="font-size: 20px;font-weight: 600;">{{i.cardType | capitalize}}优惠</span>
17 17 </template>
18 18 </van-cell>
19   - <van-cell :title= "i.cardName" center value="立即购买" :label="'单价：'+(i.actPrice/100).toFixed(2)" is-link>
  19 + <van-cell :title="i.cardName" center value="立即购买" :label="'单价：'+(i.actPrice/100).toFixed(2)" is-link>
20 20 </van-cell>
21 21 </van-cell-group>
22 22  
23 23 <!--<van-cell-group inset style="margin-bottom: 10px;">-->
24   - <!--<van-cell >-->
25   - <!--<template #title>-->
26   - <!--<span style="font-size: 20px;font-weight: 600;">年卡</span>-->
27   - <!--</template>-->
28   - <!--</van-cell>-->
29   - <!--<van-cell title="万达月卡cardName" center value="立即购买" label="单价：￥1800.00" is-link>-->
30   - <!--</van-cell>-->
  24 + <!--<van-cell >-->
  25 + <!--<template #title>-->
  26 + <!--<span style="font-size: 20px;font-weight: 600;">年卡</span>-->
  27 + <!--</template>-->
  28 + <!--</van-cell>-->
  29 + <!--<van-cell title="万达月卡cardName" center value="立即购买" label="单价：￥1800.00" is-link>-->
  30 + <!--</van-cell>-->
31 31 <!--</van-cell-group>-->
32 32 </section>
33 33  
... ... @@ -38,38 +38,78 @@
38 38 import { queryVipCardByPlNo } from "@/api/card/card";
39 39 export default {
40 40 name: "buyCardDetail",
41   - data(){
42   - return{
43   - plNo:'',
44   - list:[]
45   - }
  41 + data() {
  42 + return {
  43 + plNo: "",
  44 + plName: "",
  45 + plAddress: "",
  46 + list: []
  47 + };
46 48 },
47   - created(){
48   - this.plNo = this.$route.query.plNo
49   - console.log(this.plNo)
50   - this.queryVipCardByPlNo()
  49 + created() {
  50 + this.plNo = this.$route.query.plNo;
  51 + this.plName = this.$route.query.plName;
  52 + this.plAddress = this.$route.query.plAddress;
  53 + console.log(this.plNo);
  54 + this.queryVipCardByPlNo();
51 55 },
52   -
53   - methods:{
54   - LinkBuyCard(){
  56 + methods: {
  57 + LinkBuyCard(i) {
55 58 this.$router.push({
56   - name: "buyVipCard"
  59 + name: "buyVipCard",
  60 + query: {
  61 + cardName:i.cardName,
  62 + carType:i.carType,
  63 + cardType:i.cardType,
  64 + actPrice:i.actPrice,
  65 + discValue:i.discValue,
  66 + cardNo:i.cardNo,
  67 + plName:this.plName,
  68 + plNo:this.plNo
  69 + }
57 70 }
58 71 );
59 72 },
60 73 queryVipCardByPlNo() {
61 74 let jsondata = {
62   - parkNo:this.plNo,
  75 + parkNo: this.plNo,
63 76 saleChannel: "2"
64 77 };
65 78 jsondata.sign = this.$utils.signObject(jsondata);
66 79 queryVipCardByPlNo(jsondata).then(response => {
67 80 // console.log(response.data[0].parkList);
68   -
69 81 console.log(response);
70   - this.list = response.data
  82 + this.list = response.data;
71 83 });
72 84 }
  85 + },
  86 + filters: {
  87 + capitalize: function(value) {
  88 + if (value == 1) {
  89 + return "年卡";
  90 + }
  91 + if (value == 2) {
  92 + return "半年卡";
  93 + }
  94 + if (value == 3) {
  95 + return "季卡";
  96 + }
  97 + if (value == 4) {
  98 + return "月卡";
  99 + }
  100 + if (value == 5) {
  101 + return "日卡";
  102 + }
  103 + if (value == 6) {
  104 + return "错峰年卡(周末免费)";
  105 + }
  106 + if (value == 7) {
  107 + return "错峰月卡(周末免费)";
  108 + }
  109 + if (value == 8) {
  110 + return "错峰夜晚包月";
  111 + }
  112 + }
73 113 }
74 114 };
75 115 </script>
... ...
src/views/cards/buyVipCard.vue
  View file @9ca4681
... ... @@ -7,19 +7,19 @@
7 7 <van-action-sheet v-model="show" :actions="actions" @select="onSelect"/>
8 8 </template>
9 9 </van-cell>
10   - <van-cell title="适用停车场" value="万达停车场"/>
11   - <van-cell title="卡类别" value="小型车月卡"/>
12   - <van-cell title="卡名称" value="万达月卡"/>
  10 + <van-cell title="适用停车场" :value="plName"/>
  11 + <van-cell title="卡类别" :value="cardNickname"/>
  12 + <van-cell title="卡名称" :value="cardName"/>
13 13 <van-cell title="生效时间" is-link>
14 14 <template>
15 15 <p @click="showDate = true" style="color: #1989fa"> {{valueStart}}</p>
16 16 </template>
17 17 </van-cell>
18   - <van-cell title="失效时间" value="2023-10-20"/>
  18 + <van-cell title="失效时间" :value="effDate"/>
19 19  
20 20 <van-cell title="购买数量">
21 21 <template>
22   - <van-stepper v-model.number="cardNum" theme="round" button-size="22" disable-input/>
  22 + <van-stepper v-model="count" :min="1" theme="round" button-size="22" disable-input @change="changeCount"/>
23 23 </template>
24 24 </van-cell>
25 25 </van-cell-group>
... ... @@ -42,21 +42,21 @@
42 42 <van-cell-group style="border-bottom: 10px solid #fafafa">
43 43 <van-cell title="单价">
44 44 <template>
45   - <p style="font-size: 16px;font-weight: 600;color: #000;">3420.00元</p>
  45 + <p style="font-size: 16px;font-weight: 600;color: #000;">{{actPrice|numFilter}}元</p>
46 46 </template>
47 47 </van-cell>
48 48  
49 49  
50   - <van-cell title="单价">
  50 + <van-cell title="优惠">
51 51 <template>
52   - <p style="font-size: 16px;font-weight: 600;color: #f00;">20.00元</p>
  52 + <p style="font-size: 16px;font-weight: 600;color: #f00;">{{discValue}}折</p>
53 53 </template>
54 54 </van-cell>
55 55  
56 56  
57 57 <van-cell title="支付金额">
58 58 <template>
59   - <p style="font-size: 16px;font-weight: 600;color: #000;">3420.00元</p>
  59 + <p style="font-size: 16px;font-weight: 600;color: #000;">{{ ((payPrice*discValue)/10) |numFilter}}元</p>
60 60 </template>
61 61 </van-cell>
62 62  
... ... @@ -65,44 +65,238 @@
65 65  
66 66 <div class="leftRightPadding" style="margin-top: 34px">
67 67 <!--<mt-button type="danger" size="large"></mt-button>-->
68   - <van-button type="info" block>购买</van-button>
  68 + <van-button type="info" block @click="buyCardHandle">购买</van-button>
69 69 </div>
70 70  
71 71 </section>
72 72 </template>
73 73  
74 74 <script>
75   -import { Toast } from "vant";
  75 +import { queryUserCars, createVipCardOrder2022 } from "@/api/card/card";
76 76 export default {
77 77 name: "buyVipCard",
78 78 data() {
79 79 return {
80   - carNum: "京A1231",
  80 + plName:'',
  81 + cardNo:'',
  82 + plNo:'',
  83 + carList: [],
  84 + carNum: "",
81 85 show: false,
82   - actions: [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }],
83   - minDate: new Date(2020, 1, 1),
84   - maxDate: new Date(2025, 10, 11),
85   - currentDate: new Date(2023, 10, 11),
86   - valueStart: "2023-10-01",
  86 + actions: [],
  87 + minDate: '',
  88 + maxDate: new Date(2099, 10, 14),
  89 + currentDate: '',
  90 + valueStart: "",
  91 + effDate:'',// 失效时间
87 92 showDate: false,
88   - cardNum: 1
  93 + count: 1, // 购买数量
  94 + cardName: "",//卡名称
  95 + carType: "",//车辆类型
  96 + cardType: "",//卡类型
  97 + cardNickname: "",//卡类别
  98 + actPrice: "",//单价
  99 + discValue: "",//优惠
  100 + payPrice: "" // 支付金额
89 101 };
90 102 },
  103 + created() {
  104 +
  105 + this.plNo = this.$route.query.plNo;
  106 + this.cardNo = this.$route.query.cardNo;
  107 +
  108 + this.plName = this.$route.query.plName;
  109 + this.cardName = this.$route.query.cardName;
  110 + this.carType = this.$route.query.carType;
  111 + let carTypeName;
  112 + switch (Number(this.carType)) {
  113 + case 1:
  114 + carTypeName = "大型车";
  115 + break;
  116 + case 2:
  117 + carTypeName = "小型车";
  118 + break;
  119 + default:
  120 + break;
  121 + }
  122 + this.cardType = this.$route.query.cardType;
  123 + let cardTypeName;
  124 + switch (Number(this.cardType)) {
  125 + case 1:
  126 + cardTypeName = "年卡";
  127 + break;
  128 + case 2:
  129 + cardTypeName = "半年卡";
  130 + break;
  131 + case 3:
  132 + cardTypeName = "季卡";
  133 + break;
  134 + case 4:
  135 + cardTypeName = "月卡";
  136 + break;
  137 + case 5:
  138 + cardTypeName = "日卡";
  139 + break;
  140 + default:
  141 + break;
  142 + }
  143 + this.cardNickname = carTypeName + cardTypeName;
  144 + this.actPrice = Number(this.$route.query.actPrice);
  145 + this.discValue = Number(this.$route.query.discValue);
  146 + this.payPrice = this.actPrice * this.count;
  147 + console.log(this.actPrice);
  148 + console.log(this.discValue);
  149 + console.log(this.payPrice);
  150 + this.queryUserCars();
  151 +
  152 + this.getStartDate()
  153 + },
91 154 methods: {
  155 + getStartDate(){
  156 + let dateTime = new Date();
  157 + this.valueStart = this.$utils.formatDate(dateTime,1)
  158 + // this.minDate = this.$utils.formatDate(dateTime,1)
  159 + this.minDate = new Date()
  160 +
  161 + // 计算失效日期根据卡类型
  162 + this.getEffDate(1)
  163 + },
  164 + getEffDate(num){
  165 + if(this.cardType==1){ // 年卡 给日期添加12个月
  166 + console.log(this.valueStart)
  167 + this.effDate = this.$moment(this.valueStart).add(12*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
  168 + }
  169 + if(this.cardType==2){ // 半年卡 给日期添加6个月
  170 + console.log(this.valueStart)
  171 + this.effDate = this.$moment(this.valueStart).add(6*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
  172 + }
  173 + if(this.cardType==3){ // 季卡 给日期添加3个月
  174 + console.log(this.valueStart)
  175 + this.effDate = this.$moment(this.valueStart).add(3*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
  176 + }
  177 + if(this.cardType==4){ // 月卡 给日期添加1个月
  178 + console.log(this.valueStart)
  179 + this.effDate = this.$moment(this.valueStart).add(1*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
  180 + }
  181 + if(this.cardType==5){ // 日卡 给日期添加1个月
  182 + console.log(this.valueStart)
  183 + this.effDate = this.$moment(this.valueStart).add(1*num,'days').format('YYYY-MM-DD')
  184 + }
  185 +
  186 + if(this.cardType==6){ // 错峰年卡(周末免费) 给日期添加12个月
  187 + console.log(this.valueStart)
  188 + this.effDate = this.$moment(this.valueStart).add(12*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
  189 + }
  190 +
  191 + if(this.cardType==7){ // 错峰月卡(周末免费) 给日期添加1个月
  192 + console.log(this.valueStart)
  193 + this.effDate = this.$moment(this.valueStart).add(1*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
  194 + }
  195 +
  196 + if(this.cardType==8){ // 错峰夜晚包月 给日期添加1个月
  197 + console.log(this.valueStart)
  198 + this.effDate = this.$moment(this.valueStart).add(1*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
  199 + }
  200 +
  201 + },
  202 + queryUserCars() {
  203 + let jsondata = {};
  204 + jsondata.sign = this.$utils.signObject(jsondata);
  205 + queryUserCars(jsondata).then(response => {
  206 + console.log(response);
  207 + this.carList = response.data;
  208 + if (this.carList.length == 0) {
  209 + this.carNum = "点击选择车牌";
  210 + this.carList = {
  211 + name: "前往绑定车牌页面"
  212 + };
  213 + } else if (this.carList.length == 3) {
  214 + this.carList.forEach((v, i) => {
  215 + this.actions.push({
  216 + name: v.carNumber
  217 + });
  218 + });
  219 + this.carNum = this.carList[0].carNumber;
  220 + } else {
  221 + this.carList.forEach((v, i) => {
  222 + console.log(v)
  223 + this.actions.push({
  224 + name: v.carNumber
  225 + });
  226 + });
  227 + this.carNum = this.carList[0].carNumber;
  228 + this.actions.push({
  229 + name: "前往绑定车牌页面"
  230 + });
  231 + }
  232 + });
  233 + },
  234 + changeCount(val){
  235 + console.log( this.count)
  236 + this.payPrice = this.actPrice * this.count
  237 + this.getEffDate(val)
  238 + },
  239 +
92 240 onSelect(item) {
93 241 // 默认情况下点击选项时不会自动收起
94 242 // 可以通过 close-on-click-action 属性开启自动收起
95 243 this.show = false;
96 244 this.carNum = item.name;
97   - Toast(item.name);
  245 + console.log(item.name);
  246 + if (item.name == "前往绑定车牌页面") {
  247 + this.$router.push({
  248 + name: "addCarNum"
  249 + }
  250 + );
  251 + }
98 252 },
99 253 confirmDate(val) {
100 254 console.log(val);
101   - this.valueStart = val;
  255 + this.valueStart = this.$utils.formatDate(val,1);
  256 + this.getEffDate(this.count)
102 257 this.showDate = false;
103 258 },
104 259 cancelDate() {
105 260 this.showDate = false;
  261 + },
  262 + buyCardHandle(){ // 购买续费
  263 + //mypaySrcType 301 会员卡购买单 302 会员卡续费
  264 + // cardCouponsId 是 string 已购买的会员卡id 新增不传 续费必传
  265 + // optType 是 string 操作类型 1 购买 2 续费
  266 + if (this.carNum == '点击选择车牌') {
  267 + this.$toast('请先选择车牌')
  268 + return;
  269 + }
  270 +
  271 + let jsondata = {
  272 + plNo: this.plNo,
  273 + cardNo: this.cardNo,
  274 + cardType: this.cardType,
  275 + carType: this.carType,
  276 + price: this.actPrice,
  277 + totalAmount: (this.payPrice*this.discValue)/10,
  278 + num: this.count,
  279 + effDate: this.valueStart,
  280 + expDate: this.effDate,
  281 + carNumber: this.carNum,
  282 + optType: 1,
  283 + cardCouponsId:'',
  284 + forceBuy: '1'
  285 + };
  286 + jsondata.sign = this.$utils.signObject(jsondata);
  287 + createVipCardOrder2022(jsondata).then(response => {
  288 + console.log(response);
  289 + if(response.code == 0){
  290 + let orderId = response.data.orderId
  291 + console.log(orderId)
  292 + }else if(response.code== 5006){
  293 + this.$toast('请先去补缴欠费订单')
  294 + }else{
  295 + this.$toast(response.message)
  296 + }
  297 +
  298 + });
  299 +
106 300 }
107 301 }
108 302 };
... ...