From 0dbc7465447164fef24327b5d494870832d798dd Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Tue, 26 May 2026 11:15:18 +0800
Subject: [PATCH] 1
---
src/views/forget/index.vue | 280 ++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 181 insertions(+), 99 deletions(-)
diff --git a/src/views/forget/index.vue b/src/views/forget/index.vue
index db5a625..197e92e 100644
--- a/src/views/forget/index.vue
+++ b/src/views/forget/index.vue
@@ -1,145 +1,227 @@
<template>
<div class="forget">
- <fx-header>
- </fx-header>
- <div class="forgetCont">
- <div class="title textColor">{{ $t('resetLoginPassword') }}</div>
- <div class="flex re-tab text-grey">
- <div :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{ $t('email') }}</div>
- <div :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('phoneNum') }}</div>
- <div :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('googleVerify') }}</div>
+ <van-loading color="#92D1FF" class="loading-box" v-if="isLoading" />
+
+ <!-- 顶部返回 -->
+ <div class="header">
+ <div class="back-btn" @click="$router.go(-1)">
+ <img src="../../assets/image/icon_back2.png" alt="" />
</div>
- <ExInput :label="$t('account')" :placeholderText="$t('entryAccount')" v-model="account" :dialCode="dialCode"
- @selectArea="onSelectArea" :area="isArea" :icon="icon" />
- <van-button class="w-full" style="margin-top:10px;" type="primary" @click="next">{{ $t('nextStep') }}
+ </div>
+
+ <div class="forget-cont">
+ <!-- 标题 -->
+ <div class="title textColor">{{ $t('forgetPassword') }}</div>
+
+ <!-- 账号 -->
+ <ExInput :label="$t('account')" :placeholderText="$t('entryAccount')" v-model="account" />
+
+ <!-- 验证码 -->
+ <div class="input-wrap">
+ <span class="input-label textColor">{{ $t('verifyCodeLabel') }}</span>
+ <div class="code-box inputBackground">
+ <input class="inputBackground textColor" type="text" :placeholder="$t('verifyCodeLabel')"
+ v-model="verifycode" />
+ <span class="send-btn" @click="sendCode">
+ {{ countdown > 0 ? $t('codeSent') + ' (' + countdown + 's)' : $t('sendVerifyCode') }}
+ </span>
+ </div>
+ </div>
+
+ <!-- 新密码 -->
+ <ExInput :label="$t('password')" :placeholderText="$t('entryPassword')" v-model="newPassword"
+ typeText="password" />
+
+ <!-- 确认密码 -->
+ <ExInput style="padding-bottom:0!important;" :label="$t('repassword')" :placeholderText="$t('repassword')"
+ v-model="rePassword" typeText="password" />
+
+ <!-- 提交按钮 -->
+ <van-button class="w-full submit-btn" type="primary" @click="submit">
+ {{ $t('confirm') }}
</van-button>
- <nationality-list ref='controlChildRef' :title="$t('selectArea')" @getName="getName"></nationality-list>
</div>
</div>
</template>
<script setup>
import ExInput from "@/components/ex-input/index.vue";
-import { _getUserNameVerifTarget } from "@/service/user.api.js";
-import nationalityList from '../authentication/components/nationalityList.vue'
-import { ref } from "vue";
+import { _sendVerifyCode } from "@/service/login.api";
+import { _resetpsw } from "@/service/user.api.js";
+import { ref, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
import { showToast } from "vant";
import { useRouter } from "vue-router";
+
const { t } = useI18n()
const router = useRouter()
const account = ref('')
-const activeIndex = ref(0)
-const isArea = ref(false)
-const dialCode = ref(0) //电话号前缀
-let icon = ref('')
+const verifycode = ref('')
+const newPassword = ref('')
+const rePassword = ref('')
+const isLoading = ref(false)
+const countdown = ref(0)
+const timer = ref(null)
-const changeIndex = (index) => {
- activeIndex.value = index;
- if (index == 1) {
- isArea.value = true
- } else {
- isArea.value = false
- }
+const clearTimer = () => {
+ clearInterval(timer.value)
+ timer.value = null
}
-const next = () => {
- if (account.value == "") {
- showToast(t("entryAccount"))
- return;
- }
- getUserNameVerifTarget()
-}
-const getUserNameVerifTarget = () => {
-
- let type;
- if (activeIndex.value == 0) {
- type = 2
- } else if (activeIndex.value == 1) {
- type = 1
- } else if (activeIndex.value == 2) {
- type = 3
+const sendCode = () => {
+ if (!account.value) {
+ showToast(t('entryAccount'))
+ return
}
- _getUserNameVerifTarget({
- username: type == 1 ? `${dialCode.value}${account.value}` : account.value,
- verifcode_type: type //验证类型 1手机 2 邮箱 3谷歌验证器
- }).then((res) => {
- if (type == 1 && !res.phone_authority) {
- showToast(t('noBindPhoneNum'));
- return false
- } else if (type == 2 && !res.email_authority) {
- showToast(t('noBindEmail'));
- return false
- } else if (type == 3 && !res.google_auth_bind) {
- showToast(t('noBindGoogleAuth'));
- return false
- }
- let vertifyAccount;
- if (type == 1) {
- vertifyAccount = res.phone
- } else if (type == 2) {
- vertifyAccount = res.email
- }
- router.push({ name: 'safeVerify', query: { type: type, account: vertifyAccount, username: account.value } })
+ if (countdown.value > 0) return
+ _sendVerifyCode({
+ target: account.value,
+ }).then(() => {
+ countdown.value = 60
+ timer.value = setInterval(() => {
+ if (countdown.value > 0) {
+ countdown.value--
+ } else {
+ clearTimer()
+ }
+ }, 1000)
})
}
-const controlChildRef = ref(null)
-const onSelectArea = () => {
- controlChildRef.value.open();
+const submit = () => {
+ if (!account.value) {
+ showToast(t('entryAccount'))
+ return
+ }
+ if (!verifycode.value) {
+ showToast(t('entryVerifyCode'))
+ return
+ }
+ if (!newPassword.value) {
+ showToast(t('entryPassword'))
+ return
+ }
+ if (newPassword.value !== rePassword.value) {
+ showToast(t('noSamePassword'))
+ return
+ }
+ isLoading.value = true
+ _resetpsw({
+ username: account.value,
+ password: newPassword.value,
+ // verifcode_type: type, // 暂时注释类型参数
+ verifcode: verifycode.value,
+ }).then(() => {
+ isLoading.value = false
+ router.push('/passSuccess')
+ }).catch(() => {
+ isLoading.value = false
+ })
}
-const getName = (params) => {
- icon.value = params.code;
- dialCode.value = params.dialCode;
-}
-
+onUnmounted(() => {
+ clearTimer()
+})
</script>
<style lang="scss" scoped>
+:deep(.van-loading) {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
.forget {
width: 100%;
+ min-height: 100vh;
box-sizing: border-box;
- font-size: 13px;
+ background: #fff;
}
-.forgetCont {
- padding: 15px;
- ;
-}
-
+/* 顶部返回 */
.header {
- display: flex;
- justify-content: space-between;
- padding: 0 13px;
- font-size: 14px;
- height: 50px;
- line-height: 50px;
+ padding-top: 3rem;
+ padding-left: 3rem;
+
+ .back-btn {
+ width: 4rem;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ img {
+ width: 100%;
+ }
+ }
}
+.forget-cont {
+ padding: 0 3rem 5rem;
+}
+
+/* 标题 */
.title {
font-weight: 700;
- font-size: 26px;
- margin-top: 27px;
- margin-bottom: 33px;
+ font-size: 3.25rem;
+ margin-top: 2.5rem;
+ margin-bottom: 4rem;
}
-.re-tab {
- margin-bottom: 22px;
+/* 验证码输入框 */
+.input-wrap {
+ padding-bottom: 2.75rem;
+ font-size: 2rem;
- div {
- padding: 0 18px;
- height: 34px;
- line-height: 34px;
- text-align: center;
- border-radius: 4px;
- margin-right: 10px;
+ .input-label {
+ display: block;
+ margin-bottom: 1.125rem;
}
- .active {
- background: $US_tabActice_background;
- color: $color_main;
+ .code-box {
+ height: 6.25rem;
+ padding: 0 1.375rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 0.75rem;
+
+ input {
+ flex: 1;
+ height: 100%;
+ border: none;
+ padding-left: 1.25rem;
+ color: $text_color;
+ background: transparent;
+
+ &::placeholder {
+ color: $dark-grey;
+ }
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ .send-btn {
+ flex-shrink: 0;
+ font-size: 2rem;
+ cursor: pointer;
+ white-space: nowrap;
+ padding-left: 1.25rem;
+ }
}
}
-</style>
\ No newline at end of file
+
+/* 提交按钮 */
+.submit-btn {
+ margin-top: 5.5rem;
+ border-radius: 1rem !important;
+ height: 6.25rem !important;
+ font-size: 2rem !important;
+ font-weight: 600 !important;
+}
+</style>
--
Gitblit v1.9.3