-
效果图
. vue文件
<template>
<div class="securitycode">
<div class="code_title" v-show="staus === 0">请设置账户余额支付密码</div>
<div class="code_title" v-show="staus === 1">请再次填写以确认</div>
<div class="code_title" v-show="staus === 2">
请输入支付密码,以验证身份
</div>
<view class='content' @click='Tap'>
<block v-for="6" :key="item">
<input class='code-input-main-item' value="{{code.length>=index+1?code[index]:''}}" disabled ></input>
</block>
</view>
<input name="password" class='ipt' maxlength="6" focus="{{isFocus}}" type="number" @input="inputFunc"></input>
<div class="code_forget" v-show="staus === 2" @click="staus = 0">
忘记密码?
</div>
<div class="code_comfirm" v-show="staus === 1">确认</div>
</div>
</template>
<script>
export default {
data() {
return {
code: "",
staus: 0,
relCode: "",
focus:true,
isFocus:true, //聚焦
};
},
onShow() {
this.code = '';
if (this.relCode) {
this.staus = 2;
}
},
methods: {
inputFunc() {
if (this.code.length === 6) {
//输入框的值
console.log(this.code);
switch (this.staus) {
case 0: //设置
this.staus = 1;
this.relCode = this.code;
this.code = "";
break;
case 1: //确认
if (this.relCode === this.code) {
wx.showToast({
title: "设置成功",
});
setTimeout(()=>{
wx.navigateBack({
delta: 1, //返回的页面数,如果 delta 大于现有页面数,则返回到首页,
});
})
} else {
wx.showToast({
title: "俩次支付密码不一致", //提示的内容,
icon: "none", //图标,
duration: 2000, //延迟时间,
mask: true, //显示透明蒙层,防止触摸穿透,
success: (res) => {},
});
this.code = "";
}
break;
case 2: //忘记
if (this.relCode === this.code) {
this.staus=0;
} else {
wx.showToast({
title: "支付密码错误", //提示的内容,
icon: "none", //图标,
duration: 2000, //延迟时间,
mask: true, //显示透明蒙层,防止触摸穿透,
success: (res) => {},
});
}
this.code = "";
break;
default:
break;
}
}
},
},
};
</script>
<style lang="less" scoped>
@red: #ee3c4c;
.securitycode {
box-sizing: border-box;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 200rpx;
}
.code-input-main {
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 40rpx 0;
width: 550rpx;
}
.code_forget {
width: 550rpx;
text-align: right;
color: @red;
}
.code_comfirm {
width: 550rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
background-color: @red;
color: #fff;
border-radius: 10rpx;
}
.code-input-main-item {
/* font-family: time-font-myself; */
font-family: PingFang-SC-Medium;
/* width: .34rem;
height: .44rem; */
opacity: 0.85;
/* border-bottom: solid #ffffff 1rpx; */
border: solid #d9d9d9 1rpx;
margin: 0 5rpx;
text-align: center;
padding-bottom: 0;
color: #333333;
line-height: 102rpx;
width: 90rpx;
height: 90rpx;
font-size: 50rpx;
line-height: 90rpx;
background: rgba(255, 255, 255, 1);
border-radius: 10rpx;
}
.code-input-input {
height: 102rpx;
position: absolute;
width: 300%; //隐藏光标位置
outline: none;
color: transparent;
text-shadow: 0 0 0 transparent;
}
</style>
- 用 mpvue 写的, 有需要自行转小程序原生哈