ygoa_miniapp/pages/mine/setting/pwdEdit/pwdEdit.vue

<template>
	<view class="container">
		<view class="uni-input-wrapper">
			<input class="uni-input" placeholder="请输入旧密码" :password="showPassword1" 
			v-model="oldPassword" />
			<text class="uni-icon" :class="[!showPassword1 ? 'uni-eye-active' : '']"
				@click="changePassword1">&#xe568;</text>
		</view>
		
		<view class="uni-input-wrapper">
			<input class="uni-input" placeholder="请输入新密码" :password="showPassword2" 
			v-model="newPassword" />
			<text class="uni-icon" :class="[!showPassword2 ? 'uni-eye-active' : '']"
				@click="changePassword2">&#xe568;</text>
		</view>
		
		<view class="uni-input-wrapper">
			<input class="uni-input" placeholder="请确认新密码" :password="showPassword3" 
			v-model="confirmPassword" />
			<text class="uni-icon" :class="[!showPassword3 ? 'uni-eye-active' : '']"
				@click="changePassword3">&#xe568;</text>
		</view>
		


		<button @click="submit" class="submitBtn">提交</button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	const oldPassword = ref('');
	const newPassword = ref('');
	const confirmPassword = ref('');
	const showPassword1 = ref(true);
	const showPassword2 = ref(true);
	const showPassword3 = ref(true);
	
	function submit() {
	  if (newPassword.value !== confirmPassword.value) {
	    uni.showToast({
	    	title: '新密码和确认密码不一致',
	    	icon: 'none'
	    });
	    return;
	  }
	  
	}
	
	function changePassword1() {
	  showPassword1.value = !showPassword1.value;
	}
	
	
	function changePassword2() {
	  showPassword2.value = !showPassword2.value;
	}
	
	function changePassword3() {
	  showPassword3.value = !showPassword3.value;
	}
	
</script>

<style>
	ontainer {
		padding: 40rpx;
	}

	.input-group {
		margin-bottom: 30rpx;
	}

	

	button {
		background-color: #007aff;
		color: white;
		padding:  20rpx 40rpx;
		border: none;
		border-radius: 10rpx;
		cursor: pointer;
	}

	.uni-input-wrapper {
		display: flex;
		align-items: center;
		
		padding:  20rpx;
		
		margin:  20rpx;
		
	}


	.uni-icon {
		margin-left: 20rpx;
		
	}

	.uni-eye-active {
		color: #007aff;
	}
	
	.submitBtn{
		width: 90%;
		margin-top: 30rpx;
	}
</style>