|
@@ -1,13 +1,13 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="form-title">
|
|
<div class="form-title">
|
|
|
- {{ formType ? $t('login.registerModel') : $t('login.loginModel') }}
|
|
|
|
|
|
|
+ {{ form_type ? $t('login.registerModel') : $t('login.loginModel') }}
|
|
|
</div>
|
|
</div>
|
|
|
<a-form
|
|
<a-form
|
|
|
- ref="refForm"
|
|
|
|
|
|
|
+ ref="ref_form"
|
|
|
:model="form"
|
|
:model="form"
|
|
|
:rules="rules"
|
|
:rules="rules"
|
|
|
- layout="validate"
|
|
|
|
|
:style="{ width: 'calc(100% - 40px)' }"
|
|
:style="{ width: 'calc(100% - 40px)' }"
|
|
|
|
|
+ layout="validate"
|
|
|
@submit-success="handleSubmit"
|
|
@submit-success="handleSubmit"
|
|
|
>
|
|
>
|
|
|
<a-form-item field="username">
|
|
<a-form-item field="username">
|
|
@@ -15,7 +15,7 @@
|
|
|
<template #prefix> <icon-user /> </template>
|
|
<template #prefix> <icon-user /> </template>
|
|
|
</a-input>
|
|
</a-input>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
- <a-form-item field="email" v-if="formType">
|
|
|
|
|
|
|
+ <a-form-item v-if="form_type" field="email">
|
|
|
<a-input v-model="form.email" :placeholder="$t('login.emailTips')">
|
|
<a-input v-model="form.email" :placeholder="$t('login.emailTips')">
|
|
|
<template #prefix> <icon-email /> </template>
|
|
<template #prefix> <icon-email /> </template>
|
|
|
</a-input>
|
|
</a-input>
|
|
@@ -33,15 +33,15 @@
|
|
|
</a-input-password>
|
|
</a-input-password>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
<a-form-item>
|
|
<a-form-item>
|
|
|
- <a-button v-if="!formType" :loading="loading" class="submit-btn" type="primary" html-type="submit"
|
|
|
|
|
|
|
+ <a-button v-if="!form_type" class="submit-btn" type="primary" html-type="submit" :loading="loading"
|
|
|
>{{ $t('login.loginBtn') }}
|
|
>{{ $t('login.loginBtn') }}
|
|
|
</a-button>
|
|
</a-button>
|
|
|
- <a-button v-if="formType" :loading="loading" class="submit-btn" type="primary" html-type="submit"
|
|
|
|
|
|
|
+ <a-button v-if="form_type" class="submit-btn" type="primary" html-type="submit" :loading="loading"
|
|
|
>{{ $t('login.registerBtn') }}
|
|
>{{ $t('login.registerBtn') }}
|
|
|
</a-button>
|
|
</a-button>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
</a-form>
|
|
</a-form>
|
|
|
- <div class="tips-register" v-if="!formType">
|
|
|
|
|
|
|
+ <div v-if="!form_type" class="tips-register">
|
|
|
{{ $t('login.noAccount') }} <a class="reg-link" href="#" @click="changeFormType">{{ $t('login.registerBtn') }}</a>
|
|
{{ $t('login.noAccount') }} <a class="reg-link" href="#" @click="changeFormType">{{ $t('login.registerBtn') }}</a>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
@@ -55,13 +55,14 @@ import { register } from '../../base/api/login';
|
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
-const { t } = useI18n();
|
|
|
|
|
|
|
|
|
|
const { appContext } = getCurrentInstance();
|
|
const { appContext } = getCurrentInstance();
|
|
|
const userStore = useCurrentUserStore();
|
|
const userStore = useCurrentUserStore();
|
|
|
|
|
|
|
|
|
|
+const { t } = useI18n();
|
|
|
|
|
+
|
|
|
const $message = appContext.config.globalProperties.$message;
|
|
const $message = appContext.config.globalProperties.$message;
|
|
|
-const refForm = ref();
|
|
|
|
|
|
|
+const ref_form = ref();
|
|
|
const form = reactive({
|
|
const form = reactive({
|
|
|
username: '',
|
|
username: '',
|
|
|
email: '', // 非必填
|
|
email: '', // 非必填
|
|
@@ -73,12 +74,12 @@ const rules = getLoginFormRules(t);
|
|
|
* 0:登录
|
|
* 0:登录
|
|
|
* 1:注册
|
|
* 1:注册
|
|
|
*/
|
|
*/
|
|
|
-const formType = ref(0);
|
|
|
|
|
|
|
+const form_type = ref(0);
|
|
|
const loading = ref(false);
|
|
const loading = ref(false);
|
|
|
|
|
|
|
|
const handleSubmit = (data) => {
|
|
const handleSubmit = (data) => {
|
|
|
loading.value = true;
|
|
loading.value = true;
|
|
|
- if (formType.value) {
|
|
|
|
|
|
|
+ if (form_type.value) {
|
|
|
// 注册
|
|
// 注册
|
|
|
toRegister();
|
|
toRegister();
|
|
|
} else {
|
|
} else {
|
|
@@ -102,8 +103,8 @@ const toRegister = () => {
|
|
|
.then((res) => {
|
|
.then((res) => {
|
|
|
if (res.code == 200 && res.data.username) {
|
|
if (res.code == 200 && res.data.username) {
|
|
|
$message.success(res.msg);
|
|
$message.success(res.msg);
|
|
|
- formType.value = 0;
|
|
|
|
|
- refForm.value.resetFields();
|
|
|
|
|
|
|
+ form_type.value = 0;
|
|
|
|
|
+ ref_form.value.resetFields();
|
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
|
form.username = res.data.username;
|
|
form.username = res.data.username;
|
|
|
});
|
|
});
|
|
@@ -117,23 +118,23 @@ const toRegister = () => {
|
|
|
};
|
|
};
|
|
|
const changeFormType = (e) => {
|
|
const changeFormType = (e) => {
|
|
|
e.preventDefault();
|
|
e.preventDefault();
|
|
|
- refForm.value.resetFields();
|
|
|
|
|
- formType.value = 1;
|
|
|
|
|
|
|
+ ref_form.value.resetFields();
|
|
|
|
|
+ form_type.value = 1;
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
.form-title {
|
|
.form-title {
|
|
|
- font-size: 30px;
|
|
|
|
|
line-height: 42px;
|
|
line-height: 42px;
|
|
|
|
|
+ font-size: 30px;
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
}
|
|
}
|
|
|
.submit-btn {
|
|
.submit-btn {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 54px;
|
|
height: 54px;
|
|
|
background-color: rgb(var(--arcoblue-6));
|
|
background-color: rgb(var(--arcoblue-6));
|
|
|
- border-radius: 3px;
|
|
|
|
|
color: var(--color-neutral-1);
|
|
color: var(--color-neutral-1);
|
|
|
font-size: 20px;
|
|
font-size: 20px;
|
|
|
|
|
+ border-radius: 3px;
|
|
|
}
|
|
}
|
|
|
.submit-btn:hover {
|
|
.submit-btn:hover {
|
|
|
background-color: rgba(var(--arcoblue-6), 0.8);
|
|
background-color: rgba(var(--arcoblue-6), 0.8);
|