You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

282 lines
8.7 KiB

<!-- @format -->
<template>
<div style="height: 100%">
<a-layout style="height: 100%">
<!-- <a-layout-header class="home_header" style="position: relative"> -->
<!-- <ns-icon class="test" name="login" size="64" style="width: 220px" /> -->
<!-- <img v-else :src="themeConfig.logoUrl" style="width: 220px; height: 48px" /> -->
<!-- </a-layout-header> -->
<a-layout-content
class="center-content"
:style="{
background: `url(${
themeConfig.bgImageUrl ? themeConfig.bgImageUrl : '/asset/image/login/background.png'
}) no-repeat `,
backgroundSize: 'cover',
}">
<div class="lg_card">
<h1 class="lg_card_title">账号登录</h1>
<p v-show="!errorShow" style="height: 8px"></p>
<p v-show="errorShow" class="lg_card_error">{{ errorMsg }}</p>
<p class="lg_card_tip">用户名/手机号</p>
<a-input
placeholder="登录账号"
v-model:value="userName"
style="height: 48px; margin-bottom: 20px">
<template #prefix>
<ns-icon class="loginIcon" name="userName" size="25" style="margin-right: 5px" />
</template>
</a-input>
<p class="lg_card_tip">密码</p>
<a-input-password placeholder="登录密码" v-model:value="password" style="height: 48px">
<template #prefix>
<ns-icon class="loginIcon" name="passWord" size="25" style="margin-right: 5px" />
</template>
</a-input-password>
<a-button
@click="submit"
:loading="loading"
type="primary"
style="margin-top: 30px; width: 100%; height: 53px"
>登录</a-button
>
</div>
</a-layout-content>
<!-- <a-layout-footer>Copyright 2021 xu科技 All Rights Reserved</a-layout-footer> -->
</a-layout>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config';
import { authorizationService } from '/nerv-base/store/modules/authorization-service';
import { Cookies } from '/nerv-lib/util/cookie';
import { storeToRefs } from 'pinia';
import { http } from '/nerv-lib/util';
export default defineComponent({
name: 'UserLogin',
setup() {
const url = ref('/asset/image/login/background.png');
const userName = ref<string>('');
const password = ref<string>('');
const logUrl = ref<string>('');
const bgUrl = ref<string>('');
const errorMsg = ref<string>('');
const errorShow = ref<boolean>(false);
const router = useRouter();
const title = ref<string>('');
const initUrl = ref('');
title.value = '账号登录';
// title.value = appConfig.title ? appConfig.title : '账号登录';
const loading = ref<boolean>(false);
const configStore = appConfigStore();
const { getThemeConfig: themeConfig } = storeToRefs(configStore);
const useAuthorization = authorizationService();
const submit = (): void => {
if (password.value === '') {
errorMsg.value = '请输入密码';
errorShow.value = true;
}
if (userName.value === '') {
errorMsg.value = '请输入账号';
errorShow.value = true;
}
if (userName.value !== '' && password.value !== '') {
errorShow.value = false;
let data = JSON.stringify({ accountNo: userName.value, password: password.value });
// Cookies.set('nervsid', 'mockdata');
// router.replace({ name: 'root' });
loading.value = true;
async function logins() {
try {
const res = await configStore.userLogin(JSON.parse(data));
if (res.data?.token) {
if (res.data?.token) {
Cookies.set('nervsid', res.data?.token);
}
const info = await configStore.userInfo();
info.data
? window.sessionStorage.setItem('userInfo', JSON.stringify(info.data))
: '';
loading.value = false;
if (configStore.enablePermissions) {
const res = await configStore.userResource();
if (configStore.customApplication) {
await useAuthorization.initMenuResource();
}
initUrl.value = '';
const dealInitUrl = (item) => {
if (item.type === 'menus' && item.menus && item.menus?.length !== 0) {
dealInitUrl(item.menus[0]);
} else {
// if (item.type === 'noChildrenMenu') {
initUrl.value = configStore.resourceName
? item.code.replace(configStore.resourceName, '')
: item.code;
// }
}
};
if (configStore.resourceName) {
const initResource = [];
res.data.forEach((item) => {
if (item.code.includes(configStore.resourceName)) {
initResource.push(item);
}
});
dealInitUrl(initResource[0]);
} else {
dealInitUrl(res.data[0]);
}
// dealInitUrl(res.data[0]);
useAuthorization.updateUserResource(res.data);
const initRouterList = useAuthorization.getInitRouterList;
router.push({
name: initRouterList.length === 0 ? 'error403' : initUrl.value,
});
} else {
router.replace({ name: 'root' });
}
}
} catch (err) {
loading.value = false;
}
}
logins();
}
};
const checkoutLogo = (): void => {
logUrl.value = '';
};
const checkoutBg = (): void => {
Math.random() > 0.5
? (url.value = 'src/assetimg/background.jpg')
: (url.value = 'src/assetimg/background.png');
};
return {
title,
themeConfig,
url,
loading,
userName,
password,
submit,
errorMsg,
bgUrl,
logUrl,
checkoutLogo,
checkoutBg,
errorShow,
};
},
created() {
const _this = this;
window.sessionStorage.clear();
document.onkeydown = function (e) {
const key = window.event === undefined ? e.keyCode : window.event.keyCode;
key === 13 ? _this.submit() : '';
};
},
beforeUnmount() {
document.onkeydown = function (e) {};
},
mounted() {
// if (Cookies.get('nervsid') !== undefined) {
// this.$router.push('/home');
// }
},
});
</script>
<style lang="less" scoped>
.home_header {
height: 64px !important;
display: flex;
align-items: center;
}
:deep(.center-content) {
// background: url('/asset/image/login/background.png') center center no-repeat;
// background-size: cover;
// background-position-y: -120px;
margin: 0;
}
.icon {
color: @primary-color !important;
// background: #000;
// min-height: 25px;
// min-width: 25px;
// display: flex;
// justify-content: center;
// align-items: center;
// border-radius: 50%;
}
.lg_card .loginIcon {
color: @primary-color !important;
}
.ant-layout-header {
min-height: 64px;
background: #fff !important;
}
.ant-layout-content {
height: calc(100vh - 112px);
width: 100%;
min-height: 400px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 100px;
}
.ant-layout-footer {
max-height: 48px;
min-height: 48px;
font-size: 14px;
font-weight: 400;
color: #8f8f8f;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.lg_card {
width: 385px;
height: 409px;
background: #fff;
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 5%), 0 0 18px 0 rgb(0 0 0 / 8%);
border-radius: 6px;
margin: 0 30px 0 30px;
padding: 35px;
.lg_card_tip {
color: #a7b6c9;
margin-bottom: 12px;
}
}
.lg_card .lg_card_title {
height: 28px;
font-size: 20px;
font-weight: bold;
color: #172e3d;
line-height: 28px;
text-align: left;
}
.lg_card_error {
text-align: left;
color: #e4393c;
font-size: 14px;
}
.lg_card .loginIcon {
color: @primary-color !important;
}
</style>