455 lines
11 KiB
Vue
455 lines
11 KiB
Vue
<template xmlns="">
|
||
<div class="container">
|
||
<div class="logo"></div>
|
||
<!-- 登录区域 -->
|
||
<div class="content">
|
||
<!-- 配图 -->
|
||
<div class="pic">
|
||
<div
|
||
class="welcome"
|
||
style="
|
||
position: absolute;
|
||
top: 15%;
|
||
left: 20%;
|
||
user-select: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
">
|
||
<strong
|
||
style="
|
||
letter-spacing: 1px;
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
font-weight: 500;
|
||
font-size: 88px;
|
||
">
|
||
<span style="color: #26b9de">Wel</span>
|
||
<span style="color: #fff">come</span>
|
||
</strong>
|
||
<p
|
||
style="
|
||
margin: 0;
|
||
font-size: 26px;
|
||
letter-spacing: 1px;
|
||
color: #26b9de;
|
||
opacity: 75%;
|
||
">
|
||
<span
|
||
style="
|
||
display: inline-block;
|
||
height: 20px;
|
||
width: 20px;
|
||
margin-left: 8px;
|
||
margin-right: 12px;
|
||
border-radius: 100%;
|
||
background: #26b9de;
|
||
"></span>
|
||
向世界先进水平挑战，为人类社会文明做贡献
|
||
</p>
|
||
</div>
|
||
<video
|
||
src="/static/videos/login.webm"
|
||
muted
|
||
autoplay
|
||
loop
|
||
style="
|
||
user-select: none;
|
||
position: absolute;
|
||
top: 28%;
|
||
width: 100%;
|
||
height: 70%;
|
||
"></video>
|
||
</div>
|
||
<!-- 表单 -->
|
||
<div class="field">
|
||
<!-- [移动端]标题 -->
|
||
<h2 class="mobile-title">
|
||
<h3 class="title">许昌安彩新能科技有限公司</h3>
|
||
</h2>
|
||
<h2 class="pc-title" style="">
|
||
<h3 class="title" style="display: flex; flex-direction: column; align-items: center;">
|
||
<img
|
||
src="../assets/logo/xcac.png"
|
||
alt="cnbm_logo"
|
||
style=""
|
||
class="cnbm_logo" />
|
||
<span>许昌安彩新能科技有限公司</span>
|
||
</h3>
|
||
<!-- <h3 class="sub-title" style="">向世界先进水平挑战，为人类社会文明做贡献</h3> -->
|
||
</h2>
|
||
|
||
<!-- 表单 -->
|
||
<div class="form-cont">
|
||
<div style="">
|
||
<el-form
|
||
ref="loginForm"
|
||
:model="loginForm"
|
||
:rules="LoginRules"
|
||
class="login-form">
|
||
<el-form-item prop="tenantName" v-if="tenantEnable">
|
||
<el-input
|
||
v-model="loginForm.tenantName"
|
||
type="text"
|
||
auto-complete="off"
|
||
placeholder="租户">
|
||
<!-- <svg-icon
|
||
slot="prefix"
|
||
icon-class="tree"
|
||
class="el-input__icon input-icon" /> -->
|
||
</el-input>
|
||
</el-form-item>
|
||
<!-- 账号密码登录 -->
|
||
<div>
|
||
<el-form-item prop="username">
|
||
<el-input
|
||
v-model="loginForm.username"
|
||
type="text"
|
||
auto-complete="off"
|
||
placeholder="账号">
|
||
<!-- <svg-icon
|
||
slot="prefix"
|
||
icon-class="user"
|
||
class="el-input__icon input-icon" /> -->
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="password">
|
||
<el-input
|
||
v-model="loginForm.password"
|
||
type="password"
|
||
auto-complete="off"
|
||
placeholder="密码"
|
||
@keyup.enter.native="getCode">
|
||
<!-- <svg-icon
|
||
slot="prefix"
|
||
icon-class="password"
|
||
class="el-input__icon input-icon" /> -->
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-checkbox
|
||
v-model="loginForm.rememberMe"
|
||
style="margin: 0 0 25px 0">
|
||
记住密码
|
||
</el-checkbox>
|
||
</div>
|
||
|
||
<!-- 下方的登录按钮 -->
|
||
<el-form-item
|
||
id="button-form-item"
|
||
style="width: 100%; margin-top: 32px">
|
||
<el-button
|
||
:loading="loading"
|
||
size="medium"
|
||
type="primary"
|
||
style="
|
||
width: 100%;
|
||
height: calc(52 * 0.12vh);
|
||
font-size: calc(14 * 0.12vh);
|
||
"
|
||
@click.native.prevent="getCode">
|
||
<span v-if="!loading">登 录</span>
|
||
<span v-else>登 录 中...</span>
|
||
</el-button>
|
||
</el-form-item>
|
||
|
||
<!-- 社交登录 -->
|
||
<!-- <el-form-item style="width:100%;">
|
||
<div class="oauth-login" style="display:flex">
|
||
<div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
|
||
<img :src="item.img" height="25px" width="25px" alt="登录" >
|
||
<span>{{item.title}}</span>
|
||
</div>
|
||
</div>
|
||
</el-form-item> -->
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- footer -->
|
||
<div class="footer">
|
||
Copyright © 2023 中建材智能自动化研究院有限公司 All Rights Reserved.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { sendSmsCode, socialAuthRedirect } from '@/api/login';
|
||
import { getTenantIdByName } from '@/api/system/tenant';
|
||
import { SystemUserSocialTypeEnum } from '@/utils/constants';
|
||
import { getTenantEnable } from '@/utils/ruoyi';
|
||
import {
|
||
getPassword,
|
||
getRememberMe,
|
||
getTenantName,
|
||
getUsername,
|
||
removePassword,
|
||
removeRememberMe,
|
||
removeTenantName,
|
||
removeUsername,
|
||
setPassword,
|
||
setRememberMe,
|
||
setTenantId,
|
||
setTenantName,
|
||
setUsername,
|
||
} from '@/utils/auth';
|
||
|
||
import Verify from '@/components/Verifition/Verify';
|
||
import { resetUserPwd } from '@/api/system/user';
|
||
|
||
export default {
|
||
name: 'Login',
|
||
components: {
|
||
Verify,
|
||
},
|
||
data() {
|
||
return {
|
||
codeUrl: '',
|
||
captchaEnable: false,
|
||
tenantEnable: true,
|
||
mobileCodeTimer: 0,
|
||
loginForm: {
|
||
loginType: 'uname',
|
||
username: 'admin',
|
||
password: 'admin123',
|
||
captchaVerification: '',
|
||
mobile: '',
|
||
mobileCode: '',
|
||
rememberMe: false,
|
||
tenantName: '技术中心',
|
||
},
|
||
scene: 21,
|
||
|
||
LoginRules: {
|
||
username: [
|
||
{ required: true, trigger: 'blur', message: '用户名不能为空' },
|
||
],
|
||
password: [
|
||
{ required: true, trigger: 'blur', message: '密码不能为空' },
|
||
],
|
||
mobile: [
|
||
{ required: true, trigger: 'blur', message: '手机号不能为空' },
|
||
{
|
||
validator: function (rule, value, callback) {
|
||
if (
|
||
/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(
|
||
value
|
||
) === false
|
||
) {
|
||
callback(new Error('手机号格式错误'));
|
||
} else {
|
||
callback();
|
||
}
|
||
},
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
tenantName: [
|
||
{ required: true, trigger: 'blur', message: '租户不能为空' },
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
// debugger
|
||
getTenantIdByName(value).then((res) => {
|
||
const tenantId = res.data;
|
||
if (tenantId && tenantId >= 0) {
|
||
// 设置租户
|
||
setTenantId(tenantId);
|
||
callback();
|
||
} else {
|
||
callback('租户不存在');
|
||
}
|
||
});
|
||
},
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
},
|
||
loading: false,
|
||
redirect: undefined,
|
||
// 枚举
|
||
SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
|
||
};
|
||
},
|
||
created() {
|
||
// document.body.style['min-height'] = '1024px';
|
||
// 租户开关
|
||
this.tenantEnable = getTenantEnable();
|
||
if (this.tenantEnable) {
|
||
getTenantIdByName(this.loginForm.tenantName).then((res) => {
|
||
// 设置租户
|
||
const tenantId = res.data;
|
||
if (tenantId && tenantId >= 0) {
|
||
setTenantId(tenantId);
|
||
}
|
||
});
|
||
}
|
||
// 重定向地址
|
||
this.redirect = this.$route.query.redirect
|
||
? decodeURIComponent(this.$route.query.redirect)
|
||
: undefined;
|
||
this.getCookie();
|
||
},
|
||
destroyed() {
|
||
document.body.style['min-height'] = 'unset';
|
||
},
|
||
methods: {
|
||
getCode() {
|
||
this.handleLogin({});
|
||
},
|
||
getCookie() {
|
||
const username = getUsername();
|
||
const password = getPassword();
|
||
const rememberMe = getRememberMe();
|
||
const tenantName = getTenantName();
|
||
this.loginForm = {
|
||
...this.loginForm,
|
||
username: username ? username : this.loginForm.username,
|
||
password: password ? password : this.loginForm.password,
|
||
rememberMe: rememberMe ? getRememberMe() : false,
|
||
tenantName: tenantName ? tenantName : this.loginForm.tenantName,
|
||
};
|
||
},
|
||
handleLogin(captchaParams) {
|
||
this.$refs.loginForm.validate((valid) => {
|
||
if (valid) {
|
||
this.loading = true;
|
||
// 设置 Cookie
|
||
if (this.loginForm.rememberMe) {
|
||
setUsername(this.loginForm.username);
|
||
setPassword(this.loginForm.password);
|
||
setRememberMe(this.loginForm.rememberMe);
|
||
setTenantName(this.loginForm.tenantName);
|
||
} else {
|
||
removeUsername();
|
||
removePassword();
|
||
removeRememberMe();
|
||
removeTenantName();
|
||
}
|
||
this.loginForm.captchaVerification =
|
||
captchaParams.captchaVerification;
|
||
// 发起登陆
|
||
// console.log("发起登录", this.loginForm);
|
||
this.$store
|
||
.dispatch(
|
||
this.loginForm.loginType === 'sms' ? 'SmsLogin' : 'Login',
|
||
this.loginForm
|
||
)
|
||
.then(() => {
|
||
this.$router.push({ path: this.redirect || '/' }).catch(() => {});
|
||
})
|
||
.catch(() => {
|
||
this.loading = false;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
async doSocialLogin(socialTypeEnum) {
|
||
// 设置登录中
|
||
this.loading = true;
|
||
let tenant = false;
|
||
if (this.tenantEnable) {
|
||
await this.$prompt('请输入租户名称', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
})
|
||
.then(async ({ value }) => {
|
||
await getTenantIdByName(value).then((res) => {
|
||
const tenantId = res.data;
|
||
tenant = true;
|
||
if (tenantId && tenantId >= 0) {
|
||
setTenantId(tenantId);
|
||
}
|
||
});
|
||
})
|
||
.catch(() => {
|
||
// 取消登录按钮 loading状态
|
||
this.loading = false;
|
||
|
||
return false;
|
||
});
|
||
} else {
|
||
tenant = true;
|
||
}
|
||
if (tenant) {
|
||
// 计算 redirectUri
|
||
const redirectUri =
|
||
location.origin +
|
||
'/social-login?' +
|
||
encodeURIComponent(
|
||
'type=' +
|
||
socialTypeEnum.type +
|
||
'&redirect=' +
|
||
(this.redirect || '/')
|
||
); // 重定向不能丢
|
||
// const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
|
||
// const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
|
||
// 进行跳转
|
||
socialAuthRedirect(
|
||
socialTypeEnum.type,
|
||
encodeURIComponent(redirectUri)
|
||
).then((res) => {
|
||
// console.log(res.url);
|
||
window.location.href = res.data;
|
||
});
|
||
}
|
||
},
|
||
/** ========== 以下为升级短信登录 ========== */
|
||
getSmsCode() {
|
||
if (this.mobileCodeTimer > 0) return;
|
||
this.$refs.loginForm.validate((valid) => {
|
||
if (!valid) return;
|
||
sendSmsCode(
|
||
this.loginForm.mobile,
|
||
this.scene,
|
||
this.loginForm.uuid,
|
||
this.loginForm.code
|
||
).then((res) => {
|
||
this.$modal.msgSuccess('获取验证码成功');
|
||
this.mobileCodeTimer = 60;
|
||
let msgTimer = setInterval(() => {
|
||
this.mobileCodeTimer = this.mobileCodeTimer - 1;
|
||
if (this.mobileCodeTimer <= 0) {
|
||
clearInterval(msgTimer);
|
||
}
|
||
}, 1000);
|
||
});
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import '~@/assets/styles/login.scss';
|
||
|
||
.oauth-login {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.oauth-login-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.oauth-login-item img {
|
||
height: 25px;
|
||
width: 25px;
|
||
}
|
||
|
||
.oauth-login-item span:hover {
|
||
text-decoration: underline red;
|
||
color: red;
|
||
}
|
||
|
||
.sms-login-mobile-code-prefix {
|
||
:deep(.el-input__prefix) {
|
||
top: 22%;
|
||
}
|
||
}
|
||
.form-cont {
|
||
padding-top: 40px;
|
||
}
|
||
</style>
|