fix: 登录注册首页调整

This commit is contained in:
TsMask
2023-09-05 17:09:36 +08:00
parent c89ba642b5
commit 2d6f358ec8
3 changed files with 80 additions and 481 deletions

View File

@@ -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"