uniapp微信小程序-项目实战修改密码

 图标是使用uview里面的图标，icfont也可以

以下是所有代码 

<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>