<template>
|
<div class="forget">
|
<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>
|
</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>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import ExInput from "@/components/ex-input/index.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 verifycode = ref('')
|
const newPassword = ref('')
|
const rePassword = ref('')
|
const isLoading = ref(false)
|
const countdown = ref(0)
|
const timer = ref(null)
|
|
const clearTimer = () => {
|
clearInterval(timer.value)
|
timer.value = null
|
}
|
|
const sendCode = () => {
|
if (!account.value) {
|
showToast(t('entryAccount'))
|
return
|
}
|
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 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
|
})
|
}
|
|
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;
|
background: #fff;
|
}
|
|
/* 顶部返回 */
|
.header {
|
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: 3.25rem;
|
margin-top: 2.5rem;
|
margin-bottom: 4rem;
|
}
|
|
/* 验证码输入框 */
|
.input-wrap {
|
padding-bottom: 2.75rem;
|
font-size: 2rem;
|
|
.input-label {
|
display: block;
|
margin-bottom: 1.125rem;
|
}
|
|
.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;
|
}
|
}
|
}
|
|
/* 提交按钮 */
|
.submit-btn {
|
margin-top: 5.5rem;
|
border-radius: 1rem !important;
|
height: 6.25rem !important;
|
font-size: 2rem !important;
|
font-weight: 600 !important;
|
}
|
</style>
|
