模板文件
<template>
<div class="keybraodNum">
<!-- 支付金额 -->
<div class="monenyBox">
<div class="logoBox">
<div class="image">
<span class="iconfont icon-icon_A"></span>
</div>
<div class="shopName">商家名称</div>
</div>
<div class="monenyNum">
<div class="payMoneny">支付金额</div>
<div class="content_num">
<div>￥</div>
<div v-for="item in inputArray" :key="item" class="content_item">{
{moneyNum[item-1]}}</div>
<div class="blink"></div>
</div>
</div>
</div>
<!-- 支付方式 -->
<div class="playSelete">
<div>
<section ref="txttype" class="selectPay" :class="brandFold==true?'openActive':''">
<ul class="payBox">
<li class="payWay" v-for="(item,index) in payList" @click="seletePay(index,item)">
<div>
<span class="iconfont iconMg-r" :class="item.cuIcon"></span>
<span class="payNames">{
{item.name}}</span>
</div>
<div>
<span class="iconfont" :class="payIndex==index?'icon-radio':'icon-RadioButton'"></span>
</div>
</li>
</ul>
</section>
</div>
<div v-if="payList.length > 7 || nomore" v-on:click="changeFoldState" class="open">
<span>{
{brandFold?'更多支付方式':'收起'}}<i class="iconfont" :class="brandFold==false?'icon-shuangjiantoushang':'icon-shuangjiantouxia'"></i></span>
</div>
</div>
<Tips :isShow="isShow" :TipsText="TipsText" @closeDialogFather="getSonCancel"></Tips>
<!-- 手机键盘 -->
<div class="keyboardbox" v-if="brandFold">
<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>
</div>
</div>
<div class="btn-area">
<div :class="['item','del']" @click="delNumFun">
<span class="iconfont icon-yijianshanchu"></span>
</div>
<div class="confirem item" @click="confirm">
<div>立即</div>
<div>支付</div>
</div>
</div>
</div>
</div>
</div>
</template>
js部分
<script>
import Tips from "@/components/tips.vue";
export default {
data() {
return {
inputArray: [1, 2, 3, 4, 5, 6], //输入金额的长度
numKeybordList: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[0, '.']
],
moneyNum: '',
TipsText:'',
showKeyboard:true,
nomore: true,
brandFold: false,
isBlanced: true,
show_key:false,
isShow:false,
payList: [{
cuIcon: 'icon-weixinzhifu',
id: 1,
name: '微信支付',
}, {
cuIcon: 'icon-zhifubao',
id: 2,
name: '支付宝支付'
}, {
cuIcon: 'icon-py_yinlian',
id: 3,
name: '银联支付'
}, {
cuIcon: 'icon-yunshanfu',
id: 4,
name: '云闪付'
},
{
cuIcon: 'icon-zhifujinge',
id: 5,
name: '其他支付'
}
],
payIndex: 0, //默认选中第一个
payName:'微信支付',
isBlanced: true //用于取消选中
};
},
mounted() {
let hei = this.$refs.txttype.clientHeight;
if (hei > 113) {
this.brandFold = true
} else if (hei == 113) {
this.brandFold = false
this.nomore = false
}
},
methods: {
getSonCancel(val){
this.isShow=val
},
confirm() {
let exp = /^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
if(!exp.test(this.moneyNum)){
this.isShow = true
this.TipsText = "支付金额格式不对!"
return;
}
},
delNumFun() {
if (this.moneyNum.length == 0) return
this.moneyNum = this.moneyNum.substring(0, this.moneyNum.length - 1)
},
input(op) {
if (this.moneyNum.length <= 6) {
this.moneyNum += op.num
if (this.moneyNum.length == 6) {
this.$emit('getmoneyNum', {
moneyNum: this.moneyNum
})
}
}
},
changeFoldState() {
this.brandFold = !this.brandFold
},
seletePay(index, item) {
this.payName = item.name
this.isBlanced = !this.isBlanced;
if (this.payIndex == index) {
if (!this.isBlanced) {
this.payIndex = -1;
} else {
this.payIndex = index;
}
} else {
this.payIndex = index;
}
},
},
components:{
Tips
}
}
</script>
css部分
<style lang="scss" scoped>
.monenyBox {
margin: 0 auto;
background-color: #fff;
padding: 1rem 0.5rem 1rem;
.logoBox {
display: flex;
flex-direction: row;
align-items: center;
.image {
width: 1.5rem;
height: 1.5rem;
}
.shopName {
margin-left: 0.5rem;
font-size: 0.8rem;
}
}
.monenyNum {
background-color: #ccc;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0.5rem;
margin-top: 1rem;
height: 1.5rem;
.payMoneny {
font-size: .8rem;
}
.content_num {
display: flex;
align-items: center;
flex-direction: row;
.content_item {
font-size: 1.3rem;
}
.blink {
animation: 1s blink infinite;
border: none;
margin: 0;
height: 1.2rem;
width: 2px;
// position:absolute;
// left:174px;
// top:5px;
z-index: 1;
}
}
}
}
// 支付方式
.playSelete {
margin: 0.3rem auto;
background-color: #fff;
padding: .5rem 0.5rem .5rem;
.selectPay {
.payBox {
padding: 0px;
margin: 0px;
.payWay {
height: 2rem;
display: flex;
box-sizing: border-box;
font-size: .7rem;
align-items: center;
justify-content: space-between;
align-items: center;
line-height: 2rem;
.iconMg-r {
margin-right: 0.1rem;
}
.payNames{
position: relative;
top:-2px;
}
.active {
color: #1989fa;
}
}
}
}
.openActive {
height: 6rem;
overflow: hidden;
}
.open {
text-align: center;
font-size: .7rem;
color: #1989fa;
}
}
.keyboardbox {
background-color: #f0f0f0;
position: fixed;
bottom: 0px;
// top: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;
.item {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.del {
background-color: #fff;
color: #000;
height: 10%;
border-radius: 0.5rem;
margin-bottom: 0.32rem;
&.active {
background-color: #f1f3f5;
}
}
.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;
&.active {
background-color: #0570db;
}
}
}
.num-area {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
.row {
width: 98.5%;
height: 25%;
display: flex;
// margin-top: 1px;
.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;
&.active {
background-color: #ebedf0;
}
&.z {
flex-grow: 2;
width: 66.66%;
}
&.disabled {
background: #FFFFFF;
color: #B9B9B9;
}
}
}
}
}
}
@keyframes blink {
50% {
color: #000;
background: #0570db;
opacity: .5;
}
}
</style>