效果
具体代码
1、wxml
2、js
import request from '../../../utils/request'
const app = getApp()
Page({
data: {
type: 1, //默认第一次输入密码
onePassdWord: '', //请输入密码
twoPassdWord: '', //再次输入密码
themeColor: app.globalData.themeColor
},
onLoad(query) {
},
onShow() {
wx.setNavigationBarColor({
backgroundColor: app.globalData.color,
frontColor: '#ffffff'
})
},
getFocus() {
console.log('this.data.type--getFocus', this.data.type);
this.setData({
isFocus: true,
});
},
// 获取输入数字
getCode(e) {
const type = this.data.type;
const passdWord = e.detail.value; //获取到的密码
this.setData({
code: e.detail.value
});
console.log('获取输入数字', this.data.code)
// 获取输入框值的长度
let value_length = e.detail.value.length;
if (value_length == 6) {
console.log(666, passdWord, type);
if (type == 1) {
console.log(5555, type);
this.setData({
type: 2,
code: '',
isFocus: true,
onePassdWord: passdWord,
})
} else {
console.log(888, type);
this.setData({
twoPassdWord: passdWord,
})
}
// console.log(999, this.data.onePassdWord, this.data.twoPassdWord);
if (this.data.onePassdWord.length == 6 && this.data.twoPassdWord.length == 6) {
if (this.data.onePassdWord === this.data.twoPassdWord) {
this.upPaymentPassword()
// console.log('两次密码一样');
} else {
wx.showToast({
title: '两次密码不一致，请重新设置。',
icon: 'error',
duration: 2000
})
this.setData({
type: 1,
code: '',
onePassdWord: '',
twoPassdWord: '',
isFocus: true,
})
}
}
}
},
async upPaymentPassword() {
const res = await request('******', 'POST', { password: this.data.twoPassdWord })
if (res.success) {
wx.showToast({
title: '密码设置成功',
icon: 'success',
duration: 2000
})
wx.redirectTo({ url: `/subpackages/withdraw/index` });
}
}
});
3、wxss
page {
box-sizing: border-box;
height: 100%;
background-color: #f7f8fa;
}
.container {
width: 100%;
height: 100%;
color: #000;
}
.container .password_content {
text-align: center;
margin-top: 160rpx;
}
.container .password_content .title {
text-align: center;
}
.password_content .title .main_title {
font-size: 40rpx;
text-align: center;
font-weight: bold;
margin-bottom: 20rpx;
}
.password_content .title .sub_title {
font-size: 30rpx;
text-align: center;
font-weight: bold;
margin-bottom: 60rpx;
}
.container .sub-title .btn {
margin-left: 20rpx;
color: var(--themeColor);
}
.container .code-box {
width: 510rpx;
height: 80rpx;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
margin-top: 80rpx;
}
.container .code-box .input-box {
height: 80rpx;
width: 80rpx;
box-sizing: border-box;
background-color: #e7e7e7;
text-align: center;
line-height: 80rpx;
font-size: 34rpx;
}
.container .input-number {
opacity: 0;
position: absolute;
z-index: -1;
height: 0rpx;
width: 0rpx;
}
.container .time-box {
margin-top: 50rpx;
text-align: center;
font-size: 30rpx;
font-weight: bold;
color: #000;
}
.container .time-box .regain {
color: var(--themeColor);
}
.container .time-box .regain-info .time {
color: var(--themeColor);
}
相关文章
基于ElementUi再次封装基础组件文档
基于ant-design-vue再次封装基础组件文档
vue3+ts基于Element-plus再次封装基础组件文档
推荐阅读
发表评论