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"  v-model="first_input_password" 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"  v-model="second_input_password" 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, onMounted } from 'vue';

const isPassageSameError = ref(false);

const first_input_password = ref('');	//第一次输入的密码
const second_input_password= ref('');	//第二次输入的密码
const phone_number = ref('');	//手机号
const code= ref('');	//验证码



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");
// 使用 onLoad 获取传递的参数
onMounted(() => {
  const options = getCurrentPages()[getCurrentPages().length - 1].options;
  phone_number.value = options.phone_number || '';
  code.value = options.code || '';
  console.log('接收到的手机号是：', phone_number.value);
  console.log('接收到的验证码是：', code.value);
});
// 判断密码是否要明文显示
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(phone_number.value);
  console.log(first_input_password.value);
  console.log(second_input_password.value);
  console.log(code.value);
  if(first_input_password.value !== second_input_password.value){
    uni.showToast({
      title: '两次密码不相同',
      icon: "none"
    });
    isPassageSameError.value = true;
  }
  if(first_input_password.value.length<6||first_input_password.value.length>10){
    uni.showToast({
      title: '密码必须在6-10位之间',
      icon: "none"
    });
  }
  //向后端发送请求
  //这里向后端执行请求
  const app = getApp();
  // 向后端发送请求
  uni.request({
    url: app.globalData.fit_journey_login_address + '/ForgetPassword/FindPassword',
    method: 'POST',
    header: {
      'content-type': 'application/x-www-form-urlencoded',
    },
    data: {
      phone:String(phone_number.value),
      code:String (code.value),
      newPassword:String(first_input_password.value)
    },
    success: (res) => {
      if(res.data.code===200){
        uni.showToast({
          title: '修改密码成功！',
          icon: "none"
        });
      }else if(res.data.code===400){
        uni.showToast({
          title: '修改密码失败！',
          icon: "none"
        });
      }
      uni.navigateTo({
        url: '/pages/login/account_login/account_login',
        animationType: 'pop-in',
        animationDuration: 200
      });
    },
    error: (res) => {
      console.log("请求失败！请求数据是", res);
      uni.showToast({
        title: '发送验证码成功，请注意查收~',
        icon: "none"
      });
    }
  });


	/*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">
@import "@/static/login/change_password/css/change_password.scss";
</style>