carwin_activity_applet/dome/pages/index/components/keyCode.vue

<template>
	<view class="keyCode flex">
		<!-- section -->
		<view id="input" @click="show=true" class="left flex">
			<view  v-for="(item,index) of copy" :key="index" class="text-black margin-right-xs flex justify-center align-center">{{item}}</view>
		</view>
		<view @click="changefunc" class="right padding-xs text-blue">新</view>
		<!-- footer -->
		<!-- 键盘 -->
		<view v-if="show" class="key bg-grey">
			<!-- 工具栏 -->
			<view class="tool bg-gray flex justify-between padding-sm">
				<view @click="concalfunc">取消</view>
				<view :class="copy[copy.length-1]  ? '' : 'text-grey' ">完成</view>
			</view>
			<!-- 键值 0-->
			<view v-show="key==0" class="codeA padding-lr-xs padding-bottom-sm">
			  <!-- 第一行 -->
			  <view class="one flex justify-around">
				  <button @click="handlerfunc(item)" v-for="(item,index) of codes[0][0]" :key="index" class="item cu-btn padding-sm ">{{item}}</button>
			  </view>
			  <!-- 第二行 -->
			  <view class="two flex justify-around">
			  	<button @click="handlerfunc(item)" v-for="(item,index) of codes[0][1]" :key="index" class="item cu-btn padding-sm ">{{item}}</button>
			  </view>
			  <!-- 第三行 -->
			  <view class="one flex justify-around">
			  	<button @click="handlerfunc(item)" v-for="(item,index) of codes[0][2]" :key="index" class="item cu-btn padding-sm ">{{item}}</button>
			  </view>
			  <!-- 第四行 -->
			  <view class="four flex justify-around">
			  	<button  class="item cu-btn padding-sm bg-black padding-lr-lg">字</button>
			  	<button @click="handlerfunc(item)" v-for="(item,index) of codes[0][3]" :key="index" class="item cu-btn padding-sm ">{{item}}</button>
			  	<button @click="deletefunc" class="item cu-btn padding-sm bg-black padding-lr-lg"><van-icon name="clear" /></button>
			  </view>
			</view>
		    <!-- 键值 1 -->
			<view v-show="key!=0" class="codeB padding-lr-xs padding-bottom-sm">
			  <!-- 第一行 -->
			  <view class="one flex justify-around">
				  <button @click="handlerfunc(item)" v-for="(item,index) of codes[1][0]" :key="index" class="item cu-btn  ">{{item}}</button>
			  </view>
			  <!-- 第二行 -->
			  <view class="two flex justify-around">
			  	<button @click="handlerfunc(item)" v-for="(item,index) of codes[1][1]" :key="index" class="item cu-btn ">{{item}}</button>
			  </view>
			  <!-- 第三行 -->
			  <view class="one flex justify-around">
			  	<button @click="handlerfunc(item)" v-for="(item,index) of codes[1][2]" :key="index" class="item cu-btn  ">{{item}}</button>
			  </view>
			  <!-- 第四行 -->
			  <view class="four flex justify-around">
			  	<button  class="item cu-btn padding-sm bg-black padding-lr-lg">ABC</button>
			  	<button @click="handlerfunc(item)" v-for="(item,index) of codes[1][3]" :key="index" class="item cu-btn padding-sm ">{{item}}</button>
			  	<button @click="deletefunc" class="item cu-btn padding-sm bg-black padding-lr-lg"><van-icon name="clear" /></button>
			  </view>
			</view>
		</view>
	    <!-- 图层蒙版 -->
		<!-- <view v-if="show" @click="show=false" class="mask"></view> -->
	</view>
</template>

<script>
	export default{
		props:{
			value:{type:String,default:()=>""}
		},
		data(){
		  return {
			  // copy:['豫','H','1','2','3','4','5','6']
			  copy:['','','','','','',''],
			  show:false,
			  key:0,
			  codes:[
				  [["京","沪","辽","苏","闽","豫","粤","贵","甘","桂"],["津","冀","吉","浙","赣","鄂","琼","云","青","宁"],["渝","晋","黑","皖","鲁","湘","川","陕","蒙","新"],["藏","使","领","警","学","港","澳"]],
				  [[1,2,3,4,5,6,7,8,9,0],["Q","W","R","T","Y","U","I","O","P"],["A","S","D","F","G","H","J","K","L"],["Z","X","C","V","B","N","M"]]
			  ]
		  } 
		},
		methods:{
			// 输入
			handlerfunc(item){
				var key=this.key;
				var copy=JSON.parse(JSON.stringify(this.copy));
				copy[key]=item;
				this.key=key+1;
				this.copy=copy;
				if(key===copy.length-1) {
					this.show=false;
					return 
				};
			},
			// 删除键
			deletefunc(){
				var key=this.key;
				var copy=this.copy;
				copy[key-1]='';
				if(key>0) this.key=key-1;
				this.copy=copy;
			},
			// 取消
			concalfunc(){
				this.key=0;
				this.show=false;
				this.copy=['','','','','','',''];
			},
			// 新
			changefunc(){
				var copy=this.copy
				if(copy.length>=8) {
					copy.splice(-1,1)
				}else{
					copy.push("")
				}
				this.copy=copy;
			}
		},
		watch:{
			show:{
				handler(newVal){
					if(newVal) {
						// const query=uni.createSelectorQuery().in(this);
						// query.select("#input").boundingClientRect();
						// query.selectViewport().scrollOffset();
						// query.exec(res=>{
						// 	uni.pageScrollTo({ scrollTop: res[0].top || 0, duration: 300 })
						// })
						this.copy=this.copy.map(item=>'');
						this.key=0;
					};
				}
			},
		    copy:{
				handler(newVal){
					var value="";
					newVal.forEach(item=>value+=item);
					value=value.trim();
					if(newVal.length==value.length || this.key==0) this.$emit("update:value",value)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.keyCode{
		.left{
			flex: auto;
			>view{
				border: 1rpx solid #999;
				width: 40rpx;height: 58rpx;
				box-sizing: border-box;
			}
		}
		.right{
			border: 1rpx dashed #999;
		}
		.key{
			position: fixed;
			bottom: 0;left: 0;
			z-index: 10000;
			width: 100%;
			.codeA{
				min-height: 300rpx; 
				.item{
					margin-top: 10rpx;
				}
			} 
			.codeB{
				min-height: 300rpx; 
				.item{
				margin-top: 10rpx;	
				padding-left: 28rpx;
				padding-right: 28rpx;
				}
			}
		}
	}
</style>