Commit 92e91fa63d8292d5d92323e421bff74b427b0e31
1 parent
eae77c58
江阴领取优惠券调接口
Showing
9 changed files
with
765 additions
and
664 deletions
config/index.js
| @@ -10,15 +10,23 @@ module.exports = { | @@ -10,15 +10,23 @@ module.exports = { | ||
| 10 | // Paths | 10 | // Paths |
| 11 | assetsSubDirectory: 'static', | 11 | assetsSubDirectory: 'static', |
| 12 | assetsPublicPath: '/', | 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 | // Various Dev Server settings | 32 | // Various Dev Server settings |
src/api/couponPay/couponPay.js
| @@ -3,12 +3,62 @@ import request from '@/utils/request' | @@ -3,12 +3,62 @@ import request from '@/utils/request' | ||
| 3 | export function scanCouponQR(params) { | 3 | export function scanCouponQR(params) { |
| 4 | return request({ | 4 | return request({ |
| 5 | requestBase:'VUE_APP_URL', | 5 | requestBase:'VUE_APP_URL', |
| 6 | - url: 'business/h5/qr/scanCouponQR', | 6 | + url: '/api/business/h5/qr/scanCouponQR', |
| 7 | method: 'post', | 7 | method: 'post', |
| 8 | data: params | 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
| @@ -34,20 +34,20 @@ export function bankH5Pay(params) { // 农行 | @@ -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
src/utils/request.js
| @@ -4,31 +4,26 @@ import axios from 'axios' | @@ -4,31 +4,26 @@ import axios from 'axios' | ||
| 4 | // axios.defaults.baseURL = process.env.API_ROOT | 4 | // axios.defaults.baseURL = process.env.API_ROOT |
| 5 | 5 | ||
| 6 | const service = axios.create({ | 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 | // withCredentials: true, // send cookies when cross-domain requests | 9 | // withCredentials: true, // send cookies when cross-domain requests |
| 10 | timeout: 6000, // request timeout | 10 | timeout: 6000, // request timeout |
| 11 | withCredentials: false, | 11 | withCredentials: false, |
| 12 | headers:{ | 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 | service.interceptors.request.use( | 18 | service.interceptors.request.use( |
| 19 | 19 | ||
| 20 | config => { | 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 | return config | 28 | return config |
| 34 | }, | 29 | }, |
src/views/parkPay/coupon.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 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 | <div style="padding: 10px 30px 50px"> | 4 | <div style="padding: 10px 30px 50px"> |
| 5 | - <p>尊敬的车主您好：</p> | ||
| 6 | - <p>尊敬的车主您好：</p> | ||
| 7 | - <p>尊敬的车主您好：</p> | 5 | + <p>尊敬的车主您好：{{tipText}}</p> |
| 8 | </div> | 6 | </div> |
| 9 | <div style="padding: 0 20px"> | 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 | <mt-button size="large" type="danger" @click="toBackPage">返回</mt-button> | 9 | <mt-button size="large" type="danger" @click="toBackPage">返回</mt-button> |
| 12 | </div> | 10 | </div> |
| 13 | 11 | ||
| @@ -17,19 +15,28 @@ | @@ -17,19 +15,28 @@ | ||
| 17 | <script> | 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 | export default { | 20 | export default { |
| 23 | name: "coupon", | 21 | name: "coupon", |
| 24 | data() { | 22 | data() { |
| 25 | return { | 23 | return { |
| 24 | + imgurl:'', | ||
| 26 | successiconUrl: require('../../assets/images/successIcon.png'), | 25 | successiconUrl: require('../../assets/images/successIcon.png'), |
| 27 | loseiconUrl: require('../../assets/images/loseIcon.png'), | 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 | created() { | 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 | // this.carNum = this.$route.query.carNumber // 获取车牌号 | 41 | // this.carNum = this.$route.query.carNumber // 获取车牌号 |
| 35 | // this.carNumberColor = this.$route.query.carNumberColor // 获取颜色 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色 | 42 | // this.carNumberColor = this.$route.query.carNumberColor // 获取颜色 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色 |
| @@ -46,8 +53,8 @@ export default { | @@ -46,8 +53,8 @@ export default { | ||
| 46 | deviceInfo: this.$utils.myDeviceInfo, | 53 | deviceInfo: this.$utils.myDeviceInfo, |
| 47 | salt: salt, | 54 | salt: salt, |
| 48 | sign_type: "md5", | 55 | sign_type: "md5", |
| 49 | - carType:'02', | ||
| 50 | - codeType:'2', | 56 | + carType:this.carType, |
| 57 | + codeType:this.codeType, | ||
| 51 | cardRelParkNo:'123qwe', | 58 | cardRelParkNo:'123qwe', |
| 52 | key:'1', | 59 | key:'1', |
| 53 | carNum: this.carNum, | 60 | carNum: this.carNum, |
| @@ -57,19 +64,121 @@ export default { | @@ -57,19 +64,121 @@ export default { | ||
| 57 | // token:'e2c1e43722dd43a5b7e268001b39e6f0' | 64 | // token:'e2c1e43722dd43a5b7e268001b39e6f0' |
| 58 | } | 65 | } |
| 59 | jsondata.sign = this.$utils.signObject(jsondata) | 66 | jsondata.sign = this.$utils.signObject(jsondata) |
| 60 | - console.log(jsondata) | ||
| 61 | scanCouponQR(jsondata).then(response => { | 67 | scanCouponQR(jsondata).then(response => { |
| 62 | console.log(response) | 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 | toPay() { | 79 | toPay() { |
| 66 | - this.$router.push({ | ||
| 67 | - path: 'couponPay' | ||
| 68 | - }) | 80 | + this.parkRecordList() |
| 81 | + // this.$router.push({ | ||
| 82 | + // path: 'couponPay' | ||
| 83 | + // }) | ||
| 69 | }, | 84 | }, |
| 70 | toBackPage() { | 85 | toBackPage() { |
| 71 | this.$router.back() | 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 | </script> | 184 | </script> |
src/views/parkPay/couponPay.vue
| @@ -2,48 +2,58 @@ | @@ -2,48 +2,58 @@ | ||
| 2 | <div> | 2 | <div> |
| 3 | <div class="car-wrap"> | 3 | <div class="car-wrap"> |
| 4 | <div class="carBG" :class="carWrapBG | formateColor"> | 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 | </div> | 7 | </div> |
| 8 | </div> | 8 | </div> |
| 9 | 9 | ||
| 10 | <ul class="fee-wrap"> | 10 | <ul class="fee-wrap"> |
| 11 | <li> | 11 | <li> |
| 12 | <span>停放车场</span> | 12 | <span>停放车场</span> |
| 13 | - <span>{{parkName}}</span> | 13 | + <span>{{ parkName }}</span> |
| 14 | </li> | 14 | </li> |
| 15 | <li> | 15 | <li> |
| 16 | <span>入场时间</span> | 16 | <span>入场时间</span> |
| 17 | - <span>{{parkInTime}}</span> | 17 | + <span>{{ parkInTime }}</span> |
| 18 | </li> | 18 | </li> |
| 19 | <li> | 19 | <li> |
| 20 | <span>出场时间</span> | 20 | <span>出场时间</span> |
| 21 | - <span>{{parkOutTime}}</span> | 21 | + <span>{{ parkOutTime }}</span> |
| 22 | </li> | 22 | </li> |
| 23 | <li> | 23 | <li> |
| 24 | <span>停车时长</span> | 24 | <span>停车时长</span> |
| 25 | - <span>{{$utils.dateFormat(parkDuration)}}</span> | 25 | + <span>{{ $utils.dateFormat(parkDuration) }}</span> |
| 26 | </li> | 26 | </li> |
| 27 | <li> | 27 | <li> |
| 28 | <span>应付金额</span> | 28 | <span>应付金额</span> |
| 29 | - <span> ¥{{(totalFee/100).toFixed(2)}}元</span> | 29 | + <span> ¥{{ (orderTotalFee / 100).toFixed(2) }}元</span> |
| 30 | </li> | 30 | </li> |
| 31 | <li> | 31 | <li> |
| 32 | <span>停车优惠</span> | 32 | <span>停车优惠</span> |
| 33 | <p> | 33 | <p> |
| 34 | - ({{cardTypeFormat(carType)}}) <span style="color: #3cc51f">-20.00元</span> | 34 | + ({{ cardTypeFormat(carType) }}) <span style="color: #3cc51f">{{ discountFee }}</span> |
| 35 | </p> | 35 | </p> |
| 36 | </li> | 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 | <li> | 48 | <li> |
| 38 | <span>实际支付</span> | 49 | <span>实际支付</span> |
| 39 | - <span style="color: red"> ¥{{(unPayFee/100).toFixed(2)}}元</span> | 50 | + <span style="color: red"> ¥{{ (orderFee / 100).toFixed(2) }}元</span> |
| 40 | </li> | 51 | </li> |
| 41 | </ul> | 52 | </ul> |
| 42 | 53 | ||
| 43 | 54 | ||
| 44 | - | ||
| 45 | <div style="padding: 20px 18px"> | 55 | <div style="padding: 20px 18px"> |
| 46 | - <div class="toPay" @click="toPay">{{clientBrowser}}支付</div> | 56 | + <div class="toPay" @click="toPay">{{ clientBrowser }}支付</div> |
| 47 | </div> | 57 | </div> |
| 48 | 58 | ||
| 49 | <div v-if="appOrderTimeout.length>0"> | 59 | <div v-if="appOrderTimeout.length>0"> |
| @@ -51,37 +61,36 @@ | @@ -51,37 +61,36 @@ | ||
| 51 | 温馨提示： | 61 | 温馨提示： |
| 52 | </p> | 62 | </p> |
| 53 | <p style="color: #666;padding: 0 18px;"> | 63 | <p style="color: #666;padding: 0 18px;"> |
| 54 | - {{appOrderTimeout}} | 64 | + {{ appOrderTimeout }} |
| 55 | </p> | 65 | </p> |
| 56 | </div> | 66 | </div> |
| 57 | 67 | ||
| 58 | 68 | ||
| 59 | - | ||
| 60 | </div> | 69 | </div> |
| 61 | </template> | 70 | </template> |
| 62 | 71 | ||
| 63 | <script> | 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 | export default { | 76 | export default { |
| 70 | name: 'orderPay', | 77 | name: 'orderPay', |
| 71 | data() { | 78 | data() { |
| 72 | return { | 79 | return { |
| 73 | carWrapBG: 0, | 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 | parkingData: [], // 在停数据 | 94 | parkingData: [], // 在停数据 |
| 86 | historyList: [], // 历史欠费数据 | 95 | historyList: [], // 历史欠费数据 |
| 87 | clientBrowser: '', // 客户端 | 96 | clientBrowser: '', // 客户端 |
| @@ -92,63 +101,35 @@ export default { | @@ -92,63 +101,35 @@ export default { | ||
| 92 | } | 101 | } |
| 93 | }, | 102 | }, |
| 94 | created() { | 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 | this.clientBrowser = this.$utils.clientBrowser() //支付方式 | 119 | this.clientBrowser = this.$utils.clientBrowser() //支付方式 |
| 101 | // this.paySrcType = this.$route.query.paySrcType // 实收 | 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 | if (this.clientBrowser == "微信") { | 122 | if (this.clientBrowser == "微信") { |
| 106 | this.webAppCode = this.getCode(); | 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 | methods: { | 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 | getCode() { | 133 | getCode() { |
| 153 | var appID = this.$utils.myVxAppId; | 134 | var appID = this.$utils.myVxAppId; |
| 154 | var code = this.getUrlParam('code'); | 135 | var code = this.getUrlParam('code'); |
| @@ -188,7 +169,7 @@ export default { | @@ -188,7 +169,7 @@ export default { | ||
| 188 | aliParams.orderId = this.orderId; | 169 | aliParams.orderId = this.orderId; |
| 189 | aliParams.carNumber = this.carNumber; | 170 | aliParams.carNumber = this.carNumber; |
| 190 | aliParams.payType = 1;// 1:支付宝 2：微信 3：银联 10:H5 4微信公众号 | 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 | aliParams.paySrcType = this.paySrcType;//101停车支付 | 173 | aliParams.paySrcType = this.paySrcType;//101停车支付 |
| 193 | aliParams.orgId = this.$utils.myOrgId | 174 | aliParams.orgId = this.$utils.myOrgId |
| 194 | aliParams.backType = 2 | 175 | aliParams.backType = 2 |
| @@ -198,12 +179,12 @@ export default { | @@ -198,12 +179,12 @@ export default { | ||
| 198 | console.log(response) | 179 | console.log(response) |
| 199 | if (response.code == 0) {//进场 | 180 | if (response.code == 0) {//进场 |
| 200 | document.write(response.data);//打开支付表单 | 181 | document.write(response.data);//打开支付表单 |
| 201 | - } else if(response.code == 1002){//其他情况如【该卡号场内已存在】 | 182 | + } else if (response.code == 1002) {//其他情况如【该卡号场内已存在】 |
| 202 | console.log(response.message); | 183 | console.log(response.message); |
| 203 | MessageBox.confirm('', { | 184 | MessageBox.confirm('', { |
| 204 | message: response.message, | 185 | message: response.message, |
| 205 | title: '温馨提示', | 186 | title: '温馨提示', |
| 206 | - showCancelButton:false, | 187 | + showCancelButton: false, |
| 207 | confirmButtonText: '确定', | 188 | confirmButtonText: '确定', |
| 208 | }).then(action => { | 189 | }).then(action => { |
| 209 | if (action == 'confirm') { //确认的回调 | 190 | if (action == 'confirm') { //确认的回调 |
| @@ -215,7 +196,7 @@ export default { | @@ -215,7 +196,7 @@ export default { | ||
| 215 | console.log('取消'); | 196 | console.log('取消'); |
| 216 | } | 197 | } |
| 217 | }); | 198 | }); |
| 218 | - }else{ | 199 | + } else { |
| 219 | alert(response.message) | 200 | alert(response.message) |
| 220 | } | 201 | } |
| 221 | 202 | ||
| @@ -225,9 +206,9 @@ export default { | @@ -225,9 +206,9 @@ export default { | ||
| 225 | 206 | ||
| 226 | if (this.clientBrowser == '微信') { // 微信支付 | 207 | if (this.clientBrowser == '微信') { // 微信支付 |
| 227 | let _openId = sessionStorage.getItem('openIdData') | 208 | let _openId = sessionStorage.getItem('openIdData') |
| 228 | - if(_openId){ | 209 | + if (_openId) { |
| 229 | me.vxPay(_openId, this.orderId) | 210 | me.vxPay(_openId, this.orderId) |
| 230 | - }else{ | 211 | + } else { |
| 231 | //第一步获取openid | 212 | //第一步获取openid |
| 232 | var codeParams = { | 213 | var codeParams = { |
| 233 | code: this.webAppCode, | 214 | code: this.webAppCode, |
| @@ -236,7 +217,7 @@ export default { | @@ -236,7 +217,7 @@ export default { | ||
| 236 | getOpenId(codeParams).then(res => { | 217 | getOpenId(codeParams).then(res => { |
| 237 | if (res.code == 0) { | 218 | if (res.code == 0) { |
| 238 | me.vxPay(res.data, this.orderId) | 219 | me.vxPay(res.data, this.orderId) |
| 239 | - sessionStorage.setItem('openIdData',res.data) | 220 | + sessionStorage.setItem('openIdData', res.data) |
| 240 | } else if (res.code == 40163) { //code been used, hints[重复code问题] | 221 | } else if (res.code == 40163) { //code been used, hints[重复code问题] |
| 241 | alert('请重新支付！重复code问题') | 222 | alert('请重新支付！重复code问题') |
| 242 | console.log(res.message); | 223 | console.log(res.message); |
| @@ -251,15 +232,15 @@ export default { | @@ -251,15 +232,15 @@ export default { | ||
| 251 | let vm = this | 232 | let vm = this |
| 252 | var wxParams = {}; | 233 | var wxParams = {}; |
| 253 | wxParams.orderId = orderIdData; | 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 | wxParams.carNumber = this.carNumber; | 239 | wxParams.carNumber = this.carNumber; |
| 259 | wxParams.paySrcType = this.paySrcType;//101停车支付 | 240 | wxParams.paySrcType = this.paySrcType;//101停车支付 |
| 260 | wxParams.recordArreaInfos = JSON.stringify(orderIdData); | 241 | wxParams.recordArreaInfos = JSON.stringify(orderIdData); |
| 261 | wxParams.openId = openIdData; | 242 | wxParams.openId = openIdData; |
| 262 | - wxParams.appId = this.$utils.myVxAppId; | 243 | + wxParams.appId = this.$utils.myVxAppId; |
| 263 | vxPayQuery(wxParams).then(res => { | 244 | vxPayQuery(wxParams).then(res => { |
| 264 | if (res.code == 0) { // | 245 | if (res.code == 0) { // |
| 265 | if (res.data) { | 246 | if (res.data) { |
| @@ -279,12 +260,12 @@ export default { | @@ -279,12 +260,12 @@ export default { | ||
| 279 | } else { | 260 | } else { |
| 280 | alert("没有找到返回值"); | 261 | alert("没有找到返回值"); |
| 281 | } | 262 | } |
| 282 | - } else if(res.code == 1002){//其他情况如【该卡号场内已存在】 | 263 | + } else if (res.code == 1002) {//其他情况如【该卡号场内已存在】 |
| 283 | console.log(res.message); | 264 | console.log(res.message); |
| 284 | MessageBox.confirm('', { | 265 | MessageBox.confirm('', { |
| 285 | message: res.message, | 266 | message: res.message, |
| 286 | title: '温馨提示', | 267 | title: '温馨提示', |
| 287 | - showCancelButton:false, | 268 | + showCancelButton: false, |
| 288 | confirmButtonText: '确定', | 269 | confirmButtonText: '确定', |
| 289 | }).then(action => { | 270 | }).then(action => { |
| 290 | if (action == 'confirm') { //确认的回调 | 271 | if (action == 'confirm') { //确认的回调 |
| @@ -296,7 +277,7 @@ export default { | @@ -296,7 +277,7 @@ export default { | ||
| 296 | console.log('取消'); | 277 | console.log('取消'); |
| 297 | } | 278 | } |
| 298 | }); | 279 | }); |
| 299 | - }else{ | 280 | + } else { |
| 300 | alert(res.message) | 281 | alert(res.message) |
| 301 | } | 282 | } |
| 302 | }) | 283 | }) |
| @@ -319,112 +300,6 @@ export default { | @@ -319,112 +300,6 @@ export default { | ||
| 319 | // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 | 300 | // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 |
| 320 | if (res.err_msg === 'get_brand_wcpay_request:ok') { | 301 | if (res.err_msg === 'get_brand_wcpay_request:ok') { |
| 321 | console.log('成功') | 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 | } else { | 305 | } else { |
| @@ -435,115 +310,139 @@ export default { | @@ -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 | return '单次券' | 315 | return '单次券' |
| 441 | } | 316 | } |
| 442 | - if(num == 2){ | 317 | + if (num == 2) { |
| 443 | return '时长券' | 318 | return '时长券' |
| 444 | } | 319 | } |
| 445 | - if(num == 3){ | 320 | + if (num == 3) { |
| 446 | return '满减券' | 321 | return '满减券' |
| 447 | } | 322 | } |
| 448 | - if(num == 4){ | 323 | + if (num == 4) { |
| 449 | return '金额券' | 324 | return '金额券' |
| 450 | } | 325 | } |
| 451 | - if(num == 5){ | 326 | + if (num == 5) { |
| 452 | return '包天券' | 327 | return '包天券' |
| 453 | } | 328 | } |
| 454 | - if(num == 6){ | 329 | + if (num == 6) { |
| 455 | return '折扣券' | 330 | return '折扣券' |
| 456 | } | 331 | } |
| 457 | } | 332 | } |
| 458 | }, | 333 | }, |
| 459 | filters: { | 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 | </script> | 359 | </script> |
| 463 | 360 | ||
| 464 | <style scoped lang="scss"> | 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 | </style> | 448 | </style> |
src/views/parkPay/plateNumber.vue
| @@ -2,62 +2,60 @@ | @@ -2,62 +2,60 @@ | ||
| 2 | <div id="page"> | 2 | <div id="page"> |
| 3 | 3 | ||
| 4 | 4 | ||
| 5 | - | ||
| 6 | <div class="wrap"> | 5 | <div class="wrap"> |
| 7 | <p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p> | 6 | <p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p> |
| 8 | 7 | ||
| 9 | <ul class="color-choose"> | 8 | <ul class="color-choose"> |
| 10 | <li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)" | 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 | </li> | 13 | </li> |
| 15 | 14 | ||
| 16 | </ul> | 15 | </ul> |
| 17 | 16 | ||
| 18 | 17 | ||
| 19 | - | ||
| 20 | - | ||
| 21 | <p style="margin-bottom: 18px;margin-top: 18px;"></p> | 18 | <p style="margin-bottom: 18px;margin-top: 18px;"></p> |
| 22 | <p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p> | 19 | <p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p> |
| 23 | <div class="num-box"> | 20 | <div class="num-box"> |
| 24 | <div class="num0" @click="clickFirstWrap()"> | 21 | <div class="num0" @click="clickFirstWrap()"> |
| 25 | - <span>{{formData.num0}}</span> | 22 | + <span>{{ formData.num0 }}</span> |
| 26 | </div> | 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 | <!--<em class="spot"></em>--> | 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 | </div> | 33 | </div> |
| 36 | 34 | ||
| 37 | 35 | ||
| 38 | <!--<div class="radio-box">--> | 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 | <!--</div>--> | 59 | <!--</div>--> |
| 62 | 60 | ||
| 63 | 61 | ||
| @@ -66,8 +64,6 @@ | @@ -66,8 +64,6 @@ | ||
| 66 | </div> | 64 | </div> |
| 67 | 65 | ||
| 68 | 66 | ||
| 69 | - | ||
| 70 | - | ||
| 71 | </div> | 67 | </div> |
| 72 | <div class="first-word-wrap" | 68 | <div class="first-word-wrap" |
| 73 | v-if="firstWrapStatus"> | 69 | v-if="firstWrapStatus"> |
| @@ -176,38 +172,38 @@ | @@ -176,38 +172,38 @@ | ||
| 176 | <span>新</span> | 172 | <span>新</span> |
| 177 | </div> | 173 | </div> |
| 178 | <!--<div class="word">--> | 174 | <!--<div class="word">--> |
| 179 | - <!--<span>学</span>--> | 175 | + <!--<span>学</span>--> |
| 180 | <!--</div>--> | 176 | <!--</div>--> |
| 181 | <div class="word bordernone"> | 177 | <div class="word bordernone"> |
| 182 | - <!-- <img src="../assets/images/icon-switch.png" alt=""> --> | 178 | + <!-- <img src="../assets/images/icon-switch.png" alt=""> --> |
| 183 | </div> | 179 | </div> |
| 184 | </div> | 180 | </div> |
| 185 | 181 | ||
| 186 | <!--<div class="first-word"--> | 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 | <!--</div>--> | 207 | <!--</div>--> |
| 212 | </div> | 208 | </div> |
| 213 | <div class="keyboard-wrap" v-if="keyBoardStatus === true"> | 209 | <div class="keyboard-wrap" v-if="keyBoardStatus === true"> |
| @@ -217,12 +213,12 @@ | @@ -217,12 +213,12 @@ | ||
| 217 | <div class="keyboard" v-if="activeKeyWordIndex !== 1"> | 213 | <div class="keyboard" v-if="activeKeyWordIndex !== 1"> |
| 218 | <span v-for="(item,index) in allKeyWord._1" | 214 | <span v-for="(item,index) in allKeyWord._1" |
| 219 | :key="index" | 215 | :key="index" |
| 220 | - @click="clickKeyBoard(item)">{{item}}</span> | 216 | + @click="clickKeyBoard(item)">{{ item }}</span> |
| 221 | </div> | 217 | </div> |
| 222 | <div class="keyboard" v-if="activeKeyWordIndex !== 1"> | 218 | <div class="keyboard" v-if="activeKeyWordIndex !== 1"> |
| 223 | <span v-for="(item,index) in allKeyWord._2" | 219 | <span v-for="(item,index) in allKeyWord._2" |
| 224 | :key="index" | 220 | :key="index" |
| 225 | - @click="clickKeyBoard(item)">{{item}}</span> | 221 | + @click="clickKeyBoard(item)">{{ item }}</span> |
| 226 | <span class="bordernone"></span> | 222 | <span class="bordernone"></span> |
| 227 | <span class="bordernone"></span> | 223 | <span class="bordernone"></span> |
| 228 | <span class="bordernone"></span> | 224 | <span class="bordernone"></span> |
| @@ -231,22 +227,22 @@ | @@ -231,22 +227,22 @@ | ||
| 231 | <div class="keyboard"> | 227 | <div class="keyboard"> |
| 232 | <span v-for="(item,index) in allKeyWord._3" | 228 | <span v-for="(item,index) in allKeyWord._3" |
| 233 | :key="index" | 229 | :key="index" |
| 234 | - @click="clickKeyBoard(item)">{{item}}</span> | 230 | + @click="clickKeyBoard(item)">{{ item }}</span> |
| 235 | </div> | 231 | </div> |
| 236 | <div class="keyboard"> | 232 | <div class="keyboard"> |
| 237 | <span v-for="(item,index) in allKeyWord._4" | 233 | <span v-for="(item,index) in allKeyWord._4" |
| 238 | :key="index" | 234 | :key="index" |
| 239 | - @click="clickKeyBoard(item)">{{item}}</span> | 235 | + @click="clickKeyBoard(item)">{{ item }}</span> |
| 240 | </div> | 236 | </div> |
| 241 | <div class="keyboard"> | 237 | <div class="keyboard"> |
| 242 | <span v-for="(item,index) in allKeyWord._5" | 238 | <span v-for="(item,index) in allKeyWord._5" |
| 243 | :key="index" | 239 | :key="index" |
| 244 | - @click="clickKeyBoard(item)">{{item}}</span> | 240 | + @click="clickKeyBoard(item)">{{ item }}</span> |
| 245 | </div> | 241 | </div> |
| 246 | <div class="keyboard"> | 242 | <div class="keyboard"> |
| 247 | <span v-for="(item,index) in allKeyWord._6" | 243 | <span v-for="(item,index) in allKeyWord._6" |
| 248 | :key="index" | 244 | :key="index" |
| 249 | - @click="clickKeyBoard(item)">{{item}}</span> | 245 | + @click="clickKeyBoard(item)">{{ item }}</span> |
| 250 | <span class="bordernone"></span> | 246 | <span class="bordernone"></span> |
| 251 | <span class="bordernone"></span> | 247 | <span class="bordernone"></span> |
| 252 | <span class="bordernone"></span> | 248 | <span class="bordernone"></span> |
| @@ -257,7 +253,7 @@ | @@ -257,7 +253,7 @@ | ||
| 257 | <div class="keyboard" v-if="activeKeyWordIndex !== 1"> | 253 | <div class="keyboard" v-if="activeKeyWordIndex !== 1"> |
| 258 | <span v-for="(item,index) in allKeyWord._7" | 254 | <span v-for="(item,index) in allKeyWord._7" |
| 259 | :key="index" | 255 | :key="index" |
| 260 | - @click="clickKeyBoard(item)">{{item}}</span> | 256 | + @click="clickKeyBoard(item)">{{ item }}</span> |
| 261 | <span class="bordernone"></span> | 257 | <span class="bordernone"></span> |
| 262 | <span class="delete" @click="deleteWord"><img src="../../assets/images/parkPay/icon-delete.png" alt=""></span> | 258 | <span class="delete" @click="deleteWord"><img src="../../assets/images/parkPay/icon-delete.png" alt=""></span> |
| 263 | </div> | 259 | </div> |
| @@ -267,7 +263,6 @@ | @@ -267,7 +263,6 @@ | ||
| 267 | </div> | 263 | </div> |
| 268 | 264 | ||
| 269 | 265 | ||
| 270 | - | ||
| 271 | </div> | 266 | </div> |
| 272 | </template> | 267 | </template> |
| 273 | <script> | 268 | <script> |
| @@ -276,35 +271,35 @@ import Swiper from 'swiper' // 应入swiper | @@ -276,35 +271,35 @@ import Swiper from 'swiper' // 应入swiper | ||
| 276 | import {swiperQuery} from '../../api/plateNumber/plateNumber' | 271 | import {swiperQuery} from '../../api/plateNumber/plateNumber' |
| 277 | 272 | ||
| 278 | export default { | 273 | export default { |
| 279 | - data () { | 274 | + data() { |
| 280 | return { | 275 | return { |
| 281 | 276 | ||
| 282 | // 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色 | 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 | formData: { | 303 | formData: { |
| 309 | commonCard: '1', | 304 | commonCard: '1', |
| 310 | num0: '苏', | 305 | num0: '苏', |
| @@ -332,12 +327,15 @@ export default { | @@ -332,12 +327,15 @@ export default { | ||
| 332 | submitConfirm: false, | 327 | submitConfirm: false, |
| 333 | submitConfirmFalse: false, | 328 | submitConfirmFalse: false, |
| 334 | submitConfirmText: '', | 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 | // if (this.$utils.clientBrowser() == "微信") { | 340 | // if (this.$utils.clientBrowser() == "微信") { |
| 343 | // var appID = this.$utils.myVxAppId; | 341 | // var appID = this.$utils.myVxAppId; |
| @@ -353,7 +351,7 @@ export default { | @@ -353,7 +351,7 @@ export default { | ||
| 353 | }, | 351 | }, |
| 354 | methods: { | 352 | methods: { |
| 355 | 353 | ||
| 356 | - chooseColor (index){ // 颜色选择 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色 | 354 | + chooseColor(index) { // 颜色选择 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色 |
| 357 | this.currentColor = index | 355 | this.currentColor = index |
| 358 | switch (this.currentColor) { | 356 | switch (this.currentColor) { |
| 359 | case 0 : | 357 | case 0 : |
| @@ -378,14 +376,14 @@ export default { | @@ -378,14 +376,14 @@ export default { | ||
| 378 | break; | 376 | break; |
| 379 | } | 377 | } |
| 380 | }, | 378 | }, |
| 381 | - clickFirstWrap () { | 379 | + clickFirstWrap() { |
| 382 | // 点击第一个输入框 | 380 | // 点击第一个输入框 |
| 383 | this.firstClickStatus = true | 381 | this.firstClickStatus = true |
| 384 | this.firstWrapStatus = true | 382 | this.firstWrapStatus = true |
| 385 | this.keyBoardStatus = false | 383 | this.keyBoardStatus = false |
| 386 | this.formData.num0 = '' | 384 | this.formData.num0 = '' |
| 387 | }, | 385 | }, |
| 388 | - selectFirstWord (event) { | 386 | + selectFirstWord(event) { |
| 389 | // 选择省份 | 387 | // 选择省份 |
| 390 | if (event.target.localName !== 'span') { | 388 | if (event.target.localName !== 'span') { |
| 391 | return | 389 | return |
| @@ -399,7 +397,7 @@ export default { | @@ -399,7 +397,7 @@ export default { | ||
| 399 | // this.$refs.num1.focus() | 397 | // this.$refs.num1.focus() |
| 400 | // document.getElementById('num1').focus() | 398 | // document.getElementById('num1').focus() |
| 401 | }, | 399 | }, |
| 402 | - clickKeyBoard (item) { // 点击自定义键盘 | 400 | + clickKeyBoard(item) { // 点击自定义键盘 |
| 403 | console.log(item) | 401 | console.log(item) |
| 404 | this.formData['num' + this.activeKeyWordIndex] = item | 402 | this.formData['num' + this.activeKeyWordIndex] = item |
| 405 | 403 | ||
| @@ -415,7 +413,7 @@ export default { | @@ -415,7 +413,7 @@ export default { | ||
| 415 | } | 413 | } |
| 416 | } | 414 | } |
| 417 | }, | 415 | }, |
| 418 | - deleteWord () { // 退格 | 416 | + deleteWord() { // 退格 |
| 419 | // console.log(this.activeKeyWordIndex) | 417 | // console.log(this.activeKeyWordIndex) |
| 420 | // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)]) | 418 | // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)]) |
| 421 | if (this.activeKeyWordIndex > 1) { | 419 | if (this.activeKeyWordIndex > 1) { |
| @@ -423,12 +421,12 @@ export default { | @@ -423,12 +421,12 @@ export default { | ||
| 423 | this.activeKeyWordIndex-- | 421 | this.activeKeyWordIndex-- |
| 424 | } | 422 | } |
| 425 | }, | 423 | }, |
| 426 | - clickKeyWordWrap (activeKeyWordIndex) { | 424 | + clickKeyWordWrap(activeKeyWordIndex) { |
| 427 | this.keyBoardStatus = true | 425 | this.keyBoardStatus = true |
| 428 | this.activeKeyWordIndex = activeKeyWordIndex | 426 | this.activeKeyWordIndex = activeKeyWordIndex |
| 429 | this.formData['num' + this.activeKeyWordIndex] = '' | 427 | this.formData['num' + this.activeKeyWordIndex] = '' |
| 430 | }, | 428 | }, |
| 431 | - submitFn () { | 429 | + submitFn() { |
| 432 | let plateLicense | 430 | let plateLicense |
| 433 | if (this.formData.commonCard === '1') { | 431 | if (this.formData.commonCard === '1') { |
| 434 | plateLicense = this.plate_license_1 | 432 | plateLicense = this.plate_license_1 |
| @@ -442,24 +440,26 @@ export default { | @@ -442,24 +440,26 @@ export default { | ||
| 442 | plateLicense = this.plate_license_2 | 440 | plateLicense = this.plate_license_2 |
| 443 | plateLicense = this.palindrome(plateLicense) | 441 | plateLicense = this.palindrome(plateLicense) |
| 444 | if (plateLicense.length < 8) { | 442 | if (plateLicense.length < 8) { |
| 445 | - this.$msgbox('提示', '请输入正确的车牌号') | 443 | + this.$msgbox('提示', '请输入正确的车牌号') |
| 446 | return | 444 | return |
| 447 | } | 445 | } |
| 448 | } | 446 | } |
| 449 | - this.$emit('getPlateLicense',plateLicense) | 447 | + this.$emit('getPlateLicense', plateLicense) |
| 450 | console.log(plateLicense); | 448 | console.log(plateLicense); |
| 451 | 449 | ||
| 452 | 450 | ||
| 453 | - | ||
| 454 | this.$router.push({ | 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 | var arr = str.split('') | 463 | var arr = str.split('') |
| 464 | arr = arr.filter(function (val) { | 464 | arr = arr.filter(function (val) { |
| 465 | return ( | 465 | return ( |
| @@ -482,7 +482,7 @@ export default { | @@ -482,7 +482,7 @@ export default { | ||
| 482 | }) | 482 | }) |
| 483 | return arr.join('') | 483 | return arr.join('') |
| 484 | }, | 484 | }, |
| 485 | - checkIsHasSpecialStr (str) { | 485 | + checkIsHasSpecialStr(str) { |
| 486 | var flag = false | 486 | var flag = false |
| 487 | var arr = str.split('') | 487 | var arr = str.split('') |
| 488 | arr.forEach(val => { | 488 | arr.forEach(val => { |
| @@ -516,7 +516,7 @@ export default { | @@ -516,7 +516,7 @@ export default { | ||
| 516 | }) | 516 | }) |
| 517 | return flag | 517 | return flag |
| 518 | }, | 518 | }, |
| 519 | - checkIsHasChineseStr (str) { | 519 | + checkIsHasChineseStr(str) { |
| 520 | var Reg = /.*[\u4e00-\u9fa5]+.*/ | 520 | var Reg = /.*[\u4e00-\u9fa5]+.*/ |
| 521 | if (Reg.test(str)) { | 521 | if (Reg.test(str)) { |
| 522 | return true | 522 | return true |
| @@ -525,7 +525,7 @@ export default { | @@ -525,7 +525,7 @@ export default { | ||
| 525 | } | 525 | } |
| 526 | }, | 526 | }, |
| 527 | computed: { | 527 | computed: { |
| 528 | - plate_license_1 () { | 528 | + plate_license_1() { |
| 529 | return ( | 529 | return ( |
| 530 | this.formData.num0 + | 530 | this.formData.num0 + |
| 531 | this.formData.num1 + | 531 | this.formData.num1 + |
| @@ -536,7 +536,7 @@ export default { | @@ -536,7 +536,7 @@ export default { | ||
| 536 | this.formData.num6 | 536 | this.formData.num6 |
| 537 | ) | 537 | ) |
| 538 | }, | 538 | }, |
| 539 | - plate_license_2 () { | 539 | + plate_license_2() { |
| 540 | return ( | 540 | return ( |
| 541 | this.formData.num0 + | 541 | this.formData.num0 + |
| 542 | this.formData.num1 + | 542 | this.formData.num1 + |
| @@ -554,271 +554,313 @@ export default { | @@ -554,271 +554,313 @@ export default { | ||
| 554 | <style lang="scss" scoped> | 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 | display: flex; | 566 | display: flex; |
| 559 | align-items: center; | 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 | border-radius: 6px; | 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 | span { | 651 | span { |
| 652 | - display: flex; | ||
| 653 | - align-items: center; | ||
| 654 | - justify-content: center; | 652 | + display: inline-block; |
| 655 | width: 100%; | 653 | width: 100%; |
| 656 | height: 100%; | 654 | height: 100%; |
| 657 | - font-size: 1rem; | 655 | + // background-color: #9cbce2; |
| 658 | color: #828282; | 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 | span { | 741 | span { |
| 750 | - text-align: center; | 742 | + box-sizing: border-box; |
| 751 | display: flex; | 743 | display: flex; |
| 752 | - width: 1.8rem; | ||
| 753 | align-items: center; | 744 | align-items: center; |
| 754 | justify-content: center; | 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 | background-color: #fff; | 749 | background-color: #fff; |
| 750 | + color: #000; | ||
| 751 | + // border: 1px solid #fff; | ||
| 759 | border-radius: 0.125rem; | 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 | display: flex; | 783 | display: flex; |
| 781 | - justify-content: flex-end; | 784 | + width: 1.8rem; |
| 782 | align-items: center; | 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 | background-color: #465266; | 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 | display: flex; | 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 | height: 34px; | 838 | height: 34px; |
| 839 | + margin-bottom: 12px; | ||
| 809 | line-height: 34px; | 840 | line-height: 34px; |
| 810 | - background: #FFFFFF; | 841 | + background: #F2F1F1; |
| 811 | border-radius: 2px; | 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 | </style> | 866 | </style> |
vue.config.js
| 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 | // changeOrigin: true, | 9 | // changeOrigin: true, |
| 10 | +// ws: true, | ||
| 12 | // pathRewrite: { | 11 | // pathRewrite: { |
| 13 | -// '^/api': '' | ||
| 14 | -// } | ||
| 15 | -// } | ||
| 16 | -// }, //配置跨域支持 | ||
| 17 | -// } | 12 | +// }, |
| 13 | +// }, | ||
| 14 | +// }, | ||
| 15 | +// }, | ||
| 18 | // } | 16 | // } |