CBB3/components/ui-pay/payDialog.vue

<template>
	<view class="key-pop" :hidden="!show_key">
		<view class="key-bg"></view>
		<view class="keyborad" :style="{transform : show_key2 ? 'translateY(0)':'translateY(100%)'}">
			<view class="key_main">
				<view class="main_title">
				<u-icon name="close"  @tap="hideFun"></u-icon>
					<text>请输入兑换密码</text>
				</view>
				<view class="main_content">
					<view class="content_num">
						<view v-for="item in inputArray" :key="item" class="content_item">{{password[item-1] ? '●' :''}}</view>
					</view>
					<view class="main_forget" @tap="forgetFun">忘记密码</view>
				</view>
				<view class="main_keyboard">
					<view class="key_num" v-for="item in numberArray" :key="item" @tap="inputNumFun({num:item})">{{item}}</view>
					<view class="key_null"></view>
					<view class="key_0"  	@tap="inputNumFun({num:0})">0</view>
					<view class="key_del"   @tap="delNumFun">
						<image src="/static/img/del_2.png" mode="aspectFill"></image>
					</view>
				</view>
				<view style="height: 100rpx;"></view>
			</view>
		</view>
	</view>
	
</template>

 
<style lang="scss">
	.key-pop{position: fixed;width: 100%;height: 100%;left: 0;top: 0;}
	.key-pop .key-bg{position: absolute;width: 100%;height: 100%;left: 0;top: 0;background: rgba(0, 0, 0, 0.5);}
	.keyborad{width:100vw;height: 100vh;position: fixed;bottom: 0px;top:0px;left:0px;right:0px;z-index:100;display: flex;flex-direction: column;justify-content: flex-end;transform: translateY(100%);transition:all 0.4s;
		.key_main{ width:100vw;height: 1000rpx;background: rgba(245,245,245,0.9);box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;
			.main_title{ font-size:34rpx;color: #000000;height: 100rpx;display: flex;align-items: center;letter-spacing: 2rpx;width:100%;box-sizing: border-box;padding:0px 20rpx;border-bottom:2rpx solid #e1e1e1;
				image{ width:48rpx;height: 48rpx;position: relative;z-index:10}
				text{ flex:1;margin-left:-48rpx;display: flex;justify-content: center;}
			}
			.main_content{ width:100%;box-sizing: border-box;padding:0px 30rpx;margin-top:40rpx;
				.content_num{ width:100%;height: 100rpx;border:2rpx solid #DBDBDB;border-radius: 10rpx;display: flex;align-items: center;
					.content_item{ flex: 1;height: 100%;border-right: 2rpx solid #DBDBDB;display: flex;justify-content: center;align-items: center;}
					.content_item:last-child{ border-right:none}
				}
				.main_forget{ display: flex;justify-content: center;align-items: center;width:100%;font-size:28rpx;color: #007AFF;margin-top:40rpx}
			}
			.main_keyboard{ width:100%;height: 500rpx;background: #FFFFFF;display: flex;flex-flow: wrap;
				.key_null,.key_del{ background: #e2e7eb;}
				image{ width:48rpx;height: 48rpx;}
				.key_num,.key_null,.key_del,.key_0{ width:250rpx;height: 125rpx;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: bold;}
				.key_num{ border-right:2rpx solid #f1f4f4;border-bottom:2rpx solid #f1f4f4;box-sizing: border-box;}
				.key_num:active{background: #f1f1f1;}
				.key_num:nth-child(8){border-bottom: none;}
				.key_0{ border-top:2rpx solid #f1f4f4}
			}
		}  
	}
</style>

<script>	
	export default{
		props:{
		
		},
		computed:{},
		data(){
			return{
				inputArray:[1,2,3,4,5,6],//输入密码的长度
				numberArray:[1,2,3,4,5,6,7,8,9],//密码键盘的数字
				password:'',//密码
				show_key:false,
				show_key2:false
			}
		},
		methods:{
			inputNumFun(op){
				let _this = this
				if(_this.password.length <=6){
					_this.password += op.num
					if(_this.password.length == 6){
						_this.$emit('getPassword',{password:_this.password});
					}
				}
				
			},
			show:function(){
				this.password = "";
				this.show_key = true;
				setTimeout(()=>{
					this.show_key2 =true;
				},200);
			},
			delNumFun(){
				if(this.password.length == 0) return
				this.password = this.password.substring(0,this.password.length - 1);
			},
			
			cleanNum(){
				this.password  = "";
			},
			
			forgetFun(){
				uni.navigateTo({
					url:"/pages/user/userinfo/security/mobileFind"
				});
			},
			hideFun(){
				this.show_key2 = false;
				setTimeout(()=>{
					this.show_key = false;
				},300);
			}
		}
	}
</script>