152 lines
3.2 KiB
Vue
152 lines
3.2 KiB
Vue
<template>
|
|
<view class="jq-keyboard">
|
|
<view class="left">
|
|
<view v-for="(item,index) in vdata.number" :key="index" @tap="change(item)"
|
|
class="common" hover-class="hover-but" hover-start-time="10" hover-stay-time="60">
|
|
{{ item }}
|
|
</view>
|
|
<view @tap="change('.')" class="common" hover-class="hover-but" hover-start-time="10" hover-stay-time="60">.</view>
|
|
<view @tap="change('0')" class="common zero" hover-class="hover-but" hover-start-time="10" hover-stay-time="60">0</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="common del" hover-class="hover-but" hover-start-time="10" hover-stay-time="60" @tap="del">
|
|
<image src="/static/img/del.svg"></image>
|
|
</view>
|
|
<view class="common del" hover-class="hover-but" hover-start-time="10" hover-stay-time="60" @tap="clear">C</view>
|
|
<view
|
|
class="common pay"
|
|
hover-class="hover-but"
|
|
hover-start-time="10" hover-stay-time="60"
|
|
:style="{'backgroundColor': props.primaryColor}"
|
|
@tap="pay">
|
|
付款
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, onMounted } from 'vue'
|
|
|
|
const props = defineProps({
|
|
primaryColor: {
|
|
type: String,
|
|
default: '#FFFFFF'
|
|
}
|
|
})
|
|
const vdata = reactive({
|
|
number: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
|
|
value: '0'
|
|
})
|
|
const emit = defineEmits(['change', 'pay'])
|
|
|
|
function change(k) {
|
|
|
|
let currentVal = vdata.value
|
|
if(currentVal === '0' && k != '.') {
|
|
currentVal = k
|
|
}else {
|
|
currentVal += k;
|
|
}
|
|
|
|
if(!matchNum(currentVal)) {
|
|
return
|
|
}
|
|
vdata.value = currentVal
|
|
|
|
uni.vibrateShort()
|
|
emit('change', vdata.value)
|
|
}
|
|
function del() {
|
|
|
|
let currentVal = vdata.value
|
|
if(!currentVal || currentVal.length <= 1) {
|
|
vdata.value = '0'
|
|
}else {
|
|
vdata.value = vdata.value.substring(0, currentVal.length - 1)
|
|
}
|
|
|
|
uni.vibrateShort()
|
|
emit('change', vdata.value)
|
|
}
|
|
function clear() {
|
|
|
|
vdata.value = '0'
|
|
|
|
uni.vibrateShort()
|
|
emit('change', vdata.value)
|
|
}
|
|
function matchNum(currentVal) {
|
|
const pattern = /^(([1-9]{1}\d{0,5})|(0{1}))(\.\d{0,2})?$/
|
|
return pattern.test(currentVal)
|
|
}
|
|
function pay() {
|
|
|
|
uni.vibrateShort()
|
|
emit('pay')
|
|
}
|
|
function setValue(value) {
|
|
vdata.value = value
|
|
}
|
|
|
|
defineExpose({ setValue })
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.jq-keyboard {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
padding: 0 5rpx;
|
|
box-sizing: border-box;
|
|
|
|
.left {
|
|
width: 75%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
}
|
|
.right {
|
|
width: 25%;
|
|
margin-left: 5rpx;
|
|
margin-right: 5rpx;
|
|
}
|
|
}
|
|
.common {
|
|
width: calc(100%/3 - 10rpx);
|
|
height: 150rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
margin-bottom: 10rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
font-size: 55rpx;
|
|
letter-spacing: 0.04em;
|
|
color: $uni-text-color;
|
|
}
|
|
.zero {
|
|
width: calc(100%/3*2 - 10rpx);
|
|
}
|
|
.del {
|
|
width: 100%;
|
|
image {
|
|
width: 51rpx;
|
|
height: 37rpx;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
.pay {
|
|
width: 100%;
|
|
height: 310rpx;
|
|
font-size: 36rpx;
|
|
color: $uni-text-color-inverse;
|
|
}
|
|
.hover-but {
|
|
filter: brightness(80%);
|
|
}
|
|
</style>
|