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">
				<view class="form_input_box passage_input_box">
					<input type="text" class="passage" :password="isOpened_1" placeholder="请输入你的密码"/>
					<image @click="openEyesEvent_1" class="eyes" :src="eyesStateIcon_1"></image>
				</view>
				<!-- <view class="error_tip" v-if="isPassageError">*密码错误</view> -->
			</view>
			<!-- 确认密码输入 -->
			<view class="passage_box change_password_form_item">
				<view class="form_input_box passage_input_box">
					<input type="text" class="passage" :password="isOpened_2" placeholder="请再次确认密码"/>
					<image @click="openEyesEvent_2" class="eyes" :src="eyesStateIcon_2"></image>
				</view>
				<view class="error_tip" v-if="isPassageSameError">*两次密码不相同</view>
			</view>
			<!-- 注册按钮 -->
			<view class="ensure_button_box change_password_form_item">
				<button class="ensure_button" @click="ensureClickEvent">确认修改</button>
			</view>
		</form>
		<!-- 修改成功弹窗 -->
		<my_pop_up
			class="change_tip"
			@onClick="onOpenUpClick"
			@onClose="onClosePopUPClick"
			:is-opened="isOpenPopUp"  
			:title="title" 
			:content="content"
		></my_pop_up>
	</view>
</template>

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

const isPassageSameError = ref(false);

const title = '成功';	//弹窗标题
const content = '密码修改成功'; //弹窗内容
const isOpenPopUp = ref(false);//是否显示弹窗

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

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

//确认修改按钮点击事件
function ensureClickEvent(){
	console.log('密码确认修改');
	isOpenPopUp.value = true;	//显示弹窗
}
function onOpenUpClick(){
	//TODO:跳转到登录界面
	uni.navigateTo({
		url: '/pages/login/account_login/account_login',
		animationType: 'pop-in',	//动画，但好像没作用
		animationDuration: 200
	});
}
function onClosePopUPClick(){
	//TODO:关闭弹窗
	isOpenPopUp.value = false;
}

</script>

<style lang="scss">
	.change_password_box{
		background-image: url("../../../static/login/change_password/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: auto;
				margin-bottom: 5%;
				.form_input_box{
					padding-left: 3%;
					padding-right: 3%;
					background-color: #D5E9FF;
					border-radius: 12px;
				}
				.error_tip{
					margin-top: 0.6vh;
					padding-left: 3%;
					font-size: 0.8rem;
					color: #FF1E1E;
				}
			}
			//密码输入盒子；确认密码盒子
			.passage_box{
				display: flex;
				flex-direction: column;
				.passage_input_box{
					display: flex;
					align-items: center;
					background-color: #D5E9FF;
					border-radius: 12px;
					position: relative;
					.passage{
						height: 5.5vh;
						padding-left: 11%;
						background-image: url("../../../static/login/change_password/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: 13%;
					}
				}
			}
			//确认修改按钮
			.ensure_button{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 8%;
				height: 5.5vh;
				border-radius: 12px;
				background-color: #4A69F7;
				color: #FFFCFC;
				text-align: center;
				font-size: 1.2rem;
			}
		}
	}
</style>