zhywpt-sp/login/forget-pwd-step3.vue

<!-- 注册第3步 -->
<template>
  <view class="register-main">
    <view class="title">重置密码</view>
    <view class="hint">重置之前的密码，设置新密码</view>
    <view class="hint1">请输入密码</view>
    <view class="form-input">
      <input
        class="input"
        v-model="state.password"
        placeholder="请输入密码"
        placeholder-class="form-placeholder"
        :password="state.isPwdType ? true : false"
        type="text"
      />
      <image
        :src="`${$imgUrl}login/${
          state.isPwdType ? 'icon_eye_close' : 'icon_eye_open'
        }.png`"
        class="eye"
        @click="state.isPwdType = !state.isPwdType"
		mode="aspectFill"
      ></image>
    </view>
	
	<view class="hint2">请再次输入密码</view>
	<view class="form-input">
	  <input
	    class="input"
	    v-model="state.affirmPassword"
	    placeholder="请再次输入密码"
	    placeholder-class="form-placeholder"
	    :password="state.isAffirmPwdType ? true : false"
	    type="text"
	  />
	  <image
	    :src="`${$imgUrl}login/${
	      state.isAffirmPwdType ? 'icon_eye_close' : 'icon_eye_open'
	    }.png`"
	    class="eye"
	    @click="state.isAffirmPwdType = !state.isAffirmPwdType"
		mode="aspectFill"
	  ></image>
	</view>
	
    <view class="hint4">{{ state.pwdHint }}</view>
  </view>

  <view class="btn">
    <submit-button title="确认更改" @submit="doResetPwd"></submit-button>
  </view>
</template>

<script setup lang="ts">
import { msg, confirm, checkStr } from "@/utils/utils";
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { request } from "@/utils/network/request";
import { resetPwd } from "@/utils/network/api";

const state = reactive({
  isPwdType: true,
  isAffirmPwdType: true,
  password: "", //密码
  affirmPassword:"",//再次输入密码
  phone: "", //手机号
  code: "", //验证码
  pwdHint: "密码不少于8位，必须同时包含数字、大小写字母和特殊符号",
});

onLoad((options) => {
  state.phone = options.phone;
  state.code = options.code;
});

/* 忘记密码 */
const doResetPwd = () => {
  if (!state.password) {
    msg("请输入密码");
    return;
  }
  
  if (!state.affirmPassword) {
    msg("请再次输入密码");
    return;
  }
  
  if(state.password !== state.affirmPassword){
	  msg("两次密码输入不一致，请重新输入！");
	  return;
  }

  const options = {
    type: 2,
    data: {
      newPassword: state.password,
	  affirmNewPassword:state.affirmPassword,
      mobile: state.phone,
      code: state.code,
    },
    method: "POST",
    showLoading: true,
  };
  request(resetPwd, options).then((res) => {
    confirm(
      "密码重置成功，请登录！",
      () => {
        uni.$emit("login", { phone: state.phone });
        uni.navigateBack({ delta: 3 });
      },
      "提示",
      false
    );
  });
};
</script>

<style lang="scss" scoped>
.register-main {
  border-top: 1rpx solid #dcdcdc;
  padding: 78rpx 30rpx 50rpx;
  .title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 600;
  }
  .hint {
    font-size: 24rpx;
    color: #999999;
    margin-top: 20rpx;
  }
  .hint1 {
    color: #333333;
    font-size: 28rpx;
    margin-top: 100rpx;
    font-weight: 600;
  }
  .hint2{
	  color: #333333;
	  font-size: 28rpx;
	  margin-top: 50rpx;
	  font-weight: 600;
  }
  .hint4 {
    margin-top: 30rpx;
    font-size: 26rpx;
    color: #00b38b;
  }
}

.form-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 90rpx;
  margin-top: 30rpx;
  border-bottom: 1rpx solid #dcdcdc;
  color: #333333;
  .input {
    flex: 1;
    padding-right: 48rpx;
    font-size: 26rpx;
	background: transparent;
  }
  .eye {
    width: 48rpx;
    height: 48rpx;
  }
}
.form-placeholder {
  color: #999999;
}

.btn {
  margin: 150rpx 40rpx 0px;
}
</style>