数字键盘 html,H5支付数字键盘+支付界面列表

实例

html：

本次交易由 汇小宝提供服务

:key="idx" @click="input({num:ite})">{{ite}}

删除

确认

支付

css:

.keyboardbox {

background-color:#f0f0f0;

position:fixed;

bottom:0px;

left:0px;

right:0px;

z-index:100;

}

.numkeyboard {

height:11rem;

display:flex;

background-color:#ebedf0;

}

.btn-area {

width:5rem;

height:11rem;

display:flex;

flex-direction:column;

margin-right:0.2rem;

}

.num-area {

flex-grow:1;

display:flex;

flex-wrap:wrap;}

.row {

width:98.5%;

height:25%;

display:flex;

}

.item {

flex-grow:1;

height:2.4rem;

display:flex;

justify-content:center;

align-items:center;

background-color:#FFFFFF;

border-right:1px solid #ebedf0;

width:32.5%;

font-size:1rem;

font-weight:600;

border-radius:0.5rem;

margin-left:0.2rem;

}

.confirem {

background-color:#1989fa;

color:#FFFFFF;

height:6.7rem;

border-radius:0.5rem;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

margin-bottom:0.35rem;

width:100%;

}

.del {

background-color:#fff;

color:#000;

height:10%;

border-radius:0.5rem;

margin-bottom:0.32rem;

width:100%;

}

.text_hxb{

background-color:#fff;

text-align:center;

color:Gray;

height:10%;

border-radius:0.5rem;

margin-bottom:0.32rem;

width:100%;

}

.HXB{

color:blue;

margin-left:3px;

margin-right:3px;

}

js+vue:

var vue =new Vue({

el:'#app',

data: {

amount:'',//消费金额

merchantName:"${merchantName}",//商家名

merchantNo:"${merchantNo}",//商家Id

payType:type,

sn:"${sn}",

brandFold:true,

numKeybordList: [

[1,2,3],

[4,5,6],

[7,8,9],

['重输',0,'.']

],

position:window.sessionStorage.getItem('position')

},

methods: {

delNumFun() {

if (this.amount.length ==0)return

this.amount =this.amount.substring(0,this.amount.length -1)

},

input(op) {

console.log(op)

if(op.num=='重输'){

this.amount=''

return

}

if (this.amount.length <=6) {

this.amount += op.num

if (this.amount.length ==6) {

this.$emit('getmoneyNum', {

amount:this.amount

})

}

}

},

confirm() {

let exp =/^(([1-9]\d*)|\d)(\.\d{1,2})?$/;

if(!exp.test(this.amount)){

this.isShow =true

this.TipsText ="支付金额格式不对!"

return;

}

},

delNumFun() {

if (this.amount.length ==0)return

this.amount =this.amount.substring(0,this.amount.length -1)

}

}