make keyboard componently

uniapp_project_code/src/components/index/keyboard/keyboard_box.vue → uniapp_project_code/src/components/index/keyboard/input_box_QR.vue

@@ -10,13 +10,7 @@
 			</view>
 
 			<view class="input-keyboard">
-				<view class="i-keyboard">
-					<view class="num-btn" v-for="i in 11"
-						:class="[getNumBtnClass(i),{'active-value':(activeValue == i) }]" @click="clickKeyboard(i)">
-						<text class="txt" v-if="(i<11)">{{getNumClick(i)}}</text>
-						<image class="img" v-else src="/static/index/del_icon_big.png" mode="widthFix" />
-					</view>
-				</view>
+				<viewKeyboard :maxInput="props.maxInput" @inputValueUpdate="accept_inputValueUpdate"></viewKeyboard>
 				<view class="sure-btn">
 					<text class="txt">确定</text>
 				</view>
@@ -27,11 +21,14 @@
 </template>
 
 <script setup>
+	import util from "@/utils/util.js"
+	import viewKeyboard from "@/components/index/keyboard/view_keyboard.vue";
+
+
 	import {
 		onMounted,
 		ref
 	} from 'vue'
-	import util from "@/utils/util.js"
 
 	//触发自定义事件
 	const emits = defineEmits(['showIt'])
@@ -56,6 +53,10 @@
 	const handle_closeKeyboardBox = () => {
 		emits("showIt", "false")
 	}
+	const accept_inputValueUpdate = (i) => {
+		console.log("accept_inputValueClick:", i)
+		inputValue.value = i
+	}
 
 	const getNumBtnClass = (i) => {
 		if (i == 11) {
@@ -162,62 +163,6 @@
 				@include ctf(center);
 				flex-direction: column;
 
-				.i-keyboard {
-					// width: 232.69rpx;
-					// height: 317.53rpx;
-					width: 260rpx;
-					// background-color: beige;
-					@include ctf(flex-start);
-					flex-direction: row;
-					flex-wrap: wrap;
-
-					.num-btn {
-						width: 64rpx;
-						height: 64rpx;
-						background: #FFFFFF;
-						box-shadow: 0 2.08rpx 0 0 #00000033;
-						border-radius: 3rpx;
-						@include ctf(center);
-						margin: 11rpx;
-
-						.txt {
-							font-weight: 800;
-							font-size: 44rpx;
-							color: #000000;
-						}
-					}
-
-					.num-btn-last-child {
-						width: 150rpx;
-						background: #D1D6D8;
-
-						.img {
-							width: 47.5rpx;
-							height: 38rpx;
-							// background: #454A52;
-						}
-					}
-
-					.active-value {
-						background: #009874;
-					}
-
-					.del-btn {
-						width: 69.44rpx;
-						height: 69.44rpx;
-						background: #FFFFFF;
-						border-radius: 6.94rpx;
-						@include ctf(center);
-						margin: 10rpx;
-
-						.txt {
-							font-weight: 500;
-							font-size: 25rpx;
-							color: #333333;
-						}
-					}
-				}
-
 				.sure-btn {
 					margin-top: 50rpx;
 					width: 490.28rpx;

uniapp_project_code/src/components/index/keyboard/view_keyboard.vue

@@ -0,0 +1,141 @@
+<template>
+	<view class="i-keyboard">
+		<view class="num-btn" v-for="i in 11"
+			:class="[getNumBtnClass(i),{'active-value':(activeValue == i) }]" @click="clickKeyboard(i)">
+			<text class="txt" v-if="(i<11)">{{getNumClick(i)}}</text>
+			<image class="img" v-else src="/static/index/del_btn.png" mode="widthFix" />
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import util from "@/utils/util.js"
+	
+	import {
+		onMounted,
+		ref
+	} from 'vue'
+	
+	//触发自定义事件
+	const emits = defineEmits(['inputValueUpdate'])
+	const props = defineProps({
+		maxInput: {
+			type: Number,
+			default: 11
+		},
+		// inputValue : {
+		// 	type: Number,
+		// 	default: 11
+		// },
+	})
+
+	let inputValue = ref("") //
+	let activeValue = ref("") //
+
+	onMounted(async (res) => {
+		console.log(res + `    the keyboard_box component is now mounted.  ` + props.maskHeight)
+	})
+
+	const handle_closeKeyboardBox = () => {
+		emits("showIt", "false")
+	}
+
+	const getNumBtnClass = (i) => {
+		if (i == 11) {
+			return "num-btn-last-child"
+		}
+		return "num-btn"
+	}
+	// getInputClass
+	const getInputClass = () => {
+		if (inputValue.value == "") {
+			return "txt-blank"
+		}
+		return "txt-write"
+	}
+	const getNumClick = (i) => {
+		if (i <= 9) return i
+		if (i == 10) return "0"
+		if (i == 11) return "" //delete
+	}
+	//click keyboard
+	const clickKeyboard = util.debounce((i) => {
+		console.log("clickKeyboard:", i)
+		// add input react
+		activeValue.value = i
+		setTimeout(() => {
+			activeValue.value = ""
+		}, 100)
+
+		if (i == 11) { //handle delete input
+			inputValue.value = inputValue.value.substring(0, inputValue.value.length - 1)
+		} else {
+			//limit maxInput
+			if (inputValue.value.length >= props.maxInput) {
+				return util.showNone(`最大输入${props.maxInput}位`)
+			}
+			inputValue.value += getNumClick(i)
+		}
+		emits("inputValueUpdate", inputValue.value)
+	}, 20, true)
+</script>
+
+<style lang="scss" scoped>
+
+.i-keyboard {
+					// width: 232.69rpx;
+					// height: 317.53rpx;
+					width: 260rpx;
+					// background-color: beige;
+					@include ctf(flex-start);
+					flex-direction: row;
+					flex-wrap: wrap;
+
+					.num-btn {
+						width: 64rpx;
+						height: 64rpx;
+						background: #FFFFFF;
+						box-shadow: 0 2.08rpx 0 0 #00000033;
+						border-radius: 3rpx;
+						@include ctf(center);
+						margin: 11rpx;
+
+						.txt {
+							font-weight: 800;
+							font-size: 44rpx;
+							color: #000000;
+						}
+					}
+
+					.num-btn-last-child {
+						width: 150rpx;
+						background: #D1D6D8;
+
+						.img {
+							width: 47.5rpx;
+							height: 38rpx;
+							// background: #454A52;
+						}
+					}
+
+					.active-value {
+						background: #009874;
+					}
+
+					.del-btn {
+						width: 69.44rpx;
+						height: 69.44rpx;
+						background: #FFFFFF;
+						border-radius: 6.94rpx;
+						@include ctf(center);
+						margin: 10rpx;
+
+						.txt {
+							font-weight: 500;
+							font-size: 25rpx;
+							color: #333333;
+						}
+					}
+				}
+	
+</style>

uniapp_project_code/src/pages/index/index.nvue

@@ -14,7 +14,7 @@
 				<view-footer @clickQR="handle_clickQR" @clickVIP="handle_clickVIP"></view-footer>
 			</view>
 			
-			<keyboard-box v-if="showKeyboardBox"  :maskHeight="screenHeight" :maxInput="maxInput" @showIt="handle_closeKeyboardBox"></keyboard-box>
+			<keyboard-box v-if="showKeyboardBox"  :maskHeight="screenHeight" :maxInput="11" @showIt="handle_closeKeyboardBox"></keyboard-box>
 		</view>
 		
 	</view>
@@ -26,11 +26,12 @@
 	import viewHeader from '@/components/index/view_header.nvue';
 	import viewFooter from '@/components/index/view_footer.nvue';
 	import listItem from '@/components/index/list_item.nvue';
-	import keyboardBox from '@/components/index/keyboard/keyboard_box.vue';
+	import keyboardBox from '@/components/index/keyboard/input_box_QR.vue';
 
 	// import { ref } from 'vue';
 	// import { onLoad,onReady } from '@dcloudio/uni-app';
 
+
 	// #ifdef APP-NVUE
 	let dom = weex.requireModule("dom");
 	// #endif