OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

fix: 登录注册首页调整

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

103
src/views/index.vue
View File

@@ -6,108 +6,17 @@ import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const { appName, appVersion } = useAppStore();
/**跳转 */
function goTarget(type: string) {
let url = '';
if (type === 'code') {
url = 'https://gitee.com/TsMask/';
}
if (type === 'issues') {
url = 'https://gitee.com/TsMask/mask_antd_vue3/issues';
}
window.open(url, '__blank');
}
</script>
<template>
<PageContainer :breadcrumb="false" :title="appName" sub-title="by TsMask">
<template #tags>
<a-tag>当前版本：{{ appVersion }}</a-tag>
<a-tag color="magenta"><PayCircleOutlined /> 免费开源</a-tag>
</template>
<template #extra>
<a-button type="primary" @click="goTarget('code')">开源仓库</a-button>
<a-button type="default" @click="goTarget('issues')">提些建议</a-button>
</template>
<PageContainer :breadcrumb="false" >
<template #content>
<a-space :size="16" align="center">
<a-avatar
shape="circle"
:size="72"
:src="userStore.getAvatar"
:alt="userStore.userName"
></a-avatar>
<span class="nickname">
{{ userStore.nickName }} ，想必你那里一切安好吧。
</span>
</a-space>
</template>
<template #extraContent>
<a-space :size="16">
<a-statistic title="在线用户" :value="545486" />
</a-space>
</template>
展示统计数据
</template>
<a-row :gutter="16">
<a-col :lg="16" :md="16" :xs="24">
<a-card title="项目简介" style="margin-bottom: 16px">
<a-typography>
<a-typography-paragraph>
<a-typography-text mark> Vue3 </a-typography-text>
技术组合，支持按钮及数据权限，可自定义部门数据权限。
</a-typography-paragraph>
<a-typography-paragraph>
内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理等，支持在线定时任务配置。
</a-typography-paragraph>
<a-typography-paragraph>
使用 <a-typography-text mark> Ant-Design-Vue </a-typography-text>
组件库，搭建的前后端分离极速后台管理系统。
</a-typography-paragraph>
</a-typography>
</a-card>
</a-col>
<a-col :lg="8" :md="8" :xs="24">
<a-card title="快速开始" style="margin-bottom: 16px">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-button
type="link"
target="_blank"
title="开发手册"
href="https://juejin.cn/column/7188761626017792056"
>
开发手册
</a-button>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-button
type="link"
target="_blank"
title="来自Apifox的接口文档"
href="https://mask-api-midwayjs.apifox.cn/"
>
接口文档
</a-button>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-button
type="link"
target="_blank"
title="Middwayjs版本服务端"
href="https://gitee.com/TsMask/mask_api_midwayjs"
>
Node后端
</a-button>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-button type="text"> 相关待定 </a-button>
</a-col>
</a-row>
</a-card>
<a-card title="捐赠鼓励" style="margin-top: 16px">
<a-image width="100%" :src="donate" />
</a-card>
</a-col>
</a-row>
</PageContainer>
</template>

373
src/views/login.vue
View File

@@ -1,78 +1,45 @@
<script lang="ts" setup>
import { message } from 'ant-design-vue/lib';
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { reactive } from 'vue';
import useUserStore from '@/store/modules/user';
import { getCaptchaImage } from '@/api/login';
import useI18n from '@/hooks/useI18n';
import { regExpMobile, validMobile } from '@/utils/regular-utils';
import { regExpMobile } from '@/utils/regular-utils';
import { useRouter, useRoute } from 'vue-router';
const { t, changeLocale } = useI18n();
const router = useRouter();
const route = useRoute();
const codeImgFall =
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
/**登录后重定向页面 */
const redirectPath =
(route.query && (route.query.redirect as string)) || '/index';
/**Tab默认激活 */
let activeKey = ref<'username' | 'phonenumber'>('username');
let state = reactive({
/**表单属性 */
from: {
/**账号 */
username: 'maskAdmin',
username: 'admin',
/**密码 */
password: 'Admin@1234',
/**手机号 */
phonenumber: '',
/**验证码 */
code: '',
/**验证码uuid */
uuid: '',
password: 'rootaa',
},
/**表单提交点击状态 */
fromClick: false,
/**验证码状态 */
captcha: {
/**验证码开关 */
enabled: false,
/**验证码图片地址 */
codeImg: '',
codeImgFall: codeImgFall,
},
/**验证码点击状态 */
captchaClick: false,
});
/**表单验证通过 */
function fnFinish() {
state.fromClick = true;
let form = {};
// 账号密码登录
if (activeKey.value === 'username') {
form = {
username: state.from.username,
password: state.from.password,
code: state.from.code,
uuid: state.from.uuid,
};
}
// 手机号登录
if (activeKey.value === 'phonenumber') {
form = {
phonenumber: state.from.phonenumber,
code: state.from.code,
uuid: state.from.uuid,
};
}
let form = {
userName: state.from.username,
value: state.from.password,
grantType: 'password',
};
// 发送请求
useUserStore()
.fnLogin(form)
.then(res => {
if (res.code === 200) {
if (res.code === 1) {
message.success(t('views.login.loginSuccess'), 3);
router.push({ path: redirectPath });
} else {
@@ -81,85 +48,13 @@ function fnFinish() {
})
.finally(() => {
state.fromClick = false;
// 刷新验证码
if (state.captcha.enabled) {
state.from.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.from.uuid = res.uuid;
}
});
}
/**短信验证码定时器 */
let smsInterval: any = undefined;
/**短信验证码信息状态 */
let smsState = reactive({
/**点击状态 */
click: false,
/**发送倒计时 */
time: 120,
});
/**获取短信验证码 */
function fnGetSmsCaptcha() {
if (smsState.click) return;
if (!validMobile(state.from.phonenumber)) {
message.warning(t('valid.phoneReg'), 3);
return;
}
smsState.click = true;
setTimeout(() => {
// start 得到发送结果启动定时
message.success(t('valid.codeSmsSend'), 3);
state.from.uuid = '短信校验id';
smsInterval = setInterval(() => {
if (smsState.time <= 0) {
smsState.time = 120;
smsState.click = false;
clearTimeout(smsInterval);
} else {
smsState.time--;
}
}, 1000);
// end
}, 1000);
}
/**改变多语言 */
function fnChangeLocale(e: any) {
changeLocale(e.key);
}
onMounted(() => {
fnGetCaptcha();
});
onBeforeUnmount(() => {
smsState.time = 120;
smsState.click = false;
clearTimeout(smsInterval);
});
</script>
<template>
@@ -176,176 +71,69 @@ onBeforeUnmount(() => {
<div class="main">
<a-form :model="state.from" name="stateFrom" @finish="fnFinish">
<a-tabs
v-model:activeKey="activeKey"
tabPosition="top"
type="line"
:centered="true"
:destroy-inactive-tab-pane="true"
<a-form-item
name="username"
:rules="[
{
required: true,
min: 2,
max: 30,
message: t('valid.userNamePlease'),
},
]"
>
<a-tab-pane key="username" :tab="t('views.login.tabPane1')">
<a-form-item
name="username"
:rules="[
{
required: true,
min: 2,
max: 30,
message: t('valid.userNamePlease'),
},
]"
>
<a-input
v-model:value="state.from.username"
size="large"
:placeholder="t('valid.userNameHit')"
:maxlength="30"
>
<template #prefix>
<UserOutlined class="prefix-icon" />
</template>
</a-input>
</a-form-item>
<a-input
v-model:value="state.from.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,
min: 6,
max: 26,
message: t('valid.passwordPlease'),
},
]"
>
<a-input-password
v-model:value="state.from.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="password"
:rules="[
{
required: true,
min: 6,
max: 26,
message: t('valid.passwordPlease'),
},
]"
>
<a-input-password
v-model:value="state.from.password"
size="large"
:placeholder="t('valid.passwordHit')"
: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.from.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-row
:gutter="8"
justify="space-between"
align="middle"
style="margin-bottom: 16px"
<a-row
:gutter="8"
justify="space-between"
align="middle"
style="margin-bottom: 16px"
>
<a-col :span="12">
<a-button
type="link"
target="_self"
:title="t('views.login.registerBtn')"
@click="() => router.push({ name: 'Register' })"
>
<a-col :span="12">
<a-button
type="link"
target="_self"
:title="t('views.login.registerBtn')"
@click="() => router.push({ name: 'Register' })"
>
{{ t('views.login.registerBtn') }}
</a-button>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane key="phonenumber" :tab="t('views.login.tabPane2')">
<a-form-item
name="phonenumber"
:rules="[
{
required: true,
pattern: regExpMobile,
message: t('valid.phonePlease'),
},
]"
>
<a-input
v-model:value="state.from.phonenumber"
size="large"
:placeholder="t('valid.phoneHit')"
:maxlength="11"
>
<template #prefix>
<MobileOutlined class="prefix-icon" />
</template>
</a-input>
</a-form-item>
<a-form-item
name="code"
:rules="[
{
required: true,
min: 4,
message: t('valid.codePlease'),
},
]"
>
<a-input
v-model:value="state.from.code"
size="large"
:placeholder="t('valid.codeHit')"
:maxlength="6"
>
<template #prefix>
<RobotOutlined class="prefix-icon" />
</template>
<template #suffix>
<a-button
size="small"
type="link"
:disabled="smsState.click"
@click="fnGetSmsCaptcha"
>
{{
smsState.click
? `${smsState.time} s`
: t('valid.codeText')
}}
</a-button>
</template>
</a-input>
</a-form-item>
</a-tab-pane>
</a-tabs>
{{ t('views.login.registerBtn') }}
</a-button>
</a-col>
</a-row>
<a-button
block
@@ -363,26 +151,7 @@ onBeforeUnmount(() => {
align="middle"
style="margin-top: 18px"
>
<a-col :span="18">
<span>{{ t('views.login.loginMethod') }}</span>
<a-tooltip :title="t('views.login.loginMethodWX')">
<a-button shape="circle" size="middle" type="link">
<template #icon>
<WechatOutlined
:style="{ color: '#52c41a', fontSize: '18px' }"
/>
</template>
</a-button>
</a-tooltip>
<a-tooltip :title="t('views.login.loginMethodQQ')">
<a-button shape="circle" size="middle" type="link">
<template #icon>
<QqOutlined :style="{ color: '#40a9ff', fontSize: '18px' }" />
</template>
</a-button>
</a-tooltip>
</a-col>
<a-col :span="6">
<a-col :offset="18" :span="6">
<a-dropdown :trigger="['click', 'hover']">
<a-button size="small" type="default">
{{ t('i18n') }}

85
src/views/register.vue
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"