BJ_web_developers / wxgzh

Commit 92e91fa63d8292d5d92323e421bff74b427b0e31

Authored by 刘淇
1 parent eae77c58

江阴领取优惠券调接口

Inline Side-by-side
Showing 9 changed files with 765 additions and 664 deletions
config/index.js
  View file @92e91fa
... ... @@ -10,15 +10,23 @@ module.exports = {
10 10 // Paths
11 11 assetsSubDirectory: 'static',
12 12 assetsPublicPath: '/',
13   - // proxyTable: {
14   - // '/api':{
15   - // target:"http://39.98.58.92:8090/",//这里设置你要访问的域名（或IP+端口）
16   - // changeOrigin:true,
17   - // pathRewrite:{
18   - // '^/api':''//base_api是自定义用来代替http://pay.service.huangshiparking.com/的
19   - // }
20   - // }
21   - // },
  13 + open: true,//vue项目启动时自动打开浏览器
  14 + proxyTable: {
  15 + '/api':{
  16 + target:"https://bus.jycrtc.com",//这里设置你要访问的域名（或IP+端口）
  17 + changeOrigin:true,
  18 + pathRewrite:{
  19 + '^/api':''//base_api是自定义用来代替
  20 + }
  21 + },
  22 + '/payapi':{
  23 + target:"https://pay.jycrtc.com",//这里设置你要访问的域名（或IP+端口）
  24 + changeOrigin:true,
  25 + pathRewrite:{
  26 + '^/payapi':''//base_api是自定义用来代替
  27 + }
  28 + }
  29 + },
22 30  
23 31  
24 32 // Various Dev Server settings
... ...
src/api/couponPay/couponPay.js
  View file @92e91fa
... ... @@ -3,12 +3,62 @@ import request from '@/utils/request'
3 3 export function scanCouponQR(params) {
4 4 return request({
5 5 requestBase:'VUE_APP_URL',
6   - url: 'business/h5/qr/scanCouponQR',
  6 + url: '/api/business/h5/qr/scanCouponQR',
7 7 method: 'post',
8 8 data: params
9 9 })
10 10 }
11 11  
12 12  
  13 +export function queryParkingRecordPageByCarNumbers(params) {
  14 + return request({
  15 + requestBase:'VUE_APP_URL_TWO',
  16 + url: '/payapi/queryParkOrder/queryParkingRecordPageByCarNumbers',
  17 + method: 'post',
  18 + data: params
  19 + })
  20 +}
  21 +
  22 +
  23 +export function appApplyParkOut(params) { // 0元出场
  24 + return request({
  25 + url: '/payapi/appAccountPay/appApplyParkOut',
  26 + method: 'post',
  27 + data: params
  28 + })
  29 +}
  30 +
  31 +
  32 +export function parkingQuery(params) {
  33 + return request({
  34 + url: '/payapi/queryParkOrder/billQuery',
  35 + method: 'post',
  36 + data: params
  37 + })
  38 +}
13 39  
  40 +export function aliPay(params) { // 支付宝
  41 + return request({
  42 + url: '/payapi/alipay/aliH5Pay',
  43 + method: 'post',
  44 + data: params
  45 + })
  46 +}
  47 +
  48 +
  49 +export function getOpenId(params) { // 获取OpenId
  50 + return request({
  51 + url: '/payapi/weixinPublicPay/getOpenIdByCode',
  52 + method: 'post',
  53 + data: params
  54 + })
  55 +}
  56 +
  57 +export function vxPayQuery(params) { // 微信
  58 + return request({
  59 + url: '/payapi/weixinpay/publicUnifiedOrder',
  60 + method: 'post',
  61 + data: params
  62 + })
  63 +}
14 64  
... ...
src/api/orderPay/orderPay.js
  View file @92e91fa
... ... @@ -34,20 +34,20 @@ export function bankH5Pay(params) { // 农行
34 34 })
35 35 }
36 36  
37   -export function queryParkingRecordPageByCarNumbers(params) { // 支付完成后查询记录
38   - return request({
39   - requestBase:'VUE_APP_URL_TWO',
40   - url: 'queryParkOrder/queryParkingRecordPageByCarNumbers',
41   - method: 'post',
42   - data: params
43   - })
44   -}
45 37  
46 38  
47 39  
48 40  
49 41  
50 42  
  43 +export function queryParkingRecordPageByCarNumbers(params) {
  44 + return request({
  45 + requestBase:'VUE_APP_URL_TWO',
  46 + url: '/payapi/queryParkOrder/queryParkingRecordPageByCarNumbers',
  47 + method: 'post',
  48 + data: params
  49 + })
  50 +}
51 51  
52 52  
53 53  
... ...
src/router/index.js
  View file @92e91fa
... ... @@ -11,7 +11,7 @@ export default new Router({
11 11 {
12 12 path: '/',
13 13 redirect: {
14   - name: 'coupon'
  14 + name: 'plateNumber'
15 15 }
16 16 },
17 17 // {
... ...
src/utils/request.js
  View file @92e91fa
... ... @@ -4,31 +4,26 @@ import axios from 'axios'
4 4 // axios.defaults.baseURL = process.env.API_ROOT
5 5  
6 6 const service = axios.create({
7   - // baseURL:'https://bus.jycrtc.com/',
8   - baseURL:process.env.VUE_APP_URL,
  7 + // baseURL:'https://bus.jycrtc.com/',
  8 + // baseURL:process.env.VUE_APP_URL,
9 9 // withCredentials: true, // send cookies when cross-domain requests
10 10 timeout: 6000, // request timeout
11 11 withCredentials: false,
12 12 headers:{
13   - 'Access-Control-Allow-Origin':'*',
14   - 'Content-Type':'application/x-www-form-urlencoded'
  13 + 'Access-Control-Allow-Origin':'*'
  14 + //'Content-Type':'application/x-www-form-urlencoded'
15 15 }
16 16 })
17 17  
18 18 service.interceptors.request.use(
19 19  
20 20 config => {
21   - if(config.requestBase=='VUE_APP_URL'){
22   - // config.headers['Content-Type']="application/x-www-form-urlencoded";
23   - config.baseURL='https://bus.jycrtc.com/';
24   - config.data=JSON.stringify(config.data);
25   -
26   - }else if(config.requestBase=='VUE_APP_URL_TWO'){
27   - // config.headers['Content-Type']="application/x-www-form-urlencoded";
28   - config.baseURL='https://pay.jycrtc.com/';
29   - config.data=JSON.stringify(config.data);
30   -
31   - }
  21 + // if(config.requestBase=='VUE_APP_URL'){
  22 + // config.baseURL='https://bus.jycrtc.com/';
  23 + //
  24 + // }else if(config.requestBase=='VUE_APP_URL_TWO'){
  25 + // config.baseURL='https://pay.jycrtc.com/';
  26 + // }
32 27  
33 28 return config
34 29 },
... ...
src/views/parkPay/coupon.vue
  View file @92e91fa
1 1 <template>
2 2 <div>
3   - <img :src="successiconUrl" alt="" style="margin: 10px auto;width: 64px;height: 64px;">
  3 + <img :src="imgurl" alt="" style="margin: 10px auto;width: 64px;height: 64px;">
4 4 <div style="padding: 10px 30px 50px">
5   - <p>尊敬的车主您好：</p>
6   - <p>尊敬的车主您好：</p>
7   - <p>尊敬的车主您好：</p>
  5 + <p>尊敬的车主您好：{{tipText}}</p>
8 6 </div>
9 7 <div style="padding: 0 20px">
10   - <mt-button size="large" type="primary" @click="toPay" style="margin-bottom: 20px;">去支付</mt-button>
  8 + <mt-button size="large" type="primary" @click="toPay" style="margin-bottom: 20px;" v-show="payFlag">去支付</mt-button>
11 9 <mt-button size="large" type="danger" @click="toBackPage">返回</mt-button>
12 10 </div>
13 11  
... ... @@ -17,19 +15,28 @@
17 15 <script>
18 16  
19 17  
20   -import { scanCouponQR } from '@/api/couponPay/couponPay.js'
  18 +import { scanCouponQR, queryParkingRecordPageByCarNumbers, appApplyParkOut, parkingQuery } from '@/api/couponPay/couponPay.js'
21 19  
22 20 export default {
23 21 name: "coupon",
24 22 data() {
25 23 return {
  24 + imgurl:'',
26 25 successiconUrl: require('../../assets/images/successIcon.png'),
27 26 loseiconUrl: require('../../assets/images/loseIcon.png'),
28   - carNum: '苏BB210V',
29   - carNumberColor: ''
  27 + carNum: '',
  28 + carNumberColor: '',
  29 + parkingData:[],
  30 + carType:'',
  31 + codeType:'',
  32 + tipText:'',
  33 + payFlag:false,
30 34 }
31 35 },
32 36 created() {
  37 + this.carNum = this.$route.query.carNumber
  38 + this.carType = this.$route.query.carType
  39 + this.codeType = this.$route.query.codeType
33 40  
34 41 // this.carNum = this.$route.query.carNumber // 获取车牌号
35 42 // this.carNumberColor = this.$route.query.carNumberColor // 获取颜色 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
... ... @@ -46,8 +53,8 @@ export default {
46 53 deviceInfo: this.$utils.myDeviceInfo,
47 54 salt: salt,
48 55 sign_type: "md5",
49   - carType:'02',
50   - codeType:'2',
  56 + carType:this.carType,
  57 + codeType:this.codeType,
51 58 cardRelParkNo:'123qwe',
52 59 key:'1',
53 60 carNum: this.carNum,
... ... @@ -57,19 +64,121 @@ export default {
57 64 // token:'e2c1e43722dd43a5b7e268001b39e6f0'
58 65 }
59 66 jsondata.sign = this.$utils.signObject(jsondata)
60   - console.log(jsondata)
61 67 scanCouponQR(jsondata).then(response => {
62 68 console.log(response)
  69 + this.tipText = response.data.message
  70 + if(response.data.code==0){
  71 + this.payFlag = true
  72 + this.imgurl = this.successiconUrl
  73 + }else{
  74 + this.payFlag = false
  75 + this.imgurl = this.loseiconUrl
  76 + }
63 77 })
64 78 },
65 79 toPay() {
66   - this.$router.push({
67   - path: 'couponPay'
68   - })
  80 + this.parkRecordList()
  81 + // this.$router.push({
  82 + // path: 'couponPay'
  83 + // })
69 84 },
70 85 toBackPage() {
71 86 this.$router.back()
72   - }
  87 + },
  88 + parkRecordList() { // 获取停车记录数据
  89 + var salt = this.$utils.myCommonSalt(32);
  90 + var jsondata = {
  91 + app_id: this.$utils.myVarAppid,
  92 + deviceInfo: this.$utils.myDeviceInfo,
  93 + salt: salt,
  94 + sign_type: "md5",
  95 + pageNum: '1',
  96 + pageSize: '1000',
  97 + parkState: '10',
  98 + terminalSource: '3',
  99 + // parkState:'10',
  100 + carNumber: this.carNum,
  101 + // carNumberColor: '1',
  102 + orgId: this.$utils.myOrgId,
  103 +
  104 + }
  105 + jsondata.sign = this.$utils.signObject(jsondata)
  106 +
  107 + // jsondata.sign = md5sign
  108 + console.log('停车记录传参 ' + JSON.stringify(jsondata));
  109 + queryParkingRecordPageByCarNumbers(jsondata).then(response => {
  110 + console.log(response)
  111 + // this.parkList = response.data.dataList
  112 +
  113 + this.parkingData = response.data.dataList.filter(item => {
  114 + return item.parkState == '10'
  115 + })
  116 + console.log(this.parkingData)
  117 + this.toPayCurrent(this.parkingData)
  118 +
  119 + })
  120 + },
  121 + toPayCurrent(i) { // 缴纳本次在停费用
  122 + var salt = this.$utils.myCommonSalt(32);
  123 + var params = {
  124 + app_id: this.$utils.myVarAppid,
  125 + deviceInfo: this.$utils.myDeviceInfo,
  126 + salt: salt,
  127 + sign_type: "md5",
  128 + orderId: i[0].orderId,
  129 + payOrderType: '101',
  130 + terminalSource: '3',
  131 + }
  132 + params.sign = this.$utils.signObject(params)
  133 + appApplyParkOut(params).then(response => {
  134 + console.log(response)
  135 +
  136 + if (response.code == '5005') {
  137 + var salt = this.$utils.myCommonSalt(32);
  138 + var jsondata = {
  139 + app_id: this.$utils.myVarAppid,
  140 + deviceInfo: this.$utils.myDeviceInfo,
  141 + salt: salt,
  142 + sign_type: "md5",
  143 + payType: this.$utils.clientBrowsePayType(),
  144 + appId: this.$utils.myVxAppId,
  145 + orderId: i[0].orderId,
  146 + terminalSource: '7',
  147 + parkCode: i[0].parkCode,
  148 + carNumber: this.carNum,
  149 + }
  150 + jsondata.sign = this.$utils.signObject(jsondata)
  151 + parkingQuery(jsondata).then(result => {
  152 + console.log(result)
  153 + let res = result.data
  154 + let _dis = res.discountFee
  155 + let discountFee = _dis.slice(1, _dis.length - 1)
  156 + sessionStorage.setItem('couponPark',JSON.stringify(result.data))
  157 + this.$router.push(
  158 + {
  159 + path: 'couponPay',
  160 + query: {
  161 + carColor: this.carColor,// 车牌颜色
  162 + arrearageTotalFee: res.orderTotalFee,// 应收
  163 + arrearageDiscFee: discountFee * 100,// 优惠
  164 + arrearageActFee: res.orderFee,// 实收
  165 + carNumber: this.carNumber, // 车牌
  166 + paySrcType: 101, //支付的类型 101 是本次 103是历史欠费
  167 + ordeID: i.orderId, //支付的订单号
  168 + appOrderTimeout: res.appOrderTimeout, // 超时描述
  169 + }
  170 + }
  171 + )
  172 + })
  173 +
  174 + } else {
  175 + //$('.dialog-out').show()
  176 + this.$msgbox('提示', '停车15分钟内无需缴费，申请成功。')
  177 + }
  178 +
  179 + })
  180 +
  181 + },
73 182 }
74 183 };
75 184 </script>
... ...
src/views/parkPay/couponPay.vue
  View file @92e91fa
... ... @@ -2,48 +2,58 @@
2 2 <div>
3 3 <div class="car-wrap">
4 4 <div class="carBG" :class="carWrapBG | formateColor">
5   - <p class="carNumber">{{carNumber}}</p>
6   - <p class="payFee">{{(arrearageActFee/100).toFixed(2)}}元</p>
  5 + <p class="carNumber">{{ carNumber }}</p>
  6 + <p class="payFee">{{ (orderFee / 100).toFixed(2) }}元</p>
7 7 </div>
8 8 </div>
9 9  
10 10 <ul class="fee-wrap">
11 11 <li>
12 12 <span>停放车场</span>
13   - <span>{{parkName}}</span>
  13 + <span>{{ parkName }}</span>
14 14 </li>
15 15 <li>
16 16 <span>入场时间</span>
17   - <span>{{parkInTime}}</span>
  17 + <span>{{ parkInTime }}</span>
18 18 </li>
19 19 <li>
20 20 <span>出场时间</span>
21   - <span>{{parkOutTime}}</span>
  21 + <span>{{ parkOutTime }}</span>
22 22 </li>
23 23 <li>
24 24 <span>停车时长</span>
25   - <span>{{$utils.dateFormat(parkDuration)}}</span>
  25 + <span>{{ $utils.dateFormat(parkDuration) }}</span>
26 26 </li>
27 27 <li>
28 28 <span>应付金额</span>
29   - <span> ¥{{(totalFee/100).toFixed(2)}}元</span>
  29 + <span> ¥{{ (orderTotalFee / 100).toFixed(2) }}元</span>
30 30 </li>
31 31 <li>
32 32 <span>停车优惠</span>
33 33 <p>
34   - ({{cardTypeFormat(carType)}}) <span style="color: #3cc51f">-20.00元</span>
  34 + ({{ cardTypeFormat(carType) }}) <span style="color: #3cc51f">{{ discountFee }}</span>
35 35 </p>
36 36 </li>
  37 +
  38 + <li>
  39 + <span>商户券优惠</span>
  40 + <span> ¥{{ (busDiscValue / 100).toFixed(2) }}元</span>
  41 + </li>
  42 +
  43 + <li>
  44 + <span>信用优惠</span>
  45 + <span> ¥{{ (creDitDisValue / 100).toFixed(2) }}元</span>
  46 + </li>
  47 +
37 48 <li>
38 49 <span>实际支付</span>
39   - <span style="color: red"> ¥{{(unPayFee/100).toFixed(2)}}元</span>
  50 + <span style="color: red"> ¥{{ (orderFee / 100).toFixed(2) }}元</span>
40 51 </li>
41 52 </ul>
42 53  
43 54  
44   -
45 55 <div style="padding: 20px 18px">
46   - <div class="toPay" @click="toPay">{{clientBrowser}}支付</div>
  56 + <div class="toPay" @click="toPay">{{ clientBrowser }}支付</div>
47 57 </div>
48 58  
49 59 <div v-if="appOrderTimeout.length>0">
... ... @@ -51,37 +61,36 @@
51 61 温馨提示：
52 62 </p>
53 63 <p style="color: #666;padding: 0 18px;">
54   - {{appOrderTimeout}}
  64 + {{ appOrderTimeout }}
55 65 </p>
56 66 </div>
57 67  
58 68  
59   -
60 69 </div>
61 70 </template>
62 71  
63 72 <script>
64   -// import CryptoJS from '../utils/AES.js'
65   -// let Base64 = require('js-base64').Base64
66   -import { MessageBox } from 'mint-ui';
67   -import { aliPay, getOpenId, vxPayQuery, bankH5Pay, queryParkingRecordPageByCarNumbers } from '@/api/orderPay/orderPay'
  73 +import {MessageBox} from 'mint-ui';
  74 +import {aliPay, getOpenId, vxPayQuery, bankH5Pay,} from '@/api/couponPay/couponPay.js'
68 75  
69 76 export default {
70 77 name: 'orderPay',
71 78 data() {
72 79 return {
73 80 carWrapBG: 0,
74   - carNumber: '苏BB210V',
75   - parkName:'',
76   - parkInTime:'',
77   - parkOutTime:'',
78   - parkDuration:'',
79   - carType:1,
80   - arrearageActFee: 0,
81   - arrearageDiscFee: 0,
82   - arrearageActFee: 0,
83   - totalFee:0,// 应付
84   - unPayFee:0,// 实付
  81 + carNumber: '',
  82 + parkName: '',
  83 + parkInTime: '',
  84 + parkOutTime: '',
  85 + parkDuration: '',
  86 + discountFee: 0,// 停车优惠
  87 + carType: 1,
  88 +
  89 + orderTotalFee: 0,// 应付
  90 + orderFee: 0,// 实付
  91 + busDiscValue: 0,// 优惠券优惠金额
  92 + creDitDisValue: 0, // 信用优惠
  93 +
85 94 parkingData: [], // 在停数据
86 95 historyList: [], // 历史欠费数据
87 96 clientBrowser: '', // 客户端
... ... @@ -92,63 +101,35 @@ export default {
92 101 }
93 102 },
94 103 created() {
95   - // this.carWrapBG = this.$route.query.carColor //车牌颜色
96   - // this.carNumber = this.$route.query.carNumber
97   - // this.arrearageTotalFee = this.$route.query.arrearageTotalFee // 应收
98   - // this.arrearageDiscFee = this.$route.query.arrearageDiscFee // 优惠
99   - // this.arrearageActFee = this.$route.query.arrearageActFee // 实收
  104 + let couponPark = JSON.parse(sessionStorage.getItem('couponPark'))
  105 + console.log(couponPark)
  106 + this.carWrapBG = couponPark.carNumberColor //车牌颜色
  107 + this.carNumber = couponPark.plateno
  108 + this.parkName = couponPark.parkName
  109 + this.parkInTime = couponPark.inparktime
  110 + this.parkOutTime = couponPark.outtime
  111 + this.parkDuration = couponPark.staytime
  112 + this.discountFee = couponPark.discountFee
  113 + this.orderTotalFee = couponPark.orderTotalFee
  114 + this.orderFee = couponPark.orderFee
  115 + this.busDiscValue = couponPark.busDiscValue
  116 + this.creDitDisValue = couponPark.creDitDisValue
  117 +
  118 + this.appOrderTimeout = couponPark.appOrderTimeout
100 119 this.clientBrowser = this.$utils.clientBrowser() //支付方式
101 120 // this.paySrcType = this.$route.query.paySrcType // 实收
102   - // this.orderId = this.$route.query.ordeID
103   - // console.log(this.orderId)
104   - // this.appOrderTimeout = this.$route.query.appOrderTimeout
  121 + this.orderId = couponPark.orderId
105 122 if (this.clientBrowser == "微信") {
106 123 this.webAppCode = this.getCode();
107 124 }
108 125  
109   - this.parkRecordList()
110 126  
111 127 },
112   - mounted(){
  128 + mounted() {
113 129  
114 130 },
115 131 methods: {
116   - parkRecordList() { // 获取停车记录数据
117   - var salt = this.$utils.myCommonSalt(32);
118   - var jsondata = {
119   - app_id: this.$utils.myVarAppid,
120   - deviceInfo: this.$utils.myDeviceInfo,
121   - salt: salt,
122   - sign_type: "md5",
123   - pageNum: '1',
124   - pageSize: '1000',
125   - parkState: '10',
126   - terminalSource: '3',
127   - parkState:'10',
128   - carNumber: this.carNumber,
129   - carNumberColor: '0',
130   - orgId: this.$utils.myOrgId,
131   -
132   - }
133   - jsondata.sign = this.$utils.signObject(jsondata)
134   -
135   - // jsondata.sign = md5sign
136   - console.log('停车记录传参 ' + JSON.stringify(jsondata));
137   - queryParkingRecordPageByCarNumbers(jsondata).then(response => {
138   - console.log(response)
139   - let res = response.data.dataList[0]
140   - this.parkName = res.parkName
141   -
142   - this.parkInTime = res.parkInTime
143   - this.parkOutTime = res.parkOutTime
144   - this.parkDuration = res.parkDuration
145   - this.carType = res.carType
146 132  
147   - this.totalFee = res.totalFee
148   - this.unPayFee = res.unPayFee
149   -
150   - })
151   - },
152 133 getCode() {
153 134 var appID = this.$utils.myVxAppId;
154 135 var code = this.getUrlParam('code');
... ... @@ -188,7 +169,7 @@ export default {
188 169 aliParams.orderId = this.orderId;
189 170 aliParams.carNumber = this.carNumber;
190 171 aliParams.payType = 1;// 1:支付宝 2：微信 3：银联 10:H5 4微信公众号
191   - aliParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
  172 + aliParams.terminalSource = 3;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
192 173 aliParams.paySrcType = this.paySrcType;//101停车支付
193 174 aliParams.orgId = this.$utils.myOrgId
194 175 aliParams.backType = 2
... ... @@ -198,12 +179,12 @@ export default {
198 179 console.log(response)
199 180 if (response.code == 0) {//进场
200 181 document.write(response.data);//打开支付表单
201   - } else if(response.code == 1002){//其他情况如【该卡号场内已存在】
  182 + } else if (response.code == 1002) {//其他情况如【该卡号场内已存在】
202 183 console.log(response.message);
203 184 MessageBox.confirm('', {
204 185 message: response.message,
205 186 title: '温馨提示',
206   - showCancelButton:false,
  187 + showCancelButton: false,
207 188 confirmButtonText: '确定',
208 189 }).then(action => {
209 190 if (action == 'confirm') { //确认的回调
... ... @@ -215,7 +196,7 @@ export default {
215 196 console.log('取消');
216 197 }
217 198 });
218   - }else{
  199 + } else {
219 200 alert(response.message)
220 201 }
221 202  
... ... @@ -225,9 +206,9 @@ export default {
225 206  
226 207 if (this.clientBrowser == '微信') { // 微信支付
227 208 let _openId = sessionStorage.getItem('openIdData')
228   - if(_openId){
  209 + if (_openId) {
229 210 me.vxPay(_openId, this.orderId)
230   - }else{
  211 + } else {
231 212 //第一步获取openid
232 213 var codeParams = {
233 214 code: this.webAppCode,
... ... @@ -236,7 +217,7 @@ export default {
236 217 getOpenId(codeParams).then(res => {
237 218 if (res.code == 0) {
238 219 me.vxPay(res.data, this.orderId)
239   - sessionStorage.setItem('openIdData',res.data)
  220 + sessionStorage.setItem('openIdData', res.data)
240 221 } else if (res.code == 40163) { //code been used, hints[重复code问题]
241 222 alert('请重新支付！重复code问题')
242 223 console.log(res.message);
... ... @@ -251,15 +232,15 @@ export default {
251 232 let vm = this
252 233 var wxParams = {};
253 234 wxParams.orderId = orderIdData;
254   - wxParams.backType = 2,
255   - wxParams.orgId = this.$utils.myOrgId,
256   - wxParams.payType = 4;// 1:支付宝 2：微信 3：银联 10:H5 4微信公众号
257   - wxParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
  235 + wxParams.backType = 2
  236 + wxParams.orgId = this.$utils.myOrgId
  237 + wxParams.payType = 4;// 1:支付宝 2：微信 3：银联 10:H5 4微信公众号
  238 + wxParams.terminalSource = 3;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
258 239 wxParams.carNumber = this.carNumber;
259 240 wxParams.paySrcType = this.paySrcType;//101停车支付
260 241 wxParams.recordArreaInfos = JSON.stringify(orderIdData);
261 242 wxParams.openId = openIdData;
262   - wxParams.appId = this.$utils.myVxAppId;
  243 + wxParams.appId = this.$utils.myVxAppId;
263 244 vxPayQuery(wxParams).then(res => {
264 245 if (res.code == 0) { //
265 246 if (res.data) {
... ... @@ -279,12 +260,12 @@ export default {
279 260 } else {
280 261 alert("没有找到返回值");
281 262 }
282   - } else if(res.code == 1002){//其他情况如【该卡号场内已存在】
  263 + } else if (res.code == 1002) {//其他情况如【该卡号场内已存在】
283 264 console.log(res.message);
284 265 MessageBox.confirm('', {
285 266 message: res.message,
286 267 title: '温馨提示',
287   - showCancelButton:false,
  268 + showCancelButton: false,
288 269 confirmButtonText: '确定',
289 270 }).then(action => {
290 271 if (action == 'confirm') { //确认的回调
... ... @@ -296,7 +277,7 @@ export default {
296 277 console.log('取消');
297 278 }
298 279 });
299   - }else{
  280 + } else {
300 281 alert(res.message)
301 282 }
302 283 })
... ... @@ -319,112 +300,6 @@ export default {
319 300 // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
320 301 if (res.err_msg === 'get_brand_wcpay_request:ok') {
321 302 console.log('成功')
322   - var salt = me.$utils.myCommonSalt(32);
323   - let wxparams = {
324   - pageNum: 1,
325   - pageSize: 10000,
326   - parkState: 10,
327   - terminalSource: 7,
328   - carNumber: me.carNumber,
329   - app_id: me.$utils.myVarAppid,
330   - deviceInfo: me.$utils.myDeviceInfo,
331   - salt: salt,
332   - sign_type: "md5",
333   - token:'',
334   - }
335   - wxparams.sign = me.$utils.signObject(wxparams)
336   - queryParkingRecordPageByCarNumbers(wxparams).then(response => {
337   - console.log(response)
338   - me.parkList = response.data.dataList
339   -
340   - // alert(JSON.stringify(me.parkList))
341   - // alert(me.parkList.length)
342   - if(me.parkList.length == 0){
343   - me.$router.push({
344   - path:'parkRecord',
345   - query:{
346   - carNumber: me.carNumber,
347   - carNumberColor: me.carWrapBG,
348   - parkFlag: 0 // 0表示在停 1表示历史
349   - }
350   - })
351   -
352   - }else{
353   - me.parkingData = me.parkList.filter(item => {
354   - return item.parkState == '10'
355   - })
356   - console.log(me.parkingData)
357   - me.historyList = me.parkList.filter(item => {
358   - return item.parkState == '20'
359   - })
360   - console.log(me.historyList)
361   -
362   - if(me.historyList.length>0){
363   - MessageBox.confirm('', {
364   - message: '您当前有历史欠费 是否立即补缴?',
365   - title: '温馨提示',
366   - confirmButtonText: '去补缴',
367   - cancelButtonText: '取消'
368   - }).then(action => {
369   - if (action == 'confirm') { //确认的回调
370   - console.log('确定');
371   - me.$router.push({
372   - path:'parkRecord',
373   - query:{
374   - carNumber: me.carNumber,
375   - carNumberColor: me.carWrapBG,
376   - parkFlag: 1 // 0表示在停 1表示历史
377   - }
378   - })
379   - }
380   - }).catch(err => {
381   - if (err == 'cancel') { //取消的回调
382   - console.log('取消');
383   - }
384   - });
385   - }else{
386   -
387   - if(me.paySrcType==101){ //缴费了本次
388   - me.$router.push({
389   - path:'parkRecord',
390   - query:{
391   - carNumber: me.carNumber,
392   - carNumberColor: me.carWrapBG,
393   - parkFlag: 0 // 0表示在停 1表示历史
394   - }
395   - })
396   - }else{
397   - MessageBox.confirm('', {
398   - message: '您当前有在停订单 是否立即支付?',
399   - title: '温馨提示',
400   - confirmButtonText: '去支付',
401   - cancelButtonText: '取消'
402   - }).then(action => {
403   - if (action == 'confirm') { //确认的回调
404   - console.log('确定');
405   - me.$router.push({
406   - path:'parkRecord',
407   - query:{
408   - carNumber: me.carNumber,
409   - carNumberColor: me.carWrapBG,
410   - parkFlag: 0 // 0表示在停 1表示历史
411   - }
412   - })
413   - }
414   - }).catch(err => {
415   - if (err == 'cancel') { //取消的回调
416   - console.log('取消');
417   - }
418   - });
419   - }
420   -
421   - }
422   - }
423   -
424   -
425   -
426   - })
427   -
428 303  
429 304  
430 305 } else {
... ... @@ -435,115 +310,139 @@ export default {
435 310 }
436 311 )
437 312 },
438   - cardTypeFormat : function(num){
439   - if(num == '1'){
  313 + cardTypeFormat: function (num) {
  314 + if (num == '1') {
440 315 return '单次券'
441 316 }
442   - if(num == 2){
  317 + if (num == 2) {
443 318 return '时长券'
444 319 }
445   - if(num == 3){
  320 + if (num == 3) {
446 321 return '满减券'
447 322 }
448   - if(num == 4){
  323 + if (num == 4) {
449 324 return '金额券'
450 325 }
451   - if(num == 5){
  326 + if (num == 5) {
452 327 return '包天券'
453 328 }
454   - if(num == 6){
  329 + if (num == 6) {
455 330 return '折扣券'
456 331 }
457 332 }
458 333 },
459 334 filters: {
  335 + formateColor: function (val) { // 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
  336 + console.log('1111111111')
  337 + console.log(val)
  338 + switch (val) {
  339 + case 0:
  340 + return 'carBlue'
  341 + break;
  342 + case 1:
  343 + return 'carYellow'
  344 + break;
  345 + case 2:
  346 + return 'carWhite'
  347 + break;
  348 + case 3:
  349 + return 'carBlack'
  350 + break;
  351 + case 4:
  352 + return 'carGreen'
  353 + break;
  354 +
  355 + }
  356 + }
460 357 }
461 358 }
462 359 </script>
463 360  
464 361 <style scoped lang="scss">
465   - .car-wrap {
466   - padding: 7px 7px;
467   - background: #FFF;
468   - }
  362 +.car-wrap {
  363 + padding: 7px 7px;
  364 + background: #FFF;
  365 +}
469 366  
470   - .carBG {
471   - width: 100%;
472   - height: 130px;
473   - }
  367 +.carBG {
  368 + width: 100%;
  369 + height: 130px;
  370 +}
474 371  
475   - .carBlue {
476   - background: url("../../assets/images/blueBG.png") no-repeat;
477   - background-size: 100% 100%;
478   - }
  372 +.carBlue {
  373 + background: url("../../assets/images/blueBG.png") no-repeat;
  374 + background-size: 100% 100%;
  375 +}
479 376  
480   - .carYellow {
481   - background: url("../../assets/images/yellowBG.png") no-repeat;
482   - background-size: 100% 100%;
483   - }
  377 +.carYellow {
  378 + background: url("../../assets/images/yellowBG.png") no-repeat;
  379 + background-size: 100% 100%;
  380 +}
484 381  
485   - .carGreen {
486   - background: url("../../assets/images/greenBG.png") no-repeat;
487   - background-size: 100% 100%;
488   - }
  382 +.carGreen {
  383 + background: url("../../assets/images/greenBG.png") no-repeat;
  384 + background-size: 100% 100%;
  385 +}
489 386  
490   - .carWhite {
491   - background: url("../../assets/images/whiteBG.png") no-repeat;
492   - background-size: 100% 100%;
493   - }
  387 +.carWhite {
  388 + background: url("../../assets/images/whiteBG.png") no-repeat;
  389 + background-size: 100% 100%;
  390 +}
494 391  
495   - .carBlack {
496   - background: url("../../assets/images/blackBG.png") no-repeat;
497   - background-size: 100% 100%;
498   - }
  392 +.carBlack {
  393 + background: url("../../assets/images/blackBG.png") no-repeat;
  394 + background-size: 100% 100%;
  395 +}
499 396  
500   - .carNumber {
501   - padding: 20px 0 10px;
502   - font-size: 30px;
503   - color: #fff;
504   - text-align: center;
505   - }
  397 +.carNumber {
  398 + padding: 20px 0 10px;
  399 + font-size: 30px;
  400 + color: #fff;
  401 + text-align: center;
  402 +}
506 403  
507   - .payFee {
508   - font-size: 24px;
509   - color: #FF7B7B;
510   - text-align: center;
511   - }
  404 +.payFee {
  405 + font-size: 24px;
  406 + color: #FF7B7B;
  407 + text-align: center;
  408 +}
512 409  
513   - .fee-wrap {
514   - background: #FFF;
515   - padding: 0 18px;
516   - > li {
517   - display: flex;
518   - justify-content: space-between;
519   - height: 30px;
520   - line-height: 30px;
521   - border-bottom: 1px solid #EAEAEA;
522   - &:last-child {
523   - border-bottom: 0;
524   - }
525   - }
  410 +.fee-wrap {
  411 + background: #FFF;
  412 + padding: 0 18px;
526 413  
527   - }
  414 + > li {
  415 + display: flex;
  416 + justify-content: space-between;
  417 + height: 30px;
  418 + line-height: 30px;
  419 + border-bottom: 1px solid #EAEAEA;
528 420  
529   - .toPay {
530   - width: 100%;
531   - height: 44px;
532   - margin: 0 auto;
533   - line-height: 44px;
534   - text-align: center;
535   - background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
536   - border-radius: 4px;
537   - border: 1px solid #0D72E2;
538   - font-size: 20px;
539   - color: #FFF;
540   - cursor: pointer;
  421 + &:last-child {
  422 + border-bottom: 0;
  423 + }
541 424 }
542 425  
543   - .tip {
544   - padding-left: 40px;
545   - background: url("../../assets/images/tip.png") no-repeat 18px center;
546   - background-size: 16px 16px;
547   - color: #666;
548   - }
  426 +}
  427 +
  428 +.toPay {
  429 + width: 100%;
  430 + height: 44px;
  431 + margin: 0 auto;
  432 + line-height: 44px;
  433 + text-align: center;
  434 + background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
  435 + border-radius: 4px;
  436 + border: 1px solid #0D72E2;
  437 + font-size: 20px;
  438 + color: #FFF;
  439 + cursor: pointer;
  440 +}
  441 +
  442 +.tip {
  443 + padding-left: 40px;
  444 + background: url("../../assets/images/tip.png") no-repeat 18px center;
  445 + background-size: 16px 16px;
  446 + color: #666;
  447 +}
549 448 </style>
... ...
src/views/parkPay/plateNumber.vue
  View file @92e91fa
... ... @@ -2,62 +2,60 @@
2 2 <div id="page">
3 3  
4 4  
5   -
6 5 <div class="wrap">
7 6 <p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>
8 7  
9 8 <ul class="color-choose">
10 9 <li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"
11   - :style="{color:currentColor==index?'#FFF':'',background: currentColor==index?activeBG:'' }"
  10 + :style="{color:currentColor==index?'#FFF':'',background: currentColor==index?activeBG:'' }"
12 11 >
13   - {{i.name}}
  12 + {{ i.name }}
14 13 </li>
15 14  
16 15 </ul>
17 16  
18 17  
19   -
20   -
21 18 <p style="margin-bottom: 18px;margin-top: 18px;"></p>
22 19 <p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p>
23 20 <div class="num-box">
24 21 <div class="num0" @click="clickFirstWrap()">
25   - <span>{{formData.num0}}</span>
  22 + <span>{{ formData.num0 }}</span>
26 23 </div>
27   - <div class="num1" @click="clickKeyWordWrap(1)"><span>{{formData.num1}}</span></div>
  24 + <div class="num1" @click="clickKeyWordWrap(1)"><span>{{ formData.num1 }}</span></div>
28 25 <!--<em class="spot"></em>-->
29   - <div class="num1" @click="clickKeyWordWrap(2)"><span>{{formData.num2}}</span></div>
30   - <div class="num1" @click="clickKeyWordWrap(3)"><span>{{formData.num3}}</span></div>
31   - <div class="num1" @click="clickKeyWordWrap(4)"><span>{{formData.num4}}</span></div>
32   - <div class="num1" @click="clickKeyWordWrap(5)"><span>{{formData.num5}}</span></div>
33   - <div class="num1" @click="clickKeyWordWrap(6)"><span>{{formData.num6}}</span></div>
34   - <div v-if="formData.commonCard == '2'" class="num1" @click="clickKeyWordWrap(7)"><span>{{formData.num7}}</span></div>
  26 + <div class="num1" @click="clickKeyWordWrap(2)"><span>{{ formData.num2 }}</span></div>
  27 + <div class="num1" @click="clickKeyWordWrap(3)"><span>{{ formData.num3 }}</span></div>
  28 + <div class="num1" @click="clickKeyWordWrap(4)"><span>{{ formData.num4 }}</span></div>
  29 + <div class="num1" @click="clickKeyWordWrap(5)"><span>{{ formData.num5 }}</span></div>
  30 + <div class="num1" @click="clickKeyWordWrap(6)"><span>{{ formData.num6 }}</span></div>
  31 + <div v-if="formData.commonCard == '2'" class="num1" @click="clickKeyWordWrap(7)">
  32 + <span>{{ formData.num7 }}</span></div>
35 33 </div>
36 34  
37 35  
38 36 <!--<div class="radio-box">-->
39   - <!--<label class="flex-items-center">-->
40   - <!--<img v-if="formData.commonCard == 1"-->
41   - <!--src="../../assets/images/parkPay/icon_chose_s@2x.png"-->
42   - <!--alt="">-->
43   - <!--<img v-else-->
44   - <!--src="../../assets/images/parkPay/icon_chose_n@2x.png"-->
45   - <!--alt="">-->
46   - <!--<input type="radio"-->
47   - <!--v-model="formData.commonCard"-->
48   - <!--value="1" />普通车牌-->
49   - <!--</label>-->
50   - <!--<label class="flex-items-center">-->
51   - <!--<img v-if="formData.commonCard == 2"-->
52   - <!--src="../../assets/images/parkPay/icon_chose_s@2x.png"-->
53   - <!--alt="">-->
54   - <!--<img v-else-->
55   - <!--src="../../assets/images/parkPay/icon_chose_n@2x.png"-->
56   - <!--alt="">-->
57   - <!--<input type="radio"-->
58   - <!--v-model="formData.commonCard"-->
59   - <!--value="2" />新能源车牌-->
60   - <!--</label>-->
  37 + <!--<label class="flex-items-center">-->
  38 + <!--<img v-if="formData.commonCard == 1"-->
  39 + <!--src="../../assets/images/parkPay/icon_chose_s@2x.png"-->
  40 + <!--alt="">-->
  41 + <!--<img v-else-->
  42 + <!--src="../../assets/images/parkPay/icon_chose_n@2x.png"-->
  43 + <!--alt="">-->
  44 + <!--<input type="radio"-->
  45 + <!--v-model="formData.commonCard"-->
  46 + <!--value="1" />普通车牌-->
  47 + <!--</label>-->
  48 + <!--<label class="flex-items-center">-->
  49 + <!--<img v-if="formData.commonCard == 2"-->
  50 + <!--src="../../assets/images/parkPay/icon_chose_s@2x.png"-->
  51 + <!--alt="">-->
  52 + <!--<img v-else-->
  53 + <!--src="../../assets/images/parkPay/icon_chose_n@2x.png"-->
  54 + <!--alt="">-->
  55 + <!--<input type="radio"-->
  56 + <!--v-model="formData.commonCard"-->
  57 + <!--value="2" />新能源车牌-->
  58 + <!--</label>-->
61 59 <!--</div>-->
62 60  
63 61  
... ... @@ -66,8 +64,6 @@
66 64 </div>
67 65  
68 66  
69   -
70   -
71 67 </div>
72 68 <div class="first-word-wrap"
73 69 v-if="firstWrapStatus">
... ... @@ -176,38 +172,38 @@
176 172 <span>新</span>
177 173 </div>
178 174 <!--<div class="word">-->
179   - <!--<span>学</span>-->
  175 + <!--<span>学</span>-->
180 176 <!--</div>-->
181 177 <div class="word bordernone">
182   - <!-- <img src="../assets/images/icon-switch.png" alt=""> -->
  178 + <!-- <img src="../assets/images/icon-switch.png" alt=""> -->
183 179 </div>
184 180 </div>
185 181  
186 182 <!--<div class="first-word"-->
187   - <!--@click="selectFirstWord($event)">-->
188   - <!--<div class="word">-->
189   - <!--<span>港</span>-->
190   - <!--</div>-->
191   - <!--<div class="word">-->
192   - <!--<span>澳</span>-->
193   - <!--</div>-->
194   - <!--<div class="word">-->
195   - <!--<span>领</span>-->
196   - <!--</div>-->
  183 + <!--@click="selectFirstWord($event)">-->
  184 + <!--<div class="word">-->
  185 + <!--<span>港</span>-->
  186 + <!--</div>-->
  187 + <!--<div class="word">-->
  188 + <!--<span>澳</span>-->
  189 + <!--</div>-->
  190 + <!--<div class="word">-->
  191 + <!--<span>领</span>-->
  192 + <!--</div>-->
197 193  
198   - <!--<div class="word">-->
199   - <!--<span>警</span>-->
200   - <!--</div>-->
  194 + <!--<div class="word">-->
  195 + <!--<span>警</span>-->
  196 + <!--</div>-->
201 197  
202 198  
203   - <!--<div class="word bordernone">-->
204   - <!--</div>-->
205   - <!--<div class="word bordernone">-->
206   - <!--</div>-->
207   - <!--<div class="word bordernone">-->
208   - <!--</div>-->
209   - <!--<div class="word bordernone">-->
210   - <!--</div>-->
  199 + <!--<div class="word bordernone">-->
  200 + <!--</div>-->
  201 + <!--<div class="word bordernone">-->
  202 + <!--</div>-->
  203 + <!--<div class="word bordernone">-->
  204 + <!--</div>-->
  205 + <!--<div class="word bordernone">-->
  206 + <!--</div>-->
211 207 <!--</div>-->
212 208 </div>
213 209 <div class="keyboard-wrap" v-if="keyBoardStatus === true">
... ... @@ -217,12 +213,12 @@
217 213 <div class="keyboard" v-if="activeKeyWordIndex !== 1">
218 214 <span v-for="(item,index) in allKeyWord._1"
219 215 :key="index"
220   - @click="clickKeyBoard(item)">{{item}}</span>
  216 + @click="clickKeyBoard(item)">{{ item }}</span>
221 217 </div>
222 218 <div class="keyboard" v-if="activeKeyWordIndex !== 1">
223 219 <span v-for="(item,index) in allKeyWord._2"
224 220 :key="index"
225   - @click="clickKeyBoard(item)">{{item}}</span>
  221 + @click="clickKeyBoard(item)">{{ item }}</span>
226 222 <span class="bordernone"></span>
227 223 <span class="bordernone"></span>
228 224 <span class="bordernone"></span>
... ... @@ -231,22 +227,22 @@
231 227 <div class="keyboard">
232 228 <span v-for="(item,index) in allKeyWord._3"
233 229 :key="index"
234   - @click="clickKeyBoard(item)">{{item}}</span>
  230 + @click="clickKeyBoard(item)">{{ item }}</span>
235 231 </div>
236 232 <div class="keyboard">
237 233 <span v-for="(item,index) in allKeyWord._4"
238 234 :key="index"
239   - @click="clickKeyBoard(item)">{{item}}</span>
  235 + @click="clickKeyBoard(item)">{{ item }}</span>
240 236 </div>
241 237 <div class="keyboard">
242 238 <span v-for="(item,index) in allKeyWord._5"
243 239 :key="index"
244   - @click="clickKeyBoard(item)">{{item}}</span>
  240 + @click="clickKeyBoard(item)">{{ item }}</span>
245 241 </div>
246 242 <div class="keyboard">
247 243 <span v-for="(item,index) in allKeyWord._6"
248 244 :key="index"
249   - @click="clickKeyBoard(item)">{{item}}</span>
  245 + @click="clickKeyBoard(item)">{{ item }}</span>
250 246 <span class="bordernone"></span>
251 247 <span class="bordernone"></span>
252 248 <span class="bordernone"></span>
... ... @@ -257,7 +253,7 @@
257 253 <div class="keyboard" v-if="activeKeyWordIndex !== 1">
258 254 <span v-for="(item,index) in allKeyWord._7"
259 255 :key="index"
260   - @click="clickKeyBoard(item)">{{item}}</span>
  256 + @click="clickKeyBoard(item)">{{ item }}</span>
261 257 <span class="bordernone"></span>
262 258 <span class="delete" @click="deleteWord"><img src="../../assets/images/parkPay/icon-delete.png" alt=""></span>
263 259 </div>
... ... @@ -267,7 +263,6 @@
267 263 </div>
268 264  
269 265  
270   -
271 266 </div>
272 267 </template>
273 268 <script>
... ... @@ -276,35 +271,35 @@ import Swiper from &#39;swiper&#39; // 应入swiper
276 271 import {swiperQuery} from '../../api/plateNumber/plateNumber'
277 272  
278 273 export default {
279   - data () {
  274 + data() {
280 275 return {
281 276  
282 277 // 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
283   - colorList:[
  278 + colorList: [
284 279 {
285   - name:'蓝牌',
286   - id:'1'
  280 + name: '蓝牌',
  281 + id: '1'
287 282 },
288 283 {
289   - name:'黄牌',
290   - id:'2'
  284 + name: '黄牌',
  285 + id: '2'
291 286 },
292 287  
293 288 {
294   - name:'白牌',
295   - id:'3'
  289 + name: '白牌',
  290 + id: '3'
296 291 },
297 292 {
298   - name:'黑牌',
299   - id:'4'
  293 + name: '黑牌',
  294 + id: '4'
300 295 },
301 296 {
302   - name:'绿牌',
303   - id:'5'
  297 + name: '绿牌',
  298 + id: '5'
304 299 },
305 300 ],
306   - currentColor:0,
307   - activeBG:'#0054C0',
  301 + currentColor: 0,
  302 + activeBG: '#0054C0',
308 303 formData: {
309 304 commonCard: '1',
310 305 num0: '苏',
... ... @@ -332,12 +327,15 @@ export default {
332 327 submitConfirm: false,
333 328 submitConfirmFalse: false,
334 329 submitConfirmText: '',
  330 + carType: '',
  331 + codeType: '',
335 332 }
336 333 },
337   - created(){
338   -
  334 + created() {
  335 + this.carType = this.$route.query.carType
  336 + this.codeType = this.$route.query.codeType
339 337 },
340   - mounted () {
  338 + mounted() {
341 339 //
342 340 // if (this.$utils.clientBrowser() == "微信") {
343 341 // var appID = this.$utils.myVxAppId;
... ... @@ -353,7 +351,7 @@ export default {
353 351 },
354 352 methods: {
355 353  
356   - chooseColor (index){ // 颜色选择 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
  354 + chooseColor(index) { // 颜色选择 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
357 355 this.currentColor = index
358 356 switch (this.currentColor) {
359 357 case 0 :
... ... @@ -378,14 +376,14 @@ export default {
378 376 break;
379 377 }
380 378 },
381   - clickFirstWrap () {
  379 + clickFirstWrap() {
382 380 // 点击第一个输入框
383 381 this.firstClickStatus = true
384 382 this.firstWrapStatus = true
385 383 this.keyBoardStatus = false
386 384 this.formData.num0 = ''
387 385 },
388   - selectFirstWord (event) {
  386 + selectFirstWord(event) {
389 387 // 选择省份
390 388 if (event.target.localName !== 'span') {
391 389 return
... ... @@ -399,7 +397,7 @@ export default {
399 397 // this.$refs.num1.focus()
400 398 // document.getElementById('num1').focus()
401 399 },
402   - clickKeyBoard (item) { // 点击自定义键盘
  400 + clickKeyBoard(item) { // 点击自定义键盘
403 401 console.log(item)
404 402 this.formData['num' + this.activeKeyWordIndex] = item
405 403  
... ... @@ -415,7 +413,7 @@ export default {
415 413 }
416 414 }
417 415 },
418   - deleteWord () { // 退格
  416 + deleteWord() { // 退格
419 417 // console.log(this.activeKeyWordIndex)
420 418 // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)])
421 419 if (this.activeKeyWordIndex > 1) {
... ... @@ -423,12 +421,12 @@ export default {
423 421 this.activeKeyWordIndex--
424 422 }
425 423 },
426   - clickKeyWordWrap (activeKeyWordIndex) {
  424 + clickKeyWordWrap(activeKeyWordIndex) {
427 425 this.keyBoardStatus = true
428 426 this.activeKeyWordIndex = activeKeyWordIndex
429 427 this.formData['num' + this.activeKeyWordIndex] = ''
430 428 },
431   - submitFn () {
  429 + submitFn() {
432 430 let plateLicense
433 431 if (this.formData.commonCard === '1') {
434 432 plateLicense = this.plate_license_1
... ... @@ -442,24 +440,26 @@ export default {
442 440 plateLicense = this.plate_license_2
443 441 plateLicense = this.palindrome(plateLicense)
444 442 if (plateLicense.length < 8) {
445   - this.$msgbox('提示', '请输入正确的车牌号')
  443 + this.$msgbox('提示', '请输入正确的车牌号')
446 444 return
447 445 }
448 446 }
449   - this.$emit('getPlateLicense',plateLicense)
  447 + this.$emit('getPlateLicense', plateLicense)
450 448 console.log(plateLicense);
451 449  
452 450  
453   -
454 451 this.$router.push({
455   - path:'coupon',
456   - query:{
457   - carNumber:plateLicense,
458   - carNumberColor: this.currentColor
  452 + path: 'coupon',
  453 + query: {
  454 + carNumber: plateLicense,
  455 + carNumberColor: this.currentColor,
  456 + carType: this.carType,
  457 + codeType: this.codeType
  458 +
459 459 }
460 460 })
461 461 },
462   - palindrome (str) {
  462 + palindrome(str) {
463 463 var arr = str.split('')
464 464 arr = arr.filter(function (val) {
465 465 return (
... ... @@ -482,7 +482,7 @@ export default {
482 482 })
483 483 return arr.join('')
484 484 },
485   - checkIsHasSpecialStr (str) {
  485 + checkIsHasSpecialStr(str) {
486 486 var flag = false
487 487 var arr = str.split('')
488 488 arr.forEach(val => {
... ... @@ -516,7 +516,7 @@ export default {
516 516 })
517 517 return flag
518 518 },
519   - checkIsHasChineseStr (str) {
  519 + checkIsHasChineseStr(str) {
520 520 var Reg = /.*[\u4e00-\u9fa5]+.*/
521 521 if (Reg.test(str)) {
522 522 return true
... ... @@ -525,7 +525,7 @@ export default {
525 525 }
526 526 },
527 527 computed: {
528   - plate_license_1 () {
  528 + plate_license_1() {
529 529 return (
530 530 this.formData.num0 +
531 531 this.formData.num1 +
... ... @@ -536,7 +536,7 @@ export default {
536 536 this.formData.num6
537 537 )
538 538 },
539   - plate_license_2 () {
  539 + plate_license_2() {
540 540 return (
541 541 this.formData.num0 +
542 542 this.formData.num1 +
... ... @@ -554,271 +554,313 @@ export default {
554 554 <style lang="scss" scoped>
555 555  
556 556  
557   - .flex-items-center {
  557 +.flex-items-center {
  558 + display: flex;
  559 + align-items: center;
  560 +}
  561 +
  562 +.wrap {
  563 + padding: 0 18px;
  564 +
  565 + .radio-box {
558 566 display: flex;
559 567 align-items: center;
560   - }
561   - .wrap {
562   - padding:0 18px;
563   - .radio-box {
564   - display: flex;
565   - align-items: center;
566   - justify-content: flex-end;
567   - margin-top: 18px;
568   - text-align: right;
569   - input[type="radio"] {
570   - display: none;
571   - }
572   - label {
573   - padding-left: 0.6rem;
574   - cursor: pointer;
575   - img {
576   - width: 0.8rem;
577   - margin-right: 0.1rem;
578   - }
  568 + justify-content: flex-end;
  569 + margin-top: 18px;
  570 + text-align: right;
  571 +
  572 + input[type="radio"] {
  573 + display: none;
  574 + }
  575 +
  576 + label {
  577 + padding-left: 0.6rem;
  578 + cursor: pointer;
  579 +
  580 + img {
  581 + width: 0.8rem;
  582 + margin-right: 0.1rem;
579 583 }
580 584 }
  585 + }
  586 +
  587 + .color-choose {
  588 + width: 265px;
  589 + height: 34px;
  590 + margin: 0 auto;
  591 + background: #F3F3F3;
  592 + border-radius: 6px;
  593 + display: flex;
581 594  
582   - .color-choose{
583   - width: 265px;
584   - height: 34px;
585   - margin: 0 auto;
586   - background: #F3F3F3;
  595 + li {
  596 + flex: 1;
  597 + text-align: center;
  598 + line-height: 34px;
587 599 border-radius: 6px;
588   - display: flex;
589   - li{
590   - flex: 1;
591   - text-align: center;
592   - line-height: 34px;
593   - border-radius: 6px;
594   - }
595 600 }
596   - .card-header {
597   - font-size: 0.75rem;
598   - margin: 0.2rem 0 0.5rem;
599   - color: #4a4a4a;
  601 + }
  602 +
  603 + .card-header {
  604 + font-size: 0.75rem;
  605 + margin: 0.2rem 0 0.5rem;
  606 + color: #4a4a4a;
  607 + }
  608 +
  609 + // input输入框
  610 + .num-box {
  611 + display: flex;
  612 + justify-content: space-between;
  613 + align-items: center;
  614 +
  615 + .spot {
  616 + width: 0.2rem;
  617 + height: 0.2rem;
  618 + border-radius: 50%;
  619 + background-color: #d8d8d8;
600 620 }
601   - // input输入框
602   - .num-box {
603   - display: flex;
604   - justify-content: space-between;
605   - align-items: center;
606   - .spot {
607   - width: 0.2rem;
608   - height: 0.2rem;
609   - border-radius: 50%;
610   - background-color: #d8d8d8;
611   - }
612   - & > div {
613   - width: 1.8rem;
614   - height: 1.8rem;
615   - border: 1px solid #e4e4e4;
616   - &.first {
617   - position: relative;
618   - text-align: center;
619   - line-height: 1.7rem;
620   - font-weight: 200;
621   - .input-wrap {
622   - position: absolute;
623   - top: 0;
624   - left: 0;
625   - right: 0;
626   - bottom: 0;
627   - &.active {
628   - z-index: 100;
629   - }
630   - }
631   - em {
632   - color: #979797;
633   - font-size: 1.6rem;
634   - line-height: 1.7rem;
635   - }
636   - span {
637   - display: inline-block;
638   - width: 100%;
639   - height: 100%;
640   - // background-color: #9cbce2;
641   - color: #828282;
642   - line-height: 1.8rem;
  621 +
  622 + & > div {
  623 + width: 1.8rem;
  624 + height: 1.8rem;
  625 + border: 1px solid #e4e4e4;
  626 +
  627 + &.first {
  628 + position: relative;
  629 + text-align: center;
  630 + line-height: 1.7rem;
  631 + font-weight: 200;
  632 +
  633 + .input-wrap {
  634 + position: absolute;
  635 + top: 0;
  636 + left: 0;
  637 + right: 0;
  638 + bottom: 0;
  639 +
  640 + &.active {
  641 + z-index: 100;
643 642 }
644 643 }
645   - &.active {
646   - border: 1px solid #4a90e2;
647   - &:after {
648   - border-bottom: 0.5rem solid #4a90e2;
649   - }
  644 +
  645 + em {
  646 + color: #979797;
  647 + font-size: 1.6rem;
  648 + line-height: 1.7rem;
650 649 }
  650 +
651 651 span {
652   - display: flex;
653   - align-items: center;
654   - justify-content: center;
  652 + display: inline-block;
655 653 width: 100%;
656 654 height: 100%;
657   - font-size: 1rem;
  655 + // background-color: #9cbce2;
658 656 color: #828282;
659   - &.first {
660   - background-color: #9cbce2;
661   - color: #fff;
662   - text-indent: 0.4rem;
663   - border-radius: 0;
664   - }
  657 + line-height: 1.8rem;
665 658 }
666 659 }
667   - }
668   - .submit-box {
669   - width: 100%;
670   - height: 44px;
671   - line-height: 44px;
672   - border-radius: 4px;
673   - font-size: 20px;
674   - margin-top: 18px;
675   - background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
676   - color: #fff;
677   - text-align: center;
678   - }
679   - .info {
680   - font-size: 0.5rem;
681   - margin-top: 0.9rem;
682   - color: #828282;
683   - text-align: left;
684   - img {
685   - width: 0.6rem;
686   - vertical-align: middle;
687   - }
688   - }
689   - }
690   - .first-word-wrap {
691   - // height: 9.4rem;
692   - background-color: #D2D5DB;
693   - padding: 0.6rem 0.8rem 1.1rem;
694   - position: fixed;
695   - bottom: 0;
696   - left: 0;
697   - right: 0;
698   - .first-word {
699   - display: flex;
700   - justify-content: space-between;
701   - margin-bottom: 0.45rem;
702   - .word {
703   - box-sizing: border-box;
704   - width: 1.8rem;
705   - height: 1.8rem;
706   - // border: 1px solid #9cbce2;
707   - box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
708   - border-radius: 0.16rem;
709   - text-align: center;
710   - &.bordernone {
711   - border: none;
712   - box-shadow:none
713   - }
714   - span {
715   - box-sizing: border-box;
716   - display: flex;
717   - align-items: center;
718   - justify-content: center;
719   - text-align: center;
720   - width: 100%;
721   - height: 100%;
722   - background-color: #fff;
723   - color: #000;
724   - // border: 1px solid #fff;
725   - border-radius: 0.125rem;
726   - }
727   - img {
728   - width: 1.6rem;
  660 +
  661 + &.active {
  662 + border: 1px solid #4a90e2;
  663 +
  664 + &:after {
  665 + border-bottom: 0.5rem solid #4a90e2;
729 666 }
730 667 }
731   - &:nth-last-of-type(1){
732   - margin-bottom: 0rem;
  668 +
  669 + span {
  670 + display: flex;
  671 + align-items: center;
  672 + justify-content: center;
  673 + width: 100%;
  674 + height: 100%;
  675 + font-size: 1rem;
  676 + color: #828282;
  677 +
  678 + &.first {
  679 + background-color: #9cbce2;
  680 + color: #fff;
  681 + text-indent: 0.4rem;
  682 + border-radius: 0;
  683 + }
733 684 }
734 685 }
735 686 }
736   - .keyboard-wrap {
737   - background-color: #D2D5DB;
738   - position: fixed;
739   - bottom: 0;
740   - left: 0;
741   - right: 0;
742   - padding: 0.6rem 0.6rem 0.4rem;
743   - .keyboard {
744   - display: flex;
745   - justify-content: space-between;
746   - align-items: center;
747   - height: 2rem;
748   - margin-bottom: 0.3rem;
  687 +
  688 + .submit-box {
  689 + width: 100%;
  690 + height: 44px;
  691 + line-height: 44px;
  692 + border-radius: 4px;
  693 + font-size: 20px;
  694 + margin-top: 18px;
  695 + background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
  696 + color: #fff;
  697 + text-align: center;
  698 + }
  699 +
  700 + .info {
  701 + font-size: 0.5rem;
  702 + margin-top: 0.9rem;
  703 + color: #828282;
  704 + text-align: left;
  705 +
  706 + img {
  707 + width: 0.6rem;
  708 + vertical-align: middle;
  709 + }
  710 + }
  711 +}
  712 +
  713 +.first-word-wrap {
  714 + // height: 9.4rem;
  715 + background-color: #D2D5DB;
  716 + padding: 0.6rem 0.8rem 1.1rem;
  717 + position: fixed;
  718 + bottom: 0;
  719 + left: 0;
  720 + right: 0;
  721 +
  722 + .first-word {
  723 + display: flex;
  724 + justify-content: space-between;
  725 + margin-bottom: 0.45rem;
  726 +
  727 + .word {
  728 + box-sizing: border-box;
  729 + width: 1.8rem;
  730 + height: 1.8rem;
  731 + // border: 1px solid #9cbce2;
  732 + box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
  733 + border-radius: 0.16rem;
  734 + text-align: center;
  735 +
  736 + &.bordernone {
  737 + border: none;
  738 + box-shadow: none
  739 + }
  740 +
749 741 span {
750   - text-align: center;
  742 + box-sizing: border-box;
751 743 display: flex;
752   - width: 1.8rem;
753 744 align-items: center;
754 745 justify-content: center;
755   - height: 1.8rem;
756   - margin: 0 0.3rem;
757   - box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
  746 + text-align: center;
  747 + width: 100%;
  748 + height: 100%;
758 749 background-color: #fff;
  750 + color: #000;
  751 + // border: 1px solid #fff;
759 752 border-radius: 0.125rem;
760   - &:active {
761   - background-color: #e4e4e4;
762   - }
763   - &.bordernone{
764   - border: none;
765   - box-shadow: none;
766   - background-color: #D2D5DB;
767   - &:active{
768   - background-color:#D2D5DB;
769   - }
770   - }
771   - &.delete{
772   - background-color: #465266;
773   - img{
774   - width: 1.15rem;
775   - }
776   - }
777 753 }
  754 +
  755 + img {
  756 + width: 1.6rem;
  757 + }
  758 + }
  759 +
  760 + &:nth-last-of-type(1) {
  761 + margin-bottom: 0rem;
778 762 }
779   - .cancel{
  763 + }
  764 +}
  765 +
  766 +.keyboard-wrap {
  767 + background-color: #D2D5DB;
  768 + position: fixed;
  769 + bottom: 0;
  770 + left: 0;
  771 + right: 0;
  772 + padding: 0.6rem 0.6rem 0.4rem;
  773 +
  774 + .keyboard {
  775 + display: flex;
  776 + justify-content: space-between;
  777 + align-items: center;
  778 + height: 2rem;
  779 + margin-bottom: 0.3rem;
  780 +
  781 + span {
  782 + text-align: center;
780 783 display: flex;
781   - justify-content: flex-end;
  784 + width: 1.8rem;
782 785 align-items: center;
783   - span{
784   - display: flex;
785   - align-items: center;
786   - justify-content: center;
787   - width: 3.6rem;
788   - height: 1.8rem;
  786 + justify-content: center;
  787 + height: 1.8rem;
  788 + margin: 0 0.3rem;
  789 + box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
  790 + background-color: #fff;
  791 + border-radius: 0.125rem;
  792 +
  793 + &:active {
  794 + background-color: #e4e4e4;
  795 + }
  796 +
  797 + &.bordernone {
  798 + border: none;
  799 + box-shadow: none;
  800 + background-color: #D2D5DB;
  801 +
  802 + &:active {
  803 + background-color: #D2D5DB;
  804 + }
  805 + }
  806 +
  807 + &.delete {
789 808 background-color: #465266;
790   - color: #fff;
791   - border-radius: 0.125rem;
  809 +
  810 + img {
  811 + width: 1.15rem;
  812 + }
792 813 }
793 814 }
794 815 }
795   - .bound-list{
796   - li{
797   - padding: 0 10px;
798   - height: 34px;
799   - margin-bottom: 12px;
800   - line-height: 34px;
801   - background: #F2F1F1;
802   - border-radius: 2px;
  816 +
  817 + .cancel {
  818 + display: flex;
  819 + justify-content: flex-end;
  820 + align-items: center;
  821 +
  822 + span {
803 823 display: flex;
804   - justify-content: space-between;
  824 + align-items: center;
  825 + justify-content: center;
  826 + width: 3.6rem;
  827 + height: 1.8rem;
  828 + background-color: #465266;
  829 + color: #fff;
  830 + border-radius: 0.125rem;
805 831 }
806 832 }
807   - .addCarNum{
  833 +}
  834 +
  835 +.bound-list {
  836 + li {
  837 + padding: 0 10px;
808 838 height: 34px;
  839 + margin-bottom: 12px;
809 840 line-height: 34px;
810   - background: #FFFFFF;
  841 + background: #F2F1F1;
811 842 border-radius: 2px;
812   - border: 1px solid #F2F1F1;
813   - text-align: center;
814   - span{
815   - width: 16px;
816   - height: 16px;
817   - display: inline-block;
818   - background: url("../../assets/images/parkPay/addCarNum.png") no-repeat;
819   - margin-right: 10px;
820   - vertical-align: sub;
821   - cursor: pointer;
822   - }
  843 + display: flex;
  844 + justify-content: space-between;
823 845 }
  846 +}
  847 +
  848 +.addCarNum {
  849 + height: 34px;
  850 + line-height: 34px;
  851 + background: #FFFFFF;
  852 + border-radius: 2px;
  853 + border: 1px solid #F2F1F1;
  854 + text-align: center;
  855 +
  856 + span {
  857 + width: 16px;
  858 + height: 16px;
  859 + display: inline-block;
  860 + background: url("../../assets/images/parkPay/addCarNum.png") no-repeat;
  861 + margin-right: 10px;
  862 + vertical-align: sub;
  863 + cursor: pointer;
  864 + }
  865 +}
824 866 </style>
... ...
vue.config.js
  View file @92e91fa
1   -//
2   -// module.exports = {
3   -// dev: {
4   -//
5   -// // Paths
6   -// assetsSubDirectory: 'static',
7   -// assetsPublicPath: '/',
8   -// proxyTable: {
9   -// '/api': {
10   -// target: 'https://bus.jycrtc.com/', //后期可以改
  1 +// module.exports={
  2 +// devServer: {
  3 +// open: true,//vue项目启动时自动打开浏览器
  4 +// port: 8092,
  5 +// host: 'localhost',
  6 +// proxy: {
  7 +// "": {
  8 +// target: "https://bus.jycrtc.com",
11 9 // changeOrigin: true,
  10 +// ws: true,
12 11 // pathRewrite: {
13   -// '^/api': ''
14   -// }
15   -// }
16   -// }, //配置跨域支持
17   -// }
  12 +// },
  13 +// },
  14 +// },
  15 +// },
18 16 // }
... ...