Commit 93f2f8b24ba0771ee461115a22378e55cdbe6bd2
1 parent
466fd861
西城购买月卡
Showing
6 changed files
with
135 additions
and
10 deletions
src/assets/images/recharge.png
0 → 100644
4.33 KB
src/main.js
| @@ -43,6 +43,8 @@ import Mint from 'mint-ui'; | @@ -43,6 +43,8 @@ import Mint from 'mint-ui'; | ||
| 43 | import 'mint-ui/lib/style.css' | 43 | import 'mint-ui/lib/style.css' |
| 44 | Vue.use(Mint); | 44 | Vue.use(Mint); |
| 45 | 45 | ||
| 46 | +import drectives from '@/utils/drectives' | ||
| 47 | +Vue.use(drectives) | ||
| 46 | 48 | ||
| 47 | import 'swiper/dist/css/swiper.min.css' // 轮播 | 49 | import 'swiper/dist/css/swiper.min.css' // 轮播 |
| 48 | import 'swiper/dist/js/swiper.min' | 50 | import 'swiper/dist/js/swiper.min' |
src/router/index.js
| @@ -36,6 +36,14 @@ export default new Router({ | @@ -36,6 +36,14 @@ export default new Router({ | ||
| 36 | name: 'orderPay', | 36 | name: 'orderPay', |
| 37 | component: () => import("@/views/parkPay/orderPay.vue") | 37 | component: () => import("@/views/parkPay/orderPay.vue") |
| 38 | }, | 38 | }, |
| 39 | + { | ||
| 40 | + path: '/recharge', | ||
| 41 | + name: 'recharge', | ||
| 42 | + component: () => import("@/views/parkPay/recharge.vue") | ||
| 43 | + }, | ||
| 44 | + | ||
| 45 | + | ||
| 46 | + | ||
| 39 | 47 | ||
| 40 | // //---------------- 个人页面导航 | 48 | // //---------------- 个人页面导航 |
| 41 | // { | 49 | // { |
src/utils/drectives.js
0 → 100644
src/views/parkPay/plateNumber.vue
| @@ -74,20 +74,25 @@ | @@ -74,20 +74,25 @@ | ||
| 74 | 74 | ||
| 75 | 75 | ||
| 76 | <div class="submit-box" @click="submitFn()"> | 76 | <div class="submit-box" @click="submitFn()"> |
| 77 | - 查询 | 77 | + 车牌缴费 |
| 78 | </div> | 78 | </div> |
| 79 | 79 | ||
| 80 | - <div> | ||
| 81 | - <p style="margin-bottom: 18px;margin-top: 18px;">查询记录</p> | ||
| 82 | - <ul class="bound-list" v-if="boundList.length>0"> | ||
| 83 | - <li v-for="i in boundList" :key="i" @click="boundHandle(i)"> | ||
| 84 | - <span>{{ i }}</span> | ||
| 85 | - </li> | ||
| 86 | - </ul> | ||
| 87 | - <div v-else style="text-align: center;padding: 10px 0;">暂无查询记录</div> | ||
| 88 | - <!--<div class="addCarNum"><span></span>添加车辆</div>--> | 80 | + |
| 81 | + <div class="submit-box" @click="toRecharge"> | ||
| 82 | + 车牌充值 | ||
| 89 | </div> | 83 | </div> |
| 90 | 84 | ||
| 85 | + <!--<div>--> | ||
| 86 | + <!--<p style="margin-bottom: 18px;margin-top: 18px;">查询记录</p>--> | ||
| 87 | + <!--<ul class="bound-list" v-if="boundList.length>0">--> | ||
| 88 | + <!--<li v-for="i in boundList" :key="i" @click="boundHandle(i)">--> | ||
| 89 | + <!--<span>{{ i }}</span>--> | ||
| 90 | + <!--</li>--> | ||
| 91 | + <!--</ul>--> | ||
| 92 | + <!--<div v-else style="text-align: center;padding: 10px 0;">暂无查询记录</div>--> | ||
| 93 | + <!--<!–<div class="addCarNum"><span></span>添加车辆</div>–>--> | ||
| 94 | + <!--</div>--> | ||
| 95 | + | ||
| 91 | 96 | ||
| 92 | 97 | ||
| 93 | 98 | ||
| @@ -490,6 +495,15 @@ export default { | @@ -490,6 +495,15 @@ export default { | ||
| 490 | this.activeKeyWordIndex = activeKeyWordIndex | 495 | this.activeKeyWordIndex = activeKeyWordIndex |
| 491 | this.formData['num' + this.activeKeyWordIndex] = '' | 496 | this.formData['num' + this.activeKeyWordIndex] = '' |
| 492 | }, | 497 | }, |
| 498 | + toRecharge() { | ||
| 499 | + this.$router.push({ | ||
| 500 | + path:'recharge', | ||
| 501 | + // query:{ | ||
| 502 | + // carNumber:plateLicense, | ||
| 503 | + // carNumberColor: this.currentColor | ||
| 504 | + // } | ||
| 505 | + }) | ||
| 506 | + }, | ||
| 493 | submitFn () { | 507 | submitFn () { |
| 494 | let plateLicense | 508 | let plateLicense |
| 495 | if (this.formData.commonCard === '1') { | 509 | if (this.formData.commonCard === '1') { |
src/views/parkPay/recharge.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div> | ||
| 3 | + <div class="rechargeImg"></div> | ||
| 4 | + | ||
| 5 | + <p class="balanceTitle">车牌余额: {{(balance/100).toFixed(2)}}元</p> | ||
| 6 | + | ||
| 7 | + <div style="display: flex;padding: 15px;background: #e6fafa"> | ||
| 8 | + | ||
| 9 | + <p style="width: 40%">请输入充值金额</p> | ||
| 10 | + <input | ||
| 11 | + class="keep_input" | ||
| 12 | + v-number-only | ||
| 13 | + style="width:60%" | ||
| 14 | + maxlength="5" | ||
| 15 | + v-model="fileOrder" | ||
| 16 | + @input="fileOrder = Number($event.target.value.replace(/\D+/, ''))" | ||
| 17 | + /> | ||
| 18 | + | ||
| 19 | + </div> | ||
| 20 | + | ||
| 21 | + | ||
| 22 | + <div class="submit-box" @click="toRecharge"> | ||
| 23 | + 确定充值 | ||
| 24 | + </div> | ||
| 25 | + </div> | ||
| 26 | +</template> | ||
| 27 | + | ||
| 28 | +<script> | ||
| 29 | +export default { | ||
| 30 | + name: "recharge", | ||
| 31 | + data() { | ||
| 32 | + return { | ||
| 33 | + balance: "20", | ||
| 34 | + fileOrder: 100 | ||
| 35 | + }; | ||
| 36 | + }, | ||
| 37 | + directives: { | ||
| 38 | + numberOnly: { | ||
| 39 | + bind: function(el) { | ||
| 40 | + el.handler = function() { | ||
| 41 | + el.value = Number(el.value.replace(/\D+/, '')) | ||
| 42 | + } | ||
| 43 | + el.addEventListener('input', el.handler) | ||
| 44 | + }, | ||
| 45 | + unbind: function(el) { | ||
| 46 | + el.removeEventListener('input', el.handler) | ||
| 47 | + } | ||
| 48 | + } | ||
| 49 | + }, | ||
| 50 | +}; | ||
| 51 | +</script> | ||
| 52 | + | ||
| 53 | +<style scoped> | ||
| 54 | + .rechargeImg{ | ||
| 55 | + width: 80px; | ||
| 56 | + height: 80px; | ||
| 57 | + margin: 20px auto; | ||
| 58 | + background: url("../../assets/images/recharge.png"); | ||
| 59 | + } | ||
| 60 | + .balanceTitle { | ||
| 61 | + padding: 15px; | ||
| 62 | + background: #ccc; | ||
| 63 | + font-size: 16px; | ||
| 64 | + /*color: #fff;*/ | ||
| 65 | + } | ||
| 66 | + | ||
| 67 | + .submit-box { | ||
| 68 | + width: 80%; | ||
| 69 | + height: 44px; | ||
| 70 | + line-height: 44px; | ||
| 71 | + border-radius: 4px; | ||
| 72 | + font-size: 20px; | ||
| 73 | + margin: 58px auto 0; | ||
| 74 | + background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%); | ||
| 75 | + color: #fff; | ||
| 76 | + text-align: center; | ||
| 77 | + } | ||
| 78 | + .keep_input { | ||
| 79 | + -webkit-appearance: none; | ||
| 80 | + background-color: #fff; | ||
| 81 | + background-image: none; | ||
| 82 | + border-radius: 4px; | ||
| 83 | + border: 1px solid #dcdfe6; | ||
| 84 | + -webkit-box-sizing: border-box; | ||
| 85 | + box-sizing: border-box; | ||
| 86 | + color: #606266; | ||
| 87 | + display: inline-block; | ||
| 88 | + font-size: inherit; | ||
| 89 | + outline: 0; | ||
| 90 | + padding: 0 15px; | ||
| 91 | + -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); | ||
| 92 | + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); | ||
| 93 | + height: 30px; | ||
| 94 | + line-height: 30px; | ||
| 95 | + text-align: left; | ||
| 96 | + } | ||
| 97 | + .keep_input:focus { | ||
| 98 | + border-color: #54a6de; | ||
| 99 | + outline: 0; | ||
| 100 | + } | ||
| 101 | +</style> |