init: 初始系统模板
This commit is contained in:
TsMask
313
src/views/register.vue
Normal file
313
src/views/register.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<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 { 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({
|
||||
/**表单属性 */
|
||||
form: {
|
||||
/**账号 */
|
||||
username: '',
|
||||
/**密码 */
|
||||
password: '',
|
||||
/**确认密码 */
|
||||
confirmPassword: '',
|
||||
/**验证码 */
|
||||
code: '',
|
||||
/**验证码uuid */
|
||||
uuid: '',
|
||||
},
|
||||
/**表单提交点击状态 */
|
||||
formClick: false,
|
||||
/**验证码状态 */
|
||||
captcha: {
|
||||
/**验证码开关 */
|
||||
enabled: false,
|
||||
/**验证码图片地址 */
|
||||
codeImg: '',
|
||||
codeImgFall: codeImgFall,
|
||||
},
|
||||
/**验证码点击状态 */
|
||||
captchaClick: false,
|
||||
});
|
||||
|
||||
/**表单验证确认密码是否一致 */
|
||||
function fnEqualToPassword(
|
||||
rule: Record<string, any>,
|
||||
value: string,
|
||||
callback: (error?: string) => void
|
||||
) {
|
||||
if (!value) {
|
||||
return Promise.reject(t('views.register.passwordErr'));
|
||||
}
|
||||
if (state.form.password === value) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(t('views.register.passwordConfirmErr'));
|
||||
}
|
||||
|
||||
/**表单验证通过 */
|
||||
function fnFinish() {
|
||||
state.formClick = true;
|
||||
// 发送请求
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
register(toRaw(state.form))
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
Modal.success({
|
||||
title: t('common.tipTitle'),
|
||||
content: t('views.register.tipContent', {
|
||||
username: state.form.username,
|
||||
}),
|
||||
okText: t('views.register.tipBtn'),
|
||||
onOk() {
|
||||
router.push({ name: 'Login' });
|
||||
},
|
||||
});
|
||||
} else {
|
||||
message.error(`${res.msg}`, 3);
|
||||
}
|
||||
})
|
||||
.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>
|
||||
<div class="container">
|
||||
<div class="top">
|
||||
<div class="header">
|
||||
<a href="/" target="_self"
|
||||
><img src="@/assets/logo.png" class="logo" alt="logo" />
|
||||
<span class="title">{{ t('common.title') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="desc">{{ t('common.desc') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<a-form :model="state.form" name="tabForm" @finish="fnFinish">
|
||||
<a-form-item
|
||||
name="username"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
pattern: regExpUserName,
|
||||
message: t('valid.userNameReg'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.form.username"
|
||||
size="large"
|
||||
:placeholder="t('valid.userNameHit')"
|
||||
:maxlength="30"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
name="password"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
pattern: regExpPasswd,
|
||||
message: t('valid.passwordReg'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="state.form.password"
|
||||
size="large"
|
||||
:placeholder="t('valid.passwordHit')"
|
||||
:maxlength="26"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
name="confirmPassword"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 6,
|
||||
max: 26,
|
||||
validator: fnEqualToPassword,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="state.form.confirmPassword"
|
||||
size="large"
|
||||
:placeholder="t('valid.passwordConfirmHit')"
|
||||
:maxlength="26"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</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"
|
||||
size="large"
|
||||
html-type="submit"
|
||||
:loading="state.formClick"
|
||||
>
|
||||
{{ t('views.register.registerBtn') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
block
|
||||
type="default"
|
||||
size="large"
|
||||
style="margin-top: 16px"
|
||||
@click="() => router.push({ name: 'Login' })"
|
||||
>
|
||||
{{ t('views.register.loginBtn') }}
|
||||
</a-button>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: 110px 0 144px;
|
||||
background-image: url(../assets/background.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 110px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
.logo {
|
||||
height: 44px;
|
||||
margin-right: 16px;
|
||||
vertical-align: top;
|
||||
border-style: none;
|
||||
border-radius: 6.66px;
|
||||
}
|
||||
.title {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-weight: 600;
|
||||
font-size: 33px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 40px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 368px;
|
||||
min-width: 260px;
|
||||
margin: 0 auto;
|
||||
|
||||
.prefix-icon {
|
||||
color: #8c8c8c;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user