CBB3/pages/user/userinfo/security/ckPass.vue

<template>
	<view class="assembly">
		<!-- 支付层 -->
		<view class="pay_node fx-h">
			<view class="pay_title"></view>
			<view class="pay_body fx-h">
				<view class="pay-pwd-input fx-r fx-bc fx-ac">
					<view class="pay-pwd-grid" v-for="(value, index) in payPwdGrid" :key="index">
						{{value.text}}  
					</view>
				</view>
				<view class="keyboard-node">
					<view class="keyboard-12 fx-h">
						<view class="fx-r keyboard-row">
							<view @tap="inputPwd($event)" class="keyboard" data-char="1" >1</view>
							<view @tap="inputPwd($event)" class="keyboard" data-char="2" >2</view>
							<view @tap="inputPwd($event)" class="keyboard" data-char="3" >3</view>
						</view>
						<view class="fx-r keyboard-row">
							<view @tap="inputPwd($event)" class="keyboard" data-char="4" >4</view>
							<view @tap="inputPwd($event)" class="keyboard" data-char="5" >5</view>
							<view @tap="inputPwd($event)" class="keyboard" data-char="6" >6</view>
						</view>
						<view class="fx-r keyboard-row">
							<view @tap="inputPwd($event)" class="keyboard" data-char="7" >7</view>
							<view @tap="inputPwd($event)" class="keyboard" data-char="8" >8</view>
							<view @tap="inputPwd($event)" class="keyboard" data-char="9" >9</view>
						</view>
						<view class="fx-r keyboard-row">
							<view class="keyboard"></view>
							<view @tap="inputPwd($event)" class="keyboard" data-char="0" >0</view>
							<view @tap="backspace()" class="keyboard" data-char="×" >×</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>    

export default {
	data() {
		return {
			shader: false,
			password: [],
			payPwdGrid: [
				{
					text: ''
				},
				{
					text: ''
				},
				{
					text: ''
				},
				{
					text: ''
				},
				{
					text: ''
				},
				{
					text: ''
				}
			],
			token:"",
			newPassword:""
		};
	},
	onLoad(options) {
		console.log(options.token);
		this.token = options.token || "";  
		this.newPassword = options.val; 
	},
	methods: {
		
		/* 小键盘输入 */
		inputPwd(e) {
			let char = e.currentTarget.dataset.char;
			let args = {
				target: this,
				data: char
			};
			let passIndex = this.password.length;
			if (passIndex < 6) {
				this.password.push(char);
				this.payPwdGrid[passIndex].text = "●";
				
				if (this.password.length === this.payPwdGrid.length) {
				    let newPaswd = this.password.join('');
				    if(newPaswd != this.newPassword) {
				        this.utils.Tip("二次密码错误，请检查在操作");
				        return;
				    }
				    
				    this.utils.loadIng("提交中...");
				    this
				        .request
				        .post("userPayment",{password:newPaswd,token:this.token})
				        .then(res=>{
				            uni.hideLoading();
				            if(res.code == 200) {
				                this.utils.Tip(res.msg);
				                uni.redirectTo({ url:"success"});
				            }else{
				                this.utils.Tip(res.msg);
				            }
				        }).catch(()=>{
				            uni.hideLoading();
				            this.utils.Tip("网络错误，请稍后尝试");
				        });
				    
				}
				
			}
		},
		/* 回退 */
		backspace() {
			let passIndex = this.password.length;
			if (this.password.length > 0) {
				// 改变密码框
				this.password = this.password.slice(0, this.password.length - 1);
				this.payPwdGrid[passIndex - 1].text = "";
				return;
			}
		}
	}
};
</script>

<style>
page{background: #fff;}
.pay_title{font-size: 16px;text-align: center;height: 40px;border-bottom: 1px solid #f1fff1;line-height: 40px;}
.pay-pwd-grid{width: 14%;height: 15vw;margin-right: 2%;border: 1px solid #f1f1ff;line-height: 15vw;text-align: center;}
.pay-pwd-grid:last-child{margin-right: 0;}

/* 自定义键盘 */
.keyboard-node {
	width: 750upx;
	margin-top: 120upx;
	height: 320px;
	line-height: 320px;
	position: fixed;
	bottom: 0;
	box-sizing: border-box;
}
.keyboard-12 {
	width: 750upx;
	height: 100%;
	line-height: 100%;
	box-sizing: border-box;
}
.keyboard-row {
	width: 750upx;
	height: 25%;
	line-height: 25%;
	box-sizing: border-box;
}
.keyboard {
	box-sizing: border-box;
	width: 250upx;
	height: 100%;
	line-height: 100%;
	background-color: #ffffff;
	border-top: #f7f4f4 solid 0.1upx;
	border-left: #f7f4f4 solid 0.1upx;
	font-size: 40upx;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: Center;
}
.keyboard:active {
	background: #f1f1f1;
}
.keyboard-row .keyboard:nth-child(1) {
	border-left: none;
}
.keyboard-row:nth-child(4) .keyboard:nth-child(1),
.keyboard-row:nth-child(4) .keyboard:nth-child(3) {
	background-color: #e3e8ec;
}

.hovers{
	
}
@keyframes showPopup{
	0%{
		opacity: 0;
		background-color: #d8d8d8;
	}
	100%{
		opacity: 1;
	}
}

	.container {
		width: 100%;
		height: 100%;
		z-index: 999;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0,0,0,.7);
		box-sizing: border-box;
	}
</style>