vue 停车场车牌号键盘微信支付(改版)

因项目需求改动整个停车缴费已大改，整个布局修改了一下，现支持微信支付，整个逻辑处理基于后台接口

体检网址：https://xq.chuntaoyisheng.com/api/1.0/xqyy/park

<template>
  <div id="dispense" navbar-fixed style="width:100%;">
      <van-dialog
  v-model="show"
  show-cancel-button
   @confirm="confirm"
   :before-close="beforeClose"
>
<p class="toastti">请输入该车牌绑定的手机号码</p>
  <van-field
    v-model="username"
    ref="tellphone"
    clearable
    placeholder="请输入手机号码"
  />
</van-dialog>
    <div class="content-car-number">
      <div class="car-content-title">
        <span class="titlespan">请输入车牌号查询停车费</span>
      </div>
      <div class="content-section">
        <div class="content-section-flex flex-card">
          <div class="content-section-flex flex-card-border">
            <button id="font" class="flex-btn" @click="btnClickYue" v-bind:class="{isClick: isYue }">
              {{areaName}}
            </button>
            <span class="blank-border blank-border-first"></span>
            <button id='letter' class="flex-btn" @click="btnClickA" v-bind:class="{isClick: isA}">
              {{areaLetter}}
            </button>
            <span class="blank-border blank-border-first"></span>
            <div class="flex-btns">
              <button id='numOne' @click="btnClickNum('one')" v-bind:class="{isNumClick: isNumOne }">{{numOne}}</button>
              <span class="blank-border"></span>
              <button id='numTwo' @click="btnClickNum('two')" v-bind:class="{isNumClick: isNumTwo }">{{numTwo}}</button>
              <span class="blank-border"></span>
              <button id='numThree' @click="btnClickNum('three')" v-bind:class="{isNumClick: isNumThree }">{{numThree}}
              </button>
              <span class="blank-border"></span>
              <button id='numFour' @click="btnClickNum('four')" v-bind:class="{isNumClick: isNumFour }">{{numFour}}
              </button>
              <span class="blank-border"></span>
              <button id='numFive' @click="btnClickNum('five')" v-bind:class="{isNumClick: isNumFive }">{{numFive}}
              </button>
              <span class="blank-border" v-if="checkbox"></span>
              <button v-if="checkbox" id='numSix' @click="btnClickNum('six')"
                      v-bind:class="{isNumClick: isNumSix }">{{numSix}}
              </button>
              <!-- <span class="blank-border"></span> -->
            </div>
          </div>
        </div>
      </div>
      <div class="flex-btns latbens">
                <van-checkbox v-model="checkbox" @change="carTypeChange">
                    新能源
                </van-checkbox>
            </div>
    </div>
    <div class="paymentcontent" v-if="statesh===false">
        <div class="notats">
          <img src="./../../assets/nocard.png" alt="">
          <p v-bind:class="{ active: isActive }">{{msg}}</p>
        </div>
    </div>
    <div  v-else-if="statesh===true">
        <div class="paymentcontent">
            <div >
              <p>停车详情</p>
              <van-cell-group>
                  <van-cell title="停车场:" v-model="parkingName" />
                  <van-cell title="停车时长:" v-model="timeDifferences" />
                  <van-cell title="驾入时间:" v-model="entranceTime" />
                  <van-cell title="停车费:" v-model="remainingFee"/>
              </van-cell-group>
            </div>
        </div>
        <div class="surepay">
            <p>还需支付<span class="paynum">¥{{remainingFee}}</span></p>
        </div>
        <div class="searchPay-btn">
            <van-button type="primary" @click="addCar" class="paybtn">支付</van-button>
        </div>
    </div>
    
    <div class="keyboard" v-if="keyboardShow" :class='{animationDown:isDown,animationUp:isUp}'>
      <button class="btn-complete" @click="completeClick"><span>完成</span></button>
      <div v-if="keyboard == 'txt'">
        <div class="keyboard-row" v-for="(item,rows) in carTxt">
          <button class="keyboard-row-item" v-for="(i,index) in item.name" @click="btnWordClick(rows,index,i)">{{i}}
          </button>
        </div>
        <div class="keyboard-row">
          <button class="keyboard-row-item bottom" @click="btnBottomClick('鲁')">鲁</button>
          <button v-for="j in noneBottom" class="none-botton">{{j}}</button>
          <div class="keyboard-row-item clear" @click="clearClick">
              　<img src="../../assets/icon_input_delete.png" alt="删除">
          </div>
        </div>
      </div>
      <div v-if="keyboard == 'num'">
        <div class="keyboard-row keybyn" v-for="(item,rows) in carNum">
          <button :disabled="!isSelectl?isDisable && i<10 :isDisable&& rows!=0 " class="keyboard-row-item"
                  v-for="(i,index) in item.name" @click="btnWordClick(rows,index,i)">{{i}}
          </button>
        </div>
        <div class="keyboard-row keynts">
          <button :disabled="isSelectl" v-for="item in carNumBottom" class="keyboard-row-item bottom"
                  @click="btnBottomNumClick(item)">{{item}}
          </button>
          <div class="keyboard-row-item clear" @click="clearClick">
              　<img src="../../assets/icon_input_delete.png" alt="删除">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { NavBar,Toast,Dialog,Icon } from 'vant';
    export default{
        name: 'Dispense',
        data () {
            return {
                isActive:false,
                msg:"暂无停车缴费信息",
                externalOrderId:"",
                verificationInfo:"",
                payTime:"",
                payment:"",
                orderId:"",
                token:"",
                appId:"",
                timeStamp:"",
                nonceStr:"",
                packages:"",
                signType:"",
                paySign:"",
                mobilePhone:"",
                remainingFee:"",
                plateNumber:"",//完整车牌号
                outTradeNo:"",//商户订单号
                cardnum:"",//输入的车牌号
                statesh:false,
                parkingName:"",//停车场地名字
                timeDifferences:"",//停车时间
                entranceTime:"",//进场时间
                parkingFee:"",//总停车费
                openid:"",
                show: false,
                username: '',
                password: '',
                numlist:true,
                carNum:"",
                isFeeHourClick: false,
                checkbox: false,
                isDown: false,
                isUp: false,
                selected: null,
                isSelectx: false,
                isSelectl: false,
                key: 1,
                areaName:'渝',
                areaLetter: '',
                numOne: '',
                numTwo: '',
                numThree: '',
                numFour: '',
                numFive: '',
                numSix: '',
                isYue: false,
                keyboardShow: false,
                keyboard: false,
                isA: false,
                isNumOne: false,
                isNumTwo: false,
                isNumThree: false,
                isNumFour: false,
                isNumFive: false,
                isNumSix: false,
                isDisable: false,
                isOne: false,
                isTwo: false,
                isThree: false,
                isFour: false,
                isFive: false,
                isSix: false,
                isSeven: false,
                isEight: false,
                isOther: false,
                typechagel:false,
                carTxt: [
                    { name: ['渝', '京', '泸','鄂', '湘', '川', '粤','闽','晋', '黑'] },
                    { name: [ '津','浙', '豫', '赣', '贵','青', '琼','宁','吉', '蒙'] },
                    { name: [ '翼', '苏', '皖','桂','云', '陕','甘' ,'藏','新','辽'] }
                ],
                carNumBottom: ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学'],
                noneBottom: ['','','','','','','',''],
                noneBottomtxt: ['', ''],
                carNum: [
                    { name: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'] },
                    { name: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P','澳'] },
                    { name: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L','港'] },
                ],
                addedCarNum: '',
                carnump:""
            }
        },
        watch: {
            checkbox: function (val) {
                this.typechagel=val;
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                 this.numSix = ''
                const vm = this
                if (!val) { // 切换到普通车牌
                    if (vm.numFour) {
                        vm.isNumFive = true
                        vm.key = 7
                    }
                } else { // 切换到新能源车牌
                    if (vm.numFive) {
                        vm.isNumSix = true
                        vm.key = 8
                    }
                }
            }
        }, 
        mounted () {
            this.openid=this.getParam("openid");
            this.btnClickYue();
        },
        methods: {
            // *
             mul:function(a, b) {//主体
                var c = 0,
                d = a.toString(),
                e = b.toString();
                try {
                c += d.split(".")[1].length;
                } catch (f) { }
                try {
                c += e.split(".")[1].length;
                } catch (f) { }
                return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c);
            },
          timeDifference:function(olddata,newdata){
                var date3 = new Date(newdata).getTime() - new Date(olddata).getTime();   //时间差的毫秒数      
                //计算出相差天数
                var days=Math.floor(date3/(24*3600*1000))
                //计算出小时数
                var leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数
                var hours=Math.floor(leave1/(3600*1000))
                //计算相差分钟数
                var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
                var minutes=Math.floor(leave2/(60*1000))
                //计算相差秒数
                var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
                var seconds=Math.round(leave3/1000)
                if(days==0){
                  return hours+"时"+minutes+"分"+seconds+"秒"
                }else{
                  return days+"天"+hours+"时"+minutes+"分"+seconds+"秒"
                }
          },
          callpay:function(){
              if (typeof WeixinJSBridge == "undefined"){
                  if( document.addEventListener ){
                      document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
                  }else if (document.attachEvent){
                      document.attachEvent('WeixinJSBridgeReady', this.jsApiCall); 
                      document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
                  }
              }else{
                  this.jsApiCall();
              }
          },
          query_order_pay_info:function(){
                this.axios.get('接口地址',{params:{}})
                                    .then((response)=> {
                                        let datapayinfo=response.data.body;
                                        if(datapayinfo.tradeState==0){
                                            this.payTime=datapayinfo.payTime;
                                             
                                                this.axios.post('',params)
                                                .then( (response)=> {
                                                    if(response.data.code=="0"){
                                                         this.queryFeeByPhone(true);
                                                    }
                                                })
                                                .catch(function (error) {
                                                    console.log(error);
                                                })
                                        }else if(datapayinfo.tradeState==1){
                                            Toast('进行中');
                                        }else if(datapayinfo.tradeState==2){
                                            Toast('未开始');
                                        }else if(datapayinfo.tradeState==3){
                                            Toast('失败');
                                        }
                                    })
                                    .catch(function (error) {
                                        console.log(error);
                                    })
          },
          jsApiCall:function(){
              var thisl=this;
                  WeixinJSBridge.invoke(
                        'getBrandWCPayRequest',
                        {
                      "appId": this.appId,
                      "timeStamp": this.timeStamp,
                      "nonceStr": this.nonceStr,
                      "package": this.packages,
                      "signType": this.signType,
                      "paySign": this.paySign
                    },
                        function(res){
                          WeixinJSBridge.log(res.err_msg);
                            if (res.err_msg == "get_brand_wcpay_request:ok") {
                                //支付成功
                                thisl.query_order_pay_info();
                            }else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
                               thisl.statesh=true;
                            } else {
                                thisl.statesh=false;
                                Toast("支付失败！");
                            }
                        }
                    );
          },
          createprepaidinfo:function(){
            //创建预支付订单
            var params = new URLSearchParams();
            
            this.axios.post('',params)
            .then( (response)=> {
                var data=response.data.body;
                this.appId=data.appId;
                this.outTradeNo=data.outTradeNo;
                this.timeStamp=data.timeStamp;
                this.nonceStr=data.nonceStr;
                this.packages=data.packages;
                this.signType=data.signType;
                this.paySign=data.paySign;
            })
            .catch(function (error) {
                console.log(error);
            })
          },
          adddateist:function(response,flg){
                Toast.clear();
                  if(response.data.code=="0"){
                    this.statesh=true;
                    this.remainingFee=response.data.body.orderInfo[0].remainingFee;
                    this.mobilePhone=response.data.body.mobilePhone;
                    this.verificationInfo=response.data.body.orderInfo[0].verificationInfo;
                    this.payment=response.data.body.orderInfo[0].parkingFee;
                    this.orderId=response.data.body.orderInfo[0].orderId;
                    this.token=response.data.body.orderInfo[0].token;
                    this.parkingName=response.data.body.orderInfo[0].parkingName;
                    let entranceTime=response.data.body.orderInfo[0].entranceTime.replace(/-/g, "/");
                    let exitTime=response.data.body.orderInfo[0].exitTime.replace(/-/g, "/");
                    this.timeDifferences=this.timeDifference(entranceTime,exitTime);
                    this.entranceTime=response.data.body.orderInfo[0].entranceTime;
                    this.parkingFee=response.data.body.orderInfo[0].parkingFee;
                    if(this.remainingFee!=""&&this.remainingFee>0){
                        this.createprepaidinfo();
                    }
                  }else if(response.data.code=="20802"){//该车辆已被他人绑定->手机号窗口
                    this.statesh=false;
                    if(flg==true){
                        this.show=true;
                    }
                  }else if(response.data.code=="20904"){//用户未绑定该查费车牌->无结果
                     Toast(response.data.message);
                     this.statesh=false;
                  }else if(response.data.code=="90001"){//未查询到该车的停车费用,请手动缴费!->无结果
                     Toast(response.data.message);
                     this.statesh=false;
                  }else if(response.data.code=="20901"){//未查询到该车的停车费用,请手动缴费!->无结果
                     Toast(response.data.message);
                     this.statesh=false;
                  }else if(response.data.code=="20909"){//未查询到该车的停车费用,请手动缴费!->无结果
                     Toast(response.data.message);
                     this.statesh=false;
                  }else if(response.data.code=="20904"){//未查询到该车的停车费用,请手动缴费!->无结果
                     Toast(response.data.message);
                     this.statesh=false;
                  }else{
                      Toast(response.data.message);
                     this.statesh=false;
                  }
          },
          queryFee:function(num,flg){
            Toast.loading({
              mask: true,
              message: '查询中...'
            });
            this.plateNumber=num;
            //查询停车费用
            this.axios.get('',{params:{"plateNumber":num}})
              .then((response)=>{
                  this.adddateist(response,flg);
              })
              .catch(function (error) {
                  console.log(error);
              })
          },
          getParam:function(name){
              var search = document.location.search;
              var pattern = new RegExp("[?&]"+name+"\=([^&]+)", "g");
              var matcher = pattern.exec(search);
              var items = null;
              if(null != matcher){
                  try{
                      items = decodeURIComponent(decodeURIComponent(matcher[1]));
                  }catch(e){
                      try{
                          items = decodeURIComponent(matcher[1]);
                      }catch(e){
                          items = matcher[1];
                      }
                  }
              }
              return items;
            },
            beforeClose(action, done) {
                var keyNumlength=this.username.length;
                var tell=/^1[0|3|4|5|7|8][0-9]\d{8}$/;
                if (action === 'confirm') {
                    if(keyNumlength>11||keyNumlength<11){
                        Toast('请输入正确的手机号!');
                        done(false);
                    }else if(keyNumlength==11&&tell.test(this.username)){
                       done();
                    }
                } else  if (action === 'cancel'){
                    done();
                }
            },
            queryFeeByPhone(flg){
                    this.axios.get('',{})
                        .then((response)=>{
                            if(flg==true){
                                if(response.data.code=="20904"){
                                        this.statesh=false;
                                        this.isActive=true;
                                        Toast('支付已完成，请尽快离场!');
                                        this.msg="支付已完成，请尽快离场！"
                                }else if(response.data.code=="20901"){
                                        this.statesh=false;
                                        this.isActive=true;
                                        Toast('支付已完成，请尽快离场!');
                                        this.msg="支付已完成，请尽快离场！"
                                }else if(response.data.body.orderInfo[0].remainingFee==0){
                                        this.statesh=false;
                                        this.isActive=true;
                                        Toast('支付已完成，请尽快离场!');
                                        this.msg="支付已完成，请尽快离场！"
                                }else{
                                    this.adddateist(response);
                                }
                            }else{
                                this.adddateist(response);
                                this.queryFee(this.cardnum,false);
                                this.username="";
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
            },
            confirm:function(value){
                this.queryFeeByPhone();
            },
            carnumclick(carnum){
                var numlist=carnum.split("");
                for(var i=0; i<numlist.length;i++){
                    this.areaName=numlist[0];
                    this.areaLetter=numlist[1];
                    this.numOne=numlist[2];
                    this.numTwo=numlist[3];
                    this.numThree=numlist[4];
                    this.numFour=numlist[5];
                    this.numFive=numlist[6];
                    this.numSix=numlist[7];
                }
            },
            feeHourClick (val) {
                if (this.areaName && this.areaLetter && this.numOne && this.numTwo && this.numThree && this.numFour && this.numFive) {
                    if (this.checkbox && this.numSix) {
                        this.isFeeHourClick = true
                    } else if (!this.checkbox) {
                        this.isFeeHourClick = true
                    }
                }
                this.keyboardShow = false
                if (val === 'one') {
                    this.isOne = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'two') {
                    this.isTwo = true
                    this.isOne = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'three') {
                    this.isThree = true
                    this.isTwo = false
                    this.isOne = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'four') {
                    this.isFour = true
                    this.isTwo = false
                    this.isThree = false
                    this.isOne = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'five') {
                    this.isFive = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isOne = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'six') {
                    this.isSix = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isOne = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'seven') {
                    this.isSeven = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isOne = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'eight') {
                    this.isEight = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isOne = false
                    this.isOther = false
                } else if (val === 'other') {
                    this.isOther = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOne = false
                }
            },
            carTypeChange (val) {
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                if (!val) { // 切换到普通车牌
                    if (this.numFour) {
                        this.isNumFive = true
                        this.key = 7
                    }
                } else { // 切换到新能源车牌
                    if (this.numFive) {
                        this.isNumSix = true
                        this.key = 8
                    }
                }
            },
            btnClickYue () {
                this.isYue = true
                this.isA = false
                this.isUp = true
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.keyboardShow = true
                this.keyboard = 'txt'
                this.key = 1
            },
            btnWordClick (rows, index, i) {
                console.log(index);
                console.log(i);
                var num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix+i;
                console.log(num);
                console.log(num.length);
                this.cardnum=num;
                console.log(this.cardnum);
                this.selected = i;
                if(this.typechagel==true){
                    if(num.length==8){
                        this.keyboardShow = false;
                        this.queryFee(num,true);
                    }
                }else{
                    if(num.length>=7){
                        this.keyboardShow = false;
                        // this.queryFee(num,true);
                         setTimeout(()=>{
                            this.completeClick();
                        },100)
                    }
                }
                
                if (this.key === 1) {
                    if (this.areaName === '临') {
                        this.areaLetter = ''
                        this.numOne = ''
                        this.numTwo = ''
                        this.numThree = ''
                        this.numFour = ''
                        this.numFive = ''
                        this.numSix = ''
                    }
                    this.areaName = i
                    this.isSelectl = false
                    document.getElementById('letter').click()
                } else if (this.key === 2) {
                    this.areaLetter = i
                    document.getElementById('numOne').click()
                } else if (this.key === 3) {
                    this.numOne = i
                    document.getElementById('numTwo').click()
                } else if (this.key === 4) {
                    this.numTwo = i
                    document.getElementById('numThree').click()
                } else if (this.key === 5) {
                    this.numThree = i
                    document.getElementById('numFour').click()
                } else if (this.key === 6) {
                    this.numFour = i
                    document.getElementById('numFive').click()
                } else if (this.key === 7) {
                    this.numFive = i
                    if (this.checkbox) {
                        document.getElementById('numSix').click()
                    }
                } else if (this.key === 8) {
                    this.numSix = i
                }
                if (this.key === 7 || this.key === 8) {
                    this.carNumBottom = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学']
                } else if (this.key === 3 || this.key === 4 || this.key === 5 || this.key === 6) {
                    this.carNumBottom = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学']
                }
            },
            btnBottomClick (val) {
                if (val === '新') {
                    if (this.areaName === '临') {
                        this.areaLetter = ''
                        this.numOne = ''
                        this.numTwo = ''
                        this.numThree = ''
                        this.numFour = ''
                        this.numFive = ''
                        this.numSix = ''
                    }
                    this.areaName = '新'
                    this.isSelectx = true
                    this.isSelectl = false
                    document.getElementById('letter').click()
                } else if (val === '使') {
                    this.areaName = '使'
                    this.areaLetter = ''
                    this.numOne = ''
                    this.numTwo = ''
                    this.numThree = ''
                    this.numFour = ''
                    this.numFive = ''
                    this.numSix = ''
                    document.getElementById('letter').click('isLin')
                }else if (val === '民') {
                    this.areaName = '民'
                    this.isSelectl = true
                    this.isSelectx = false
                    this.isDisable = true
                    this.areaLetter = '航'
                    this.numOne = ''
                    this.numTwo = ''
                    this.numThree = ''
                    this.numFour = ''
                    this.numFive = ''
                    this.numSix = ''
                    document.getElementById('letter').click('isLin')
                }
            },
            btnBottomNumClick (i) {
                this.selected = i
                if (this.key === 2) {
                    this.areaLetter = i
                    document.getElementById('numOne').click()
                } else if (this.key === 3) {
                    this.numOne = i
                    document.getElementById('numTwo').click()
                } else if (this.key === 4) {
                    this.numTwo = i
                    document.getElementById('numThree').click()
                } else if (this.key === 5) {
                    this.numThree = i
                    document.getElementById('numFour').click()
                } else if (this.key === 6) {
                    this.numFour = i
                    document.getElementById('numFive').click()
                } else if (this.key === 7) {
                    this.numFive = i
                    if (this.checkbox) {
                        document.getElementById('numSix').click()
                    }
                } else if (this.key === 8) {
                    this.numSix = i
                }
            },
            btnClickA () {
                this.isDisable = true
                this.isA = true
                this.isYue = false
                this.isUp = true
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.keyboardShow = true
                this.keyboard = 'num'
                this.key = 2
            },
            btnClickNum (name) {
                if (this.isSelectl) {
                    this.isDisable = true
                } else {
                    this.isDisable = false
                }
                this.keyboard = 'num'
                this.keyboardShow = true
                this.isYue = false
                this.isA = false
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.isUp = true
                if (name === 'one') {
                    this.isNumOne = true
                    this.key = 3
                } else if (name === 'two') {
                    this.isNumTwo = true
                    this.key = 4
                } else if (name === 'three') {
                    this.isNumThree = true
                    this.key = 5
                } else if (name === 'four') {
                    this.isNumFour = true
                    this.key = 6
                } else if (name === 'five') {
                    this.isNumFive = true
                    this.key = 7
                } else if (name === 'six') {
                    this.isNumSix = true
                    this.key = 8
                }
                if (name === 'five' || name === 'six') {
                    this.carNumBottom = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学']
                } else {
                    this.carNumBottom = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学']
                }
            },
            completeClick () {
                this.isYue = false
                this.isA = false
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.isUp = false
                this.isDown = true
                this.keyboardShow = false

                var num
                if (!this.checkbox) {
                    num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive
                } else if (this.checkbox) {
                    num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix
                }
                if (num === '') {
                    Toast('请输入车牌');
                } else if (!this.checkbox && (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '')) {
                    Toast('请输入完整车牌');
                } else if (this.checkbox && (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '' || this.numSix === '')) {
                    Toast('请输入完整车牌');
                } else {
                    this.queryFee(num,true);
                    this.cardnum=num;
                }
            },
            clearClick () {
                if (this.key === 1) {
                    this.areaName = ''
                } else if (this.key === 2) {
                    document.getElementById('font').click()
                    this.areaLetter = ''
                } else if (this.key === 3) {
                    document.getElementById('letter').click()
                    this.numOne = ''
                } else if (this.key === 4) {
                    document.getElementById('numOne').click()
                    this.numTwo = ''
                } else if (this.key === 5) {
                    document.getElementById('numTwo').click()
                    this.numThree = ''
                } else if (this.key === 6) {
                    document.getElementById('numThree').click()
                    this.numFour = ''
                } else if (this.key === 7) {
                    document.getElementById('numFour').click()
                    this.numFive = ''
                } else if (this.key === 8) {
                    document.getElementById('numFive').click()
                    this.numSix = ''
                }
            },
            addCar () {
                var num
                if (!this.checkbox) {
                    num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive
                } else if (this.checkbox) {
                    num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix
                }
                if (num === '') {
                    Toast('请输入车牌');
                } else if (!this.checkbox && (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '')) {
                    Toast('请输入完整车牌');
                } else if (this.checkbox && (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '' || this.numSix === '')) {
                    Toast('请输入完整车牌');
                } else {
                    this.callpay();
                }
            }
        },
       
        beforeRouteEnter (to, from, next) {
            next(vm => {
                vm.areaName = '渝'
                vm.areaLetter = ''
                vm.numOne = ''
                vm.numTwo = ''
                vm.numThree = ''
                vm.numFour = ''
                vm.numFive = ''
                vm.numSix = ''
            })
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
@media (max-width: 360px){

}
@media (max-width: 480px){
    
}
.van-field__control {
    border: 1px solid #f5f5f5;
    margin: 0;
    padding: 7px;
    width: 100%;
    resize: none;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: transparent;
    
}
.van-dialog,.van-cell{
        background: rgba(252,252,252,0.8);
}
.van-cell__value--alone{
        margin-bottom: 10px;
    background: #fff;
}
.latbens{
        margin-left: 6px;
    background: #f9fafb !important;
}
.van-checkbox{
        float: right;
    padding-right: 6px;
    font-size: 12px;
}
.keybyn,.keynts{
}
.keybyn:nth-child(4){
        margin-left: 20px;
    margin-right: 20px;
}
.toastti{
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #646464;
    letter-spacing: -0.68px;
    text-align: center;
    padding: 16px 0;
    background: rgba(252,252,252,0.80);
}
.van-checkbox__icon, .van-checkbox__label{
    line-height: 15px;
}
.van-checkbox__label{
  margin-left:2px !important;
  color: #999;
}
.ze-checkbox-text{
    font-size:13px;
        padding-right: 10px;
}
.ze-checkbox{
        float: right;
}
.van-cell{
        padding: 5px 15px;
}
.surepay{
    font-family: PingFangSC-Regular;
font-size: 14px;
color: #8C8C8C;
letter-spacing: -0.34px;
    text-align: center;
    margin: 4px 0;
}
.paynum{
    font-family: PingFangSC-Regular;
font-size: 28px;
color: #EA2929;
letter-spacing: -0.7px;
    padding-left: 10px;
}
.van-checkbox__icon .van-icon {
    width: 11px !important;
    height: 11px !important;
    position: relative;
    top: 6px;
}
.van-icon-success::before {
    position: relative;
    top: -6px;
}
.paybtn{
         height: 40px;
    line-height: 37px;
    background: #0290FF;
    border: 1px solid #0290FF;
    width: 100%;
    float: right;
}
.titlespan{
    font-family: PingFangSC-Regular;
font-size: 14px;
color: #8C8C8C;
letter-spacing: -0.34px;
}
.active{
    color:#f00 !important;
        opacity: 1 !important;
    font-size: 15px !important;
}
.paymentcontent{
        margin-top: 15px;
    margin: 5px 10px 16px 16px;
    border: 1px solid #E8E8E8;
    color: #4386BF !important;
    background: #fff;
}
.paymentcontent p{
        opacity: 0.28;
    font-family: PingFangSC-Regular;
    font-size: 13px;
    color: #121212;
    letter-spacing: -0.2px;
    text-align: center;
    padding: 8px;
    background: #fff;
}
.van-cell{
    color: #4386BF !important;
}
.notats{
      text-align: center;
    margin: 40px;
}
  #dispense {
    .navbar {
      .right{
        a{
          font-size: 30px;
          color: #ffc200;
        }
      }
    }
    .ze-checkbox > input[type=checkbox] {
      position: absolute;
      left: -9999em;
    }
    .yuxradis{
        width: 5px;
        height: 5px;
        background: #ccc;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        top: -2px;
        margin-right: 5px;
    }
    .ze-checkbox > input[type=checkbox]:checked + .ze-checkbox-icon {
      background-color: currentColor;
      border-color: #ffC400;
    }
    .paytext img{
        width: 25px;
        padding: 10px 4px;
    }
    .paytext{
            display: flex;
        width: 100%;
        font-size: 13px;
        text-align: left;
        border-top: 1px solid #E8E8E8;
            padding-top: 10px;
    }
    .addresstexy{
        opacity: 0.8;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #909191;
        line-height: 20px;
    }
    .xqstop{
            font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #212223;
    }
    .paytonst ul li{
        float: left;
        line-height: 30px;
        padding-left: 10px;
        color: #346df1;
    }
    .paytonst{
        padding: 5px 10px;
        position: absolute;
        top: 50px;
        z-index: 99999;
        border: 1px solid #ccc;
        left: 0;
        font-size: 13px;
        width: 220px;
        background: #fff;
        box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.20);
    }
    .paytonst:after{
        content:"";
         width:0;
        height:0;
        border-width:0 10px 10px;
        border-style:solid;
        border-color:transparent transparent #fff;/*透明 透明  灰*/
        position: absolute;
        top: -5px;
        left: 10px;
    }
    .ze-checkbox-icon {
      border: 1px solid #ccc; /*no*/
      border-radius: 2px;
      display: inline-block;
      position: relative;
      z-index: 10;
      vertical-align: bottom;
      pointer-events: none;
      > i {
        content: "";
        position: absolute;
        top: 45%;
        left: 50%;
        border: 3px solid #ffC400; /*no*/
        border-top: 0;
        border-left: 0;
        -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
        transform: translate(-50%, -50%) rotate(45deg) scale(0);
      }
    }

    .ze-checkbox > input[type=checkbox]:checked + .ze-checkbox-icon > i {
      -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
      transform: translate(-50%, -50%) rotate(45deg) scale(1);
      -webkit-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
    }
    .van-checkbox__icon--round img{
        width: 25px;
    }
    .content-car-number {
        text-align: center;
        height:110px;
      .car-content-title {
        display: block;
        justify-content: space-between;
        padding: 0 32px;
        margin-bottom: 10px;
        span {
          font-size: 15px;
        }
        .ze-checkbox {
          display: flex;
          align-items: center;
        }
        .ze-radio-text {
          font-size: 13px;
        }
        .ze-checkbox-icon {
          color: #FFEDB1 !important;
          margin-right: 8px;
        }
      }
      .content-section {
        .content-section-flex {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
          margin-bottom: 5px;
          .blank-border {
                height: 34px;
                width: 1px;
                border-right: 1px solid #E8E8E8;
                float: left;
                margin-left: 0px;
                z-index: 1;
                margin-top: 3px;
            &.blank-border-first {
              margin-top: 3px;
              position: relative;
                top: -3px;
            }
          }
          &.flex-card {
            color: #000;
            .flex-btn {
              width: 35px;
              height: 40px;
              border: none;
              text-align: center;
              background: #fff;
              font-size: 20px;
              color: #000;
    border-radius: 10px;
            }
            .flex-btns {
              text-align: center;
              background: #fff;
              width: fit-content;
              position: relative;
              height: 40px;
              border-radius: 10px;
              button {
                width: 35px;
                height: 40px;
                border: none;
                font-size: 20px;
                color: #000;
                border-radius: 50%;
                background: transparent;
                float: left;
                margin-left: 0px;
                z-index: 2;
                position: relative;
                &:first-child {
                  margin-left: 0;
                }
              }
            }
            .flex-mid {
              margin: 0 0.1rem;
              span {
                display: block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #ddd;
              }
            }
            .isClick {
              border: 1px solid #ffc200; /*no*/
              z-index: 50;
              border-radius: 0px;
            }
            .isNumClick {
              border-radius: 0px !important;
              border: 1px solid #ffc200 !important; /*no*/
              z-index: 10;
              background-color: #fff !important;
            }
          }
          .flex-card-border {
            border: 1px solid #ddd; /*no*/
            border-radius: 8px;
            background: #fff;
            position: relative;
          }
        }
      }
    }
    .fee-hours {
      padding: 0 32px;
      margin-bottom: 80px;
      .fee-hours-title {
        margin-bottom: 16px;
        font-size: 15px;
      }
      .fee-hours-content {
        display: flex;
        justify-content: space-between;
        margin-bottom: 32px;
        &.fee-hours-num {
          display: block;
        }
      }
      .fee-hours-num {
        width: 102px;
        height: 34px;
        font-size: 13px;
        background: #ececec;
        border-radius: 8px;
        text-align: center;
        line-height: 34px;
      }
      .isFeeHour {
        background: #ffeeb1;
      }
    }
    .searchPay-btn {
      text-align: center;
      /*background-color: #f6f6f6;*/
      margin: 0 32px 0;
      button {
        border-radius: 8px;
        margin-bottom:20px;
        &.searchPay-btn-click {
          box-shadow: 0px 5px 10px 0px rgba(255, 227, 135, 1);
          background: #ffc200;
          color: #101010;
        }
      }
    }
    .keyboard {
      width: 100%;
      height: 250px;
      position: fixed;
      bottom: -300px;
      background: #eeeeee;
      z-index: 10;
      &.animationDown {
        animation: slide_dowms 0.3s ease-out;
        animation-fill-mode: forwards;
      }
      &.animationUp {
        animation: slide_ups 0.3s ease-out;
        animation-fill-mode: forwards;
      }
      .btn-complete {
        height: 40px;
        text-align: right;
        color: #ffc200;
        font-size: 16px;
        width: 100%;
        background: #fff;
        border: none;
        border-top: 1px solid #eee;
        margin-bottom: 10px;
        span {
          margin-right: 15px;
        }
      }
      .keyboard-row {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        padding: 0 8px;
        color: #333;
        &:first-child {
          margin-top: 5px;
        }
        .keyboard-row-items {
          display: flex;
          justify-content: left;
        }
        .keyboard-row-bottom {
          display: flex;
          justify-content: space-between;
        }
        .keyboard-row-item {
          width: 35px;
          height: 40px;
          background: #fff;
          font-size: 15px;
          text-align: center;
          border: 1px solid #ccc; /*no*/
          border-radius: 5px;
          color: #333;
          &.bottom {
            height: 35px;
            width: 68px;
            line-height: 35px;
            background: #fff;
            color: #333;
            /*margin-right: 0.08rem;*/
          }
          &.clear {
            width: 85px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 30px;
            }
          }
        }
        .none-botton {
          border: none;
          height: 40px;
          width: 66px;
          visibility: hidden;
        }
      }
      button {
        &:active {
          background: #f4f4f4 !important;
          color: #999 !important;
        }
      }
    }
    @keyframes slide_ups {
      from {
        bottom: -300px;
      }
      to {
        bottom: 0px;
      }
    }
    @keyframes slide_dowms {
      from {
        bottom: 0px;
      }
      to {
        bottom: -320px;
      }
    }
    button:disabled {
      background: #f4f4f4 !important;
      color: #8f8f8f !important;
    }
    .active {
      &:active {
        background: #f4f4f4 !important;
        color: #999 !important;
      }
    }
  }
</style>

各位有什么不懂的可以评论问问！写的不好的地方请指教！