front/pages/login/change_password/change_password.vue

<template>
	<view class="change_password_box">
		<!-- 返回图标 -->
		<navigator url="/pages/login/forget_password/forget_password">
			<image class="return_image" src="../../../static/login/change_password/pictures/return_icon.png"></image>
		</navigator>
		<!-- 修改密码文字 -->
		<view class="change_passage_words">修改密码</view>
		<!-- 表单 -->
		<form class="change_password_form">
			<!-- 密码输入 -->
			<view class="passage_box change_password_form_item">
				<input type="text" class="passage" :password="isOpened_1" placeholder="请输入你的密码"/>
				<image @click="openEyesEvent_1" class="eyes" :src="eyesStateIcon_1"></image>
			</view>
			<!-- 确认密码输入 -->
			<view class="passage_box change_password_form_item">
				<input type="text" class="passage" :password="isOpened_2" placeholder="请再次确认密码"/>
				<image @click="openEyesEvent_2" class="eyes" :src="eyesStateIcon_2"></image>
			</view>
			<!-- 注册按钮 -->
			<view class="ensure_button_box change_password_form_item">
				<button class="ensure_button" @click="ensureClickEvent">确认修改</button>
			</view>
		</form>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';

const isOpened_1 = ref(true);	//输入框是否密码显示的标志
const eyesStateIcon_1 = ref("../../../static/login/register/pictures/closedeyes.png");
const isOpened_2 = ref(true);	//输入框是否密码显示的标志
const eyesStateIcon_2 = ref("../../../static/login/register/pictures/closedeyes.png");

// 判断密码是否要明文显示
function openEyesEvent_1(){
	if (isOpened_1.value)
	{
		isOpened_1.value = false;
		eyesStateIcon_1.value = "../../../static/login/register/pictures/openedeyes.png";
	}
	else
	{
		isOpened_1.value =true;
		eyesStateIcon_1.value = "../../../static/login/register/pictures/closedeyes.png";
	 }
}
// 判断确认的密码是否要明文显示
function openEyesEvent_2(){
	if (isOpened_2.value)
	{
		isOpened_2.value = false;
		eyesStateIcon_2.value = "../../../static/login/register/pictures/openedeyes.png";
	}
	else
	{
		isOpened_2.value =true;
		eyesStateIcon_2.value = "../../../static/login/register/pictures/closedeyes.png";
	 }
}

//确认修改按钮点击事件
function ensureClickEvent(){
	console.log('密码确认修改');
	uni.navigateTo({
		url:"/pages/login/account_login/account_login"
	})
}

</script>

<style lang="scss">
	.change_password_box{
		background-image: url("../../../static/login/register/pictures/background.png");
		background-size: cover;
		background-position: center;
		height: 100vh;
		width: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		object-fit: contain;
		// 返回图标
		.return_image{
			position: absolute;
			left: 16.5%;
			right: 80.1%;
			top: 8.62%;
			bottom: 89.09%;
			width: 0.8rem;
			height: auto;
			object-fit: contain;
		}
		//修改密码文字
		.change_passage_words{
			position: absolute;
			left: 12.4%;
			top: 30.8%;
			font-family: 'PingFang SC';
			font-size: 1.4rem;
			color: #000364;
		}
		//修改密码表单
		.change_password_form{
			position: absolute;
			width: 74.5%;
			height: 33.6%;
			top: 40%;
			//每个表单项
			.change_password_form_item{
				height: 15.6%;
				margin-bottom: 5%;
			}
			//密码输入盒子；确认密码盒子
			.passage_box{
				display: flex;
				align-items: center;
				padding-left: 3%;
				background-color: #D5E9FF;
				border-radius: 12px;
				position: relative;
				.passage{
					height: 100%;
					padding-left: 11%;
					background-image: url("../../../static/login/register/pictures/lock_icon.png");
					background-repeat: no-repeat;
					background-size: 0.8rem;
					background-position: 4.7% 50%;
					font-size: 0.8rem;
				}
				.eyes{
					width: 1rem;
					height: 1rem;
					position: absolute;
					right: 9%;
				}
			}
			//确认修改按钮
			.ensure_button{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 8%;
				height: 100%;
				border-radius: 12px;
				background-color: #4A69F7;
				color: #FFFCFC;
				text-align: center;
				font-size: 1.2rem;
			}
		}
	}
</style>