钱包转账

src/sheep/components/numberKeyboard.vue

@@ -0,0 +1,75 @@
+<template>
+	<view class="bg-[#f5f5f5] px-1 py-2 rounded-4 absolute bottom-0 w-full">
+		<view class="flex mb-2.5" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
+			<view
+				class="flex-1 h-[60px] 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 class="flex mb-0">
+			<view
+				class="flex-1 h-[60px] 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-[60px] 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-[60px] flex items-center justify-center bg-white mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
+				@click="handleDelete"
+			>
+				<image class="w-[30px] h-[30px]" 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 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>