LK/income_payments_applet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

有关密码框都加上小眼睛控制密码显隐

Browse Source
This commit is contained in:
姚亚男
2021-10-22 11:09:47 +08:00
parent 8a819d829e
commit dcc0e8b1fa
12 changed files with 181 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/none.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

assets/images/show.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

pages/login/login.js
+6 -5
View File
@@ -127,10 +127,6 @@ Page({
// 请求短信登录start
UserApi.codeLogin(params).then(res => {
if (res.success) {
wx.setStorage({
key: 'userInfo',
data: res.result.userInfo
})
// 第一次登录系统，需要设置密码
if(res.message === "updatePassword") {
// 存临时token
@@ -138,9 +134,10 @@ Page({
key: 'token-temp',
data: res.result.token
})
let userInfo = JSON.stringify(res.result.userInfo)
// 跳转设置密码页
wx.navigateTo({
url: '../setPassword/setPassword',
url: `../setPassword/setPassword?userInfo=${userInfo}`,
})
}else{
// 存token和userInfo
@@ -148,6 +145,10 @@ Page({
key: 'X-Access-Token',
data: res.result.token
})
wx.setStorage({
key: 'userInfo',
data: res.result.userInfo
})
// 绑定微信
this.wxBindPhone()
// 跳转首页
pages/phonePassword/phonePassword.js
+42 -16
View File
@@ -10,6 +10,8 @@ Page({
* 页面的初始数据
*/
data: {
show: true, // 默认显示的是闭眼睛
type: 'password',
form: {
currdatetime: '',
requestCodeSuccess: true,
@@ -18,7 +20,19 @@ Page({
rsaPublicKey: '', // 公钥
flag: false
},
showPassword(){
if(this.data.show){ // 显示睁开眼睛的时候 type="text"
this.setData({
type: 'text',
show: false
})
}else{
this.setData({
type: 'password',
show: true
})
}
},
back(){
wx.navigateBack({
delta: 1
@@ -108,21 +122,33 @@ Page({
if(this.data.flag){
UserApi.passWordLogin(params).then(res => {
if(res.success){
// 绑定微信
this.wxBindPhone()
// 存token和userInfo
wx.setStorage({
key: 'X-Access-Token',
data: res.result.token
})
wx.setStorage({
key: 'userInfo',
data: res.result.userInfo
})
// 跳转首页
wx.switchTab({
url: '../home/home',
})
if(res.message == '请先用手机号登录'){
wx.showToast({
title: '首次登录请用验证码方式登录',
icon: 'none',
duration: 2000
})
setTimeout(() => {
wx.navigateBack()
}, 2000);
return
}else{
// 绑定微信
this.wxBindPhone()
// 存token和userInfo
wx.setStorage({
key: 'X-Access-Token',
data: res.result.token
})
wx.setStorage({
key: 'userInfo',
data: res.result.userInfo
})
// 跳转首页
wx.switchTab({
url: '../home/home',
})
}
}else{
wx.showToast({
title: res.message,
pages/phonePassword/phonePassword.wxml
+3 -1
View File
@@ -10,7 +10,9 @@
<view class="form-item">
<view class="text-label">密码</view>
<view class="text-value">
<input name="password" value="{{password}}" type="password" placeholder="请输入密码" />
<input name="password" value="{{password}}" type="{{type}}" placeholder="请输入密码" />
<image src="../../assets/images/show.png" class="show" wx:if="{{!show}}" bindtap="showPassword"></image>
<image src="../../assets/images/none.png" class="show" wx:if="{{show}}" bindtap="showPassword"></image>
</view>
</view>
<view class="form-item">
pages/phonePassword/phonePassword.wxss
+11
View File
@@ -6,6 +6,9 @@
.text-label {
width: 60px !important;
}
.text-value{
position: relative;
}
.forget{
color: #999;
font-size: 14px;
@@ -27,4 +30,12 @@
width: 100%;
height: 90%;
border-radius: 5px;
}
.show{
width: 15px;
height: 15px;
position: absolute;
right: 10px;
top: 8px;
z-index: 9;
}
pages/setPassword/setPassword.js
+37 -3
View File
@@ -11,10 +11,37 @@ Page({
newPassword: '', // 密码
verifyPassword: '', // 确认密码
rsaPublicKey: '',
flag: false
flag: false,
show: true, // 默认显示的是闭眼睛
showVerify: true,
type: 'password',
typeVerify: 'password'
},
bindBlurInput(e){
showPassword(){
if(this.data.show){ // 显示睁开眼睛的时候 type="text"
this.setData({
type: 'text',
show: false
})
}else{
this.setData({
type: 'password',
show: true
})
}
},
showPasswordVerify(){
if(this.data.showVerify){ // 显示睁开眼睛的时候 type="text"
this.setData({
typeVerify: 'text',
showVerify: false
})
}else{
this.setData({
typeVerify: 'password',
showVerify: true
})
}
},
// 登录
formSubmit(e) {
@@ -84,6 +111,10 @@ Page({
key: 'X-Access-Token',
data: that.data.password
})
wx.setStorage({
key: 'userInfo',
data: this.data.userInfo
})
// 绑定微信
this.wxBindPhone()
wx.switchTab({
@@ -111,6 +142,9 @@ Page({
UserApi.wxBind(params).then(res=>{})
})
},
onLoad(options){
this.data.userInfo = JSON.parse(options.userInfo)
},
/**
* 生命周期函数--监听页面显示
*/
pages/setPassword/setPassword.wxml
+6 -2
View File
@@ -5,13 +5,17 @@
<view class="form-item">
<view class="text-label">密码</view>
<view class="text-value">
<input name="newPassword" bindblur="bindBlurInput" value="{{newPassword}}" type="password" placeholder="请输入密码" />
<input name="newPassword" bindblur="bindBlurInput" value="{{newPassword}}" type="{{type}}" placeholder="请输入密码" />
<image src="../../assets/images/show.png" class="show" wx:if="{{!show}}" bindtap="showPassword"></image>
<image src="../../assets/images/none.png" class="show" wx:if="{{show}}" bindtap="showPassword"></image>
</view>
</view>
<view class="form-item">
<view class="text-label">确认密码</view>
<view class="text-value">
<input name="verifyPassword" bindblur="bindBlurInput" value="{{verifyPassword}}" type="password" placeholder="请确认密码" />
<input name="verifyPassword" bindblur="bindBlurInput" value="{{verifyPassword}}" type="{{typeVerify}}" placeholder="请确认密码" />
<image src="../../assets/images/show.png" class="show" wx:if="{{!showVerify}}" bindtap="showPasswordVerify"></image>
<image src="../../assets/images/none.png" class="show" wx:if="{{showVerify}}" bindtap="showPasswordVerify"></image>
</view>
</view>
<view class="btn-area">
pages/setPassword/setPassword.wxss
+11
View File
@@ -7,6 +7,9 @@ page {
.form-box{
transform: translateY(100%);
}
.text-value{
position: relative;
}
.set-password{
display: block;
font-size: 16px;
@@ -16,3 +19,11 @@ page {
margin-bottom: 20px;
letter-spacing: 0.5px;
}
.show{
width: 15px;
height: 15px;
position: absolute;
right: 10px;
top: 8px;
z-index: 9;
}
pages/upDateInfo/upDateInfo.js
+45 -50
View File
@@ -13,59 +13,54 @@ Page({
oldpassword: '', // 旧密码
password: '', // 新密码
confirmpassword: '', // 确认新密码
// count: 60, // 倒计时秒
rsaPublicKey: '', // 公钥
},
// showGetCaptcha: true
showOld: true,
typeOld: 'password',
show: true, // 默认显示的是闭眼睛
showVerify: true,
type: 'password',
typeVerify: 'password'
},
showPasswordOld(){
if(this.data.showOld){ // 显示睁开眼睛的时候 type="text"
this.setData({
typeOld: 'text',
showOld: false
})
}else{
this.setData({
typeOld: 'password',
showOld: true
})
}
},
showPassword(){
if(this.data.show){ // 显示睁开眼睛的时候 type="text"
this.setData({
type: 'text',
show: false
})
}else{
this.setData({
type: 'password',
show: true
})
}
},
showPasswordVerify(){
if(this.data.showVerify){ // 显示睁开眼睛的时候 type="text"
this.setData({
typeVerify: 'text',
showVerify: false
})
}else{
this.setData({
typeVerify: 'password',
showVerify: true
})
}
},
// // 获取验证码
// getVerCode() {
// if (/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.data.form.phone)) {
// UserApi.sendCode({
// phone: this.data.form.phone
// }).then(res => {
// // 获取成功，倒计时 start
// if (res.success) {
// this.countDown()
// } else {
// wx.showToast({
// title: '获取验证码失败',
// icon: 'error',
// duration: 2000
// })
// }
// })
// } else {
// wx.showToast({
// title: '请输入正确的手机号',
// icon: 'none',
// duration: 2000
// })
// }
// },
// 倒计时
// countDown() {
// if (countdown === 0) {
// this.setData({
// showGetCaptcha: true
// })
// countdown = 60;
// return;
// } else {
// this.setData({
// showGetCaptcha: false
// })
// countdown--;
// this.setData({
// count: countdown
// })
// }
// setTimeout(() => {
// this.countDown()
// }, 1000)
// // 倒计时 end
// },
// 提交
formSubmit(e) {
if(!e.detail.value.oldpassword){
pages/upDateInfo/upDateInfo.wxml
+9 -11
View File
@@ -4,27 +4,25 @@
<view class="form-item">
<view class="text-label">旧密码</view>
<view class="text-value">
<input name="oldpassword" value="{{oldpassword}}" type="password" placeholder="请输入旧密码" />
<input name="oldpassword" value="{{oldpassword}}" type="{{typeOld}}" placeholder="请输入旧密码" />
<image src="../../assets/images/show.png" class="show" wx:if="{{!showOld}}" bindtap="showPasswordOld"></image>
<image src="../../assets/images/none.png" class="show" wx:if="{{showOld}}" bindtap="showPasswordOld"></image>
</view>
</view>
<!-- <view class="form-item">
<view class="text-label">验证码</view>
<view class="text-value">
<input name="verifyCode" value="{{verifyCode}}" placeholder="请输入验证码" />
</view>
<view wx:if="{{showGetCaptcha}}" class="captcha" bindtap="getVerCode">获取验证码</view>
<view wx:else="{{showGetCaptcha}}" class="captcha count">{{count}}</view>
</view> -->
<view class="form-item">
<view class="text-label">新密码</view>
<view class="text-value">
<input name="password" value="{{password}}" type="password" placeholder="请输入新密码" />
<input name="password" value="{{password}}" type="{{type}}" placeholder="请输入新密码" />
<image src="../../assets/images/show.png" class="show" wx:if="{{!show}}" bindtap="showPassword"></image>
<image src="../../assets/images/none.png" class="show" wx:if="{{show}}" bindtap="showPassword"></image>
</view>
</view>
<view class="form-item">
<view class="text-label">确认新密码</view>
<view class="text-value">
<input name="confirmpassword" value="{{confirmpassword}}" type="password" placeholder="请确认新密码" />
<input name="confirmpassword" value="{{confirmpassword}}" type="{{typeVerify}}" placeholder="请确认新密码" />
<image src="../../assets/images/show.png" class="show" wx:if="{{!showVerify}}" bindtap="showPasswordVerify"></image>
<image src="../../assets/images/none.png" class="show" wx:if="{{showVerify}}" bindtap="showPasswordVerify"></image>
</view>
</view>
<view class="btn-area">
pages/upDateInfo/upDateInfo.wxss
+11
View File
@@ -5,3 +5,14 @@
.text-label {
width: 80px !important;
}
.text-value{
position: relative;
}
.show{
width: 15px;
height: 15px;
position: absolute;
right: 10px;
top: 8px;
z-index: 9;
}