From 631188eedfbd1186c74e536c057bbff49b32bd72 Mon Sep 17 00:00:00 2001
From: "3075067877@qq.com" <3075067877@qq.com>
Date: Mon, 29 Jan 2024 16:33:53 +0800
Subject: [PATCH] add phone input component

---
 .../src/components/index/keyboard/input_box_QR.vue |  18 +-
 .../index/keyboard/input_box_end_phone.vue         | 237 +++++++++++++++++++++
 .../components/index/keyboard/view_keyboard.vue    |  13 +-
 uniapp_project_code/src/pages/index/index.nvue     |  42 ++--
 4 files changed, 282 insertions(+), 28 deletions(-)
 create mode 100644 uniapp_project_code/src/components/index/keyboard/input_box_end_phone.vue

diff --git a/uniapp_project_code/src/components/index/keyboard/input_box_QR.vue b/uniapp_project_code/src/components/index/keyboard/input_box_QR.vue
index 5b9542e..d8ea8e1 100644
--- a/uniapp_project_code/src/components/index/keyboard/input_box_QR.vue
+++ b/uniapp_project_code/src/components/index/keyboard/input_box_QR.vue
@@ -2,7 +2,7 @@
 	<cover-view class="keyboard-box" :style="{ height: props.maskHeight + 'px' }" @touchmove.prevent="" @click.stop="">
 
 		<view class="kb-area">
-			<image class="del-icon" src="/static/index/del_icon_big.png" mode="scaleToFill"
+			<image class="del-icon" src="/static/index/del_icon_big.png" mode="aspectFit"
 				@click="handle_closeKeyboardBox" />
 			<text class="txt-title">输入条形码</text>
 			<view class="txt-input">
@@ -11,7 +11,7 @@
 
 			<view class="input-keyboard">
 				<viewKeyboard :maxInput="props.maxInput" @inputValueUpdate="accept_inputValueUpdate"></viewKeyboard>
-				<view class="sure-btn">
+				<view class="sure-btn" @click="handle_clickCommit">
 					<text class="txt">确定</text>
 				</view>
 			</view>
@@ -29,12 +29,12 @@
 		ref
 	} from 'vue'
 
-	//触发自定义事件
-	const emits = defineEmits(['showIt'])
+	//define emits or props
+	const emits = defineEmits(['showIt','clickCommit'])
 	const props = defineProps({
 		maskHeight: {
 			type: Number,
-			default: 200
+			default: 1200
 		},
 		maxInput: {
 			type: Number,
@@ -43,7 +43,6 @@
 	})
 
 	let inputValue = ref("") //
-	let activeValue = ref("") //
 
 	onMounted(async (res) => {
 		console.log(res + `    the keyboard_box component is now mounted.  ` + props.maskHeight)
@@ -52,6 +51,9 @@
 	const handle_closeKeyboardBox = () => {
 		emits("showIt", "false")
 	}
+	const handle_clickCommit = () => {
+		emits("clickCommit", inputValue.value)
+	}
 	const accept_inputValueUpdate = (i) => {
 		console.log("accept_inputValueClick:", i)
 		inputValue.value = i
@@ -88,7 +90,7 @@
 
 		.kb-area {
 			width: 533.33rpx;
-			height: 807.64rpx;
+			// height: 807.64rpx;
 			background: #fff;
 			border-radius: 13.89rpx;
 			@include ctf(flex-start);
@@ -151,7 +153,7 @@
 					@include ctf(center);
 
 					.txt {
-						font-weight: 500;
+						font-weight: 800;
 						font-size: 25rpx;
 						color: #FFFFFF;
 					}
diff --git a/uniapp_project_code/src/components/index/keyboard/input_box_end_phone.vue b/uniapp_project_code/src/components/index/keyboard/input_box_end_phone.vue
new file mode 100644
index 0000000..ff8bd7d
--- /dev/null
+++ b/uniapp_project_code/src/components/index/keyboard/input_box_end_phone.vue
@@ -0,0 +1,237 @@
+<template>
+	<cover-view class="keyboard-box" :style="{ height: props.maskHeight + 'px' }" @touchmove.prevent="" @click.stop="">
+
+		<view class="kb-area">
+			<image class="del-icon" src="/static/index/del_icon_big.png" mode="aspectFit"
+				@click="handle_closeKeyboardBox" />
+			<text class="txt-title">请输入手机尾号后4位数验证</text>
+
+			<!-- 条形码输入框 -->
+			<!-- <view class="txt-input">
+				<text class="txt" :class="getInputClass()">{{inputValue||"请输入条形码"}}</text>
+			</view> -->
+
+			<!-- 手机尾号后4位数验证 -->
+			<view class="end-phone-input">
+				<view class="epi-box" v-for="i in props.maxInput">
+					<text class="epi-txt" >{{inputValue[i-1]}}</text>
+				</view>
+			</view>
+
+
+			<view class="input-keyboard">
+				<viewKeyboard :maxInput="props.maxInput" @inputValueUpdate="accept_inputValueUpdate"></viewKeyboard>
+				<view class="sure-btn" @click="handle_clickCommit">
+					<text class="txt">确定</text>
+				</view>
+			</view>
+		</view>
+
+	</cover-view>
+</template>
+
+<script setup>
+	import util from "@/utils/util.js"
+	import viewKeyboard from "@/components/index/keyboard/view_keyboard.vue";
+
+	import {
+		onMounted,
+		ref
+	} from 'vue'
+
+	//define emits or props
+	const emits = defineEmits(['showIt','clickCommit'])
+	const props = defineProps({
+		maskHeight: {
+			type: Number,
+			default: 1200
+		},
+		maxInput: {
+			type: Number,
+			default: 4
+		}
+	})
+
+	let inputValue = ref("") //
+
+	onMounted(async (res) => {
+		console.log(res + `    the keyboard_box component is now mounted.  ` + props.maskHeight)
+	})
+
+	const handle_closeKeyboardBox = () => {
+		emits("showIt", "false")
+	}
+	const handle_clickCommit = () => {
+		emits("clickCommit", inputValue.value)
+	}
+	const accept_inputValueUpdate = (i) => {
+		console.log("accept_inputValueClick:", i)
+		inputValue.value = i.split("")
+		console.log("inputValue:",inputValue.value)
+	}
+
+	// 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
+	}
+</script>
+
+<style lang="scss" scoped>
+	.keyboard-box {
+
+		width: 750rpx;
+		height: 1000rpx;
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: auto;
+		bottom: auto;
+		background: rgba(0, 0, 0, 0.5);
+		z-index: 11;
+
+		@include ctf(center);
+
+		.kb-area {
+			width: 533.33rpx;
+			// height: 827.64rpx;
+			background: #fff;
+			border-radius: 13.89rpx;
+			@include ctf(flex-start);
+			flex-direction: column;
+
+			.del-icon {
+				width: 27.78rpx;
+				height: 27.78rpx;
+				align-self: flex-end;
+				margin: 21rpx 21rpx 0 0;
+			}
+
+			.txt-title {
+				font-weight: 600;
+				font-size: 25rpx;
+				color: #333333;
+			}
+
+			.txt-input {
+				@include ctf(flex-start);
+				flex-direction: row;
+				margin-top: 62rpx;
+				margin-bottom: 69rpx;
+				padding-left: 20rpx;
+				width: 470.83rpx;
+				height: 69.44rpx;
+				border: 0.69rpx solid #979797;
+				border-radius: 6.94rpx;
+
+				.txt {
+					font-weight: 700;
+				}
+
+				.txt-write {
+					font-weight: 700;
+					font-size: 25rpx;
+					color: #333333;
+				}
+
+				.txt-blank {
+					font-size: 22.22rpx;
+					color: #999999;
+				}
+			}
+
+			// 手机尾号后4位数验证
+			.end-phone-input{
+				width: 470.83rpx;
+				height: 69.44rpx;
+				// border: 0.69rpx solid #979797;
+				// border-radius: 6.94rpx;
+				@include ctf(center);
+				flex-direction: row;
+				margin-top: 69rpx;
+				margin-bottom: 69rpx;
+
+				.epi-box {
+					width: 69.44rpx;
+					height: 69.44rpx;
+					background: #F2F2F2;
+					border: 0.69rpx solid #979797;
+					border-radius: 6.94rpx;
+					@include ctf(center);
+					flex-direction: row;
+					margin: 0 17.5rpx;
+					.epi-txt {
+						font-weight: 700;
+						font-size: 45rpx;
+						color: #333333;
+					}
+				}
+			}
+
+
+			.input-keyboard {
+				width: 533.33rpx;
+				height: 536.81rpx;
+				background: #E8E8E8;
+				border-radius: 0 0 6.94rpx 6.94rpx;
+				@include ctf(center);
+				flex-direction: column;
+
+				.sure-btn {
+					margin-top: 50rpx;
+					width: 490.28rpx;
+					height: 69.44rpx;
+					background: #009874;
+					border-radius: 6.94rpx;
+					@include ctf(center);
+
+					.txt {
+						font-weight: 800;
+						font-size: 25rpx;
+						color: #FFFFFF;
+					}
+				}
+			}
+
+		}
+	}
+
+	.video-tip {
+		@include ctf(flex-start);
+		flex-direction: row;
+
+		.v-image {
+			width: 70.03rpx;
+			height: 54.17rpx;
+		}
+
+		.v-text {
+			margin-left: 16rpx;
+			font-weight: 400;
+			font-size: 19.44rpx;
+			color: #999999;
+		}
+	}
+
+	.cancel-button {
+		@include ctf(center);
+		width: 131.94rpx;
+		height: 51.39rpx;
+		border: 0.69rpx solid #999999;
+		border-radius: 6.94rpx;
+
+		.v-text {
+			@include flcw(33.33upx, 46.53upx, #fff, 500);
+			font-weight: 500;
+			font-size: 16.67rpx;
+			color: #999999;
+		}
+	}
+</style>
diff --git a/uniapp_project_code/src/components/index/keyboard/view_keyboard.vue b/uniapp_project_code/src/components/index/keyboard/view_keyboard.vue
index 949f6f0..29a1fad 100644
--- a/uniapp_project_code/src/components/index/keyboard/view_keyboard.vue
+++ b/uniapp_project_code/src/components/index/keyboard/view_keyboard.vue
@@ -16,21 +16,18 @@
 		ref
 	} from 'vue'
 	
-	//触发自定义事件
+	//define emits or props
 	const emits = defineEmits(['inputValueUpdate'])
 	const props = defineProps({
 		maxInput: {
 			type: Number,
 			default: 11
 		},
-		// inputValue : {
-		// 	type: Number,
-		// 	default: 11
-		// },
+
 	})
 
-	let inputValue = ref("") //
-	let activeValue = ref("") //
+	let inputValue = ref("") //input value
+	let activeValue = ref("") //active btn value
 
 	onMounted(async (res) => {
 		console.log(res + `    the keyboard_box component is now mounted.  ` + props.maskHeight)
@@ -62,7 +59,7 @@
 		} else {
 			//limit maxInput
 			if (inputValue.value.length >= props.maxInput) {
-				return util.showNone(`最大输入${props.maxInput}位`)
+				return util.showNone(`最多输入${props.maxInput}位`)
 			}
 			inputValue.value += getNumClick(i)
 		}
diff --git a/uniapp_project_code/src/pages/index/index.nvue b/uniapp_project_code/src/pages/index/index.nvue
index a8e1536..2b84301 100644
--- a/uniapp_project_code/src/pages/index/index.nvue
+++ b/uniapp_project_code/src/pages/index/index.nvue
@@ -14,24 +14,30 @@
 				<view-footer @clickQR="handle_clickQR" @clickVIP="handle_clickVIP"></view-footer>
 			</view>
 			
-			<keyboard-box v-if="showKeyboardBox"  :maskHeight="screenHeight" :maxInput="11" @showIt="handle_closeKeyboardBox"></keyboard-box>
+			<!-- 条形码输入框 -->
+			<input-qr-box v-if="showQRInputBox"  :maskHeight="screenHeight" :maxInput="11" 
+			@showIt="handle_closeQRInputBox" @clickCommit="handle_clickCommit_qr"></input-qr-box>
+
+			<!-- 手机尾号后4位数验证 -->
+			<input-box-end-phone v-if="showEndPhoneBox"  :maskHeight="screenHeight" :maxInput="4"
+			@showIt="handle_closeEndPhoneBox" @clickCommit="handle_clickCommit_qr"></input-box-end-phone>
 		</view>
 		
 	</view>
 </template>
 
 <script>
-	import pageStandby from '@/components/index/page_standby.vue';
 	import util from "@/utils/util.js"
-	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/input_box_QR.vue';
+	import pageStandby from '@/components/index/page_standby.vue';//待机页
+	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 inputQrBox from '@/components/index/keyboard/input_box_QR.vue'; //条形码
+	import inputBoxEndPhone from '@/components/index/keyboard/input_box_end_phone.vue';//手机号尾号
 
 	// import { ref } from 'vue';
 	// import { onLoad,onReady } from '@dcloudio/uni-app';
 
-
 	// #ifdef APP-NVUE
 	let dom = weex.requireModule("dom");
 	// #endif
@@ -42,7 +48,8 @@
 			'view-header': viewHeader,
 			'view-footer': viewFooter,
 			'list-item': listItem,
-			'keyboard-box': keyboardBox,
+			'input-qr-box': inputQrBox,
+			'input-box-end-phone': inputBoxEndPhone,
 		},
 		watch:{
 			showPageStandby(ov,nv){
@@ -60,7 +67,8 @@
 		data() {
 			return {
 				showPageStandby: false,
-				showKeyboardBox:false,
+				showQRInputBox:false,
+				showEndPhoneBox:false,
 				screenHeight: '',
 				footerHeight: '',
 			}
@@ -81,16 +89,26 @@
 				console.log("handle_closeSetting", val)
 				this.showPageStandby = !this.showPageStandby
 			},
-			handle_closeKeyboardBox(val) {
+			handle_closeQRInputBox(val) {
 				console.log("handle_closeKeyboardBox", val)
-				this.showKeyboardBox = !this.showKeyboardBox
+				this.showQRInputBox = !this.showQRInputBox
+			},
+			handle_closeEndPhoneBox(val) {
+				console.log("handle_closeEndPhoneBox", val)
+				this.showEndPhoneBox = !this.showEndPhoneBox
 			},
 			handle_clickQR() {
 				util.showNone("输入条形码")
-				this.showKeyboardBox = !this.showKeyboardBox
+				this.showQRInputBox = !this.showQRInputBox
+			},
+			handle_clickCommit_qr(val){
+				console.log("handle_clickCommit_qr",val)
+				util.showNone("输入条形码"+val)
+				this.showQRInputBox = !this.showQRInputBox
 			},
 			handle_clickVIP() {
 				util.showNone("会员登录")
+				this.showEndPhoneBox = !this.showEndPhoneBox
 			},
 			async setFooterHeight(){
 				// #ifdef APP-NVUE