dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化项

Browse Source
This commit is contained in:
cun-nan 2024-01-10 15:40:22 +08:00
parent c54a35084f
commit 21f5b6884a
1 changed files with 159 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
gasStation-uni/components/keyboard/keyboard.vue Normal file
View File

@ -0,0 +1,159 @@
<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>