81 lines
2.5 KiB
Vue
81 lines
2.5 KiB
Vue
<template>
|
|
<view class="bg-[#f5f5f5] px-1 py-2 rounded-4 fixed bottom-0 left-0 right-0 w-full">
|
|
<view class="flex justify-end">
|
|
<image v-show="show" class="w-[50rpx] h-[50rpx] mx-2 mb-1" src="@/static/page/折叠.svg" @click="show = !show" />
|
|
<image v-show="!show" class="w-[50rpx] h-[50rpx] mx-2 mb-1" src="@/static/page/展开.svg" @click="show = !show" />
|
|
</view>
|
|
<view v-show="show" class="flex mb-2.5" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
|
|
<view
|
|
class="flex-1 h-[80rpx] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
|
|
v-for="(key, keyIndex) in row"
|
|
:key="keyIndex"
|
|
@click="handleKeyPress(key.toString())"
|
|
>
|
|
{{ key }}
|
|
</view>
|
|
</view>
|
|
<view v-show="show" class="flex mb-0">
|
|
<view
|
|
class="flex-1 h-[80rpx] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
|
|
@click="handleKeyPress('.')"
|
|
>
|
|
.
|
|
</view>
|
|
<view
|
|
class="flex-auto h-[80rpx] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
|
|
@click="handleKeyPress('0')"
|
|
>
|
|
0
|
|
</view>
|
|
<view
|
|
class="flex-1 h-[80rpx] flex items-center justify-center bg-white mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
|
|
@click="handleDelete"
|
|
>
|
|
<image class="w-[40rpx] h-[40rpx]" src="@/static/page/keyboardDelete.svg" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue"
|
|
|
|
const amount = defineModel<string>("modelValue", { default: "" })
|
|
|
|
const keyboardLayout = ref([
|
|
["1", "2", "3"],
|
|
["4", "5", "6"],
|
|
["7", "8", "9"],
|
|
])
|
|
const show = ref(true)
|
|
|
|
// 按下键盘
|
|
const handleKeyPress = (key) => {
|
|
if (key === "." && amount.value.includes(".")) return
|
|
if (key === "." && !amount.value) {
|
|
amount.value = "0."
|
|
return
|
|
}
|
|
// 特殊处理：如果当前为0，新输入不是小数点，则替换0
|
|
if (amount.value == "0" && key != ".") {
|
|
amount.value = key
|
|
return
|
|
}
|
|
|
|
// 特殊处理：如果有小数点且已有两位小数，不再添加数字
|
|
if (amount.value.includes(".")) {
|
|
const decimalPlaces = amount.value.split(".")[1]
|
|
if (decimalPlaces && decimalPlaces.length >= 2) return
|
|
}
|
|
|
|
amount.value += key
|
|
}
|
|
|
|
// 点击删除
|
|
const handleDelete = () => {
|
|
if (amount.value.length > 0) {
|
|
amount.value = amount.value.slice(0, -1)
|
|
}
|
|
}
|
|
</script>
|