gxwebsoft
666 lines
16 KiB
Vue
666 lines
16 KiB
Vue
<template>
|
|
<div
|
|
:class="[
|
|
'login-wrapper',
|
|
['', 'login-form-right', 'login-form-left'][direction]
|
|
]"
|
|
:style="{
|
|
backgroundImage: 'url(' + param.login_bg_img + ')'
|
|
}"
|
|
>
|
|
<div class="logo-login" v-if="config.shortName">
|
|
<img :src="config.companyLogo" class="logo" />
|
|
<h4>{{ config.shortName }}</h4>
|
|
</div>
|
|
<div class="company-name">{{ param.login_name }}</div>
|
|
<a-form
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="rules"
|
|
class="login-form ele-bg-white"
|
|
>
|
|
<a-space class="login-title">
|
|
<h4
|
|
class="title-btn"
|
|
:class="loginType === 'account' ? 'active' : ''"
|
|
@click="onLoginType('account')"
|
|
>密码登录</h4
|
|
>
|
|
<a-divider type="vertical" style="height: 20px" />
|
|
<h4
|
|
class="title-btn"
|
|
:class="loginType === 'sms' ? 'active' : ''"
|
|
@click="onLoginType('sms')"
|
|
>短信登录</h4
|
|
>
|
|
</a-space>
|
|
<template v-if="loginType === 'account'">
|
|
<a-form-item name="username">
|
|
<a-input
|
|
allow-clear
|
|
size="large"
|
|
v-model:value="form.username"
|
|
:placeholder="`请输入登录账号`"
|
|
>
|
|
<template #prefix>
|
|
<UserOutlined />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item name="password">
|
|
<a-input-password
|
|
size="large"
|
|
v-model:value="form.password"
|
|
placeholder="请输入登录密码"
|
|
@pressEnter="submit"
|
|
>
|
|
<template #prefix>
|
|
<lock-outlined />
|
|
</template>
|
|
</a-input-password>
|
|
</a-form-item>
|
|
<a-form-item name="code">
|
|
<div class="login-input-group">
|
|
<a-input
|
|
allow-clear
|
|
size="large"
|
|
type="text"
|
|
:maxlength="5"
|
|
v-model:value="form.code"
|
|
placeholder="图形验证码"
|
|
@pressEnter="submit"
|
|
>
|
|
<template #prefix>
|
|
<safety-certificate-outlined />
|
|
</template>
|
|
</a-input>
|
|
<a-button class="login-captcha" @click="changeCaptcha">
|
|
<img v-if="captcha" :src="captcha" alt="" />
|
|
</a-button>
|
|
</div>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-checkbox v-model:checked="form.remember">
|
|
{{ t('login.remember') }}
|
|
</a-checkbox>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-button
|
|
block
|
|
size="large"
|
|
type="primary"
|
|
:loading="loading"
|
|
@click="submit"
|
|
>
|
|
{{ loading ? t('login.loading') : t('login.login') }}
|
|
</a-button>
|
|
</a-form-item>
|
|
</template>
|
|
<template v-if="loginType === 'sms'">
|
|
<a-form-item name="phone">
|
|
<a-input
|
|
allow-clear
|
|
size="large"
|
|
maxlength="11"
|
|
v-model:value="form.phone"
|
|
:placeholder="`请输入手机号码`"
|
|
>
|
|
<template #addonBefore> +86 </template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item name="smsCode">
|
|
<div class="login-input-group">
|
|
<a-input
|
|
placeholder="请输入验证码"
|
|
v-model:value="form.smsCode"
|
|
size="large"
|
|
:maxlength="6"
|
|
allow-clear
|
|
/>
|
|
<a-button
|
|
class="login-captcha"
|
|
:disabled="!!countdownTime"
|
|
@click="openImgCodeModal"
|
|
>
|
|
<span v-if="!countdownTime">发送验证码</span>
|
|
<span v-else>已发送 {{ countdownTime }} s</span>
|
|
</a-button>
|
|
</div>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-button
|
|
block
|
|
size="large"
|
|
type="primary"
|
|
:loading="loading"
|
|
@click="onLoginBySms"
|
|
>
|
|
{{ loading ? t('login.loading') : t('login.login') }}
|
|
</a-button>
|
|
</a-form-item>
|
|
</template>
|
|
</a-form>
|
|
<div class="login-copyright">
|
|
<p>
|
|
copyright © {{ new Date().getFullYear() }}
|
|
{{ config.companyName ? config.companyName : 'Websoft Inc.' }} All
|
|
Rights Reserved.
|
|
</p>
|
|
</div>
|
|
<!-- 编辑弹窗 -->
|
|
<a-modal
|
|
:width="340"
|
|
:footer="null"
|
|
title="发送验证码"
|
|
v-model:visible="visible"
|
|
>
|
|
<div class="login-input-group" style="margin-bottom: 16px">
|
|
<a-input
|
|
v-model:value="imgCode"
|
|
:maxlength="5"
|
|
size="large"
|
|
placeholder="请输入图形验证码"
|
|
allow-clear
|
|
@pressEnter="sendCode"
|
|
/>
|
|
<a-button class="login-captcha">
|
|
<img alt="" :src="captcha" @click="changeCaptcha" />
|
|
</a-button>
|
|
</div>
|
|
<a-button
|
|
block
|
|
size="large"
|
|
type="primary"
|
|
:loading="codeLoading"
|
|
@click="sendCode"
|
|
>
|
|
立即发送
|
|
</a-button>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, unref, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRouter } from 'vue-router';
|
|
import { getTenantId } from '@/utils/domain';
|
|
import { Form, message } from 'ant-design-vue';
|
|
import {
|
|
LockOutlined,
|
|
UserOutlined,
|
|
SafetyCertificateOutlined
|
|
} from '@ant-design/icons-vue';
|
|
import { goHomeRoute, cleanPageTabs } from '@/utils/page-tab-util';
|
|
import { login, loginBySms, getCaptcha } from '@/api/passport/login';
|
|
|
|
import { User } from '@/api/system/user/model';
|
|
import { THEME_STORE_NAME } from '@/config/setting';
|
|
import { sendSmsCaptcha } from '@/api/login';
|
|
import { useTenantStore } from '@/store/modules/tenant';
|
|
import { Company } from '@/api/system/company/model';
|
|
import useFormData from '@/utils/use-form-data';
|
|
// import { openUrl } from '@/utils/common';
|
|
// import { getDomain } from '@/utils/domain';
|
|
// import { getMerchantAccountByPhone } from '@/api/shop/merchantAccount';
|
|
// import {
|
|
// addBatchChatMessage,
|
|
// addChatMessage,
|
|
// updateChatMessage
|
|
// } from '@/api/system/chatMessage';
|
|
import { FormInstance } from 'ant-design-vue/es/form';
|
|
import { listWebsiteField } from '@/api/system/website/field';
|
|
import { WebsiteParam } from '@/api/cms/website/field/model';
|
|
import { phoneReg } from 'ele-admin-pro';
|
|
|
|
const useForm = Form.useForm;
|
|
const { currentRoute } = useRouter();
|
|
const { t } = useI18n();
|
|
const tenantStore = useTenantStore();
|
|
|
|
// 登录框方向, 0 居中, 1 居右, 2 居左
|
|
const direction = ref(0);
|
|
// 加载状态
|
|
const loading = ref(false);
|
|
// 是否显示tenantId填写输入框
|
|
const showTenantId = ref(true);
|
|
const loginType = ref('account');
|
|
const param = ref<WebsiteParam>({});
|
|
// 配置信息
|
|
const { form } = useFormData<User>({
|
|
username: '',
|
|
phone: '',
|
|
password: '',
|
|
code: '',
|
|
smsCode: '',
|
|
remember: true,
|
|
isAdmin: true
|
|
});
|
|
// 表单数据
|
|
const config = reactive<Company>({
|
|
shortName: '',
|
|
companyName: '',
|
|
companyLogo: '',
|
|
tenantId: undefined
|
|
});
|
|
// 验证码 base64 数据
|
|
const captcha = ref('');
|
|
// 验证码内容, 实际项目去掉
|
|
const text = ref('');
|
|
// 是否显示图形验证码弹窗
|
|
const visible = ref(false);
|
|
// 图形验证码
|
|
const imgCode = ref('');
|
|
// 发送验证码按钮loading
|
|
const codeLoading = ref(false);
|
|
// 验证码倒计时时间
|
|
const countdownTime = ref(0);
|
|
// 验证码倒计时定时器
|
|
let countdownTimer: number | null = null;
|
|
|
|
// 表格选中数据
|
|
const formRef = ref<FormInstance | null>(null);
|
|
|
|
// 表单验证规则
|
|
const rules = reactive({
|
|
username: [
|
|
{
|
|
required: true,
|
|
message: t('login.username'),
|
|
type: 'string'
|
|
}
|
|
],
|
|
phone: [
|
|
{
|
|
pattern: phoneReg,
|
|
required: true,
|
|
type: 'string',
|
|
message: '手机号格式不正确',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
password: [
|
|
{
|
|
required: true,
|
|
message: t('login.password'),
|
|
type: 'string'
|
|
}
|
|
],
|
|
code: [
|
|
{
|
|
required: true,
|
|
message: t('login.code'),
|
|
type: 'string'
|
|
}
|
|
],
|
|
smsCode: [
|
|
{
|
|
required: true,
|
|
message: t('login.code'),
|
|
type: 'string'
|
|
}
|
|
]
|
|
});
|
|
|
|
/* 显示发送短信验证码弹窗 */
|
|
const openImgCodeModal = () => {
|
|
if (!form.phone) {
|
|
message.error('请输入手机号码');
|
|
return;
|
|
}
|
|
imgCode.value = '';
|
|
changeCaptcha();
|
|
visible.value = true;
|
|
};
|
|
|
|
/* 发送短信验证码 */
|
|
const sendCode = () => {
|
|
if (!imgCode.value) {
|
|
message.error('请输入图形验证码');
|
|
return;
|
|
}
|
|
if (text.value !== imgCode.value) {
|
|
message.error('图形验证码不正确');
|
|
return;
|
|
}
|
|
codeLoading.value = true;
|
|
sendSmsCaptcha({ phone: form.phone }).then((res) => {
|
|
console.log(res);
|
|
message.success('短信验证码发送成功, 请注意查收!');
|
|
visible.value = false;
|
|
codeLoading.value = false;
|
|
countdownTime.value = 30;
|
|
// 开始对按钮进行倒计时
|
|
countdownTimer = window.setInterval(() => {
|
|
if (countdownTime.value <= 1) {
|
|
countdownTimer && clearInterval(countdownTimer);
|
|
countdownTimer = null;
|
|
}
|
|
countdownTime.value--;
|
|
}, 1000);
|
|
});
|
|
};
|
|
|
|
// const { clearValidate, validate, validateInfos } = useForm(form, rules);
|
|
|
|
const { resetFields } = useForm(form, rules);
|
|
|
|
const goHome = () => {
|
|
const { query } = unref(currentRoute);
|
|
goHomeRoute(query.from as string);
|
|
localStorage.removeItem(THEME_STORE_NAME);
|
|
};
|
|
|
|
const onLoginBySms = () => {
|
|
if (!formRef.value) {
|
|
return;
|
|
}
|
|
formRef.value
|
|
.validate()
|
|
.then(() => {
|
|
loading.value = true;
|
|
form.code = form.smsCode;
|
|
loginBySms(form)
|
|
.then((msg) => {
|
|
message.success(msg);
|
|
loading.value = false;
|
|
resetFields();
|
|
cleanPageTabs();
|
|
goHome();
|
|
})
|
|
.catch((e: Error) => {
|
|
message.error(e.message);
|
|
loading.value = false;
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
|
|
/* 保存编辑 */
|
|
const submit = () => {
|
|
console.log(formRef.value);
|
|
if (!formRef.value) {
|
|
return;
|
|
}
|
|
formRef.value
|
|
.validate()
|
|
.then(() => {
|
|
if (form.code?.toLowerCase() !== text.value) {
|
|
message.error('验证码错误');
|
|
changeCaptcha();
|
|
return;
|
|
}
|
|
loading.value = true;
|
|
login(form)
|
|
.then((msg) => {
|
|
message.success(msg);
|
|
loading.value = false;
|
|
resetFields();
|
|
cleanPageTabs();
|
|
goHome();
|
|
})
|
|
.catch((e: Error) => {
|
|
message.error(e.message);
|
|
loading.value = false;
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
|
|
// const doRegister = () => {
|
|
// registerUser(form)
|
|
// .then(() => {
|
|
// loading.value = false;
|
|
// message.success('注册成功');
|
|
// })
|
|
// .catch((e) => {
|
|
// loading.value = false;
|
|
// message.error(e.message);
|
|
// });
|
|
// };
|
|
|
|
const onLoginType = (text) => {
|
|
loginType.value = text;
|
|
};
|
|
|
|
// const goBack = () => {
|
|
// openUrl(getDomain());
|
|
// return;
|
|
// };
|
|
|
|
const loginConnect = () => {
|
|
// getWxWorkQrConnect().then((result) => {
|
|
// console.log(result);
|
|
// qrConnect.value = result;
|
|
// });
|
|
};
|
|
|
|
/* 获取图形验证码 */
|
|
const changeCaptcha = () => {
|
|
listWebsiteField({}).then((list) => {
|
|
list.map((d) => {
|
|
const key = String(d.name);
|
|
param.value[key] = d.value;
|
|
});
|
|
});
|
|
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
|
getCaptcha()
|
|
.then((data) => {
|
|
captcha.value = data.base64;
|
|
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
|
|
text.value = data.text;
|
|
// 自动回填验证码, 实际项目去掉这个
|
|
// form.code = data.text;
|
|
// resetFields();
|
|
})
|
|
.catch((e) => {
|
|
message.error(e.message);
|
|
});
|
|
};
|
|
|
|
// 首次加载
|
|
changeCaptcha();
|
|
loginConnect();
|
|
|
|
watch(
|
|
currentRoute,
|
|
() => {
|
|
// 解析二级域名获取租户ID
|
|
const tenantId = getTenantId();
|
|
if (tenantId) {
|
|
form.tenantId = Number(tenantId);
|
|
showTenantId.value = false;
|
|
}
|
|
// 获取租户信息
|
|
const { company } = tenantStore;
|
|
if (company) {
|
|
config.companyName = company.companyName;
|
|
config.companyLogo = company.companyLogo;
|
|
config.shortName = company.shortName;
|
|
config.tenantId = company.tenantId;
|
|
config.domain = company.domain;
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
/* 背景 */
|
|
.login-wrapper {
|
|
padding: 48px 16px 0 16px;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
background-image: url('@/assets/bg-2.jpeg');
|
|
background-color: var(--grey-5);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
min-height: 100vh;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
.company-name {
|
|
position: absolute;
|
|
top: 17%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 24px;
|
|
color: #ffffff;
|
|
}
|
|
/* 卡片 */
|
|
.login-form {
|
|
width: 380px;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
padding: 0 28px;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
|
border-radius: 2px;
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
h4 {
|
|
padding: 22px 0;
|
|
text-align: center;
|
|
}
|
|
.title-btn {
|
|
cursor: pointer;
|
|
}
|
|
.login-title {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
line-height: 50px;
|
|
.active {
|
|
color: #007dff;
|
|
}
|
|
}
|
|
}
|
|
.login-form-right .login-form {
|
|
margin: 0 15% 0 auto;
|
|
}
|
|
|
|
.login-form-left .login-form {
|
|
margin: 0 auto 0 15%;
|
|
}
|
|
|
|
/* 验证码 */
|
|
.login-input-group {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
:deep(.ant-input-affix-wrapper) {
|
|
flex: 1;
|
|
}
|
|
|
|
.login-captcha {
|
|
width: 102px;
|
|
height: 40px;
|
|
margin-left: 10px;
|
|
padding: 0;
|
|
|
|
& > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 第三方登录图标 */
|
|
.login-oauth-icon {
|
|
color: #fff;
|
|
padding: 5px;
|
|
margin: 0 12px;
|
|
font-size: 18px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
.work-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
/* 底部版权 */
|
|
.login-copyright {
|
|
color: #eee;
|
|
text-align: center;
|
|
padding: 48px 0 22px 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 响应式 */
|
|
@media screen and (min-height: 640px) {
|
|
.login-wrapper {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.login-form {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
margin-top: -230px;
|
|
}
|
|
|
|
.login-form-right .login-form,
|
|
.login-form-left .login-form {
|
|
left: auto;
|
|
right: 15%;
|
|
transform: translateX(0);
|
|
margin: -230px auto auto auto;
|
|
}
|
|
|
|
.login-form-left .login-form {
|
|
right: auto;
|
|
left: 15%;
|
|
}
|
|
|
|
.login-copyright {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.login-form-right .login-form,
|
|
.login-form-left .login-form {
|
|
left: 50%;
|
|
right: auto;
|
|
margin-left: 0;
|
|
margin-right: auto;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
.wwLogin_qrcode_head {
|
|
padding: 10px 0 40px 0 !important;
|
|
}
|
|
.logo-login {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
img {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 4px;
|
|
}
|
|
h4 {
|
|
margin-left: 6px;
|
|
color: #ffffff;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
</style>
|