H5支付数字键盘+支付界面列表
实例
html：
<div class="bank_list_container keyboardbox" v-if="brandFold">
<div class="text_hxb">本次交易由<span class="HXB">汇小宝</span>提供服务</div>
<div class="numkeyboard">
<div class="num-area">
<div class="row" v-for="(item,index) in numKeybordList" :key="index">
<div :class="['item',ite===0?'z':'']" v-for="(ite,idx) in item"
:key="idx" @click="input({num:ite})">{{ite}}</div><span></span>
</div>
</div>
<div class="btn-area">
<div :class="['item','del']" @click="delNumFun">
<span >删除</span>
</div>
<div class="confirem item" @click="pay">
<div>确认</div>
<div>支付</div>
</div>
</div>
</div>
</div>
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)
}
}
