445 lines
14 KiB
Vue
445 lines
14 KiB
Vue
<template name="neoceansoft-keyboard">
|
|
|
|
<view :style="{'height':popupHeight}" class="numView">
|
|
|
|
<view style="display: flex;">
|
|
|
|
|
|
<view :style="{'width':numWidht}">
|
|
|
|
<view style="width: 100%; height: 2rpx;background-color: #efefef;" />
|
|
<view style="display: flex;">
|
|
<view v-for="(item,index) in num1" :key="index" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
|
|
class="numLayout">
|
|
<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
|
|
<button plain="true" hover-class="numClickCss"
|
|
:style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
|
|
@click="btnClick(item)">
|
|
{{item}}
|
|
</button>
|
|
<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view style="width: 100%; height: 2rpx;background-color: #efefef;" />
|
|
<view style="display: flex;">
|
|
<view v-for="(item,index) in num2" :key="index" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
|
|
class="numLayout">
|
|
<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
|
|
<button plain="true" hover-class="numClickCss"
|
|
:style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
|
|
@click="btnClick(item)">
|
|
{{item}}
|
|
</button>
|
|
<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view style="width: 100%; height: 2rpx;background-color: #efefef;" />
|
|
<view style="display: flex;">
|
|
<view v-for="(item,index) in num3" :key="index" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
|
|
class="numLayout">
|
|
<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
|
|
<button plain="true" hover-class="numClickCss"
|
|
:style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
|
|
@click="btnClick(item)">
|
|
{{item}}
|
|
</button>
|
|
<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view style="width: 100%; height: 2rpx;background-color: #efefef;" />
|
|
<view style="display: flex;">
|
|
<view v-for="(item,index) in num4" :key="index" class="numLayout">
|
|
<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
|
|
<button plain="true" v-if="index==2||(keyboardType == 'password'&&index==1)"
|
|
:hover-class="keyboardType=='payment'?'':'numClickCss'"
|
|
:style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
|
|
@click="btnClick(item.type)">
|
|
<view v-if="keyboardType!='payment'" class="iconfont icon-deletenumber"></view>
|
|
|
|
</button>
|
|
<button v-else plain="true" hover-class="numClickCss"
|
|
:style="{'height':numBtnHeight,'width':keyboardType=='password'||(keyboardType=='payment'&&index==0)?((numBtnWidth*2)-1)+'px':(numBtnWidth-1)+'px'}"
|
|
class="numBtn" @click="btnClick(item.type)">
|
|
{{item.name}}
|
|
</button>
|
|
<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view v-if="keyboardType=='payment'"
|
|
:style="{'width':payboardWidth,'height':payboardHeight,'display':'flex'}">
|
|
<view style="width: 2rpx;height: 100%;background-color: #efefef;"></view>
|
|
<view :style="{'display':'flex','width':'100%','height':'100%'}">
|
|
|
|
<view style="width: 100%;height: 100%;">
|
|
<view style="width: 100%;height: 2rpx;background-color: #efefef;"></view>
|
|
<button plain="true" hover-class="numClickCss"
|
|
:style="{'height':numBtnHeight,'width':(numBtnWidth-1)+'px'}" class="numBtn" @click="btnClick(-2)">
|
|
<view class="iconfont icon-deletenumber"></view>
|
|
|
|
</button>
|
|
<button plain="true" hover-class="behaviorCommonCss" :style="{'height':behaviorBtnHeight,'width':(numBtnWidth-1),'color':behaviorTextColor,
|
|
'background':behaviorBgColor}" class="behaviorCss" @click="paymentClick()">
|
|
{{behaviorName}}
|
|
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
numBtnWidth: 0,
|
|
numBtnHeight: '',
|
|
behaviorBtnHeight: '',
|
|
popupHeight: '',
|
|
payboardWidth: '',
|
|
payboardHeight: '',
|
|
numWidht: '',
|
|
numOpWidht: '',
|
|
opBtnWidth: '',
|
|
opBtnHeight1: '',
|
|
opBtnHeight2: '',
|
|
nums: [],
|
|
isShowPay: true,
|
|
bl: 0.45,
|
|
num1: [1, 2, 3],
|
|
num2: [4, 5, 6],
|
|
num3: [7, 8, 9],
|
|
num4: [{
|
|
name: '.',
|
|
type: '.'
|
|
}, {
|
|
name: '0',
|
|
type: 0
|
|
}, {
|
|
name: '删除',
|
|
type: -2
|
|
}],
|
|
|
|
|
|
}
|
|
},
|
|
props: {
|
|
keyboardType: {
|
|
type: String,
|
|
default: "number" // number idcard,payment,password
|
|
},
|
|
behaviorName: {
|
|
type: String,
|
|
default: '付款'
|
|
},
|
|
behaviorTextColor: {
|
|
type: String,
|
|
default: '#ffffff'
|
|
},
|
|
behaviorBgColor: {
|
|
type: String,
|
|
default: '#41ae3c'
|
|
}
|
|
},
|
|
|
|
|
|
created() {
|
|
|
|
|
|
var that = this
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
console.log("页面信息：" + JSON.stringify(res))
|
|
var width = 0
|
|
if (that.keyboardType == 'payment') {
|
|
width = (res.screenWidth / 4) * 3
|
|
} else {
|
|
width = (res.screenWidth / 3) * 3
|
|
}
|
|
var height = ''
|
|
if (that.keyboardType == 'payment') {
|
|
that.bl = 0.58
|
|
height = width / 3 * that.bl
|
|
} else {
|
|
height = width / 3 * that.bl
|
|
}
|
|
|
|
that.opBtnWidth = (res.screenWidth / 4) * 1 + 'px'
|
|
// that.opBtnHeight1 = (height * 4) * (3 / 5) + 'px'
|
|
// that.opBtnHeight2 = (height * 4) * (2 / 5) + 'px'
|
|
that.opBtnHeight1 = ((height * 2) + 2.5) + 'px'
|
|
that.opBtnHeight2 = ((height * 2) + 2) + 'px'
|
|
that.numWidht = width + 'px'
|
|
that.payboardWidth = (res.screenWidth - width) + 'px'
|
|
that.payboardHeight = height * 3
|
|
that.numBtnWidth = width / 3
|
|
that.numBtnHeight = height + 'px'
|
|
that.behaviorBtnHeight = height * 3 + 'px'
|
|
that.popupHeight = (height * 4) + 'px'
|
|
|
|
}
|
|
})
|
|
if (this.keyboardType == 'password') {
|
|
//密码键盘，不存在小数点问题
|
|
this.num4.splice(0, 1)
|
|
} else if (this.keyboardType == 'idcard') {
|
|
this.num4[0].name = 'X'
|
|
this.num4[0].type = 'X'
|
|
} else if (this.keyboardType == 'payment') {
|
|
this.num4.splice(2, 1)
|
|
var bean = this.num4[0]
|
|
this.num4[0] = this.num4[1]
|
|
this.num4[1] = bean
|
|
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
paymentClick(){
|
|
this.$emit('paymentClick')
|
|
},
|
|
|
|
|
|
// 数字点击事件回调
|
|
btnClick(item) {
|
|
// this.$emit('click',item)
|
|
this.$emit('keyclick', item)
|
|
this.inputNum(item)
|
|
},
|
|
// 输入处理事件回调
|
|
inputNum(item) {
|
|
switch (item) {
|
|
case 0:
|
|
//todo 验证待处理
|
|
this.putNum('0')
|
|
break
|
|
case 1:
|
|
//todo 验证待处理
|
|
this.putNum('1')
|
|
|
|
break
|
|
case 2:
|
|
//todo 验证待处理
|
|
this.putNum('2')
|
|
break
|
|
case 3:
|
|
//todo 验证待处理
|
|
this.putNum('3')
|
|
break
|
|
case 4:
|
|
//todo 验证待处理
|
|
this.putNum('4')
|
|
break
|
|
case 5:
|
|
//todo 验证待处理
|
|
this.putNum('5')
|
|
break
|
|
case 6:
|
|
//todo 验证待处理
|
|
this.putNum('6')
|
|
break
|
|
case 7:
|
|
//todo 验证待处理
|
|
this.putNum('7')
|
|
break
|
|
case 8:
|
|
//todo 验证待处理
|
|
this.putNum('8')
|
|
break
|
|
case 9:
|
|
//todo 验证待处理
|
|
this.putNum('9')
|
|
break
|
|
case '.':
|
|
this.putNum('.')
|
|
break
|
|
case 'X':
|
|
this.putNum('X')
|
|
break
|
|
case -2:
|
|
this.del()
|
|
break
|
|
|
|
}
|
|
},
|
|
putNum(data) {
|
|
this.nums.push(data)
|
|
var result = this.nums.join('')
|
|
this.$emit('result', result)
|
|
},
|
|
del() {
|
|
if (this.nums.length == 0) {
|
|
return
|
|
}
|
|
this.nums.splice(this.nums.length - 1, 1)
|
|
var result = this.nums.join('')
|
|
this.$emit('result', result)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@font-face {
|
|
font-family: 'iconfont';
|
|
|
|
src: url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.woff2?t=1625469481487') format('woff2'),
|
|
url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.woff?t=1625469481487') format('woff'),
|
|
url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.ttf?t=1625469481487') format('truetype');
|
|
|
|
}
|
|
|
|
|
|
.iconfont {
|
|
font-family: "iconfont" !important;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.icon-deletenumber:before {
|
|
content: "\e666";
|
|
}
|
|
|
|
|
|
|
|
|
|
.numView {
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.numBtn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
border-radius: 20rpx;
|
|
border: 0rpx solid #ffffff;
|
|
|
|
|
|
}
|
|
|
|
.behaviorCss {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
border-radius: 0rpx;
|
|
border: 0rpx solid #E0E0E0;
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
|
|
}
|
|
|
|
.behaviorCommonCss {
|
|
background-color: #efefef !important;
|
|
transform: translate(1rpx, 1rpx);
|
|
|
|
}
|
|
|
|
.numLayout {
|
|
display: flex;
|
|
}
|
|
|
|
.numLayout2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.boderSy {
|
|
width: 2rpx;
|
|
background-color: #efefef;
|
|
}
|
|
|
|
.opBtn1 {
|
|
background-color: #f29100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
align-content: center;
|
|
color: #FFFFFF;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
.numClickCss {
|
|
background-color: #efefef;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
|
|
.opBtn1x {
|
|
background-color: #ffd28b;
|
|
display: flex;
|
|
color: #9fa0a0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
align-content: center;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
.opBtn2 {
|
|
background-color: #0090ff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
align-content: center;
|
|
color: #FFFFFF;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.opBtn2x {
|
|
background-color: #7fcff4;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
align-content: center;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
color: #9fa0a0;
|
|
|
|
}
|
|
|
|
.customStyle {
|
|
color: 'red'
|
|
}
|
|
</style>
|