Commit a17ce3dfc0078a5bb7249d47a5b2a6216cc20074
1 parent
daddc283
宣化 小票码
Showing
6 changed files
with
795 additions
and
6 deletions
src/components/carPlateNum.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div id="page"> | ||
| 3 | + <div class="wrap"> | ||
| 4 | + <p style="margin-bottom: 18px;margin-top: 18px;color: #4194EF;">请选择车牌颜色</p> | ||
| 5 | + | ||
| 6 | + <ul class="color-choose"> | ||
| 7 | + <li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)" | ||
| 8 | + :style="{color:currentColor==index?'#FFF':'',background: currentColor==index?activeBG:'' }" | ||
| 9 | + > | ||
| 10 | + {{i.name}} | ||
| 11 | + </li> | ||
| 12 | + | ||
| 13 | + </ul> | ||
| 14 | + | ||
| 15 | + <p style="margin-bottom: 18px;margin-top: 18px;color: #4194EF;">请输入车牌号码</p> | ||
| 16 | + <div class="num-box"> | ||
| 17 | + <div class="num0" @click="clickFirstWrap()"> | ||
| 18 | + <span>{{formData.num0}}</span> | ||
| 19 | + </div> | ||
| 20 | + <div class="num1" @click="clickKeyWordWrap(1)"><span>{{formData.num1}}</span></div> | ||
| 21 | + <em class="spot"></em> | ||
| 22 | + <div class="num1" @click="clickKeyWordWrap(2)"><span>{{formData.num2}}</span></div> | ||
| 23 | + <div class="num1" @click="clickKeyWordWrap(3)"><span>{{formData.num3}}</span></div> | ||
| 24 | + <div class="num1" @click="clickKeyWordWrap(4)"><span>{{formData.num4}}</span></div> | ||
| 25 | + <div class="num1" @click="clickKeyWordWrap(5)"><span>{{formData.num5}}</span></div> | ||
| 26 | + <div class="num1" @click="clickKeyWordWrap(6)"><span>{{formData.num6}}</span></div> | ||
| 27 | + <div v-if="formData.commonCard == '2'" class="num1" @click="clickKeyWordWrap(7)"><span>{{formData.num7}}</span></div> | ||
| 28 | + </div> | ||
| 29 | + | ||
| 30 | + | ||
| 31 | + <div class="radio-box"> | ||
| 32 | + <label class="flex-items-center"> | ||
| 33 | + <img v-if="formData.commonCard == 1" | ||
| 34 | + src="../assets/images/icon_chose_s@2x.png" | ||
| 35 | + alt=""> | ||
| 36 | + <img v-else | ||
| 37 | + src="../assets/images/icon_chose_n@2x.png" | ||
| 38 | + alt=""> | ||
| 39 | + <input type="radio" | ||
| 40 | + v-model="formData.commonCard" | ||
| 41 | + value="1" />普通车牌 | ||
| 42 | + </label> | ||
| 43 | + <label class="flex-items-center"> | ||
| 44 | + <img v-if="formData.commonCard == 2" | ||
| 45 | + src="../assets/images/icon_chose_s@2x.png" | ||
| 46 | + alt=""> | ||
| 47 | + <img v-else | ||
| 48 | + src="../assets/images/icon_chose_n@2x.png" | ||
| 49 | + alt=""> | ||
| 50 | + <input type="radio" | ||
| 51 | + v-model="formData.commonCard" | ||
| 52 | + value="2" />新能源车牌 | ||
| 53 | + </label> | ||
| 54 | + </div> | ||
| 55 | + | ||
| 56 | + | ||
| 57 | + <div class="submit-box" @click="submitFn()"> | ||
| 58 | + 查询 | ||
| 59 | + </div> | ||
| 60 | + </div> | ||
| 61 | + <div class="first-word-wrap" | ||
| 62 | + v-if="firstWrapStatus"> | ||
| 63 | + <div class="first-word" | ||
| 64 | + @click="selectFirstWord($event)"> | ||
| 65 | + <div class="word"> | ||
| 66 | + <span>冀</span> | ||
| 67 | + </div> | ||
| 68 | + <div class="word"> | ||
| 69 | + <span>湘</span> | ||
| 70 | + </div> | ||
| 71 | + <div class="word"> | ||
| 72 | + <span>津</span> | ||
| 73 | + </div> | ||
| 74 | + <div class="word"> | ||
| 75 | + <span>鄂</span> | ||
| 76 | + </div> | ||
| 77 | + <div class="word"> | ||
| 78 | + <span>沪</span> | ||
| 79 | + </div> | ||
| 80 | + <div class="word"> | ||
| 81 | + <span>粤</span> | ||
| 82 | + </div> | ||
| 83 | + <div class="word"> | ||
| 84 | + <span>渝</span> | ||
| 85 | + </div> | ||
| 86 | + <div class="word"> | ||
| 87 | + <span>琼</span> | ||
| 88 | + </div> | ||
| 89 | + </div> | ||
| 90 | + <div class="first-word" | ||
| 91 | + @click="selectFirstWord($event)"> | ||
| 92 | + <div class="word"> | ||
| 93 | + <span>蒙</span> | ||
| 94 | + </div> | ||
| 95 | + <div class="word"> | ||
| 96 | + <span>川</span> | ||
| 97 | + </div> | ||
| 98 | + <div class="word"> | ||
| 99 | + <span>晋</span> | ||
| 100 | + </div> | ||
| 101 | + <div class="word"> | ||
| 102 | + <span>贵</span> | ||
| 103 | + </div> | ||
| 104 | + <div class="word"> | ||
| 105 | + <span>辽</span> | ||
| 106 | + </div> | ||
| 107 | + <div class="word"> | ||
| 108 | + <span>云</span> | ||
| 109 | + </div> | ||
| 110 | + <div class="word"> | ||
| 111 | + <span>吉</span> | ||
| 112 | + </div> | ||
| 113 | + <div class="word"> | ||
| 114 | + <span>陕</span> | ||
| 115 | + </div> | ||
| 116 | + </div> | ||
| 117 | + <div class="first-word" | ||
| 118 | + @click="selectFirstWord($event)"> | ||
| 119 | + <div class="word"> | ||
| 120 | + <span>黑</span> | ||
| 121 | + </div> | ||
| 122 | + <div class="word"> | ||
| 123 | + <span>甘</span> | ||
| 124 | + </div> | ||
| 125 | + <div class="word"> | ||
| 126 | + <span>苏</span> | ||
| 127 | + </div> | ||
| 128 | + <div class="word"> | ||
| 129 | + <span>青</span> | ||
| 130 | + </div> | ||
| 131 | + <div class="word"> | ||
| 132 | + <span>浙</span> | ||
| 133 | + </div> | ||
| 134 | + <div class="word"> | ||
| 135 | + <span>皖</span> | ||
| 136 | + </div> | ||
| 137 | + <div class="word"> | ||
| 138 | + <span>藏</span> | ||
| 139 | + </div> | ||
| 140 | + <div class="word"> | ||
| 141 | + <span>闽</span> | ||
| 142 | + </div> | ||
| 143 | + </div> | ||
| 144 | + <div class="first-word" | ||
| 145 | + @click="selectFirstWord($event)"> | ||
| 146 | + <div class="word"> | ||
| 147 | + <span>京</span> | ||
| 148 | + </div> | ||
| 149 | + <div class="word"> | ||
| 150 | + <span>赣</span> | ||
| 151 | + </div> | ||
| 152 | + <div class="word"> | ||
| 153 | + <span>桂</span> | ||
| 154 | + </div> | ||
| 155 | + <div class="word"> | ||
| 156 | + <span>鲁</span> | ||
| 157 | + </div> | ||
| 158 | + <div class="word"> | ||
| 159 | + <span>宁</span> | ||
| 160 | + </div> | ||
| 161 | + <div class="word"> | ||
| 162 | + <span>豫</span> | ||
| 163 | + </div> | ||
| 164 | + <div class="word"> | ||
| 165 | + <span>新</span> | ||
| 166 | + </div> | ||
| 167 | + | ||
| 168 | + <!--<div class="word">--> | ||
| 169 | + <!--<span>学</span>--> | ||
| 170 | + <!--</div>--> | ||
| 171 | + <div class="word bordernone"> | ||
| 172 | + <!-- <img src="../assets/images/icon-switch.png" alt=""> --> | ||
| 173 | + </div> | ||
| 174 | + </div> | ||
| 175 | + | ||
| 176 | + | ||
| 177 | + <!--<div class="first-word"--> | ||
| 178 | + <!--@click="selectFirstWord($event)">--> | ||
| 179 | + <!--<div class="word">--> | ||
| 180 | + <!--<span>港</span>--> | ||
| 181 | + <!--</div>--> | ||
| 182 | + <!--<div class="word">--> | ||
| 183 | + <!--<span>澳</span>--> | ||
| 184 | + <!--</div>--> | ||
| 185 | + <!--<div class="word">--> | ||
| 186 | + <!--<span>领</span>--> | ||
| 187 | + <!--</div>--> | ||
| 188 | + | ||
| 189 | + <!--<div class="word">--> | ||
| 190 | + <!--<span>警</span>--> | ||
| 191 | + <!--</div>--> | ||
| 192 | + | ||
| 193 | + | ||
| 194 | + <!--<div class="word bordernone">--> | ||
| 195 | + <!--</div>--> | ||
| 196 | + <!--<div class="word bordernone">--> | ||
| 197 | + <!--</div>--> | ||
| 198 | + <!--<div class="word bordernone">--> | ||
| 199 | + <!--</div>--> | ||
| 200 | + <!--<div class="word bordernone">--> | ||
| 201 | + <!--</div>--> | ||
| 202 | + <!--</div>--> | ||
| 203 | + | ||
| 204 | + </div> | ||
| 205 | + <div class="keyboard-wrap" v-if="keyBoardStatus === true"> | ||
| 206 | + <!-- <div class="number-wrap"></div> | ||
| 207 | + <div class="letter-wrap"></div> | ||
| 208 | + <div class="cn-wrap"></div> --> | ||
| 209 | + <div class="keyboard" v-if="activeKeyWordIndex !== 1"> | ||
| 210 | + <span v-for="(item,index) in allKeyWord._1" | ||
| 211 | + :key="index" | ||
| 212 | + @click="clickKeyBoard(item)">{{item}}</span> | ||
| 213 | + </div> | ||
| 214 | + <div class="keyboard" v-if="activeKeyWordIndex !== 1"> | ||
| 215 | + <span v-for="(item,index) in allKeyWord._2" | ||
| 216 | + :key="index" | ||
| 217 | + @click="clickKeyBoard(item)">{{item}}</span> | ||
| 218 | + <span class="bordernone"></span> | ||
| 219 | + <span class="bordernone"></span> | ||
| 220 | + <span class="bordernone"></span> | ||
| 221 | + <span class="bordernone"></span> | ||
| 222 | + </div> | ||
| 223 | + <div class="keyboard"> | ||
| 224 | + <span v-for="(item,index) in allKeyWord._3" | ||
| 225 | + :key="index" | ||
| 226 | + @click="clickKeyBoard(item)">{{item}}</span> | ||
| 227 | + </div> | ||
| 228 | + <div class="keyboard"> | ||
| 229 | + <span v-for="(item,index) in allKeyWord._4" | ||
| 230 | + :key="index" | ||
| 231 | + @click="clickKeyBoard(item)">{{item}}</span> | ||
| 232 | + </div> | ||
| 233 | + <div class="keyboard"> | ||
| 234 | + <span v-for="(item,index) in allKeyWord._5" | ||
| 235 | + :key="index" | ||
| 236 | + @click="clickKeyBoard(item)">{{item}}</span> | ||
| 237 | + </div> | ||
| 238 | + <div class="keyboard"> | ||
| 239 | + <span v-for="(item,index) in allKeyWord._6" | ||
| 240 | + :key="index" | ||
| 241 | + @click="clickKeyBoard(item)">{{item}}</span> | ||
| 242 | + <span class="bordernone"></span> | ||
| 243 | + <span class="bordernone"></span> | ||
| 244 | + <span class="bordernone"></span> | ||
| 245 | + <!-- <span class="bordernone" v-if="activeKeyWordIndex === 1"></span> | ||
| 246 | + <span class="bordernone" v-if="activeKeyWordIndex === 1"></span> --> | ||
| 247 | + <!-- <span @click="deleteWord" v-if="activeKeyWordIndex === 1">x</span> --> | ||
| 248 | + </div> | ||
| 249 | + <div class="keyboard" v-if="activeKeyWordIndex !== 1"> | ||
| 250 | + <span v-for="(item,index) in allKeyWord._7" | ||
| 251 | + :key="index" | ||
| 252 | + @click="clickKeyBoard(item)">{{item}}</span> | ||
| 253 | + <span class="bordernone"></span> | ||
| 254 | + <span class="delete" @click="deleteWord"><img src="../assets/images/icon-delete.png" alt=""></span> | ||
| 255 | + </div> | ||
| 256 | + <div class="cancel"> | ||
| 257 | + <span @click="keyBoardStatus = false">完成</span> | ||
| 258 | + </div> | ||
| 259 | + </div> | ||
| 260 | + | ||
| 261 | + | ||
| 262 | + <modal-alert ref="alert"> | ||
| 263 | + <div class="trave-tip-content txt-l" slot="content"> | ||
| 264 | + <div class="confirm-text"> | ||
| 265 | + <p>请输入正确的车牌号</p> | ||
| 266 | + </div> | ||
| 267 | + </div> | ||
| 268 | + <span slot="button">知道了</span> | ||
| 269 | + </modal-alert> | ||
| 270 | + </div> | ||
| 271 | +</template> | ||
| 272 | +<script> | ||
| 273 | +export default { | ||
| 274 | + data () { | ||
| 275 | + return { | ||
| 276 | + colorList:[ | ||
| 277 | + { | ||
| 278 | + name:'蓝牌', | ||
| 279 | + id:'1' | ||
| 280 | + }, | ||
| 281 | + { | ||
| 282 | + name:'黄牌', | ||
| 283 | + id:'2' | ||
| 284 | + }, | ||
| 285 | + { | ||
| 286 | + name:'白牌', | ||
| 287 | + id:'3' | ||
| 288 | + }, | ||
| 289 | + { | ||
| 290 | + name:'黑牌', | ||
| 291 | + id:'4' | ||
| 292 | + }, | ||
| 293 | + { | ||
| 294 | + name:'绿牌', | ||
| 295 | + id:'5' | ||
| 296 | + }, | ||
| 297 | + ], | ||
| 298 | + currentColor:0, | ||
| 299 | + activeBG:'#0054C0', | ||
| 300 | + formData: { | ||
| 301 | + commonCard: '1', | ||
| 302 | + num0: '', | ||
| 303 | + num1: '', | ||
| 304 | + num2: '', | ||
| 305 | + num3: '', | ||
| 306 | + num4: '', | ||
| 307 | + num5: '', | ||
| 308 | + num6: '', | ||
| 309 | + num7: '' | ||
| 310 | + }, | ||
| 311 | + allKeyWord: { | ||
| 312 | + _1: [1, 2, 3, 4, 5, 6, 7], | ||
| 313 | + _2: [8, 9, 0], | ||
| 314 | + _3: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], | ||
| 315 | + _4: ['H', 'J', 'K', 'L', 'M', 'N', 'O'], | ||
| 316 | + _5: ['P', 'Q', 'R', 'S', 'T', 'U', 'V'], | ||
| 317 | + _6: ['W', 'X', 'Y', 'Z'], | ||
| 318 | + _7: ['港', '澳', '学', '领', '警'] | ||
| 319 | + }, | ||
| 320 | + activeKeyWordIndex: 1, // 当前车牌号 | ||
| 321 | + keyBoardStatus: false, | ||
| 322 | + firstWrapStatus: false, // 选择弹窗 | ||
| 323 | + confirmTitle: '', | ||
| 324 | + submitConfirm: false, | ||
| 325 | + submitConfirmFalse: false, | ||
| 326 | + submitConfirmText: '' | ||
| 327 | + } | ||
| 328 | + }, | ||
| 329 | + mounted () { | ||
| 330 | + | ||
| 331 | + if (this.$utils.clientBrowser() == "微信") { | ||
| 332 | + var appID = this.$utils.myVxAppId; | ||
| 333 | + var code = this.getUrlParam('code'); | ||
| 334 | + var local = window.location.href; | ||
| 335 | + if (code == null || code === '') { | ||
| 336 | + 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' | ||
| 337 | + } else { | ||
| 338 | + return code; | ||
| 339 | + } | ||
| 340 | + } | ||
| 341 | + | ||
| 342 | + }, | ||
| 343 | + methods: { | ||
| 344 | + getUrlParam(name) { | ||
| 345 | + var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); | ||
| 346 | + var r = window.location.search.substr(1).match(reg) | ||
| 347 | + if (r != null) return unescape(r[2]) | ||
| 348 | + return null | ||
| 349 | + }, | ||
| 350 | + chooseColor (index){ // 颜色选择 | ||
| 351 | + this.currentColor = index | ||
| 352 | + switch (this.currentColor) { | ||
| 353 | + case 0 : | ||
| 354 | + return this.activeBG = '#0054C0' | ||
| 355 | + break; | ||
| 356 | + case 1 : | ||
| 357 | + return this.activeBG = '#FEBE00' | ||
| 358 | + break; | ||
| 359 | + case 2 : | ||
| 360 | + return this.activeBG = '#E4E5E7' | ||
| 361 | + break; | ||
| 362 | + case 3 : | ||
| 363 | + return this.activeBG = '#333333' | ||
| 364 | + break; | ||
| 365 | + case 4 : | ||
| 366 | + return this.activeBG = '#97DEA1' | ||
| 367 | + break; | ||
| 368 | + } | ||
| 369 | + }, | ||
| 370 | + clickFirstWrap () { | ||
| 371 | + // 点击第一个输入框 | ||
| 372 | + this.firstClickStatus = true | ||
| 373 | + this.firstWrapStatus = true | ||
| 374 | + this.keyBoardStatus = false | ||
| 375 | + this.formData.num0 = '' | ||
| 376 | + }, | ||
| 377 | + selectFirstWord (event) { | ||
| 378 | + // 选择省份 | ||
| 379 | + if (event.target.localName !== 'span') { | ||
| 380 | + return | ||
| 381 | + } | ||
| 382 | + this.formData.num0 = event.target.innerText | ||
| 383 | + this.firstSelectStatus = true | ||
| 384 | + this.firstWrapStatus = false | ||
| 385 | + this.firstClickStatus = false | ||
| 386 | + this.keyBoardStatus = true | ||
| 387 | + this.activeKeyWordIndex = 1 | ||
| 388 | + // this.$refs.num1.focus() | ||
| 389 | + // document.getElementById('num1').focus() | ||
| 390 | + }, | ||
| 391 | + clickKeyBoard (item) { // 点击自定义键盘 | ||
| 392 | + console.log(item) | ||
| 393 | + this.formData['num' + this.activeKeyWordIndex] = item | ||
| 394 | + | ||
| 395 | + if (this.formData.commonCard === '1') { | ||
| 396 | + this.activeKeyWordIndex++ | ||
| 397 | + if (this.activeKeyWordIndex > 6) { | ||
| 398 | + this.keyBoardStatus = false | ||
| 399 | + } | ||
| 400 | + } else { | ||
| 401 | + this.activeKeyWordIndex++ | ||
| 402 | + if (this.activeKeyWordIndex > 7) { | ||
| 403 | + this.keyBoardStatus = false | ||
| 404 | + } | ||
| 405 | + } | ||
| 406 | + }, | ||
| 407 | + deleteWord () { // 退格 | ||
| 408 | + // console.log(this.activeKeyWordIndex) | ||
| 409 | + // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)]) | ||
| 410 | + if (this.activeKeyWordIndex > 1) { | ||
| 411 | + this.formData['num' + (this.activeKeyWordIndex - 1)] = '' | ||
| 412 | + this.activeKeyWordIndex-- | ||
| 413 | + } | ||
| 414 | + }, | ||
| 415 | + clickKeyWordWrap (activeKeyWordIndex) { | ||
| 416 | + this.keyBoardStatus = true | ||
| 417 | + this.activeKeyWordIndex = activeKeyWordIndex | ||
| 418 | + this.formData['num' + this.activeKeyWordIndex] = '' | ||
| 419 | + }, | ||
| 420 | + submitFn () { | ||
| 421 | + let plateLicense | ||
| 422 | + if (this.formData.commonCard === '1') { | ||
| 423 | + plateLicense = this.plate_license_1 | ||
| 424 | + plateLicense = this.palindrome(plateLicense) | ||
| 425 | + if (plateLicense.length < 7) { | ||
| 426 | + this.$refs.alert.open() | ||
| 427 | + return | ||
| 428 | + } | ||
| 429 | + } | ||
| 430 | + if (this.formData.commonCard === '2') { | ||
| 431 | + plateLicense = this.plate_license_2 | ||
| 432 | + plateLicense = this.palindrome(plateLicense) | ||
| 433 | + if (plateLicense.length < 8) { | ||
| 434 | + this.$refs.alert.open() | ||
| 435 | + return | ||
| 436 | + } | ||
| 437 | + } | ||
| 438 | + this.$emit('getPlateLicense',plateLicense) | ||
| 439 | + console.log(plateLicense); | ||
| 440 | + this.$router.push({ | ||
| 441 | + path:'parkRecord', | ||
| 442 | + query:{ | ||
| 443 | + carNumber:plateLicense, | ||
| 444 | + carNumberColor: this.currentColor | ||
| 445 | + } | ||
| 446 | + }) | ||
| 447 | + }, | ||
| 448 | + palindrome (str) { | ||
| 449 | + var arr = str.split('') | ||
| 450 | + arr = arr.filter(function (val) { | ||
| 451 | + return ( | ||
| 452 | + val !== ' ' && | ||
| 453 | + val !== ',' && | ||
| 454 | + val !== '.' && | ||
| 455 | + val !== '?' && | ||
| 456 | + val !== ':' && | ||
| 457 | + val !== ';' && | ||
| 458 | + val !== '`' && | ||
| 459 | + val !== "'" && | ||
| 460 | + val !== '_' && | ||
| 461 | + val !== '/' && | ||
| 462 | + val !== '-' && | ||
| 463 | + val !== '\\' && | ||
| 464 | + val !== '' && | ||
| 465 | + val !== '(' && | ||
| 466 | + val !== ')' | ||
| 467 | + ) | ||
| 468 | + }) | ||
| 469 | + return arr.join('') | ||
| 470 | + }, | ||
| 471 | + checkIsHasSpecialStr (str) { | ||
| 472 | + var flag = false | ||
| 473 | + var arr = str.split('') | ||
| 474 | + arr.forEach(val => { | ||
| 475 | + if ( | ||
| 476 | + val === '!' || | ||
| 477 | + val === '}' || | ||
| 478 | + val === '{' || | ||
| 479 | + val === ']' || | ||
| 480 | + val === '[' || | ||
| 481 | + val === '&' || | ||
| 482 | + val === '$' || | ||
| 483 | + val === '@' || | ||
| 484 | + val === ' ' || | ||
| 485 | + val === ',' || | ||
| 486 | + val === '.' || | ||
| 487 | + val === '?' || | ||
| 488 | + val === ':' || | ||
| 489 | + val === ';' || | ||
| 490 | + val === '`' || | ||
| 491 | + val === "'" || | ||
| 492 | + val === '_' || | ||
| 493 | + val === '/' || | ||
| 494 | + val === '-' || | ||
| 495 | + val === '\\' || | ||
| 496 | + val === '' || | ||
| 497 | + val === '(' || | ||
| 498 | + val === ')' | ||
| 499 | + ) { | ||
| 500 | + flag = true | ||
| 501 | + } | ||
| 502 | + }) | ||
| 503 | + return flag | ||
| 504 | + }, | ||
| 505 | + checkIsHasChineseStr (str) { | ||
| 506 | + var Reg = /.*[\u4e00-\u9fa5]+.*/ | ||
| 507 | + if (Reg.test(str)) { | ||
| 508 | + return true | ||
| 509 | + } | ||
| 510 | + return false | ||
| 511 | + } | ||
| 512 | + }, | ||
| 513 | + computed: { | ||
| 514 | + plate_license_1 () { | ||
| 515 | + return ( | ||
| 516 | + this.formData.num0 + | ||
| 517 | + this.formData.num1 + | ||
| 518 | + this.formData.num2 + | ||
| 519 | + this.formData.num3 + | ||
| 520 | + this.formData.num4 + | ||
| 521 | + this.formData.num5 + | ||
| 522 | + this.formData.num6 | ||
| 523 | + ) | ||
| 524 | + }, | ||
| 525 | + plate_license_2 () { | ||
| 526 | + return ( | ||
| 527 | + this.formData.num0 + | ||
| 528 | + this.formData.num1 + | ||
| 529 | + this.formData.num2 + | ||
| 530 | + this.formData.num3 + | ||
| 531 | + this.formData.num4 + | ||
| 532 | + this.formData.num5 + | ||
| 533 | + this.formData.num6 + | ||
| 534 | + this.formData.num7 | ||
| 535 | + ) | ||
| 536 | + } | ||
| 537 | + } | ||
| 538 | +} | ||
| 539 | +</script> | ||
| 540 | +<style lang="scss" scoped> | ||
| 541 | + .flex-items-center { | ||
| 542 | + display: flex; | ||
| 543 | + align-items: center; | ||
| 544 | + } | ||
| 545 | + .wrap { | ||
| 546 | + padding:0 18px; | ||
| 547 | + .radio-box { | ||
| 548 | + display: flex; | ||
| 549 | + align-items: center; | ||
| 550 | + justify-content: flex-end; | ||
| 551 | + margin-top: 18px; | ||
| 552 | + text-align: right; | ||
| 553 | + color: #4194EF; | ||
| 554 | + input[type="radio"] { | ||
| 555 | + display: none; | ||
| 556 | + } | ||
| 557 | + label { | ||
| 558 | + padding-left: 0.6rem; | ||
| 559 | + cursor: pointer; | ||
| 560 | + img { | ||
| 561 | + width: 0.8rem; | ||
| 562 | + margin-right: 0.1rem; | ||
| 563 | + } | ||
| 564 | + } | ||
| 565 | + } | ||
| 566 | + | ||
| 567 | + .color-choose{ | ||
| 568 | + width: 265px; | ||
| 569 | + height: 34px; | ||
| 570 | + margin: 0 auto; | ||
| 571 | + background: #F3F3F3; | ||
| 572 | + border-radius: 6px; | ||
| 573 | + display: flex; | ||
| 574 | + li{ | ||
| 575 | + flex: 1; | ||
| 576 | + text-align: center; | ||
| 577 | + line-height: 34px; | ||
| 578 | + border-radius: 6px; | ||
| 579 | + } | ||
| 580 | + } | ||
| 581 | + .card-header { | ||
| 582 | + font-size: 0.75rem; | ||
| 583 | + margin: 0.2rem 0 0.5rem; | ||
| 584 | + color: #4a4a4a; | ||
| 585 | + } | ||
| 586 | + // input输入框 | ||
| 587 | + .num-box { | ||
| 588 | + display: flex; | ||
| 589 | + justify-content: space-between; | ||
| 590 | + align-items: center; | ||
| 591 | + .spot { | ||
| 592 | + width: 0.4rem; | ||
| 593 | + height: 0.4rem; | ||
| 594 | + border-radius: 50%; | ||
| 595 | + background-color: #999; | ||
| 596 | + } | ||
| 597 | + & > div { | ||
| 598 | + width: 2.3rem; | ||
| 599 | + height: 2.3rem; | ||
| 600 | + border: 1px solid #4194EF; | ||
| 601 | + &.first { | ||
| 602 | + position: relative; | ||
| 603 | + text-align: center; | ||
| 604 | + line-height: 1.7rem; | ||
| 605 | + font-weight: 200; | ||
| 606 | + .input-wrap { | ||
| 607 | + position: absolute; | ||
| 608 | + top: 0; | ||
| 609 | + left: 0; | ||
| 610 | + right: 0; | ||
| 611 | + bottom: 0; | ||
| 612 | + &.active { | ||
| 613 | + z-index: 100; | ||
| 614 | + } | ||
| 615 | + } | ||
| 616 | + em { | ||
| 617 | + color: #979797; | ||
| 618 | + font-size: 1.6rem; | ||
| 619 | + line-height: 1.7rem; | ||
| 620 | + } | ||
| 621 | + span { | ||
| 622 | + display: inline-block; | ||
| 623 | + width: 100%; | ||
| 624 | + height: 100%; | ||
| 625 | + // background-color: #9cbce2; | ||
| 626 | + color: #828282; | ||
| 627 | + line-height: 1.8rem; | ||
| 628 | + } | ||
| 629 | + } | ||
| 630 | + &.active { | ||
| 631 | + border: 1px solid #4a90e2; | ||
| 632 | + &:after { | ||
| 633 | + border-bottom: 0.5rem solid #4a90e2; | ||
| 634 | + } | ||
| 635 | + } | ||
| 636 | + span { | ||
| 637 | + display: flex; | ||
| 638 | + align-items: center; | ||
| 639 | + justify-content: center; | ||
| 640 | + width: 100%; | ||
| 641 | + height: 100%; | ||
| 642 | + font-size: 1.2rem; | ||
| 643 | + color: #828282; | ||
| 644 | + &.first { | ||
| 645 | + background-color: #9cbce2; | ||
| 646 | + color: #fff; | ||
| 647 | + text-indent: 0.4rem; | ||
| 648 | + border-radius: 0; | ||
| 649 | + } | ||
| 650 | + } | ||
| 651 | + } | ||
| 652 | + } | ||
| 653 | + .submit-box { | ||
| 654 | + width: 100%; | ||
| 655 | + height: 44px; | ||
| 656 | + line-height: 44px; | ||
| 657 | + border-radius: 4px; | ||
| 658 | + font-size: 20px; | ||
| 659 | + margin-top: 18px; | ||
| 660 | + background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%); | ||
| 661 | + color: #fff; | ||
| 662 | + text-align: center; | ||
| 663 | + } | ||
| 664 | + .info { | ||
| 665 | + font-size: 0.5rem; | ||
| 666 | + margin-top: 0.9rem; | ||
| 667 | + color: #828282; | ||
| 668 | + text-align: left; | ||
| 669 | + img { | ||
| 670 | + width: 0.6rem; | ||
| 671 | + vertical-align: middle; | ||
| 672 | + } | ||
| 673 | + } | ||
| 674 | + } | ||
| 675 | + .first-word-wrap { | ||
| 676 | + // height: 9.4rem; | ||
| 677 | + background-color: #D2D5DB; | ||
| 678 | + padding: 0.6rem 0.8rem 1.1rem; | ||
| 679 | + position: fixed; | ||
| 680 | + bottom: 0; | ||
| 681 | + left: 0; | ||
| 682 | + right: 0; | ||
| 683 | + .first-word { | ||
| 684 | + display: flex; | ||
| 685 | + justify-content: space-between; | ||
| 686 | + margin-bottom: 0.45rem; | ||
| 687 | + .word { | ||
| 688 | + box-sizing: border-box; | ||
| 689 | + width: 2.2rem; | ||
| 690 | + height: 2.2rem; | ||
| 691 | + // border: 1px solid #9cbce2; | ||
| 692 | + box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35); | ||
| 693 | + border-radius: 0.16rem; | ||
| 694 | + text-align: center; | ||
| 695 | + &.bordernone { | ||
| 696 | + border: none; | ||
| 697 | + box-shadow:none | ||
| 698 | + } | ||
| 699 | + span { | ||
| 700 | + box-sizing: border-box; | ||
| 701 | + display: flex; | ||
| 702 | + align-items: center; | ||
| 703 | + justify-content: center; | ||
| 704 | + text-align: center; | ||
| 705 | + width: 100%; | ||
| 706 | + height: 100%; | ||
| 707 | + background-color: #fff; | ||
| 708 | + color: #000; | ||
| 709 | + // border: 1px solid #fff; | ||
| 710 | + border-radius: 0.125rem; | ||
| 711 | + font-size: 1.2rem; | ||
| 712 | + } | ||
| 713 | + img { | ||
| 714 | + width: 1.6rem; | ||
| 715 | + } | ||
| 716 | + } | ||
| 717 | + &:nth-last-of-type(1){ | ||
| 718 | + margin-bottom: 0rem; | ||
| 719 | + } | ||
| 720 | + } | ||
| 721 | + } | ||
| 722 | + .keyboard-wrap { | ||
| 723 | + background-color: #D2D5DB; | ||
| 724 | + position: fixed; | ||
| 725 | + bottom: 0; | ||
| 726 | + left: 0; | ||
| 727 | + right: 0; | ||
| 728 | + padding: 0.6rem 0.6rem 0.4rem; | ||
| 729 | + .keyboard { | ||
| 730 | + display: flex; | ||
| 731 | + justify-content: space-between; | ||
| 732 | + align-items: center; | ||
| 733 | + height: 2rem; | ||
| 734 | + margin-bottom: 0.6rem; | ||
| 735 | + span { | ||
| 736 | + text-align: center; | ||
| 737 | + display: flex; | ||
| 738 | + width: 2.2rem; | ||
| 739 | + align-items: center; | ||
| 740 | + justify-content: center; | ||
| 741 | + height: 2.2rem; | ||
| 742 | + margin: 0 0.3rem; | ||
| 743 | + box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35); | ||
| 744 | + background-color: #fff; | ||
| 745 | + border-radius: 0.125rem; | ||
| 746 | + font-size: 1.2rem; | ||
| 747 | + &:active { | ||
| 748 | + background-color: #e4e4e4; | ||
| 749 | + } | ||
| 750 | + &.bordernone{ | ||
| 751 | + border: none; | ||
| 752 | + box-shadow: none; | ||
| 753 | + background-color: #D2D5DB; | ||
| 754 | + &:active{ | ||
| 755 | + background-color:#D2D5DB; | ||
| 756 | + } | ||
| 757 | + } | ||
| 758 | + &.delete{ | ||
| 759 | + background-color: #465266; | ||
| 760 | + img{ | ||
| 761 | + width: 1.15rem; | ||
| 762 | + } | ||
| 763 | + } | ||
| 764 | + } | ||
| 765 | + } | ||
| 766 | + .cancel{ | ||
| 767 | + display: flex; | ||
| 768 | + justify-content: flex-end; | ||
| 769 | + align-items: center; | ||
| 770 | + span{ | ||
| 771 | + display: flex; | ||
| 772 | + align-items: center; | ||
| 773 | + justify-content: center; | ||
| 774 | + width: 3.6rem; | ||
| 775 | + height: 1.8rem; | ||
| 776 | + background-color: #465266; | ||
| 777 | + color: #fff; | ||
| 778 | + border-radius: 0.125rem; | ||
| 779 | + } | ||
| 780 | + } | ||
| 781 | + } | ||
| 782 | +</style> |
src/components/navigation.vue
| @@ -97,11 +97,11 @@ export default { | @@ -97,11 +97,11 @@ export default { | ||
| 97 | }, | 97 | }, |
| 98 | openImgUrl(i) { // 点击图片跳转 | 98 | openImgUrl(i) { // 点击图片跳转 |
| 99 | console.log(i.jumpUrl) | 99 | console.log(i.jumpUrl) |
| 100 | - window.open('https://www.baidu.com/') | 100 | + window.open(i.jumpUrl) |
| 101 | }, | 101 | }, |
| 102 | toPlateNumber() { // 前往输入车牌页面 | 102 | toPlateNumber() { // 前往输入车牌页面 |
| 103 | this.$router.push({ | 103 | this.$router.push({ |
| 104 | - path: 'plateNumber', | 104 | + path: 'carPlateNum', |
| 105 | 105 | ||
| 106 | } | 106 | } |
| 107 | ) | 107 | ) |
src/components/parkRecord.vue
| @@ -15,7 +15,7 @@ | @@ -15,7 +15,7 @@ | ||
| 15 | <div v-show="currentTabActive==0"> | 15 | <div v-show="currentTabActive==0"> |
| 16 | 16 | ||
| 17 | <div v-if="parkingData.length>0"> | 17 | <div v-if="parkingData.length>0"> |
| 18 | - <p class="free-tip" v-if="parkingData[0].parkDuration<=900">停车15分钟内无需缴费，请申请离场。</p> | 18 | + <p class="free-tip" v-if="parkingData[0].parkDuration<=1800">停车30分钟内无需缴费，请申请离场。</p> |
| 19 | 19 | ||
| 20 | <div class="cost-main" v-for="i in parkingData"> | 20 | <div class="cost-main" v-for="i in parkingData"> |
| 21 | <ul class="cost-header"> | 21 | <ul class="cost-header"> |
| @@ -34,7 +34,7 @@ | @@ -34,7 +34,7 @@ | ||
| 34 | <p>停车时长：{{ $utils.dateFormat(i.parkDuration)}}</p> | 34 | <p>停车时长：{{ $utils.dateFormat(i.parkDuration)}}</p> |
| 35 | <div class="out-wrap"> | 35 | <div class="out-wrap"> |
| 36 | <p class="mon-wrap">￥{{(i.unPayFee/100).toFixed(2)}}</p> | 36 | <p class="mon-wrap">￥{{(i.unPayFee/100).toFixed(2)}}</p> |
| 37 | - <p class="out-btn" @click="toPayCurrent(i,parkingData[0].parkDuration)" v-if="parkingData[0].parkDuration<=900">申请离场</p> | 37 | + <p class="out-btn" @click="toPayCurrent(i,parkingData[0].parkDuration)" v-if="parkingData[0].parkDuration<=1800">申请离场</p> |
| 38 | <p class="out-btn" @click="toPayCurrent(i,parkingData[0].parkDuration)" v-else>出场缴费</p> | 38 | <p class="out-btn" @click="toPayCurrent(i,parkingData[0].parkDuration)" v-else>出场缴费</p> |
| 39 | </div> | 39 | </div> |
| 40 | </div> | 40 | </div> |
| @@ -241,6 +241,7 @@ export default { | @@ -241,6 +241,7 @@ export default { | ||
| 241 | if(index==0){ | 241 | if(index==0){ |
| 242 | this.parkRecordList(10) | 242 | this.parkRecordList(10) |
| 243 | }else{ | 243 | }else{ |
| 244 | + this.allMoney = 0 | ||
| 244 | this.parkRecordList(30) | 245 | this.parkRecordList(30) |
| 245 | } | 246 | } |
| 246 | }, | 247 | }, |
src/router/index.js
| @@ -15,6 +15,12 @@ export default new Router({ | @@ -15,6 +15,12 @@ export default new Router({ | ||
| 15 | } | 15 | } |
| 16 | }, | 16 | }, |
| 17 | { | 17 | { |
| 18 | + path: '/carPlateNum', | ||
| 19 | + name: 'carPlateNum', | ||
| 20 | + component: () => import("@/components/carPlateNum.vue") | ||
| 21 | + }, | ||
| 22 | + | ||
| 23 | + { | ||
| 18 | path: '/navigation', | 24 | path: '/navigation', |
| 19 | name: 'navigation', | 25 | name: 'navigation', |
| 20 | component: navigation | 26 | component: navigation |
src/utils/request.js
| @@ -13,7 +13,7 @@ const service = axios.create({ | @@ -13,7 +13,7 @@ const service = axios.create({ | ||
| 13 | 13 | ||
| 14 | // https://dev.renniting.cn/pay/ 赤峰农行测试环境 | 14 | // https://dev.renniting.cn/pay/ 赤峰农行测试环境 |
| 15 | 15 | ||
| 16 | - baseURL: 'https://pay.lcybc.com/', // url = base url + request url | 16 | + baseURL: 'https://pay.ccccitd.cc', // url = base url + request url |
| 17 | // withCredentials: true, // send cookies when cross-domain requests | 17 | // withCredentials: true, // send cookies when cross-domain requests |
| 18 | timeout: 10000 // request timeout | 18 | timeout: 10000 // request timeout |
| 19 | }) | 19 | }) |
src/utils/utils.js
| @@ -123,7 +123,7 @@ export default { | @@ -123,7 +123,7 @@ export default { | ||
| 123 | 123 | ||
| 124 | myDeviceInfo: 'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E', // 公共请求设备信息 | 124 | myDeviceInfo: 'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E', // 公共请求设备信息 |
| 125 | 125 | ||
| 126 | - myVxAppId: 'wx2fc33e1e61468928', | 126 | + myVxAppId: 'wx1489e48e6a547023', |
| 127 | // 测试环境 微信赤峰 appid wxff4cebaedbf4f886 | 127 | // 测试环境 微信赤峰 appid wxff4cebaedbf4f886 |
| 128 | // 微信赤峰 appid wx2af2bab90d433c86 | 128 | // 微信赤峰 appid wx2af2bab90d433c86 |
| 129 | // 黄石 appid wxa1a66cc7d263afe6 | 129 | // 黄石 appid wxa1a66cc7d263afe6 |