西城购买月卡

刘淇
1 parent 466fd861
Showing 6 changed files with 135 additions and 10 deletions
src/assets/images/recharge.png
src/main.js
src/router/index.js
src/utils/drectives.js
src/views/parkPay/plateNumber.vue
src/views/parkPay/recharge.vue
@@ -43,6 +43,8 @@ import Mint from &#39;mint-ui&#39;;
 import 'mint-ui/lib/style.css'
 Vue.use(Mint);
  
+import drectives from '@/utils/drectives'
+Vue.use(drectives)
  
 import 'swiper/dist/css/swiper.min.css' // 轮播
 import 'swiper/dist/js/swiper.min'
@@ -36,6 +36,14 @@ export default new Router({
       name: 'orderPay',
       component: () => import("@/views/parkPay/orderPay.vue")
     },
+    {
+      path: '/recharge',
+      name: 'recharge',
+      component: () => import("@/views/parkPay/recharge.vue")
+    },
+
+
+
  
     //  //---------------- 个人页面导航
     // {
@@ -74,20 +74,25 @@
  
  
       <div class="submit-box" @click="submitFn()">
-        查询
+        车牌缴费
       </div>
  
-      <div>
-        <p style="margin-bottom: 18px;margin-top: 18px;">查询记录</p>
-        <ul class="bound-list" v-if="boundList.length>0">
-          <li v-for="i in boundList" :key="i" @click="boundHandle(i)">
-            <span>{{ i }}</span>
-          </li>
-        </ul>
-        <div v-else style="text-align: center;padding: 10px 0;">暂无查询记录</div>
-        <!--<div class="addCarNum"><span></span>添加车辆</div>-->
+
+      <div class="submit-box" @click="toRecharge">
+        车牌充值
       </div>
  
+      <!--<div>-->
+        <!--<p style="margin-bottom: 18px;margin-top: 18px;">查询记录</p>-->
+        <!--<ul class="bound-list" v-if="boundList.length>0">-->
+          <!--<li v-for="i in boundList" :key="i" @click="boundHandle(i)">-->
+            <!--<span>{{ i }}</span>-->
+          <!--</li>-->
+        <!--</ul>-->
+        <!--<div v-else style="text-align: center;padding: 10px 0;">暂无查询记录</div>-->
+        <!--&lt;!&ndash;<div class="addCarNum"><span></span>添加车辆</div>&ndash;&gt;-->
+      <!--</div>-->
+
  
  
  
@@ -490,6 +495,15 @@ export default {
       this.activeKeyWordIndex = activeKeyWordIndex
       this.formData['num' + this.activeKeyWordIndex] = ''
     },
+    toRecharge() {
+      this.$router.push({
+        path:'recharge',
+        // query:{
+        //   carNumber:plateLicense,
+        //   carNumberColor: this.currentColor
+        // }
+      })
+    },
     submitFn () {
       let plateLicense
       if (this.formData.commonCard === '1') {
+<template>
+  <div>
+    <div class="rechargeImg"></div>
+
+    <p class="balanceTitle">车牌余额: {{(balance/100).toFixed(2)}}元</p>
+
+    <div style="display: flex;padding: 15px;background: #e6fafa">
+
+      <p style="width: 40%">请输入充值金额</p>
+      <input
+        class="keep_input"
+        v-number-only
+        style="width:60%"
+        maxlength="5"
+        v-model="fileOrder"
+        @input="fileOrder = Number($event.target.value.replace(/\D+/, ''))"
+      />
+
+    </div>
+
+
+    <div class="submit-box" @click="toRecharge">
+      确定充值
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "recharge",
+  data() {
+    return {
+      balance: "20",
+      fileOrder: 100
+    };
+  },
+  directives: {
+    numberOnly: {
+      bind: function(el) {
+        el.handler = function() {
+          el.value = Number(el.value.replace(/\D+/, ''))
+        }
+        el.addEventListener('input', el.handler)
+      },
+      unbind: function(el) {
+        el.removeEventListener('input', el.handler)
+      }
+    }
+  },
+};
+</script>
+
+<style scoped>
+  .rechargeImg{
+    width: 80px;
+    height: 80px;
+    margin: 20px auto;
+    background: url("../../assets/images/recharge.png");
+  }
+  .balanceTitle {
+    padding: 15px;
+    background: #ccc;
+    font-size: 16px;
+    /*color: #fff;*/
+  }
+
+  .submit-box {
+    width: 80%;
+    height: 44px;
+    line-height: 44px;
+    border-radius: 4px;
+    font-size: 20px;
+    margin: 58px auto 0;
+    background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
+    color: #fff;
+    text-align: center;
+  }
+  .keep_input {
+    -webkit-appearance: none;
+    background-color: #fff;
+    background-image: none;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    color: #606266;
+    display: inline-block;
+    font-size: inherit;
+    outline: 0;
+    padding: 0 15px;
+    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    height: 30px;
+    line-height: 30px;
+    text-align: left;
+  }
+  .keep_input:focus {
+    border-color: #54a6de;
+    outline: 0;
+  }
+</style>