BJ_web_developers / wxgzh

Commit fa172f6f5ac0ef05ad4b819ccf78fea9f8173d6f

Authored by 刘淇
1 parent 93f2f8b2

特殊用户车牌充值

Inline Side-by-side
Showing 9 changed files with 1183 additions and 8 deletions
config/index.js
  View file @fa172f6
... ... @@ -8,7 +8,7 @@ module.exports = {
8 8 dev: {
9 9  
10 10 // Paths
11   - assetsSubDirectory: 'static',
  11 + assetsSubDirectory: 'teshuyonghu',
12 12 assetsPublicPath: '/',
13 13 // proxyTable: {
14 14 // '/api':{
... ... @@ -47,11 +47,11 @@ module.exports = {
47 47  
48 48 build: {
49 49 // Template for index.html
50   - index: path.resolve(__dirname, '../dist/index.html'),
  50 + index: path.resolve(__dirname, '../teshuyonghu/teshuyonghu.html'),
51 51  
52 52 // Paths
53   - assetsRoot: path.resolve(__dirname, '../dist'),
54   - assetsSubDirectory: 'static',
  53 + assetsRoot: path.resolve(__dirname, '../teshuyonghu'),
  54 + assetsSubDirectory: 'teshuyonghu',
55 55 assetsPublicPath: './',
56 56  
57 57 /**
... ...
src/api/parkRecord/parkRecord.js
  View file @fa172f6
... ... @@ -8,6 +8,8 @@ export function parkRecordList(params) {
8 8 })
9 9 }
10 10  
  11 +
  12 +
11 13 export function historyQuery(params) {
12 14 return request({
13 15 url: 'queryParkOrder/queryArrearageStaForWXPublc',
... ... @@ -34,3 +36,11 @@ export function appApplyParkOut(params) { // 0元出场
34 36  
35 37  
36 38  
  39 +export function querySpecialCarnumber(params) {
  40 + return request({
  41 + url: 'specialCar/querySpecialCarnumber',
  42 + method: 'post',
  43 + data: params
  44 + })
  45 +}
  46 +
... ...
src/assets/images/parkPay/icon-delete.png 100755 → 100644
View file @fa172f6

845 Bytes | W: | H:

845 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/assets/images/parkPay/icon_chose_n@2x.png 100755 → 100644
View file @fa172f6

982 Bytes | W: | H:

982 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/assets/images/parkPay/icon_chose_s@2x.png 100755 → 100644
View file @fa172f6

935 Bytes | W: | H:

935 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/router/index.js
  View file @fa172f6
... ... @@ -42,7 +42,16 @@ export default new Router({
42 42 component: () => import("@/views/parkPay/recharge.vue")
43 43 },
44 44  
45   -
  45 + {
  46 + path: '/reChargePage',
  47 + name: 'reChargePage',
  48 + component: () => import("@/views/parkPay/reChargePage.vue")
  49 + },
  50 + {
  51 + path: '/rechargeList',
  52 + name: 'rechargeList',
  53 + component: () => import("@/views/parkPay/rechargeList.vue")
  54 + },
46 55  
47 56  
48 57 // //---------------- 个人页面导航
... ...
src/views/parkPay/plateNumber.vue
  View file @fa172f6
... ... @@ -78,9 +78,9 @@
78 78 </div>
79 79  
80 80  
81   - <div class="submit-box" @click="toRecharge">
82   - 车牌充值
83   - </div>
  81 + <!--<div class="submit-box" @click="toRecharge">-->
  82 + <!--车牌充值-->
  83 + <!--</div>-->
84 84  
85 85 <!--<div>-->
86 86 <!--<p style="margin-bottom: 18px;margin-top: 18px;">查询记录</p>-->
... ...
src/views/parkPay/reChargePage.vue 0 → 100644
  View file @fa172f6
  1 +<template>
  2 + <div id="page">
  3 +
  4 +
  5 + <div class="wrap">
  6 + <!--<p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>-->
  7 +
  8 + <!--<ul class="color-choose">-->
  9 + <!--<li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"-->
  10 + <!--:style="{color:currentColor==index?'#FFF':'',background: currentColor==index?activeBG:'' }"-->
  11 + <!--&gt;-->
  12 + <!--{{i.name}}-->
  13 + <!--</li>-->
  14 +
  15 + <!--</ul>-->
  16 +
  17 +
  18 +
  19 +
  20 +
  21 + <p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p>
  22 + <div class="num-box">
  23 + <div class="num0" @click="clickFirstWrap()">
  24 + <span>{{formData.num0}}</span>
  25 + </div>
  26 + <div class="num1" @click="clickKeyWordWrap(1)"><span>{{formData.num1}}</span></div>
  27 + <!--<em class="spot"></em>-->
  28 + <div class="num1" @click="clickKeyWordWrap(2)"><span>{{formData.num2}}</span></div>
  29 + <div class="num1" @click="clickKeyWordWrap(3)"><span>{{formData.num3}}</span></div>
  30 + <div class="num1" @click="clickKeyWordWrap(4)"><span>{{formData.num4}}</span></div>
  31 + <div class="num1" @click="clickKeyWordWrap(5)"><span>{{formData.num5}}</span></div>
  32 + <div class="num1" @click="clickKeyWordWrap(6)"><span>{{formData.num6}}</span></div>
  33 + <div v-if="formData.commonCard == '2'" class="num1" @click="clickKeyWordWrap(7)"><span>{{formData.num7}}</span></div>
  34 + </div>
  35 +
  36 +
  37 + <div class="radio-box">
  38 + <label class="flex-items-center">
  39 + <img v-if="formData.commonCard == 1"
  40 + src="../../assets/images/parkPay/icon_chose_s@2x.png"
  41 + alt="">
  42 + <img v-else
  43 + src="../../assets/images/parkPay/icon_chose_n@2x.png"
  44 + alt="">
  45 + <input type="radio"
  46 + v-model="formData.commonCard"
  47 + value="1" />普通车牌
  48 + </label>
  49 + <label class="flex-items-center">
  50 + <img v-if="formData.commonCard == 2"
  51 + src="../../assets/images/parkPay/icon_chose_s@2x.png"
  52 + alt="">
  53 + <img v-else
  54 + src="../../assets/images/parkPay/icon_chose_n@2x.png"
  55 + alt="">
  56 + <input type="radio"
  57 + v-model="formData.commonCard"
  58 + value="2" />新能源车牌
  59 + </label>
  60 + </div>
  61 +
  62 +
  63 +
  64 +
  65 + <div class="submit-box" @click="toRecharge">
  66 + 车牌充值
  67 + </div>
  68 +
  69 + <!--<div>-->
  70 + <!--<p style="margin-bottom: 18px;margin-top: 18px;">查询记录</p>-->
  71 + <!--<ul class="bound-list" v-if="boundList.length>0">-->
  72 + <!--<li v-for="i in boundList" :key="i" @click="boundHandle(i)">-->
  73 + <!--<span>{{ i }}</span>-->
  74 + <!--</li>-->
  75 + <!--</ul>-->
  76 + <!--<div v-else style="text-align: center;padding: 10px 0;">暂无查询记录</div>-->
  77 + <!--&lt;!&ndash;<div class="addCarNum"><span></span>添加车辆</div>&ndash;&gt;-->
  78 + <!--</div>-->
  79 +
  80 +
  81 +
  82 +
  83 + </div>
  84 + <div class="first-word-wrap"
  85 + v-if="firstWrapStatus">
  86 + <div class="first-word"
  87 + @click="selectFirstWord($event)">
  88 + <div class="word">
  89 + <span>苏</span>
  90 + </div>
  91 + <div class="word">
  92 + <span>湘</span>
  93 + </div>
  94 + <div class="word">
  95 + <span>津</span>
  96 + </div>
  97 + <div class="word">
  98 + <span>鄂</span>
  99 + </div>
  100 + <div class="word">
  101 + <span>沪</span>
  102 + </div>
  103 + <div class="word">
  104 + <span>粤</span>
  105 + </div>
  106 + <div class="word">
  107 + <span>渝</span>
  108 + </div>
  109 + <div class="word">
  110 + <span>琼</span>
  111 + </div>
  112 + </div>
  113 + <div class="first-word"
  114 + @click="selectFirstWord($event)">
  115 + <div class="word">
  116 + <span>冀</span>
  117 + </div>
  118 + <div class="word">
  119 + <span>川</span>
  120 + </div>
  121 + <div class="word">
  122 + <span>晋</span>
  123 + </div>
  124 + <div class="word">
  125 + <span>贵</span>
  126 + </div>
  127 + <div class="word">
  128 + <span>辽</span>
  129 + </div>
  130 + <div class="word">
  131 + <span>云</span>
  132 + </div>
  133 + <div class="word">
  134 + <span>吉</span>
  135 + </div>
  136 + <div class="word">
  137 + <span>陕</span>
  138 + </div>
  139 + </div>
  140 + <div class="first-word"
  141 + @click="selectFirstWord($event)">
  142 + <div class="word">
  143 + <span>黑</span>
  144 + </div>
  145 + <div class="word">
  146 + <span>甘</span>
  147 + </div>
  148 + <div class="word">
  149 + <span>蒙</span>
  150 + </div>
  151 + <div class="word">
  152 + <span>青</span>
  153 + </div>
  154 + <div class="word">
  155 + <span>浙</span>
  156 + </div>
  157 + <div class="word">
  158 + <span>皖</span>
  159 + </div>
  160 + <div class="word">
  161 + <span>藏</span>
  162 + </div>
  163 + <div class="word">
  164 + <span>闽</span>
  165 + </div>
  166 + </div>
  167 + <div class="first-word"
  168 + @click="selectFirstWord($event)">
  169 + <div class="word">
  170 + <span>京</span>
  171 + </div>
  172 + <div class="word">
  173 + <span>赣</span>
  174 + </div>
  175 + <div class="word">
  176 + <span>桂</span>
  177 + </div>
  178 + <div class="word">
  179 + <span>鲁</span>
  180 + </div>
  181 + <div class="word">
  182 + <span>宁</span>
  183 + </div>
  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>-->
  193 + <div class="word bordernone">
  194 + <!-- <img src="../assets/images/icon-switch.png" alt=""> -->
  195 + </div>
  196 + </div>
  197 +
  198 + <!--<div class="first-word"-->
  199 + <!--@click="selectFirstWord($event)">-->
  200 + <!--<div class="word">-->
  201 + <!--<span>港</span>-->
  202 + <!--</div>-->
  203 + <!--<div class="word">-->
  204 + <!--<span>澳</span>-->
  205 + <!--</div>-->
  206 + <!--<div class="word">-->
  207 + <!--<span>领</span>-->
  208 + <!--</div>-->
  209 +
  210 + <!--<div class="word">-->
  211 + <!--<span>警</span>-->
  212 + <!--</div>-->
  213 +
  214 +
  215 + <!--<div class="word bordernone">-->
  216 + <!--</div>-->
  217 + <!--<div class="word bordernone">-->
  218 + <!--</div>-->
  219 + <!--<div class="word bordernone">-->
  220 + <!--</div>-->
  221 + <!--<div class="word bordernone">-->
  222 + <!--</div>-->
  223 + <!--</div>-->
  224 + </div>
  225 + <div class="keyboard-wrap" v-if="keyBoardStatus === true">
  226 + <!-- <div class="number-wrap"></div>
  227 + <div class="letter-wrap"></div>
  228 + <div class="cn-wrap"></div> -->
  229 + <div class="keyboard" v-if="activeKeyWordIndex !== 1">
  230 + <span v-for="(item,index) in allKeyWord._1"
  231 + :key="index"
  232 + @click="clickKeyBoard(item)">{{item}}</span>
  233 + </div>
  234 + <div class="keyboard" v-if="activeKeyWordIndex !== 1">
  235 + <span v-for="(item,index) in allKeyWord._2"
  236 + :key="index"
  237 + @click="clickKeyBoard(item)">{{item}}</span>
  238 + <span class="bordernone"></span>
  239 + <span class="bordernone"></span>
  240 + <span class="bordernone"></span>
  241 + <span class="bordernone"></span>
  242 + </div>
  243 + <div class="keyboard">
  244 + <span v-for="(item,index) in allKeyWord._3"
  245 + :key="index"
  246 + @click="clickKeyBoard(item)">{{item}}</span>
  247 + </div>
  248 + <div class="keyboard">
  249 + <span v-for="(item,index) in allKeyWord._4"
  250 + :key="index"
  251 + @click="clickKeyBoard(item)">{{item}}</span>
  252 + </div>
  253 + <div class="keyboard">
  254 + <span v-for="(item,index) in allKeyWord._5"
  255 + :key="index"
  256 + @click="clickKeyBoard(item)">{{item}}</span>
  257 + </div>
  258 + <div class="keyboard">
  259 + <span v-for="(item,index) in allKeyWord._6"
  260 + :key="index"
  261 + @click="clickKeyBoard(item)">{{item}}</span>
  262 + <span class="bordernone"></span>
  263 + <span class="bordernone"></span>
  264 + <span class="bordernone"></span>
  265 + <!-- <span class="bordernone" v-if="activeKeyWordIndex === 1"></span>
  266 + <span class="bordernone" v-if="activeKeyWordIndex === 1"></span> -->
  267 + <!-- <span @click="deleteWord" v-if="activeKeyWordIndex === 1">x</span> -->
  268 + </div>
  269 + <div class="keyboard" v-if="activeKeyWordIndex !== 1">
  270 + <span v-for="(item,index) in allKeyWord._7"
  271 + :key="index"
  272 + @click="clickKeyBoard(item)">{{item}}</span>
  273 + <span class="bordernone"></span>
  274 + <span class="delete" @click="deleteWord"><img src="../../assets/images/parkPay/icon-delete.png" alt=""></span>
  275 + </div>
  276 + <div class="cancel">
  277 + <span @click="keyBoardStatus = false">完成</span>
  278 + </div>
  279 + </div>
  280 +
  281 +
  282 +
  283 + </div>
  284 +</template>
  285 +<script>
  286 +import { querySpecialCarnumber } from '@/api/parkRecord/parkRecord.js'
  287 +export default {
  288 + data () {
  289 + return {
  290 + colorList:[
  291 + {
  292 + name:'蓝牌',
  293 + id:'1'
  294 + },
  295 + {
  296 + name:'黄牌',
  297 + id:'2'
  298 + },
  299 + {
  300 + name:'绿牌',
  301 + id:'3'
  302 + },
  303 + {
  304 + name:'白牌',
  305 + id:'4'
  306 + },
  307 + {
  308 + name:'黑牌',
  309 + id:'5'
  310 + },
  311 + ],
  312 + currentColor:0,
  313 + activeBG:'#0054C0',
  314 + formData: {
  315 + commonCard: '1',
  316 + num0: '京',
  317 + num1: '',
  318 + num2: '',
  319 + num3: '',
  320 + num4: '',
  321 + num5: '',
  322 + num6: '',
  323 + num7: ''
  324 + },
  325 + allKeyWord: {
  326 + _1: [1, 2, 3, 4, 5, 6, 7],
  327 + _2: [8, 9, 0],
  328 + _3: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
  329 + _4: ['H', 'J', 'K', 'L', 'M', 'N', 'O'],
  330 + _5: ['P', 'Q', 'R', 'S', 'T', 'U', 'V'],
  331 + _6: ['W', 'X', 'Y', 'Z'],
  332 + _7: ['港', '澳', '学', '领', '警']
  333 + },
  334 + activeKeyWordIndex: 1, // 当前车牌号
  335 + keyBoardStatus: false,
  336 + firstWrapStatus: false, // 选择弹窗
  337 + confirmTitle: '',
  338 + submitConfirm: false,
  339 + submitConfirmFalse: false,
  340 + submitConfirmText: '',
  341 + boundList:[] // 历史记录
  342 + }
  343 + },
  344 + created(){
  345 + },
  346 + mounted () {
  347 + //
  348 + // if (this.$utils.clientBrowser() == "微信") {
  349 + // var appID = this.$utils.myVxAppId;
  350 + // var code = this.getUrlParam('code');
  351 + // var local = window.location.href;
  352 + // if (code == null || code === '') {
  353 + // window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appID+'&redirect_uri='+encodeURIComponent(local)+'&response_type=code&scope=snsapi_userinfo&state=1,0#wechat_redirect'
  354 + // } else {
  355 + // return code;
  356 + // }
  357 + // }
  358 +
  359 + this.boundList = JSON.parse(localStorage.getItem('parkRecordList')) ? JSON.parse(localStorage.getItem('parkRecordList')) : []
  360 + console.log(this.boundList)
  361 + },
  362 + methods: {
  363 +
  364 + boundHandle(i) { // 记录点击事件
  365 + console.log(i)
  366 + this.$router.push({
  367 + path:'parkRecord',
  368 + query:{
  369 + carNumber:i,
  370 + carNumberColor: this.currentColor,
  371 + }
  372 + })
  373 + },
  374 + chooseColor (index){ // 颜色选择
  375 + this.currentColor = index
  376 + switch (this.currentColor) {
  377 + case 0 :
  378 + return this.activeBG = '#0054C0'
  379 + break;
  380 + case 1 :
  381 + return this.activeBG = '#FEBE00'
  382 + break;
  383 + case 2 :
  384 + return this.activeBG = '#97DEA1'
  385 + break;
  386 + case 3 :
  387 + return this.activeBG = '#E4E5E7'
  388 + break;
  389 + case 4 :
  390 + return this.activeBG = '#333333'
  391 + break;
  392 + }
  393 + },
  394 + clickFirstWrap () {
  395 + // 点击第一个输入框
  396 + this.firstClickStatus = true
  397 + this.firstWrapStatus = true
  398 + this.keyBoardStatus = false
  399 + this.formData.num0 = ''
  400 + },
  401 + selectFirstWord (event) {
  402 + // 选择省份
  403 + if (event.target.localName !== 'span') {
  404 + return
  405 + }
  406 + this.formData.num0 = event.target.innerText
  407 + this.firstSelectStatus = true
  408 + this.firstWrapStatus = false
  409 + this.firstClickStatus = false
  410 + this.keyBoardStatus = true
  411 + this.activeKeyWordIndex = 1
  412 + // this.$refs.num1.focus()
  413 + // document.getElementById('num1').focus()
  414 + },
  415 + clickKeyBoard (item) { // 点击自定义键盘
  416 + console.log(item)
  417 + this.formData['num' + this.activeKeyWordIndex] = item
  418 +
  419 + if (this.formData.commonCard === '1') {
  420 + this.activeKeyWordIndex++
  421 + if (this.activeKeyWordIndex > 6) {
  422 + this.keyBoardStatus = false
  423 + }
  424 + } else {
  425 + this.activeKeyWordIndex++
  426 + if (this.activeKeyWordIndex > 7) {
  427 + this.keyBoardStatus = false
  428 + }
  429 + }
  430 + },
  431 + deleteWord () { // 退格
  432 + // console.log(this.activeKeyWordIndex)
  433 + // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)])
  434 + if (this.activeKeyWordIndex > 1) {
  435 + this.formData['num' + (this.activeKeyWordIndex - 1)] = ''
  436 + this.activeKeyWordIndex--
  437 + }
  438 + },
  439 + clickKeyWordWrap (activeKeyWordIndex) {
  440 + this.keyBoardStatus = true
  441 + this.activeKeyWordIndex = activeKeyWordIndex
  442 + this.formData['num' + this.activeKeyWordIndex] = ''
  443 + },
  444 + toRecharge() {
  445 + let plateLicense
  446 + if (this.formData.commonCard === '1') {
  447 + plateLicense = this.plate_license_1
  448 + plateLicense = this.palindrome(plateLicense)
  449 + if (plateLicense.length < 7) {
  450 + this.$msgbox('提示', '请输入正确的车牌号')
  451 + return
  452 + }
  453 + }
  454 + if (this.formData.commonCard === '2') {
  455 + plateLicense = this.plate_license_2
  456 + plateLicense = this.palindrome(plateLicense)
  457 + if (plateLicense.length < 8) {
  458 + this.$msgbox('提示', '请输入正确的车牌号')
  459 + return
  460 + }
  461 + }
  462 + this.$emit('getPlateLicense',plateLicense)
  463 + console.log(plateLicense);
  464 + this.querySpecialCarnumber(plateLicense)
  465 +
  466 + },
  467 + querySpecialCarnumber(plateLicense){ // 获取停车记录数据
  468 + var salt = this.$utils.myCommonSalt(32);
  469 + var jsondata = {
  470 + app_id: this.$utils.myVarAppid,
  471 + deviceInfo: this.$utils.myDeviceInfo,
  472 + salt: salt,
  473 + sign_type: "md5",
  474 +
  475 + terminalSource: 7,
  476 + carNumber: plateLicense,
  477 + // sign: md5sign,
  478 + orgId: this.$utils.myOrgId
  479 + }
  480 + jsondata.sign = this.$utils.signObject(jsondata)
  481 +
  482 + // jsondata.sign = md5sign
  483 + console.log( JSON.stringify(jsondata));
  484 + querySpecialCarnumber(jsondata).then(response => {
  485 + console.log(response)
  486 + if(response.code==0){
  487 + this.$router.push({
  488 + path:'rechargeList',
  489 + query:{
  490 + carNumber:plateLicense,
  491 + acctBalance: response.data.acctBalance,
  492 + custId:response.data.custId
  493 + }
  494 + })
  495 + }else {
  496 + this.$msgbox('提示', response.message)
  497 + }
  498 +
  499 + })
  500 + },
  501 + submitFn () {
  502 + let plateLicense
  503 + if (this.formData.commonCard === '1') {
  504 + plateLicense = this.plate_license_1
  505 + plateLicense = this.palindrome(plateLicense)
  506 + if (plateLicense.length < 7) {
  507 + this.$msgbox('提示', '请输入正确的车牌号')
  508 + return
  509 + }
  510 + }
  511 + if (this.formData.commonCard === '2') {
  512 + plateLicense = this.plate_license_2
  513 + plateLicense = this.palindrome(plateLicense)
  514 + if (plateLicense.length < 8) {
  515 + this.$msgbox('提示', '请输入正确的车牌号')
  516 + return
  517 + }
  518 + }
  519 + this.$emit('getPlateLicense',plateLicense)
  520 + console.log(plateLicense);
  521 +
  522 + // boundList
  523 + if(this.boundList.indexOf(plateLicense) == -1 ){
  524 + if(this.boundList.length == 3){
  525 + this.boundList.pop()
  526 + }
  527 + this.boundList.unshift(plateLicense)
  528 + }
  529 + localStorage.setItem('parkRecordList',JSON.stringify(this.boundList))
  530 + console.log(this.boundList)
  531 +
  532 + this.$router.push({
  533 + path:'parkRecord',
  534 + query:{
  535 + carNumber:plateLicense,
  536 + carNumberColor: this.currentColor
  537 + }
  538 + })
  539 + },
  540 + palindrome (str) {
  541 + var arr = str.split('')
  542 + arr = arr.filter(function (val) {
  543 + return (
  544 + val !== ' ' &&
  545 + val !== ',' &&
  546 + val !== '.' &&
  547 + val !== '?' &&
  548 + val !== ':' &&
  549 + val !== ';' &&
  550 + val !== '`' &&
  551 + val !== "'" &&
  552 + val !== '_' &&
  553 + val !== '/' &&
  554 + val !== '-' &&
  555 + val !== '\\' &&
  556 + val !== '' &&
  557 + val !== '(' &&
  558 + val !== ')'
  559 + )
  560 + })
  561 + return arr.join('')
  562 + },
  563 + checkIsHasSpecialStr (str) {
  564 + var flag = false
  565 + var arr = str.split('')
  566 + arr.forEach(val => {
  567 + if (
  568 + val === '!' ||
  569 + val === '}' ||
  570 + val === '{' ||
  571 + val === ']' ||
  572 + val === '[' ||
  573 + val === '&' ||
  574 + val === '$' ||
  575 + val === '@' ||
  576 + val === ' ' ||
  577 + val === ',' ||
  578 + val === '.' ||
  579 + val === '?' ||
  580 + val === ':' ||
  581 + val === ';' ||
  582 + val === '`' ||
  583 + val === "'" ||
  584 + val === '_' ||
  585 + val === '/' ||
  586 + val === '-' ||
  587 + val === '\\' ||
  588 + val === '' ||
  589 + val === '(' ||
  590 + val === ')'
  591 + ) {
  592 + flag = true
  593 + }
  594 + })
  595 + return flag
  596 + },
  597 + checkIsHasChineseStr (str) {
  598 + var Reg = /.*[\u4e00-\u9fa5]+.*/
  599 + if (Reg.test(str)) {
  600 + return true
  601 + }
  602 + return false
  603 + }
  604 + },
  605 + computed: {
  606 + plate_license_1 () {
  607 + return (
  608 + this.formData.num0 +
  609 + this.formData.num1 +
  610 + this.formData.num2 +
  611 + this.formData.num3 +
  612 + this.formData.num4 +
  613 + this.formData.num5 +
  614 + this.formData.num6
  615 + )
  616 + },
  617 + plate_license_2 () {
  618 + return (
  619 + this.formData.num0 +
  620 + this.formData.num1 +
  621 + this.formData.num2 +
  622 + this.formData.num3 +
  623 + this.formData.num4 +
  624 + this.formData.num5 +
  625 + this.formData.num6 +
  626 + this.formData.num7
  627 + )
  628 + }
  629 + }
  630 +}
  631 +</script>
  632 +<style lang="scss" scoped>
  633 +
  634 + .swiper-container {
  635 + height: 206px;
  636 + }
  637 +
  638 + .swiper-slide {
  639 + /*width: 100%;*/
  640 + height: 206px;
  641 + background-repeat: no-repeat;
  642 + background-size: 100% 100%;
  643 + }
  644 +
  645 + .flex-items-center {
  646 + display: flex;
  647 + align-items: center;
  648 + }
  649 + .wrap {
  650 + padding:0 18px;
  651 + .radio-box {
  652 + display: flex;
  653 + align-items: center;
  654 + justify-content: flex-end;
  655 + margin-top: 18px;
  656 + text-align: right;
  657 + input[type="radio"] {
  658 + display: none;
  659 + }
  660 + label {
  661 + padding-left: 0.6rem;
  662 + cursor: pointer;
  663 + img {
  664 + width: 0.8rem;
  665 + margin-right: 0.1rem;
  666 + }
  667 + }
  668 + }
  669 +
  670 + .color-choose{
  671 + width: 265px;
  672 + height: 34px;
  673 + margin: 0 auto;
  674 + background: #F3F3F3;
  675 + border-radius: 6px;
  676 + display: flex;
  677 + li{
  678 + flex: 1;
  679 + text-align: center;
  680 + line-height: 34px;
  681 + border-radius: 6px;
  682 + }
  683 + }
  684 + .card-header {
  685 + font-size: 0.75rem;
  686 + margin: 0.2rem 0 0.5rem;
  687 + color: #4a4a4a;
  688 + }
  689 + // input输入框
  690 + .num-box {
  691 + display: flex;
  692 + justify-content: space-between;
  693 + align-items: center;
  694 + .spot {
  695 + width: 0.2rem;
  696 + height: 0.2rem;
  697 + border-radius: 50%;
  698 + background-color: #d8d8d8;
  699 + }
  700 + & > div {
  701 + width: 1.8rem;
  702 + height: 1.8rem;
  703 + border: 1px solid #e4e4e4;
  704 + &.first {
  705 + position: relative;
  706 + text-align: center;
  707 + line-height: 1.7rem;
  708 + font-weight: 200;
  709 + .input-wrap {
  710 + position: absolute;
  711 + top: 0;
  712 + left: 0;
  713 + right: 0;
  714 + bottom: 0;
  715 + &.active {
  716 + z-index: 100;
  717 + }
  718 + }
  719 + em {
  720 + color: #979797;
  721 + font-size: 1.6rem;
  722 + line-height: 1.7rem;
  723 + }
  724 + span {
  725 + display: inline-block;
  726 + width: 100%;
  727 + height: 100%;
  728 + // background-color: #9cbce2;
  729 + color: #828282;
  730 + line-height: 1.8rem;
  731 + }
  732 + }
  733 + &.active {
  734 + border: 1px solid #4a90e2;
  735 + &:after {
  736 + border-bottom: 0.5rem solid #4a90e2;
  737 + }
  738 + }
  739 + span {
  740 + display: flex;
  741 + align-items: center;
  742 + justify-content: center;
  743 + width: 100%;
  744 + height: 100%;
  745 + font-size: 1rem;
  746 + color: #828282;
  747 + &.first {
  748 + background-color: #9cbce2;
  749 + color: #fff;
  750 + text-indent: 0.4rem;
  751 + border-radius: 0;
  752 + }
  753 + }
  754 + }
  755 + }
  756 + .submit-box {
  757 + width: 100%;
  758 + height: 44px;
  759 + line-height: 44px;
  760 + border-radius: 4px;
  761 + font-size: 20px;
  762 + margin-top: 18px;
  763 + background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
  764 + color: #fff;
  765 + text-align: center;
  766 + }
  767 + .info {
  768 + font-size: 0.5rem;
  769 + margin-top: 0.9rem;
  770 + color: #828282;
  771 + text-align: left;
  772 + img {
  773 + width: 0.6rem;
  774 + vertical-align: middle;
  775 + }
  776 + }
  777 + }
  778 + .first-word-wrap {
  779 + // height: 9.4rem;
  780 + background-color: #D2D5DB;
  781 + padding: 0.6rem 0.8rem 1.1rem;
  782 + position: fixed;
  783 + bottom: 0;
  784 + left: 0;
  785 + right: 0;
  786 + .first-word {
  787 + display: flex;
  788 + justify-content: space-between;
  789 + margin-bottom: 0.45rem;
  790 + .word {
  791 + box-sizing: border-box;
  792 + width: 1.8rem;
  793 + height: 1.8rem;
  794 + // border: 1px solid #9cbce2;
  795 + box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
  796 + border-radius: 0.16rem;
  797 + text-align: center;
  798 + &.bordernone {
  799 + border: none;
  800 + box-shadow:none
  801 + }
  802 + span {
  803 + box-sizing: border-box;
  804 + display: flex;
  805 + align-items: center;
  806 + justify-content: center;
  807 + text-align: center;
  808 + width: 100%;
  809 + height: 100%;
  810 + background-color: #fff;
  811 + color: #000;
  812 + // border: 1px solid #fff;
  813 + border-radius: 0.125rem;
  814 + }
  815 + img {
  816 + width: 1.6rem;
  817 + }
  818 + }
  819 + &:nth-last-of-type(1){
  820 + margin-bottom: 0rem;
  821 + }
  822 + }
  823 + }
  824 + .keyboard-wrap {
  825 + background-color: #D2D5DB;
  826 + position: fixed;
  827 + bottom: 0;
  828 + left: 0;
  829 + right: 0;
  830 + padding: 0.6rem 0.6rem 0.4rem;
  831 + .keyboard {
  832 + display: flex;
  833 + justify-content: space-between;
  834 + align-items: center;
  835 + height: 2rem;
  836 + margin-bottom: 0.3rem;
  837 + span {
  838 + text-align: center;
  839 + display: flex;
  840 + width: 1.8rem;
  841 + align-items: center;
  842 + justify-content: center;
  843 + height: 1.8rem;
  844 + margin: 0 0.3rem;
  845 + box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
  846 + background-color: #fff;
  847 + border-radius: 0.125rem;
  848 + &:active {
  849 + background-color: #e4e4e4;
  850 + }
  851 + &.bordernone{
  852 + border: none;
  853 + box-shadow: none;
  854 + background-color: #D2D5DB;
  855 + &:active{
  856 + background-color:#D2D5DB;
  857 + }
  858 + }
  859 + &.delete{
  860 + background-color: #465266;
  861 + img{
  862 + width: 1.15rem;
  863 + }
  864 + }
  865 + }
  866 + }
  867 + .cancel{
  868 + display: flex;
  869 + justify-content: flex-end;
  870 + align-items: center;
  871 + span{
  872 + display: flex;
  873 + align-items: center;
  874 + justify-content: center;
  875 + width: 3.6rem;
  876 + height: 1.8rem;
  877 + background-color: #465266;
  878 + color: #fff;
  879 + border-radius: 0.125rem;
  880 + }
  881 + }
  882 + }
  883 + .bound-list{
  884 + li{
  885 + padding: 0 10px;
  886 + height: 34px;
  887 + margin-bottom: 12px;
  888 + line-height: 34px;
  889 + background: #F2F1F1;
  890 + border-radius: 2px;
  891 + display: flex;
  892 + justify-content: space-between;
  893 + }
  894 + }
  895 + .addCarNum{
  896 + height: 34px;
  897 + line-height: 34px;
  898 + background: #FFFFFF;
  899 + border-radius: 2px;
  900 + border: 1px solid #F2F1F1;
  901 + text-align: center;
  902 + span{
  903 + width: 16px;
  904 + height: 16px;
  905 + display: inline-block;
  906 + background: url("../../assets/images/parkPay/addCarNum.png") no-repeat;
  907 + margin-right: 10px;
  908 + vertical-align: sub;
  909 + cursor: pointer;
  910 + }
  911 + }
  912 +</style>
... ...
src/views/parkPay/rechargeList.vue 0 → 100644
  View file @fa172f6
  1 +<template>
  2 + <div>
  3 + <div class="rechargeImg"></div>
  4 +
  5 + <!--<p class="balanceTitle">车牌{{carNumber}}的余额: {{acctBalance==0?0:(acctBalance/100).toFixed(2)}}元</p>-->
  6 + <p class="balanceTitle">车牌<span style="color: #4194EF;font-weight: 600"> {{carNumber}}</span>的余额: <span style="color: #4194EF;font-weight: 600">{{(acctBalance/100).toFixed(2)}}</span>元</p>
  7 +
  8 + <ul class="rechargeList">
  9 + <li v-for="(i, index) in dataList" @click="chooseMoney(index,i)">
  10 + <div :class="{isActive:index==currentIndex}">{{i}} 元</div>
  11 + </li>
  12 +
  13 + </ul>
  14 +
  15 + <div class="submit-box" @click="toRecharge">
  16 + 确定充值
  17 + </div>
  18 + </div>
  19 +</template>
  20 +
  21 +<script>
  22 +import { getOpenId, vxPayQuery } from "@/api/orderPay/orderPay";
  23 +export default {
  24 + name: "rechargeList",
  25 + data() {
  26 + return {
  27 + acctBalance: "",
  28 + fileOrder: 100,
  29 + dataList: ["0.1", "0.2", "300", "400", "500", "600"],
  30 + currentIndex: 0,
  31 + webAppCode: "",
  32 + custId:'',
  33 + currentMoney:0.1
  34 + };
  35 + },
  36 + created() {
  37 + this.acctBalance = this.$route.query.acctBalance; //车牌颜色
  38 + this.carNumber = this.$route.query.carNumber;
  39 + this.custId = this.$route.query.custId;
  40 + console.log(this.clientBrowser)
  41 + if (this.$utils.clientBrowser() == "微信") {
  42 + this.webAppCode = this.getCode();
  43 + }
  44 + },
  45 + methods: {
  46 + toRecharge() {
  47 + let me = this
  48 + var codeParams = {
  49 + code: this.webAppCode,
  50 + appId: this.$utils.myVxAppId
  51 + };
  52 + getOpenId(codeParams).then(res => {
  53 + if (res.code == 0) {
  54 + me.vxPay(res.data);
  55 + } else if (res.code == 40163) { //code been used, hints[重复code问题]
  56 + this.$msgbox('提示', '请重新支付！重复code问题')
  57 + console.log(res.message);
  58 + } else {
  59 + this.$msgbox('提示', '请重新支付')
  60 + }
  61 + });
  62 + },
  63 + vxPay(openidData) {
  64 + let vm = this;
  65 + var wxParams = {};
  66 + wxParams.backType = 2;
  67 + wxParams.orgId = this.$utils.myOrgId;
  68 + wxParams.payType = 4;// 1:支付宝 2：微信 3：银联 10:H5 4微信公众号
  69 + wxParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
  70 + wxParams.carNumber = this.carNumber;
  71 + wxParams.paySrcType = 201;//101停车支付 201充值
  72 + wxParams.openId = openidData
  73 + wxParams.appId = this.$utils.myVxAppId;
  74 + wxParams.acctType = '1'
  75 + wxParams.custId = this.custId
  76 + wxParams.rechargeID = this.custId
  77 + wxParams.rechargeType = '2'
  78 + wxParams.realPayMoney = this.currentMoney*100 // 实付金额
  79 + wxParams.rechargeFee = this.currentMoney*100 //充值实际得到金额
  80 + wxParams.acctBalance = this.acctBalance //账户余额
  81 +
  82 +
  83 + vxPayQuery(wxParams).then(res => {
  84 + if (res.code == 0) { //
  85 + if (res.data) {
  86 + var data = res.data;
  87 + console.log(JSON.stringify(data));
  88 + if (typeof WeixinJSBridge === "undefined") { // 微信浏览器内置对象。参考微信官方文档
  89 + if (document.addEventListener) {
  90 + document.addEventListener("WeixinJSBridgeReady", vm.onBridgeReady(data), false);
  91 + } else if (document.attachEvent) {
  92 + document.attachEvent("WeixinJSBridgeReady", vm.onBridgeReady(data));
  93 + document.attachEvent("onWeixinJSBridgeReady", vm.onBridgeReady(data));
  94 + }
  95 + } else {
  96 + console.log("准备调用微信支付");
  97 + vm.onBridgeReady(data);
  98 + }
  99 + } else {
  100 + alert("没有找到返回值");
  101 + }
  102 + } else if (res.code == 1002) {//其他情况如【该卡号场内已存在】
  103 + console.log(res.message);
  104 + MessageBox.confirm("", {
  105 + message: res.message,
  106 + title: "温馨提示",
  107 + showCancelButton: false,
  108 + confirmButtonText: "确定"
  109 + }).then(action => {
  110 + if (action == "confirm") { //确认的回调
  111 + console.log("确定");
  112 + this.$router.go(-1);
  113 + }
  114 + }).catch(err => {
  115 + if (err == "cancel") { //取消的回调
  116 + console.log("取消");
  117 + }
  118 + });
  119 + } else {
  120 + alert(res.message);
  121 + }
  122 + });
  123 + },
  124 + onBridgeReady(params) {
  125 + let me = this;
  126 + console.log("调用微信支付WeixinJSBridge");
  127 + WeixinJSBridge.invoke(
  128 + "getBrandWCPayRequest", params,
  129 + //
  130 + // 'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
  131 + // 'appId': data.appId, // 公众号名称，由商户传入
  132 + // 'timeStamp': data.timeStamp, // 时间戳
  133 + // 'nonceStr': data.nonceStr, // 随机串
  134 + // 'package': data.package, // 预支付id
  135 + // 'signType': data.signType, // 微信签名方式
  136 + // 'paySign': data.paySign // 微信签名
  137 + // },
  138 + function(res) {
  139 + // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
  140 + if (res.err_msg === "get_brand_wcpay_request:ok") {
  141 + console.log("成功");
  142 + // this.$msgbox('提示', '支付成功')
  143 + // alert(me.acctBalance)
  144 + // alert(me.currentMoney*100)
  145 + me.acctBalance = Number(me.acctBalance)+Number(me.currentMoney*100)
  146 + // alert(this.acctBalance)
  147 + alert('支付成功')
  148 + // me.$router.go(-2);
  149 + } else {
  150 + console.log("失败");
  151 + // this.$msgbox('提示', '')
  152 + alert('支付失败')
  153 + me.$router.go(-2);
  154 + }
  155 + }
  156 + );
  157 + },
  158 + getCode() {
  159 + var appID = this.$utils.myVxAppId;
  160 + var code = this.getUrlParam("code");
  161 + var local = window.location.href;
  162 + if (code == null || code === "") {
  163 + window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appID + "&redirect_uri=" + encodeURIComponent(local) + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
  164 + } else {
  165 + return code;
  166 + }
  167 + },
  168 + getUrlParam(name) {
  169 + var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  170 + var r = window.location.search.substr(1).match(reg);
  171 + if (r != null) return unescape(r[2]);
  172 + return null;
  173 + },
  174 + chooseMoney(index,i) {
  175 + this.currentIndex = index;
  176 + this.currentMoney = i
  177 + }
  178 + },
  179 + directives: {
  180 + numberOnly: {
  181 + bind: function(el) {
  182 + el.handler = function() {
  183 + el.value = Number(el.value.replace(/\D+/, ""));
  184 + };
  185 + el.addEventListener("input", el.handler);
  186 + },
  187 + unbind: function(el) {
  188 + el.removeEventListener("input", el.handler);
  189 + }
  190 + }
  191 + }
  192 +};
  193 +</script>
  194 +
  195 +<style scoped lang="scss">
  196 + .rechargeImg {
  197 + width: 80px;
  198 + height: 80px;
  199 + margin: 20px auto;
  200 + background: url("../../assets/images/recharge.png");
  201 + }
  202 +
  203 + .balanceTitle {
  204 + padding: 15px;
  205 + background: #ccc;
  206 + font-size: 16px;
  207 + /*color: #fff;*/
  208 + }
  209 +
  210 + .rechargeList {
  211 + display: flex;
  212 + flex-wrap: wrap;
  213 + > li {
  214 + flex: 0 0 50%;
  215 +
  216 + padding: 10px;
  217 + > div {
  218 + height: 50px;
  219 + line-height: 50px;
  220 + text-align: center;
  221 + background: #f00;
  222 + color: #fff;
  223 + font-size: 18px;
  224 + border-radius: 4px;
  225 + }
  226 + .isActive {
  227 + background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
  228 + }
  229 + }
  230 + }
  231 +
  232 + .submit-box {
  233 + width: 80%;
  234 + height: 44px;
  235 + line-height: 44px;
  236 + border-radius: 4px;
  237 + font-size: 20px;
  238 + margin: 58px auto 0;
  239 + background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
  240 + color: #fff;
  241 + text-align: center;
  242 + }
  243 +
  244 +</style>
... ...