vue 停车场车牌号键盘微信支付

应公司要求现在需做某医院的停车厂微信公众号支付功能

前端框架 Vant https://youzan.github.io/vant/#/zh-CN/intro

预览demo:http://tangyupeng.top/card/index.html#/

主要功能需求：用户输入手机号监测该手机号是否注册，注册则进入车辆输入界面

现目前只处理了前端的逻辑操作，后续会根据接口处理各种状态，包括微信支付，后续更新

该界面为用户登录，用了vant的数字键盘，方便用户输入

该界面为用户登录后的车辆输入键盘

如果该手机号绑定多辆车后，则有快捷输入方法，用户直接点击车牌号直接选填入输入框

该界面为用户输入自己车牌号后点击支付就可进行微信支付

<template><div class="hello"><div class="parkinput"><van-cell-group ><van-field v-model="value" label="手机号"@blur="shows = false" @focus="show = true" placeholder="请输入用户名" ref="keyvalue" maxlength="11"/><van-fieldv-if="stateShow"v-model="code"type="number"label="验证码"placeholder="请输入验证码"ref="code" /></van-cell-group></div><div class="btnbox"><van-button size="large" class="surebtn" @click="surebtn">登录</van-button></div><van-number-keyboard:show="show"theme="custom"extra-key="#"close-button-text="完成"@blur="show = false"@input="onInput"@delete="onDelete"@close="onclose"/></div>
</template><script>
import { Toast } from 'vant';
export default {name: 'HelloWorld',data () {return {stateShow:false,tell:"",code:"",value: '',showKeyboard: true,show: false}},methods: {onInput(value) {console.log(this);console.log(value);this.value = this.value+value;console.log(this.value);console.log(this.value.length);var keyNumlength=this.value.length;var tell=/^1[3|4|5|7|8][0-9]\d{8}$/;if(keyNumlength>11){Toast('请输入正确的手机号!');}else if(keyNumlength==11&&tell.test(this.value)){this.stateShow=true;this.$emit('headCallBack', 'true'); }else if(keyNumlength<11){this.stateShow=false;}},onDelete() {this.value = this.value.slice(0, this.value.length - 1);console.log(this.$refs.keyvalue);var keyNumlength=this.value.length;if(keyNumlength<11){this.stateShow=false;}},onclose(){console.log(this.value);this.$refs.keyvalue.blur();},surebtn(){var keyNumlength=this.value.length;var tell=/^1[3|4|5|7|8][0-9]\d{8}$/;if(keyNumlength!=11){Toast("请输入正确的手机号！");}else if(!tell.test(this.value)){Toast("请输入正确的手机号！");}else{console.log("a");}}}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>.parkinput{padding:20px 10px;
}
.surebtn{background: #16BFFF;color: #fff;border-radius: 10px;margin-top: 40px;width: 80%;height: 45px;line-height: 45px;
}
.btnbox{text-align: center;
}
</style>

输入键盘支付页面 payment.vue

<template><div id="dispense" navbar-fixed style="width:100%;"><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"><div class="paytonst" v-if="numlist"><ul><li><span class="yuxradis"></span><span @click="carnumclick('京A56480')">京A 56489</span></li><li><span class="yuxradis"></span><span @click="carnumclick('渝D12345')">渝D12345</span></li><li><span class="yuxradis"></span><span @click="carnumclick('川C23456')">川C23456</span></li><li><span class="yuxradis"></span><span @click="carnumclick('京A45678')">京A45678</span></li></ul><div class="paytext"><div><img src="./../../assets/card.png" alt=""></div><div><p class="xqstop">新桥医院停车场</p><p class="addresstexy">重庆市渝北区龙山街道28号 023-25689452</p></div></div></div><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><div class="flex-mid"><span></span></div><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></div></div></div><van-checkbox v-model="checkbox" @change="carTypeChange">新能源</van-checkbox></div></div><div class="paymentcontent"><p>停车详情</p><van-cell-group><van-cell title="停车场:" value="新桥医院停车场" /><van-cell title="停车时长:" value="1h 14min 37s" /><van-cell title="驾入时间:" value="2018-10-11  10:01:37" /><van-cell title="停车费:" value="¥ 4.00" /></van-cell-group></div><div class="surepay"><p>还需支付<span class="paynum">¥4.00</span></p></div><div class="searchPay-btn"><van-button type="primary" @click="addCar" class="paybtn">支付</van-button></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"><!-- <div class="keyboard-row-items"> --><button class="keyboard-row-item bottom" @click="btnBottomClick('新')">新</button><button class="keyboard-row-item bottom" @click="btnBottomClick('临')">临</button><button v-for="j in noneBottomtxt" class="none-botton">{{j}}</button><div class="keyboard-row-item clear" @click="clearClick"></div><!-- </div> --></div></div><div v-if="keyboard == 'num'"><div class="keyboard-row" 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"><!-- <div class="keyboard-row-bottom"> --><button :disabled="isSelectl" v-for="item in carNumBottom" class="keyboard-row-item bottom"@click="btnBottomNumClick(item)">{{item}}</button><button v-for="j in noneBottom" class="none-botton">{{j}}</button><div class="keyboard-row-item clear" @click="clearClick"></div><!-- </div> --></div></div></div></div>
</template><script>
import { NavBar,Toast } from 'vant';// import {ADD_VEHICLE} from '../url'export default{name: 'Dispense',data () {return {numlist:false,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,carTxt: [{ name: ['渝', '京', '冀', '沪', '津', '晋', '蒙', '辽', '吉', '黑'] },{ name: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '桂'] },{ name: ['琼', '粤', '川', '贵', '云', '藏', '陕', '甘', '青', '宁'] }],carNumBottom: ['W', 'X', 'Y', 'Z'],noneBottom: ['', '', '', ''],noneBottomtxt: ['', '', '', '', '', ''],carNum: [{ name: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'] },{ name: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'] },{ name: ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'] }],addedCarNum: '',carnump:""}},watch: {checkbox: function (val) {this.isNumOne = falsethis.isNumTwo = falsethis.isNumThree = falsethis.isNumFour = falsethis.isNumFive = falsethis.isNumSix = falseconst vm = thisif (!val) { // 切换到普通车牌if (vm.numFour) {vm.isNumFive = truevm.key = 7console.log(4, val)}} else { // 切换到新能源车牌if (vm.numFive) {vm.isNumSix = truevm.key = 8console.log(3, val)}}}},methods: {carnumclick(carnum){console.log(carnum.split("")[0]);var numlist=carnum.split("");for(var i=0; i<numlist.length;i++){console.log(numlist[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 = falseif (val === 'one') {this.isOne = truethis.isTwo = falsethis.isThree = falsethis.isFour = falsethis.isFive = falsethis.isSix = falsethis.isSeven = falsethis.isEight = falsethis.isOther = false} else if (val === 'two') {this.isTwo = truethis.isOne = falsethis.isThree = falsethis.isFour = falsethis.isFive = falsethis.isSix = falsethis.isSeven = falsethis.isEight = falsethis.isOther = false} else if (val === 'three') {this.isThree = truethis.isTwo = falsethis.isOne = falsethis.isFour = falsethis.isFive = falsethis.isSix = falsethis.isSeven = falsethis.isEight = falsethis.isOther = false} else if (val === 'four') {this.isFour = truethis.isTwo = falsethis.isThree = falsethis.isOne = falsethis.isFive = falsethis.isSix = falsethis.isSeven = falsethis.isEight = falsethis.isOther = false} else if (val === 'five') {this.isFive = truethis.isTwo = falsethis.isThree = falsethis.isFour = falsethis.isOne = falsethis.isSix = falsethis.isSeven = falsethis.isEight = falsethis.isOther = false} else if (val === 'six') {this.isSix = truethis.isTwo = falsethis.isThree = falsethis.isFour = falsethis.isFive = falsethis.isOne = falsethis.isSeven = falsethis.isEight = falsethis.isOther = false} else if (val === 'seven') {this.isSeven = truethis.isTwo = falsethis.isThree = falsethis.isFour = falsethis.isFive = falsethis.isSix = falsethis.isOne = falsethis.isEight = falsethis.isOther = false} else if (val === 'eight') {this.isEight = truethis.isTwo = falsethis.isThree = falsethis.isFour = falsethis.isFive = falsethis.isSix = falsethis.isSeven = falsethis.isOne = falsethis.isOther = false} else if (val === 'other') {this.isOther = truethis.isTwo = falsethis.isThree = falsethis.isFour = falsethis.isFive = falsethis.isSix = falsethis.isSeven = falsethis.isEight = falsethis.isOne = false}},carTypeChange (val) {this.isNumOne = falsethis.isNumTwo = falsethis.isNumThree = falsethis.isNumFour = falsethis.isNumFive = falsethis.isNumSix = falseif (!val) { // 切换到普通车牌if (this.numFour) {this.isNumFive = truethis.key = 7}} else { // 切换到新能源车牌if (this.numFive) {this.isNumSix = truethis.key = 8}}},btnClickYue () {this.isYue = truethis.isA = falsethis.isUp = truethis.isNumOne = falsethis.isNumTwo = falsethis.isNumThree = falsethis.isNumFour = falsethis.isNumFive = falsethis.isNumSix = falsethis.keyboardShow = truethis.keyboard = 'txt'this.key = 1},btnWordClick (rows, index, i) {var mun=this.carNum+i;console.log(mun);console.log(rows);console.log(index);console.log(this.carnump+i);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);this.selected = iif (this.key === 1) {if (this.areaName === '临') {this.areaLetter = ''this.numOne = ''this.numTwo = ''this.numThree = ''this.numFour = ''this.numFive = ''this.numSix = ''}this.areaName = ithis.isSelectl = falsedocument.getElementById('letter').click()} else if (this.key === 2) {this.areaLetter = idocument.getElementById('numOne').click()} else if (this.key === 3) {this.numOne = idocument.getElementById('numTwo').click()} else if (this.key === 4) {this.numTwo = idocument.getElementById('numThree').click()} else if (this.key === 5) {this.numThree = idocument.getElementById('numFour').click()} else if (this.key === 6) {this.numFour = idocument.getElementById('numFive').click()} else if (this.key === 7) {this.numFive = iif (this.checkbox) {document.getElementById('numSix').click()}} else if (this.key === 8) {this.numSix = i}if (this.key === 7 || this.key === 8) {this.carNumBottom = ['W', 'X', 'Y', 'Z', '港', '澳', '学','武']this.noneBottom = ['']} else if (this.key === 3 || this.key === 4 || this.key === 5 || this.key === 6) {this.carNumBottom = ['W', 'X', 'Y', 'Z']this.noneBottom = ['', '', '', '']}},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 = truethis.isSelectl = falsedocument.getElementById('letter').click()} else if (val === '临') {this.areaName = '临'this.isSelectl = truethis.isSelectx = falsethis.isDisable = truethis.areaLetter = ''this.numOne = ''this.numTwo = ''this.numThree = ''this.numFour = ''this.numFive = ''this.numSix = ''document.getElementById('letter').click('isLin')}},btnBottomNumClick (i) {this.selected = iif (this.key === 2) {this.areaLetter = idocument.getElementById('numOne').click()} else if (this.key === 3) {this.numOne = idocument.getElementById('numTwo').click()} else if (this.key === 4) {this.numTwo = idocument.getElementById('numThree').click()} else if (this.key === 5) {this.numThree = idocument.getElementById('numFour').click()} else if (this.key === 6) {this.numFour = idocument.getElementById('numFive').click()} else if (this.key === 7) {this.numFive = iif (this.checkbox) {document.getElementById('numSix').click()}} else if (this.key === 8) {this.numSix = i}},btnClickA () {this.isDisable = truethis.isA = truethis.isYue = falsethis.isUp = truethis.isNumOne = falsethis.isNumTwo = falsethis.isNumThree = falsethis.isNumFour = falsethis.isNumFive = falsethis.isNumSix = falsethis.keyboardShow = truethis.keyboard = 'num'this.key = 2},btnClickNum (name) {console.log(name);if (this.isSelectl) {this.isDisable = true} else {this.isDisable = false}this.keyboard = 'num'this.keyboardShow = truethis.isYue = falsethis.isA = falsethis.isNumOne = falsethis.isNumTwo = falsethis.isNumThree = falsethis.isNumFour = falsethis.isNumFive = falsethis.isNumSix = falsethis.isUp = trueif (name === 'one') {this.isNumOne = truethis.key = 3} else if (name === 'two') {this.isNumTwo = truethis.key = 4} else if (name === 'three') {this.isNumThree = truethis.key = 5} else if (name === 'four') {this.isNumFour = truethis.key = 6} else if (name === 'five') {this.isNumFive = truethis.key = 7} else if (name === 'six') {this.isNumSix = truethis.key = 8}if (name === 'five' || name === 'six') {this.carNumBottom = ['W', 'X', 'Y', 'Z', '港', '澳', '学']this.noneBottom = ['']} else {this.carNumBottom = ['W', 'X', 'Y', 'Z']this.noneBottom = ['', '', '', '']}},completeClick () {this.isYue = falsethis.isA = falsethis.isNumOne = falsethis.isNumTwo = falsethis.isNumThree = falsethis.isNumFour = falsethis.isNumFive = falsethis.isNumSix = falsethis.isUp = falsethis.isDown = truethis.keyboardShow = false},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 numif (!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 {console.log(num);// let data = {//     vehiclenum: num// }// this.$http.post(ADD_VEHICLE, data).then(res => {//   if (res.data.ret === 0) {//     this.addedCarNum = num//     this.$router.push({name: 'AddSuccess', params: {addedCarNum: this.addedCarNum}})//   } else {//     this.$dialog.toast({mes:res.data.message,timeout:1200})//   }// })}}},mounted () {this.btnClickYue()},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">
.van-checkbox{float: right;padding-right: 14px;font-size: 13px;
}
.van-checkbox__icon, .van-checkbox__label{line-height: 15px;
}
.van-checkbox__icon .van-icon{width: 15px;height: 15px;
}
.ze-checkbox-text{font-size:13px;padding-right: 10px;
}
.ze-checkbox{float: right;
}
.surepay{font-family: PingFangSC-Regular;
font-size: 14px;
color: #8C8C8C;
letter-spacing: -0.34px;text-align: center;margin: 30px 0;
}
.paynum{font-family: PingFangSC-Regular;
font-size: 28px;
color: #EA2929;
letter-spacing: -0.7px;padding-left: 10px;
}
.paybtn{height: 35px;line-height: 35px;background: #0290FF;border: 1px solid #0290FF;width: 100px;float: right;
}
.titlespan{font-family: PingFangSC-Regular;
font-size: 14px;
color: #8C8C8C;
letter-spacing: -0.34px;
}
.paymentcontent{margin-top: 40px;margin: 10px;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;
}#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;}.content-car-number {text-align: center;height:120px;.car-content-title {display: block;justify-content: space-between;padding: 0 32px;margin-bottom: 16px;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: 40px;width: 1px; /*no*/border-right: 1px solid #ddd; /*no*/float: left;margin-left: 0px;z-index: 1;&.blank-border-first {margin-top: 0px;}}&.flex-card {color: #000;.flex-btn {width: 40px;height: 40px;border: none;text-align: center;background: #fff;font-size: 20px;color: #000;}.flex-btns {text-align: center;background: #fff;width: fit-content;position: relative;height: 40px;button {width: 34px;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: 8px;}.isNumClick {border-radius: 8px !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:10px;&.searchPay-btn-click {box-shadow: 0px 5px 10px 0px rgba(255, 227, 135, 1);background: #ffc200;color: #101010;}}}.keyboard {width: 100%;height: 300px;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: 20px;width: 100%;background: #fff;border: none;border-top: 1px solid #eee;margin-bottom: 10px;span {margin-right: 30px;}}.keyboard-row {margin-top: 20px;display: flex;justify-content: space-between;padding: 0 8px;color: #333;&:first-child {margin-top: 0;}.keyboard-row-items {display: flex;justify-content: left;}.keyboard-row-bottom {display: flex;justify-content: space-between;}.keyboard-row-item {width: 45px;height: 45px;background: #fff;font-size: 15px;text-align: center;border: 1px solid #ccc; /*no*/border-radius: 10px;color: #333;&.bottom {height: 45px;width: 45px;line-height: 45px;background: #fff;color: #333;/*margin-right: 0.08rem;*/}&.clear {width: 90px;height: 50px;display: flex;align-items: center;justify-content: center;img {width: 62px;}}}.none-botton {border: none;height: 80px;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>

index.vue 显示两个组件

<template><div class="hello"><logint v-if="logintype" v-on:headCallBack="headCall"></logint><payment v-if="paymentype"></payment></div>
</template><script>
import logint from './login'
import payment from './payment'
export default {name: 'HelloWorld',data () {return {logintype:true,paymentype:false,msg: 'Welcomeaa to Your Vue.js App'}},methods: {headCall:function(msg){console.log(msg);if(msg=="true"){this.paymentype=true;this.logintype=false;}}},components:{logint,payment}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

vue 停车场车牌号键盘微信支付相关推荐

微信小程序模拟车牌号键盘
微信小程序模拟车牌号键盘效果图中文键盘英文数字键盘项目地址:https://github.com/ushars/keyboard
微信小程序车牌号组件，车牌号键盘，兼容新能源号牌
话不多说,先看图使用方法: 一.将组件代码放入项目任意目录二.在需要使用键盘组件的页面json文件配置引入组件三.在模板页面wxml调用组件 <carNumber custom-input ...
VUE前后分离调起微信支付
@ VUE调起微信支付 VUE前后分离调起微信支付支付很简单,但每次都是在网上直接扒下来使用,老年人记忆,于是就自己记录一下,方便以后快速的粘贴复制; 第一步 :VUE 需要安装微信支付模块 // ...
uniapp - 实现车牌号键盘与格子间隔显示组件，汽车牌照录入支持自定义样式、新能源等（附带组件完整源码，开箱即用，稍微改改就能用）
效果图 uniapp 全平台兼容,车牌号键盘输入.分格显示功能示例源码,注释很多! 可以直接复制一下,然后自己改改样式或功能就能使了. 示例源码复制,运行. &
微信小程序组件（车牌号输入，支付键盘，滑块验证）
目录车牌号输入组件密码支付键盘组件滑块验证组件车牌号输入组件如图基于微信小程序组件封装,输出值为当前选择车牌号,可回显车牌号. 支持7位8位车牌号,因为我的项目没有此需求,所以没有测试,具 ...
android 自定义键盘_Android自定义输入车牌号键盘、车牌简称，数字，字母键盘...
本文来自阿钟的投稿,全文阅读大约十分钟为了便于用户快捷的输入车牌号码便需要自定义个车牌键盘,而不是使用系统的键盘输入,上效果图: 横屏效果图片竖屏效果图片一.首先我们要来分析一下需要做哪些东 ...
laravel ajax vue6,详解用vue.js和laravel实现微信支付
注:此项是微信公众号开发,请在往下看之前,先实现网页微信授权登陆功能,具体参看我简书的另一篇文章:https://www.jb51.net/article/117004.htm 1.打开app/con ...
Hbuildx 使用vue打包的App实现微信支付功能
很多兄弟在做App微信支付的时候出现报错,code:62000? code:-1? code:-100? 那是你没看本博主的文章! 前言: 本文章使用的是vue+h5+plus技术,结合hbuildx ...
uniapp 车牌号输入车牌号键盘新能源车牌键盘特殊车辆车牌键盘
1:效果图 2:代码: <template><view class="container"><view class="car_type_bo ...

vue 停车场车牌号键盘微信支付

vue 停车场车牌号键盘微信支付相关推荐

最新文章

热门文章