123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- <template>
- <!-- 找回密码 -->
- <div class="forgetPassword flex-col">
- <s-header :name="$t('forgetPassword.header')" :noback="false"></s-header>
- <div class="forgetPasswordFormBox">
- <van-form @submit="forgetPasswordSubmit">
- <van-field v-model="username" name="username" :placeholder="$t('forgetPassword.usernamePlaceholder')"
- :rules="[{ required: true, message: $t('forgetPassword.usernameRequired') }]" />
- <span class="word1">{{ $t('forgetPassword.selectForgetPassword') }}</span>
- <div class="van-cell van-field">
- <div class="van-cell__value van-field__value radioBox">
- <van-radio-group v-model="ifForeign" direction="horizontal">
- <van-radio name="0" icon-size="18px">{{ $t('forgetPassword.phone') }}</van-radio>
- <van-radio name="2" icon-size="18px">{{ $t('forgetPassword.emailChina') }}</van-radio>
- <van-radio name="1" icon-size="18px">{{ $t('forgetPassword.emailAbroad') }}</van-radio>
- </van-radio-group>
- </div>
- </div>
- <div v-if="ifForeign === '0'">
- <span class="word2">{{ $t('forgetPassword.phoneWordSpan') }}</span>
- <van-field v-model="phone" name="phone" type="tel" :placeholder="$t('forgetPassword.phonePlaceholder')"
- :rules="[{ required: true, message: $t('forgetPassword.phoneRequired') }]" />
- </div>
- <div v-if="ifForeign === '2'">
- <span class="word2">{{ $t('forgetPassword.emailWordSpanChina') }}</span>
- <van-field v-model="email" name="email" :placeholder="$t('forgetPassword.emailPlaceholder')"
- :rules="[{ required: true, message: $t('forgetPassword.emailRequired') }]" />
- </div>
- <div v-if="ifForeign === '1'">
- <span class="word2">{{ $t('forgetPassword.emailWordSpan') }}</span>
- <van-field v-model="email" name="email" :placeholder="$t('forgetPassword.emailPlaceholder')"
- :rules="[{ required: true, message: $t('forgetPassword.emailRequired') }]" />
- </div>
- <van-field v-model="code" name="code" :placeholder="$t('forgetPassword.codePlaceholder')"
- :rules="[{ required: true, message: $t('forgetPassword.codeRequired') }]">
- <template #button>
- <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0">{{ time === 0 ?
- $t('forgetPassword.seedVerCode') : time + '秒后可重发' }}</van-button>
- </template>
- </van-field>
- <van-button round type="primary" class="register" native-type="submit">{{ $t('forgetPassword.registerButton')
- }}</van-button>
- </van-form>
- </div>
- </div>
- </template>
- <script>
- import { ref, reactive, toRefs, onMounted } from 'vue';
- import { showToast, showFailToast } from 'vant';
- import { setLocal, getLocal, styleUrl } from '@/common/js/utils';
- import sHeader from "@/components/SimpleHeader";
- import { useRouter } from "vue-router";
- import { sentForgetCode, checkForgetCode } from '@/service/forgetPassword';
- export default {
- setup() {
- const username = ref(''); // 用户名
- const ifForeign = ref('0'); // 手机号&邮箱状态
- const email = ref(''); // 邮箱
- const phone = ref(''); // 手机号
- const code = ref(''); // 验证码
- const verCodeTime = reactive({
- time: 0
- }); // 验证码间隔时间及状态
- const router = useRouter();
- // 发送验证码
- const seedVerCode = async () => {
- const { data } = await sentForgetCode({
- username: username.value,
- ifForeign: ifForeign.value,
- phoneOrEmail: ifForeign.value === '0' ? phone.value : email.value,
- hostName: 'Sunzee'
- });
- if (data.code === '00000') {
- showToast('验证码发送成功');
- verCodeTime.time = 3 * 60;
- verCodeTimeInterval();
- } else { showFailToast(data.message); }
- }
- // 验证码发送成功开始3分钟倒计时
- const verCodeTimeInterval = () => {
- verCodeTime.time--;
- setLocal('forgetVerCodeTime', verCodeTime.time)
- if (verCodeTime.time !== 0) { setTimeout(() => { verCodeTimeInterval(); }, 1000); }
- }
- // 验证-表单
- const forgetPasswordSubmit = async () => {
- const { data } = await checkForgetCode({
- ifForeign: ifForeign.value,
- phoneOrEmail: ifForeign.value === '0' ? phone.value : email.value,
- code: code.value
- });
- if (data.code === '00000') {
- showToast('校验成功');
- router.push({ path: '/changepassword', query: { name: username.value } });
- } else {
- showFailToast(data.message);
- }
- };
- // 初始化页面获取验证码倒计时
- onMounted(async () => {
- styleUrl('forgetPassword');
- verCodeTime.time = getLocal('forgetVerCodeTime');
- if (verCodeTime.time && verCodeTime.time !== '') {
- verCodeTime.time = parseInt(verCodeTime.time);
- if (verCodeTime.time > 0) { verCodeTimeInterval(); }
- } else { verCodeTime.time = 0; }
- });
- return {
- ...toRefs(verCodeTime),
- username,
- ifForeign,
- phone,
- email,
- code,
- seedVerCode,
- forgetPasswordSubmit
- };
- },
- components: { sHeader },
- };
- </script>
- <style lang="less" scoped>
- @import "../common/style/mixin";
- </style>
|