fix: 登录注册首页调整
This commit is contained in:
@@ -1,14 +1,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { Modal, message } from 'ant-design-vue/lib';
|
||||
import { reactive, onMounted, toRaw } from 'vue';
|
||||
import { getCaptchaImage, register } from '@/api/login';
|
||||
import { reactive, toRaw } from 'vue';
|
||||
import { register } from '@/api/login';
|
||||
import { regExpPasswd, regExpUserName } from '@/utils/regular-utils';
|
||||
import { useRouter } from 'vue-router';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const codeImgFall =
|
||||
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
|
||||
|
||||
let state = reactive({
|
||||
/**表单属性 */
|
||||
@@ -19,23 +17,9 @@ let state = reactive({
|
||||
password: '',
|
||||
/**确认密码 */
|
||||
confirmPassword: '',
|
||||
/**验证码 */
|
||||
code: '',
|
||||
/**验证码uuid */
|
||||
uuid: '',
|
||||
},
|
||||
/**表单提交点击状态 */
|
||||
formClick: false,
|
||||
/**验证码状态 */
|
||||
captcha: {
|
||||
/**验证码开关 */
|
||||
enabled: false,
|
||||
/**验证码图片地址 */
|
||||
codeImg: '',
|
||||
codeImgFall: codeImgFall,
|
||||
},
|
||||
/**验证码点击状态 */
|
||||
captchaClick: false,
|
||||
});
|
||||
|
||||
/**表单验证确认密码是否一致 */
|
||||
@@ -60,7 +44,7 @@ function fnFinish() {
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
register(toRaw(state.form))
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
if (res.code === 1) {
|
||||
Modal.success({
|
||||
title: t('common.tipTitle'),
|
||||
content: t('views.register.tipContent', {
|
||||
@@ -78,37 +62,8 @@ function fnFinish() {
|
||||
.finally(() => {
|
||||
hide();
|
||||
state.formClick = false;
|
||||
// 刷新验证码
|
||||
if (state.captcha.enabled) {
|
||||
state.form.code = '';
|
||||
fnGetCaptcha();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取验证码
|
||||
*/
|
||||
function fnGetCaptcha() {
|
||||
if (state.captchaClick) return;
|
||||
state.captchaClick = true;
|
||||
getCaptchaImage().then(res => {
|
||||
state.captchaClick = false;
|
||||
if (res.code != 200) {
|
||||
message.warning(`${res.msg}`, 3);
|
||||
return;
|
||||
}
|
||||
state.captcha.enabled = Boolean(res.captchaEnabled);
|
||||
if (state.captcha.enabled) {
|
||||
state.captcha.codeImg = res.img;
|
||||
state.form.uuid = res.uuid;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fnGetCaptcha();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -190,40 +145,6 @@ onMounted(() => {
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-row :gutter="8" v-if="state.captcha.enabled">
|
||||
<a-col :span="16">
|
||||
<a-form-item
|
||||
name="code"
|
||||
:rules="[
|
||||
{ required: true, min: 1, message: t('valid.codePlease') },
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.form.code"
|
||||
size="large"
|
||||
:placeholder="t('valid.codeHit')"
|
||||
:maxlength="6"
|
||||
>
|
||||
<template #prefix>
|
||||
<RobotOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-image
|
||||
:alt="t('valid.codeHit')"
|
||||
style="cursor: pointer; border-radius: 2px"
|
||||
width="120px"
|
||||
height="40px"
|
||||
:preview="false"
|
||||
:src="state.captcha.codeImg"
|
||||
:fallback="state.captcha.codeImgFall"
|
||||
@click="fnGetCaptcha"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-button
|
||||
block
|
||||
type="primary"
|
||||
|
||||
Reference in New Issue
Block a user