文章来源：https://www.toymoban.com/news/detail-836085.html
图标是使用uview里面的图标，icfont也可以文章来源地址https://www.toymoban.com/news/detail-836085.html
以下是所有代码
<template>
<view>
<!-- 密码三个 -->
<view class="password" v-for="(item,index) in userList">
<view class="contentuser">
<view class="user">
{{item.user}}
</view>
<view class="contentuserText">
<!-- 两个框和两个眼睛 -->
<input v-model="passwords[index]" maxlength=20 type="password" v-show="eyeVisible[index]" @blur="validatePassword" class="input" placeholder="请输入密码"/>
<input v-model="passwords[index]" maxlength=20 type="text" v-show="!eyeVisible[index]" @blur="validatePassword" class="input" placeholder="请输入密码"/>
<u-icon name="eye-fill" v-if="!eyeVisible[index]" size="28"
@click="togglePasswordVisibility(index)"></u-icon>
<u-icon name="eye-off" size="28" v-if="eyeVisible[index]"
@click="togglePasswordVisibility(index)"></u-icon>
</view>
</view>
<view class="border"></view>
</view>
<view class="signPut" @click="signPut">
更改密码
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex';
import {putPassword}from "@/pages/utils/api.js"
export default {
data() {
return {
password:false,
eyeVisible: [true, true, true], // 控制眼睛图标显示状态的数组
eyefill: true,
eyeoff: false,
yuanmima: "12345",
passwords: ["", '', ''], // 三个 input 的值分别保存在数组中,
userList: [{
user: "原密码",
}, {
user: "新密码",
}, {
user: "确认新密码",
}]
};
},
mounted() {
},
computed: {
...mapState(['userExt','userPwd']),
},
methods: {
// 密码长度要求示例：6-20位
validatePassword(event) {
const password = event.detail.value;
if (password.length < 6 || password.length > 20) {
this.password = false
uni.showToast({
title: '密码长度应为6-20位',
icon: 'none',
duration: 2000
});
return;
}
this.password = true
},
togglePasswordVisibility(index) {
// 使用 $set手动更新
this.$set(this.eyeVisible, index, !this.eyeVisible[index]);
},
async signPut() {
// 检查新密码和确认新密码是否匹配
if (this.passwords[1] !== this.passwords[2]) {
uni.showToast({
title: "新密码和确认新密码不匹配",
icon: "none",
duration: 2000,
});
return;
}
else if(this.userPwd==this.passwords[1]){
uni.showToast({
title: '原密码和新密码相同无需修改',
icon: 'none',
duration: 2000
});
return
}
else if(this.passwords[1] == this.passwords[2]&&this.password){
try{
// 修改密码接口
const passwordRes=await putPassword({
action:"SetUpPassword",
userId:this.userExt.code,
OldPassword:this.passwords[0],
newPassword:this.passwords[1]
});
if(passwordRes.Status==true){
uni.showToast({
title: passwordRes.Message,
icon: "success",
duration: 2000,
});
uni.reLaunch({
url:"/pages/login/login"
})
}
else{
uni.showToast({
title: passwordRes.Message,
icon: "success",
duration: 2000,
});
}
}
catch(err){
console.log(err);
}
}
else{
uni.showToast({
title: '密码长度应为6-20位',
icon: 'none',
duration: 2000
});
}
},
}
}
</script>
<style lang="less">
.input{
// background-color: red;
height: 100rpx;
}
.user {
font-size: 32rpx;
font-family: Inter, Inter;
font-weight: 400;
color: #333333;
padding-left: 10rpx;
}
.contentuser {
display: flex;
// padding-right: 30rpx;
box-sizing: border-box;
justify-content: space-between;
align-items: center;
height: 116rpx;
}
.contentuserText {
display: flex;
width: 400rpx;
// background-color: aqua;
font-size: 28rpx;
font-family: Inter, Inter;
padding-right: 15rpx;
font-weight: 400;
color: #666666;
}
.border {
width: 656rpx;
height: 1rpx;
opacity: 1;
border-bottom: 0.5rpx solid #D2D2D2;
}
.password {
box-sizing: border-box;
padding-left: 40rpx;
}
.signPut {
width: 90%;
font-size: 32rpx;
height: 80rpx;
color: #FFFFFF;
border-radius: 68rpx;
margin-top: 82rpx;
text-align: center;
line-height: 80rpx;
background-color: #F65A02;
margin-left: auto;
margin-right: auto;
}
</style>到了这里，关于uniapp微信小程序-项目实战修改密码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
