1

李

2026-05-26 0dbc7465447164fef24327b5d494870832d798dd

 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>

/* 提交按钮 */
.submit-btn {
    margin-top: 5.5rem;
    border-radius: 1rem !important;
    height: 6.25rem !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
}
</style>