diff --git a/config/index.js b/config/index.js
index 38ad3fa..d59ab12 100644
--- a/config/index.js
+++ b/config/index.js
@@ -8,7 +8,7 @@ module.exports = {
   dev: {
 
     // Paths
-    assetsSubDirectory: 'static',
+    assetsSubDirectory: 'teshuyonghu',
     assetsPublicPath: '/',
     // proxyTable: {
     //   '/api':{
@@ -47,11 +47,11 @@ module.exports = {
 
   build: {
     // Template for index.html
-    index: path.resolve(__dirname, '../dist/index.html'),
+    index: path.resolve(__dirname, '../teshuyonghu/teshuyonghu.html'),
 
     // Paths
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
+    assetsRoot: path.resolve(__dirname, '../teshuyonghu'),
+    assetsSubDirectory: 'teshuyonghu',
     assetsPublicPath: './',
 
     /**
diff --git a/src/api/parkRecord/parkRecord.js b/src/api/parkRecord/parkRecord.js
index c70b4fd..76c32f2 100644
--- a/src/api/parkRecord/parkRecord.js
+++ b/src/api/parkRecord/parkRecord.js
@@ -8,6 +8,8 @@ export function parkRecordList(params) {
   })
 }
 
+
+
 export function historyQuery(params) {
   return request({
     url: 'queryParkOrder/queryArrearageStaForWXPublc',
@@ -34,3 +36,11 @@ export function appApplyParkOut(params) {  // 0元出场
 
 
 
+export function querySpecialCarnumber(params) {
+  return request({
+    url: 'specialCar/querySpecialCarnumber',
+    method: 'post',
+    data: params
+  })
+}
+
diff --git a/src/assets/images/parkPay/icon-delete.png b/src/assets/images/parkPay/icon-delete.png
old mode 100755
new mode 100644
index ae5d28e..ae5d28e
--- a/src/assets/images/parkPay/icon-delete.png
+++ b/src/assets/images/parkPay/icon-delete.png
diff --git a/src/assets/images/parkPay/icon_chose_n@2x.png b/src/assets/images/parkPay/icon_chose_n@2x.png
old mode 100755
new mode 100644
index a766823..a766823
--- a/src/assets/images/parkPay/icon_chose_n@2x.png
+++ b/src/assets/images/parkPay/icon_chose_n@2x.png
diff --git a/src/assets/images/parkPay/icon_chose_s@2x.png b/src/assets/images/parkPay/icon_chose_s@2x.png
old mode 100755
new mode 100644
index 9cadd84..9cadd84
--- a/src/assets/images/parkPay/icon_chose_s@2x.png
+++ b/src/assets/images/parkPay/icon_chose_s@2x.png
diff --git a/src/router/index.js b/src/router/index.js
index 762c02b..5348b9a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,7 +42,16 @@ export default new Router({
       component: () => import("@/views/parkPay/recharge.vue")
     },
 
-
+    {
+      path: '/reChargePage',
+      name: 'reChargePage',
+      component: () => import("@/views/parkPay/reChargePage.vue")
+    },
+    {
+      path: '/rechargeList',
+      name: 'rechargeList',
+      component: () => import("@/views/parkPay/rechargeList.vue")
+    },
 
 
     //  //---------------- 个人页面导航
diff --git a/src/views/parkPay/plateNumber.vue b/src/views/parkPay/plateNumber.vue
index 091be7d..a6c57b9 100644
--- a/src/views/parkPay/plateNumber.vue
+++ b/src/views/parkPay/plateNumber.vue
@@ -78,9 +78,9 @@
       </div>
 
 
-      <div class="submit-box" @click="toRecharge">
-        车牌充值
-      </div>
+      <!--<div class="submit-box" @click="toRecharge">-->
+        <!--车牌充值-->
+      <!--</div>-->
 
       <!--<div>-->
         <!--<p style="margin-bottom: 18px;margin-top: 18px;">查询记录</p>-->
diff --git a/src/views/parkPay/reChargePage.vue b/src/views/parkPay/reChargePage.vue
new file mode 100644
index 0000000..b057b1f
--- /dev/null
+++ b/src/views/parkPay/reChargePage.vue
@@ -0,0 +1,912 @@
+<template>
+  <div id="page">
+
+
+    <div class="wrap">
+      <!--<p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>-->
+
+      <!--<ul class="color-choose">-->
+      <!--<li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"-->
+      <!--:style="{color:currentColor==index?'#FFF':'',background:  currentColor==index?activeBG:'' }"-->
+      <!--&gt;-->
+      <!--{{i.name}}-->
+      <!--</li>-->
+
+      <!--</ul>-->
+
+
+
+
+
+      <p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p>
+      <div class="num-box">
+        <div class="num0" @click="clickFirstWrap()">
+          <span>{{formData.num0}}</span>
+        </div>
+        <div class="num1" @click="clickKeyWordWrap(1)"><span>{{formData.num1}}</span></div>
+        <!--<em class="spot"></em>-->
+        <div class="num1" @click="clickKeyWordWrap(2)"><span>{{formData.num2}}</span></div>
+        <div class="num1" @click="clickKeyWordWrap(3)"><span>{{formData.num3}}</span></div>
+        <div class="num1" @click="clickKeyWordWrap(4)"><span>{{formData.num4}}</span></div>
+        <div class="num1" @click="clickKeyWordWrap(5)"><span>{{formData.num5}}</span></div>
+        <div class="num1" @click="clickKeyWordWrap(6)"><span>{{formData.num6}}</span></div>
+        <div v-if="formData.commonCard == '2'" class="num1" @click="clickKeyWordWrap(7)"><span>{{formData.num7}}</span></div>
+      </div>
+
+
+      <div class="radio-box">
+        <label class="flex-items-center">
+          <img v-if="formData.commonCard == 1"
+               src="../../assets/images/parkPay/icon_chose_s@2x.png"
+               alt="">
+          <img v-else
+               src="../../assets/images/parkPay/icon_chose_n@2x.png"
+               alt="">
+          <input type="radio"
+                 v-model="formData.commonCard"
+                 value="1" />普通车牌
+        </label>
+        <label class="flex-items-center">
+          <img v-if="formData.commonCard == 2"
+               src="../../assets/images/parkPay/icon_chose_s@2x.png"
+               alt="">
+          <img v-else
+               src="../../assets/images/parkPay/icon_chose_n@2x.png"
+               alt="">
+          <input type="radio"
+                 v-model="formData.commonCard"
+                 value="2" />新能源车牌
+        </label>
+      </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>-->
+
+
+
+
+    </div>
+    <div class="first-word-wrap"
+         v-if="firstWrapStatus">
+      <div class="first-word"
+           @click="selectFirstWord($event)">
+        <div class="word">
+          <span>苏</span>
+        </div>
+        <div class="word">
+          <span>湘</span>
+        </div>
+        <div class="word">
+          <span>津</span>
+        </div>
+        <div class="word">
+          <span>鄂</span>
+        </div>
+        <div class="word">
+          <span>沪</span>
+        </div>
+        <div class="word">
+          <span>粤</span>
+        </div>
+        <div class="word">
+          <span>渝</span>
+        </div>
+        <div class="word">
+          <span>琼</span>
+        </div>
+      </div>
+      <div class="first-word"
+           @click="selectFirstWord($event)">
+        <div class="word">
+          <span>冀</span>
+        </div>
+        <div class="word">
+          <span>川</span>
+        </div>
+        <div class="word">
+          <span>晋</span>
+        </div>
+        <div class="word">
+          <span>贵</span>
+        </div>
+        <div class="word">
+          <span>辽</span>
+        </div>
+        <div class="word">
+          <span>云</span>
+        </div>
+        <div class="word">
+          <span>吉</span>
+        </div>
+        <div class="word">
+          <span>陕</span>
+        </div>
+      </div>
+      <div class="first-word"
+           @click="selectFirstWord($event)">
+        <div class="word">
+          <span>黑</span>
+        </div>
+        <div class="word">
+          <span>甘</span>
+        </div>
+        <div class="word">
+          <span>蒙</span>
+        </div>
+        <div class="word">
+          <span>青</span>
+        </div>
+        <div class="word">
+          <span>浙</span>
+        </div>
+        <div class="word">
+          <span>皖</span>
+        </div>
+        <div class="word">
+          <span>藏</span>
+        </div>
+        <div class="word">
+          <span>闽</span>
+        </div>
+      </div>
+      <div class="first-word"
+           @click="selectFirstWord($event)">
+        <div class="word">
+          <span>京</span>
+        </div>
+        <div class="word">
+          <span>赣</span>
+        </div>
+        <div class="word">
+          <span>桂</span>
+        </div>
+        <div class="word">
+          <span>鲁</span>
+        </div>
+        <div class="word">
+          <span>宁</span>
+        </div>
+        <div class="word">
+          <span>豫</span>
+        </div>
+        <div class="word">
+          <span>新</span>
+        </div>
+        <!--<div class="word">-->
+        <!--<span>学</span>-->
+        <!--</div>-->
+        <div class="word bordernone">
+          <!-- <img src="../assets/images/icon-switch.png" alt=""> -->
+        </div>
+      </div>
+
+      <!--<div class="first-word"-->
+      <!--@click="selectFirstWord($event)">-->
+      <!--<div class="word">-->
+      <!--<span>港</span>-->
+      <!--</div>-->
+      <!--<div class="word">-->
+      <!--<span>澳</span>-->
+      <!--</div>-->
+      <!--<div class="word">-->
+      <!--<span>领</span>-->
+      <!--</div>-->
+
+      <!--<div class="word">-->
+      <!--<span>警</span>-->
+      <!--</div>-->
+
+
+      <!--<div class="word bordernone">-->
+      <!--</div>-->
+      <!--<div class="word bordernone">-->
+      <!--</div>-->
+      <!--<div class="word bordernone">-->
+      <!--</div>-->
+      <!--<div class="word bordernone">-->
+      <!--</div>-->
+      <!--</div>-->
+    </div>
+    <div class="keyboard-wrap" v-if="keyBoardStatus === true">
+      <!-- <div class="number-wrap"></div>
+      <div class="letter-wrap"></div>
+      <div class="cn-wrap"></div> -->
+      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
+        <span v-for="(item,index) in allKeyWord._1"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+      </div>
+      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
+        <span v-for="(item,index) in allKeyWord._2"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+        <span class="bordernone"></span>
+        <span class="bordernone"></span>
+        <span class="bordernone"></span>
+        <span class="bordernone"></span>
+      </div>
+      <div class="keyboard">
+        <span v-for="(item,index) in allKeyWord._3"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+      </div>
+      <div class="keyboard">
+        <span v-for="(item,index) in allKeyWord._4"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+      </div>
+      <div class="keyboard">
+        <span v-for="(item,index) in allKeyWord._5"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+      </div>
+      <div class="keyboard">
+        <span v-for="(item,index) in allKeyWord._6"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+        <span class="bordernone"></span>
+        <span class="bordernone"></span>
+        <span class="bordernone"></span>
+        <!-- <span class="bordernone" v-if="activeKeyWordIndex === 1"></span>
+        <span class="bordernone" v-if="activeKeyWordIndex === 1"></span> -->
+        <!-- <span @click="deleteWord" v-if="activeKeyWordIndex === 1">x</span> -->
+      </div>
+      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
+        <span v-for="(item,index) in allKeyWord._7"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+        <span class="bordernone"></span>
+        <span class="delete" @click="deleteWord"><img src="../../assets/images/parkPay/icon-delete.png" alt=""></span>
+      </div>
+      <div class="cancel">
+        <span @click="keyBoardStatus = false">完成</span>
+      </div>
+    </div>
+
+
+
+  </div>
+</template>
+<script>
+import { querySpecialCarnumber } from '@/api/parkRecord/parkRecord.js'
+export default {
+  data () {
+    return {
+      colorList:[
+        {
+          name:'蓝牌',
+          id:'1'
+        },
+        {
+          name:'黄牌',
+          id:'2'
+        },
+        {
+          name:'绿牌',
+          id:'3'
+        },
+        {
+          name:'白牌',
+          id:'4'
+        },
+        {
+          name:'黑牌',
+          id:'5'
+        },
+      ],
+      currentColor:0,
+      activeBG:'#0054C0',
+      formData: {
+        commonCard: '1',
+        num0: '京',
+        num1: '',
+        num2: '',
+        num3: '',
+        num4: '',
+        num5: '',
+        num6: '',
+        num7: ''
+      },
+      allKeyWord: {
+        _1: [1, 2, 3, 4, 5, 6, 7],
+        _2: [8, 9, 0],
+        _3: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
+        _4: ['H', 'J', 'K', 'L', 'M', 'N', 'O'],
+        _5: ['P', 'Q', 'R', 'S', 'T', 'U', 'V'],
+        _6: ['W', 'X', 'Y', 'Z'],
+        _7: ['港', '澳', '学', '领', '警']
+      },
+      activeKeyWordIndex: 1, // 当前车牌号
+      keyBoardStatus: false,
+      firstWrapStatus: false, // 选择弹窗
+      confirmTitle: '',
+      submitConfirm: false,
+      submitConfirmFalse: false,
+      submitConfirmText: '',
+      boundList:[] // 历史记录
+    }
+  },
+  created(){
+  },
+  mounted () {
+    //
+    // if (this.$utils.clientBrowser() == "微信") {
+    //   var appID = this.$utils.myVxAppId;
+    //   var code = this.getUrlParam('code');
+    //   var local = window.location.href;
+    //   if (code == null || code === '') {
+    //     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'
+    //   } else {
+    //     return code;
+    //   }
+    // }
+
+    this.boundList = JSON.parse(localStorage.getItem('parkRecordList')) ? JSON.parse(localStorage.getItem('parkRecordList')) : []
+    console.log(this.boundList)
+  },
+  methods: {
+
+    boundHandle(i) { // 记录点击事件
+      console.log(i)
+      this.$router.push({
+        path:'parkRecord',
+        query:{
+          carNumber:i,
+          carNumberColor: this.currentColor,
+        }
+      })
+    },
+    chooseColor (index){ // 颜色选择
+      this.currentColor = index
+      switch (this.currentColor) {
+        case 0 :
+          return this.activeBG = '#0054C0'
+          break;
+        case 1 :
+          return this.activeBG = '#FEBE00'
+          break;
+        case 2 :
+          return this.activeBG = '#97DEA1'
+          break;
+        case 3 :
+          return this.activeBG = '#E4E5E7'
+          break;
+        case 4 :
+          return this.activeBG = '#333333'
+          break;
+      }
+    },
+    clickFirstWrap () {
+      // 点击第一个输入框
+      this.firstClickStatus = true
+      this.firstWrapStatus = true
+      this.keyBoardStatus = false
+      this.formData.num0 = ''
+    },
+    selectFirstWord (event) {
+      // 选择省份
+      if (event.target.localName !== 'span') {
+        return
+      }
+      this.formData.num0 = event.target.innerText
+      this.firstSelectStatus = true
+      this.firstWrapStatus = false
+      this.firstClickStatus = false
+      this.keyBoardStatus = true
+      this.activeKeyWordIndex = 1
+      // this.$refs.num1.focus()
+      // document.getElementById('num1').focus()
+    },
+    clickKeyBoard (item) { // 点击自定义键盘
+      console.log(item)
+      this.formData['num' + this.activeKeyWordIndex] = item
+
+      if (this.formData.commonCard === '1') {
+        this.activeKeyWordIndex++
+        if (this.activeKeyWordIndex > 6) {
+          this.keyBoardStatus = false
+        }
+      } else {
+        this.activeKeyWordIndex++
+        if (this.activeKeyWordIndex > 7) {
+          this.keyBoardStatus = false
+        }
+      }
+    },
+    deleteWord () { // 退格
+      // console.log(this.activeKeyWordIndex)
+      // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)])
+      if (this.activeKeyWordIndex > 1) {
+        this.formData['num' + (this.activeKeyWordIndex - 1)] = ''
+        this.activeKeyWordIndex--
+      }
+    },
+    clickKeyWordWrap (activeKeyWordIndex) {
+      this.keyBoardStatus = true
+      this.activeKeyWordIndex = activeKeyWordIndex
+      this.formData['num' + this.activeKeyWordIndex] = ''
+    },
+    toRecharge() {
+      let plateLicense
+      if (this.formData.commonCard === '1') {
+        plateLicense = this.plate_license_1
+        plateLicense = this.palindrome(plateLicense)
+        if (plateLicense.length < 7) {
+          this.$msgbox('提示', '请输入正确的车牌号')
+          return
+        }
+      }
+      if (this.formData.commonCard === '2') {
+        plateLicense = this.plate_license_2
+        plateLicense = this.palindrome(plateLicense)
+        if (plateLicense.length < 8) {
+          this.$msgbox('提示', '请输入正确的车牌号')
+          return
+        }
+      }
+      this.$emit('getPlateLicense',plateLicense)
+      console.log(plateLicense);
+      this.querySpecialCarnumber(plateLicense)
+
+    },
+    querySpecialCarnumber(plateLicense){  // 获取停车记录数据
+      var salt = this.$utils.myCommonSalt(32);
+      var jsondata = {
+        app_id: this.$utils.myVarAppid,
+        deviceInfo: this.$utils.myDeviceInfo,
+        salt: salt,
+        sign_type: "md5",
+
+        terminalSource: 7,
+        carNumber: plateLicense,
+        // sign: md5sign,
+        orgId: this.$utils.myOrgId
+      }
+      jsondata.sign = this.$utils.signObject(jsondata)
+
+      // jsondata.sign = md5sign
+      console.log( JSON.stringify(jsondata));
+      querySpecialCarnumber(jsondata).then(response => {
+        console.log(response)
+        if(response.code==0){
+          this.$router.push({
+            path:'rechargeList',
+            query:{
+              carNumber:plateLicense,
+              acctBalance: response.data.acctBalance,
+              custId:response.data.custId
+            }
+          })
+        }else {
+          this.$msgbox('提示', response.message)
+        }
+
+      })
+    },
+    submitFn () {
+      let plateLicense
+      if (this.formData.commonCard === '1') {
+        plateLicense = this.plate_license_1
+        plateLicense = this.palindrome(plateLicense)
+        if (plateLicense.length < 7) {
+          this.$msgbox('提示', '请输入正确的车牌号')
+          return
+        }
+      }
+      if (this.formData.commonCard === '2') {
+        plateLicense = this.plate_license_2
+        plateLicense = this.palindrome(plateLicense)
+        if (plateLicense.length < 8) {
+          this.$msgbox('提示', '请输入正确的车牌号')
+          return
+        }
+      }
+      this.$emit('getPlateLicense',plateLicense)
+      console.log(plateLicense);
+
+      // boundList
+      if(this.boundList.indexOf(plateLicense) == -1 ){
+        if(this.boundList.length == 3){
+          this.boundList.pop()
+        }
+        this.boundList.unshift(plateLicense)
+      }
+      localStorage.setItem('parkRecordList',JSON.stringify(this.boundList))
+      console.log(this.boundList)
+
+      this.$router.push({
+        path:'parkRecord',
+        query:{
+          carNumber:plateLicense,
+          carNumberColor: this.currentColor
+        }
+      })
+    },
+    palindrome (str) {
+      var arr = str.split('')
+      arr = arr.filter(function (val) {
+        return (
+          val !== ' ' &&
+          val !== ',' &&
+          val !== '.' &&
+          val !== '?' &&
+          val !== ':' &&
+          val !== ';' &&
+          val !== '`' &&
+          val !== "'" &&
+          val !== '_' &&
+          val !== '/' &&
+          val !== '-' &&
+          val !== '\\' &&
+          val !== '' &&
+          val !== '(' &&
+          val !== ')'
+        )
+      })
+      return arr.join('')
+    },
+    checkIsHasSpecialStr (str) {
+      var flag = false
+      var arr = str.split('')
+      arr.forEach(val => {
+        if (
+          val === '!' ||
+          val === '}' ||
+          val === '{' ||
+          val === ']' ||
+          val === '[' ||
+          val === '&' ||
+          val === '$' ||
+          val === '@' ||
+          val === ' ' ||
+          val === ',' ||
+          val === '.' ||
+          val === '?' ||
+          val === ':' ||
+          val === ';' ||
+          val === '`' ||
+          val === "'" ||
+          val === '_' ||
+          val === '/' ||
+          val === '-' ||
+          val === '\\' ||
+          val === '' ||
+          val === '(' ||
+          val === ')'
+        ) {
+          flag = true
+        }
+      })
+      return flag
+    },
+    checkIsHasChineseStr (str) {
+      var Reg = /.*[\u4e00-\u9fa5]+.*/
+      if (Reg.test(str)) {
+        return true
+      }
+      return false
+    }
+  },
+  computed: {
+    plate_license_1 () {
+      return (
+        this.formData.num0 +
+        this.formData.num1 +
+        this.formData.num2 +
+        this.formData.num3 +
+        this.formData.num4 +
+        this.formData.num5 +
+        this.formData.num6
+      )
+    },
+    plate_license_2 () {
+      return (
+        this.formData.num0 +
+        this.formData.num1 +
+        this.formData.num2 +
+        this.formData.num3 +
+        this.formData.num4 +
+        this.formData.num5 +
+        this.formData.num6 +
+        this.formData.num7
+      )
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+  .swiper-container {
+    height: 206px;
+  }
+
+  .swiper-slide {
+    /*width: 100%;*/
+    height: 206px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .flex-items-center {
+    display: flex;
+    align-items: center;
+  }
+  .wrap {
+    padding:0 18px;
+    .radio-box {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-top: 18px;
+      text-align: right;
+      input[type="radio"] {
+        display: none;
+      }
+      label {
+        padding-left: 0.6rem;
+        cursor: pointer;
+        img {
+          width: 0.8rem;
+          margin-right: 0.1rem;
+        }
+      }
+    }
+
+    .color-choose{
+      width: 265px;
+      height: 34px;
+      margin: 0 auto;
+      background: #F3F3F3;
+      border-radius: 6px;
+      display: flex;
+      li{
+        flex: 1;
+        text-align: center;
+        line-height: 34px;
+        border-radius: 6px;
+      }
+    }
+    .card-header {
+      font-size: 0.75rem;
+      margin: 0.2rem 0 0.5rem;
+      color: #4a4a4a;
+    }
+    // input输入框
+    .num-box {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .spot {
+        width: 0.2rem;
+        height: 0.2rem;
+        border-radius: 50%;
+        background-color: #d8d8d8;
+      }
+      & > div {
+        width: 1.8rem;
+        height: 1.8rem;
+        border: 1px solid #e4e4e4;
+        &.first {
+          position: relative;
+          text-align: center;
+          line-height: 1.7rem;
+          font-weight: 200;
+          .input-wrap {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            &.active {
+              z-index: 100;
+            }
+          }
+          em {
+            color: #979797;
+            font-size: 1.6rem;
+            line-height: 1.7rem;
+          }
+          span {
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+            // background-color: #9cbce2;
+            color: #828282;
+            line-height: 1.8rem;
+          }
+        }
+        &.active {
+          border: 1px solid #4a90e2;
+          &:after {
+            border-bottom: 0.5rem solid #4a90e2;
+          }
+        }
+        span {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+          font-size: 1rem;
+          color: #828282;
+          &.first {
+            background-color: #9cbce2;
+            color: #fff;
+            text-indent: 0.4rem;
+            border-radius: 0;
+          }
+        }
+      }
+    }
+    .submit-box {
+      width: 100%;
+      height: 44px;
+      line-height: 44px;
+      border-radius: 4px;
+      font-size: 20px;
+      margin-top: 18px;
+      background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
+      color: #fff;
+      text-align: center;
+    }
+    .info {
+      font-size: 0.5rem;
+      margin-top: 0.9rem;
+      color: #828282;
+      text-align: left;
+      img {
+        width: 0.6rem;
+        vertical-align: middle;
+      }
+    }
+  }
+  .first-word-wrap {
+    // height: 9.4rem;
+    background-color: #D2D5DB;
+    padding: 0.6rem 0.8rem 1.1rem;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    .first-word {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 0.45rem;
+      .word {
+        box-sizing: border-box;
+        width: 1.8rem;
+        height: 1.8rem;
+        // border: 1px solid #9cbce2;
+        box-shadow: 0px 1px 4px  rgba(0, 0, 0, 0.35);
+        border-radius: 0.16rem;
+        text-align: center;
+        &.bordernone {
+          border: none;
+          box-shadow:none
+        }
+        span {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          width: 100%;
+          height: 100%;
+          background-color: #fff;
+          color: #000;
+          // border: 1px solid #fff;
+          border-radius: 0.125rem;
+        }
+        img {
+          width: 1.6rem;
+        }
+      }
+      &:nth-last-of-type(1){
+        margin-bottom: 0rem;
+      }
+    }
+  }
+  .keyboard-wrap {
+    background-color: #D2D5DB;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0.6rem 0.6rem 0.4rem;
+    .keyboard {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 2rem;
+      margin-bottom: 0.3rem;
+      span {
+        text-align: center;
+        display: flex;
+        width: 1.8rem;
+        align-items: center;
+        justify-content: center;
+        height: 1.8rem;
+        margin: 0 0.3rem;
+        box-shadow: 0px 1px 4px  rgba(0, 0, 0, 0.35);
+        background-color: #fff;
+        border-radius: 0.125rem;
+        &:active {
+          background-color: #e4e4e4;
+        }
+        &.bordernone{
+          border: none;
+          box-shadow: none;
+          background-color: #D2D5DB;
+          &:active{
+            background-color:#D2D5DB;
+          }
+        }
+        &.delete{
+          background-color: #465266;
+          img{
+            width: 1.15rem;
+          }
+        }
+      }
+    }
+    .cancel{
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      span{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 3.6rem;
+        height: 1.8rem;
+        background-color: #465266;
+        color: #fff;
+        border-radius: 0.125rem;
+      }
+    }
+  }
+  .bound-list{
+    li{
+      padding: 0 10px;
+      height: 34px;
+      margin-bottom: 12px;
+      line-height: 34px;
+      background: #F2F1F1;
+      border-radius: 2px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+  .addCarNum{
+    height: 34px;
+    line-height: 34px;
+    background: #FFFFFF;
+    border-radius: 2px;
+    border: 1px solid #F2F1F1;
+    text-align: center;
+    span{
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      background: url("../../assets/images/parkPay/addCarNum.png") no-repeat;
+      margin-right: 10px;
+      vertical-align: sub;
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/src/views/parkPay/rechargeList.vue b/src/views/parkPay/rechargeList.vue
new file mode 100644
index 0000000..4f46487
--- /dev/null
+++ b/src/views/parkPay/rechargeList.vue
@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <div class="rechargeImg"></div>
+
+    <!--<p class="balanceTitle">车牌{{carNumber}}的余额: {{acctBalance==0?0:(acctBalance/100).toFixed(2)}}元</p>-->
+    <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>
+
+    <ul class="rechargeList">
+      <li v-for="(i, index) in dataList" @click="chooseMoney(index,i)">
+        <div :class="{isActive:index==currentIndex}">{{i}} 元</div>
+      </li>
+
+    </ul>
+
+    <div class="submit-box" @click="toRecharge">
+      确定充值
+    </div>
+  </div>
+</template>
+
+<script>
+import { getOpenId, vxPayQuery } from "@/api/orderPay/orderPay";
+export default {
+  name: "rechargeList",
+  data() {
+    return {
+      acctBalance: "",
+      fileOrder: 100,
+      dataList: ["0.1", "0.2", "300", "400", "500", "600"],
+      currentIndex: 0,
+      webAppCode: "",
+      custId:'',
+      currentMoney:0.1
+    };
+  },
+  created() {
+    this.acctBalance = this.$route.query.acctBalance; //车牌颜色
+    this.carNumber = this.$route.query.carNumber;
+    this.custId = this.$route.query.custId;
+    console.log(this.clientBrowser)
+    if (this.$utils.clientBrowser() == "微信") {
+      this.webAppCode = this.getCode();
+    }
+  },
+  methods: {
+    toRecharge() {
+      let me = this
+      var codeParams = {
+        code: this.webAppCode,
+        appId: this.$utils.myVxAppId
+      };
+      getOpenId(codeParams).then(res => {
+        if (res.code == 0) {
+          me.vxPay(res.data);
+        } else if (res.code == 40163) { //code been used, hints[重复code问题]
+          this.$msgbox('提示', '请重新支付！重复code问题')
+          console.log(res.message);
+        } else {
+          this.$msgbox('提示', '请重新支付')
+        }
+      });
+    },
+    vxPay(openidData) {
+      let vm = this;
+      var wxParams = {};
+      wxParams.backType = 2;
+      wxParams.orgId = this.$utils.myOrgId;
+      wxParams.payType = 4;// 1:支付宝 2：微信 3：银联 10:H5   4微信公众号
+      wxParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
+      wxParams.carNumber = this.carNumber;
+      wxParams.paySrcType = 201;//101停车支付  201充值
+      wxParams.openId = openidData
+      wxParams.appId = this.$utils.myVxAppId;
+      wxParams.acctType = '1'
+      wxParams.custId = this.custId
+      wxParams.rechargeID = this.custId
+      wxParams.rechargeType = '2'
+      wxParams.realPayMoney = this.currentMoney*100  // 实付金额
+      wxParams.rechargeFee = this.currentMoney*100  //充值实际得到金额
+      wxParams.acctBalance = this.acctBalance  //账户余额
+
+
+      vxPayQuery(wxParams).then(res => {
+        if (res.code == 0) { //
+          if (res.data) {
+            var data = res.data;
+            console.log(JSON.stringify(data));
+            if (typeof WeixinJSBridge === "undefined") { // 微信浏览器内置对象。参考微信官方文档
+              if (document.addEventListener) {
+                document.addEventListener("WeixinJSBridgeReady", vm.onBridgeReady(data), false);
+              } else if (document.attachEvent) {
+                document.attachEvent("WeixinJSBridgeReady", vm.onBridgeReady(data));
+                document.attachEvent("onWeixinJSBridgeReady", vm.onBridgeReady(data));
+              }
+            } else {
+              console.log("准备调用微信支付");
+              vm.onBridgeReady(data);
+            }
+          } else {
+            alert("没有找到返回值");
+          }
+        } else if (res.code == 1002) {//其他情况如【该卡号场内已存在】
+          console.log(res.message);
+          MessageBox.confirm("", {
+            message: res.message,
+            title: "温馨提示",
+            showCancelButton: false,
+            confirmButtonText: "确定"
+          }).then(action => {
+            if (action == "confirm") {     //确认的回调
+              console.log("确定");
+              this.$router.go(-1);
+            }
+          }).catch(err => {
+            if (err == "cancel") {     //取消的回调
+              console.log("取消");
+            }
+          });
+        } else {
+          alert(res.message);
+        }
+      });
+    },
+    onBridgeReady(params) {
+      let me = this;
+      console.log("调用微信支付WeixinJSBridge");
+      WeixinJSBridge.invoke(
+        "getBrandWCPayRequest", params,
+        //
+        // 'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
+        //   'appId': data.appId, // 公众号名称，由商户传入
+        //   'timeStamp': data.timeStamp, // 时间戳
+        //   'nonceStr': data.nonceStr, // 随机串
+        //   'package': data.package, // 预支付id
+        //   'signType': data.signType, // 微信签名方式
+        //   'paySign': data.paySign // 微信签名
+        // },
+        function(res) {
+          // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+          if (res.err_msg === "get_brand_wcpay_request:ok") {
+            console.log("成功");
+            // this.$msgbox('提示', '支付成功')
+            // alert(me.acctBalance)
+            // alert(me.currentMoney*100)
+            me.acctBalance = Number(me.acctBalance)+Number(me.currentMoney*100)
+            // alert(this.acctBalance)
+            alert('支付成功')
+            // me.$router.go(-2);
+          } else {
+            console.log("失败");
+            // this.$msgbox('提示', '')
+            alert('支付失败')
+            me.$router.go(-2);
+          }
+        }
+      );
+    },
+    getCode() {
+      var appID = this.$utils.myVxAppId;
+      var code = this.getUrlParam("code");
+      var local = window.location.href;
+      if (code == null || code === "") {
+        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";
+      } else {
+        return code;
+      }
+    },
+    getUrlParam(name) {
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+      var r = window.location.search.substr(1).match(reg);
+      if (r != null) return unescape(r[2]);
+      return null;
+    },
+    chooseMoney(index,i) {
+      this.currentIndex = index;
+      this.currentMoney = i
+    }
+  },
+  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 lang="scss">
+  .rechargeImg {
+    width: 80px;
+    height: 80px;
+    margin: 20px auto;
+    background: url("../../assets/images/recharge.png");
+  }
+
+  .balanceTitle {
+    padding: 15px;
+    background: #ccc;
+    font-size: 16px;
+    /*color: #fff;*/
+  }
+
+  .rechargeList {
+    display: flex;
+    flex-wrap: wrap;
+    > li {
+      flex: 0 0 50%;
+
+      padding: 10px;
+      > div {
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        background: #f00;
+        color: #fff;
+        font-size: 18px;
+        border-radius: 4px;
+      }
+      .isActive {
+        background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
+      }
+    }
+  }
+
+  .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;
+  }
+
+</style>