<template name="keyboards">
<view class="keyboards">
<view class="key" data-number="7" @tap="input(7)"></view>
<view class="key" data-number="8" @tap="input(8)"></view>
<view class="key" data-number="9" @tap="input(9)"></view>
<view class="key ac" data-number="AC" @click.stop="clearInput"></view>
<view class="key" data-number="4" @tap="input(4)"></view>
<view class="key" data-number="5" @tap="input(5)"></view>
<view class="key" data-number="6" @tap="input(6)"></view>
<view
class="key next"
:data-number="nextTitle"
:data-disabled="nextDisabled"
@tap="next"
><slot name="next" /></view>
<view class="key" data-number="1" @tap="input(1)"></view>
<view class="key" data-number="2" @tap="input(2)"></view>
<view class="key" data-number="3" @tap="input(3)"></view>
<view
class="key enter"
:data-number="enterTitle"
:data-disabled="enterDisabled"
@tap="handleEnter"
></view>
<view class="key" data-number="0" @tap="input(0)"></view>
<view class="key" data-number="." @tap="inputDecimal('.')"></view>
<view class="key delete" @tap="deleteInput"><img :src="IMAGE_HOST + '/keydelete.svg'" /></view>
</view>
</template>
<script>
export default {
name: "keyboards",
props: {
nextTitle: {
type: String,
default: "",
},
enterTitle: {
type: String,
default: "",
},
nextDisabled: {
// 下一项
type: Boolean,
default: false,
},
enterDisabled: {
// 确认
type: Boolean,
default: false,
},
},
data() {
return {
IMAGE_HOST: this.$IMAGE_HOST
}
},
onLoad() {
this.openVoice();
},
methods: {
vibrateShort() {
// uni.vibrateLong(); //震动大
uni.vibrateShort({
success: function () {
console.log("success");
},
});
},
clearInput() {
this.$emit('clearInput')
},
input(val) {
this.$emit('inputNumber', val)
},
deleteInput() {
this.$emit('deleteInput')
},
inputDecimal(val) {
this.$emit('inputDecimal',val)
},
next() {
if (!this.nextDisabled) {
this.$emit('next')
} else {
this.$emit('nextDisabledCall')
}
},
/**
* 收银或者确认
*/
handleEnter() {
this.$emit('comfirm')
// if (this.enterDisabled) {
// // 收银
// this.$emit('submit')
// } else {
// // 确认
// }
}
},
};
</script>
<style lang="scss">
@import "./index.scss";
</style>
.keyboards {
background: #e6ecf3;
padding : 20rpx;
overflow : hidden;
.key {
position : relative;
display : flex;
align-items : center;
justify-content : center;
height : 110rpx;
width : calc(25% - 20rpx);
float : left;
background-image: linear-gradient(180deg, #4e799e 0%, #355272 100%);
box-shadow : 0 2px 3px 0 rgba(0, 0, 0, 0.3);
border-radius : 16rpx;
margin : 10rpx;
text-align : center;
font-size : 60rpx;
font-weight : 500;
color : white;
&::before {
content: attr(data-number);
z-index: 2;
}
&::after {
content : '';
position : absolute;
top : 2rpx;
left : 2rpx;
right : 2rpx;
bottom : 8rpx;
background-image: linear-gradient(0deg, #4E799E 0%, #355272 100%);
border-radius : 15rpx;
z-index : 1;
}
//AC
&.ac {
background-image: linear-gradient(180deg, #9FC4E4 0%, #4E6E92 100%);
&::after {
background-image: linear-gradient(0deg, #9FC4E4 0%, #5D7896 100%);
}
}
//Next
&.next {
font-size : 32rpx;
background-image: linear-gradient(180deg, #8EC0F8 0%, #3769C6 100%);
&::after {
background-image: linear-gradient(0deg, #5099EC 0%, #1E74D4 100%);
}
}
// Enter
&.enter {
height : 240rpx;
float : right;
font-size : 44rpx;
background-image: linear-gradient(180deg, #0DB622 0%, #187A24 100%);
&::after {
background-image: linear-gradient(0deg, #0DB622 0%, #187c24 100%);
}
}
// Delete
&.delete {
img {
width : 52rpx;
height : 40rpx;
z-index: 2;
}
}
&:active {
&::after {
bottom : 2rpx;
background-image: linear-gradient(0deg, #4E799E 0%, #16304e 100%);
}
&.ac {
&::after {
background-image: linear-gradient(0deg, #9FC4E4 0%, #1C3B5F 100%);
}
}
&.next {
&::after {
background-image: linear-gradient(0deg, #5099EC 0%, #063C79 100%);
}
}
&.enter {
&::after {
background-image: linear-gradient(0deg, #0DB622 0%, #095712 100%);
}
}
}
&[data-disabled="true"] {
opacity : .4;
background-image: initial;
background-color: #888;
//pointer-events : none;
&::after {
display: none;
}
}
}
}
<keyboards
next-title="下一项"
:next-disabled="false"
enter-title="确定"
:enter-disabled="false"
@next="nextClick"
@deleteInput="deleteInput"
@inputDecimal="inputDecimal"
@inputNumber="inputNumber"
@clearInput="clearInput"
@comfirm="saveToCart"
/>