uniapp自定义密码输入键盘-数字键盘效果demoUI方法二（整理）

效果图：

<template>
	<view class="paymentCodeBox">
		<!-- 自定义键盘 -->
		<view class="password-set-page">
			<view class="setPage">
				<view class="hint margin-bottom30 height110 width100Percent font-size32 color222 font-bold">
					输入支付密码
					<view class="width50 height50 imgClose" @click="closeClick()">
						<image src="../static/goods/close.png" mode="" class="width50 height50"></image>
					</view>
				</view>
				
				<view class="code margin-bottom30">
					<view class="numFont">
						<view v-for="(item, index) in 6" :key="index">{{ password[index] && '●' || '' }}</view>
					</view>
				</view>
				
				<view class="slipBox dis_f margin-left30 margin-right30 margin-bottom80">
					<view class="font-size24 colorccc">忘记支付密码或没有设置支付密码？</view>
					<view class="dis_f goto">
						<text class="margin-right10 font-size24" style="color: #F21177;">去修改支付密码</text>
						<view class="imgBox">
							<image src="../static/goods/tz2.png" mode="" class="img"></image>
						</view>
					</view>
				</view>
				
				<view class="keyboard">
					<button v-for="(item, index) in 9" :key="index" @click="key(index + 1)">
						<text>{{ index + 1 }}</text>
					</button>
					<button class="hide"></button>
					<button @click="key(0)">
						<text>0</text>
					</button>
					<button @click="del()">
						<!-- <image src="../static/enter/btn_xuanzhong.png" mode="aspectFill"></image> -->
						<image src="../static/goods/del1.png" mode="aspectFill"></image>
						
					</button>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				// pageNum: 1,
				password: '',
			}
		},
		// 页面加载
		onLoad(e) {
			uni.hideTabBar(); //不让底部显示tab选项
		},
		// 页面显示
		onShow() {

		},
		// 方法
		methods: {
			//关闭键盘
			closeClick(){
				this.password = '';
				this.KeypadShow = 0;
			},
			// 键盘
			key(key) {
				
				if (this.password.length < 6) {
					this.password += key
					if (this.password.length === 6) {
						// 密码验证操作
						console.log(this.password,'37')
						// this.$.open('/trait/details');
					}
				}
			},
			del() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1)
				}
			},
			
			
			//获取列表数据
			getListData() {
				this.$.ajax("POST", "/xxxxx/xxxxx", {
					page: this.pageNum,
				}, (res) => {
					if (res) {
						if (this.pageNum == 1) {
							this.list = res.data
						} else {
							this.list = this.list.concat(res.data)
							if (res.data.length === 0) {
								this.pageNum--
							}
						}
					}
					uni.stopPullDownRefresh()
				});
			}
		},
		// 计算属性
		computed: {

		},
		// 侦听器
		watch: {

		},
		// 页面隐藏
		onHide() {

		},
		// 页面卸载
		onUnload() {

		},
		// 触发下拉刷新
		onPullDownRefresh() {
			// this.pageNum = 1
			// this.getListData()
		},
		// 页面上拉触底事件的处理函数
		onReachBottom() {
			// this.pageNum++
			// this.getListData()
		},
	}
</script>

<style lang="scss" scoped>
	.paymentCodeBox {
		width: 100%;
		height: 100vh;
		background: #fff;
		.password-set-page {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100vh;
			overflow: hidden;
			background-color: rgba(0, 0, 0, .5);
			z-index: 999999;
			.setPage{
				position: fixed;
				bottom: 0;
				background: #fff;
				border-radius: 20rpx 20rpx 0px 0px;
				.hint{
					line-height: 110rpx;
					position: relative;
					text-align: center;
					border-bottom: 1rpx solid #ECECEC;
					.imgClose{
						position: absolute;
						right: 20rpx;
						top: 26rpx;
					}
				}
			}
			.slipBox{
				display: flex;
				justify-content: space-between;
				.goto{
					align-items: center;
					.imgBox{
						width: 9rpx;
						height: 16rpx;
						.img{
							width: 9rpx;
							height: 16rpx;
						}
					}
				}
			}
			.code {
				view {
					// border: 1rpx solid #D9D9D9;
					border-radius: 8rpx;
					overflow: hidden;
					display: flex;
					width: 690rpx;
					margin: 0 auto;
					view {
						display: flex;
						align-items: center;
						justify-content: center;
						// width: 100rpx;
						height: 100rpx;
						// background: #FAFAFA;
						font-size: 60rpx;
						border: 1rpx solid #D9D9D9;
		
						&:not(:last-child) {
							border-right: 1rpx solid #D9D9D9;
						}
					}
				}
			}
		
			.keyboard {
				
				width: 100%;
				background: #EEEEEE;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
		
				button {
					display: flex;
					align-items: center;
					justify-content: center;
					width: calc(100vw / 3 - 1rpx);
					background: #FFFFFF;
					border-radius: 0;
					margin-top: 1rpx;
					font-size: 50rpx;
					height: 120rpx;
		
					&.button-hover:not(.hide) {
						background: #EEEEEE;
					}
		
					image {
						width: 52rpx;
						height: 38rpx;
					}
				}
			}
		}
		
		
	}
	
	

</style>