lanecarford_front/src/views/login/ResetPage.vue

<template>
  <div class="login-page">
    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 返回按钮 -->
      <div class="back-button" @click="goBack">
        <img src="@/assets/images/arrow_left.png" class="back-icon" />
      </div>

      <!-- 标题区域 -->
      <div class="header">
        <div class="title">Log in.</div>
        <p class="subtitle">Redefine the styling experience with AI.</p>
        <p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
      </div>

      <div class="login-container">
        <div class="login-form">
          <Mail v-if="step === 'mail'" @nextStep="handleSendVerifyCode" />
          <Verify
            :email="fromData.email"
            v-else-if="step === 'verify'"
            :ct="emailCode"
            @nextStep="handleCheckVerifyCode"
          />
          <Password v-else-if="step === 'password'" @sucess="handleSuccess" />
        </div>
      </div>
    </div>

    <div class="footer">
      <p>Powered by AiDLab for Lane Crawford</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import Mail from './components/Mail.vue'
import Verify from './components/Verify.vue'
import Password from './components/Password.vue'
import { showToast } from 'vant'
import { resetPassword } from '@/api/login'
import { encryptPassword } from '@/utils/tools'

const router = useRouter()
const step = ref<'mail' | 'verify' | 'password'>('mail')
const emailCode = ref(['', '', '', '', ''])

const fromData = ref({
  email: '',
  verifyCode: '',
  password: '',
  operationType: 'FORGET_PWD' as const
})

// 返回上一页
const goBack = () => {
  if (step.value === 'mail') {
    router.go(-1)
    return
  }
  if (step.value === 'verify') {
    step.value = 'mail'
    return
  }
  if (step.value === 'password') {
    step.value = 'verify'
    return
  }
}

const handleStep = (type: 'mail' | 'verify' | 'password') => {
  step.value = type
}

const handleSendVerifyCode = (data: any) => {
  if (data?.email) {
    fromData.value.email = data?.email
  }
  // 只切换步骤，验证码的发送由 Verify 组件负责
  handleStep('verify')
}

const handleCheckVerifyCode = (data: any) => {
  console.log('data', data)
  fromData.value.verifyCode = data.code
  handleStep('password')
}

const handleSuccess = (data: any) => {
  fromData.value.password = encryptPassword(data.password)
  resetPassword(fromData.value).then((res) => {
    // console.log('res', res)
    showToast('the password has been reset')
    router.push('/login')
  })
}
</script>

<style scoped lang="less">
.login-page {
  position: relative;
  color: #fff;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-image: url('@/assets/images/login_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 12rem;
  font-family: 'satoshiRegular';
}

.back-button {
  // position: absolute;
  // top: 2rem;
  // left: 2rem;
  margin-top: 2.4rem;
  margin-left: 6.1rem;
  width: 2rem;
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  font-size: 3.4rem;
  .back-icon {
    width: 2.83rem;
    height: 3.47rem;
  }
}

.header {
  margin-top: 1.42rem;
  padding-left: 15.5rem;
  color: white;
  font-family: 'satoshiRegular';
  .title {
    font-size: 11rem;
    font-weight: bold;
    margin-bottom: 0.8rem;
    color: white;
    font-family: 'satoshiBold';
  }

  .subtitle {
    font-size: 3rem;
    color: white;
    font-weight: 400;
    line-height: 141%;
    letter-spacing: 0.08rem;
  }
}

.content {
  position: relative;
  // z-index: 2;
  flex: 1;
}

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 7.2rem;
  .login-form {
    position: relative;
    width: calc(100% - 28.4rem);
    height: 107.8rem;
    background: radial-gradient(
      100% 100% at 0% 0%,
      rgba(115, 115, 115, 0.4) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    -moz-backdrop-filter: blur(35px);
    -ms-backdrop-filter: blur(35px);
    -o-backdrop-filter: blur(35px);
    border: .2rem solid rgba(255, 255, 255, 0.15);
    border-radius: 4.79rem;
    padding: 6.8rem 5.9rem 6.2rem 7.18rem;
    box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: .2rem solid #fff;
    font-size: 3.83rem;
  }
}

.footer {
  position: relative;
  text-align: center;
  color: white;
  font-size: 3rem;
  margin-bottom: 15.5rem;
}
</style>