160 lines
3.6 KiB
Vue
160 lines
3.6 KiB
Vue
<template>
|
||
<view>
|
||
<view>
|
||
<view style="text-align: center;height: 50px;font-size: 20px;line-height: 50px;">{{value}}</view>
|
||
<view class="key-bom">
|
||
<view class="wrap">
|
||
<view class="key-line">
|
||
<view class="key-num" @click="valChange(1)">1</view>
|
||
<view class="key-num" @click="valChange(2)">2</view>
|
||
<view class="key-num" @click="valChange(3)">3</view>
|
||
</view>
|
||
<view class="key-line">
|
||
<view class="key-num" @click="valChange(4)">4</view>
|
||
<view class="key-num" @click="valChange(5)">5</view>
|
||
<view class="key-num" @click="valChange(6)">6</view>
|
||
</view>
|
||
<view class="key-line">
|
||
<view class="key-num" @click="valChange(7)">7</view>
|
||
<view class="key-num" @click="valChange(8)">8</view>
|
||
<view class="key-num" @click="valChange(9)">9</view>
|
||
</view>
|
||
<view class="key-line">
|
||
<view class="key-zero" @click="valChange(0)">0</view>
|
||
<view class="key-num" @click="valChange('.')">.</view>
|
||
</view>
|
||
</view>
|
||
<view class="wrap2">
|
||
<view class="key-back" @click="backspace"><u-icon name="backspace" size="28"></u-icon></view>
|
||
<view v-if="pApplt=='WECHAT'" class="key-pay" @click="choosePayMethod">支付</view>
|
||
<view v-else class="key-pay1" @click="choosePayMethod">支付</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props:['pApplt'],
|
||
data() {
|
||
return {
|
||
value:"",
|
||
// 小程序类型：WECHAT 微信 ALIPAY 支付宝
|
||
appltType:"WECHAT",
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.appltType = this.pApplt
|
||
},
|
||
methods: {
|
||
valChange(val) {
|
||
// 将每次按键的值拼接到value变量中，注意+=写法
|
||
uni.vibrateShort({
|
||
success: function () {}
|
||
});
|
||
let index = this.value.indexOf(".")
|
||
if(index!=-1){
|
||
if ((this.value.length-index)>=3){
|
||
return;
|
||
}
|
||
|
||
}else{
|
||
if (this.value.length>=7 && val!="."){
|
||
return;
|
||
}
|
||
}
|
||
this.value += val;
|
||
// console.log(this.value.indexOf("."),this.value.length-index)
|
||
this.$emit('amount', this.value);
|
||
// console.log(this.value);
|
||
},
|
||
// 退格键被点击
|
||
backspace() {
|
||
// 删除value的最后一个字符
|
||
if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
|
||
this.$emit('backVal', this.value);
|
||
uni.vibrateShort({
|
||
success: function () {}
|
||
});
|
||
// console.log(this.value);
|
||
},
|
||
// 选择支付方式
|
||
choosePayMethod(){
|
||
uni.vibrateShort({
|
||
success: function () {}
|
||
});
|
||
this.$emit('isPay', true);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.key-bom{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background-color: gainsboro;
|
||
margin-bottom: 20px;
|
||
}
|
||
.wrap{
|
||
width: 73%;
|
||
}
|
||
.key-line{
|
||
width: 100%;
|
||
height: 45px;
|
||
line-height: 45px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin: 5px 0;
|
||
}
|
||
.key-num{
|
||
width: 31%;
|
||
text-align: center;
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
}
|
||
.key-zero{
|
||
width: 64%;
|
||
text-align: center;
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
}
|
||
.wrap2{
|
||
width: 24%;
|
||
}
|
||
.key-back{
|
||
width: 96%;
|
||
height: 45px;
|
||
line-height: 45px;
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
margin: 5px 0;
|
||
padding-top: 10%;
|
||
padding-left: 30%;
|
||
box-sizing: border-box;
|
||
}
|
||
.key-pay{
|
||
width: 96%;
|
||
height: 145px;
|
||
line-height: 145px;
|
||
text-align: center;
|
||
background-color: #1fbe1d;
|
||
//background-color: #2773fc;
|
||
color: white;
|
||
border-radius: 5px;
|
||
margin: 5px 0;
|
||
}
|
||
.key-pay1{
|
||
width: 96%;
|
||
height: 145px;
|
||
line-height: 145px;
|
||
text-align: center;
|
||
// background-color: #1fbe1d;
|
||
background-color: #2773fc;
|
||
color: white;
|
||
border-radius: 5px;
|
||
margin: 5px 0;
|
||
}
|
||
</style>
|