Skip to content

iBiz-Vue-R7
iBiz-Vue-R7
提交 aa89f5ea 编写于 作者: RedPig97's avatar RedPig97
浏览文件
操作

update: 登录页优化

上级 3060efd6
显示空白字符变更
内嵌 并排
正在显示 包含 198 行增加 和 34 行删除
@CONTROL/视图布局面板/应用登录视图/VIEW.less.ftl
浏览文件 @ aa89f5ea
......@@ -2,26 +2,28 @@
../@MACRO/DEFAULT.less.ftl
</#ibizinclude>
.app-login-view {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
min-height: 100%;
background: #108cee;
position: relative;
.login-bg {
height: 100%;
width: 100%;
width: 100vw;
height: 100vh;
}
.login-container {
width: 500px;
height: 400px;
width: 450px;
height: 430px;
position: absolute;
z-index: 1;
background: #fff;
top: calc((100% - 400px) / 2);
left: calc((100% - 500px) / 2);
top: calc((100% - 430px) / 2);
left: calc((100% - 450px) / 2);
border-radius: 10px;
.login-title {
font-size: 28px;
text-align: center;
margin: 40px 0;
padding: 30px 0 20px 0;
color: #5584ff;
}
.login-form {
......@@ -43,14 +45,43 @@
}
}
}
.form-submit {
width: 380px;
margin: 0 auto;
padding-top: 16px;
}
.app-login-view__buttons .ivu-form-item-content {
display: flex;
justify-content: space-between;
align-items: center;
.ivu-btn {
width: 175px;
height: 40px;
font-size: 18px;
padding: 10px;
}
}
.app-login-view__icons {
.icon {
display: inline-block;
cursor: pointer;
margin-left: 10px;
img {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
padding-top: 1px;
border-radius: 4px;
margin-bottom: -20px;
margin-top: 10px;
}
}
}
.app-login-view__footer {
display: block;
padding: 0 16px;
margin: 48px 0 24px;
text-align: center;
a {
color: #fff;
text-decoration: none;
}
}
}
\ No newline at end of file
@CONTROL/视图布局面板/应用登录视图/VIEW.vue.ftl
浏览文件 @ aa89f5ea
<div class="app-login-view ${srffilepath2(view.getCodeName())}<#if view.getPSSysCss?? && view.getPSSysCss()??> ${view.getPSSysCss().getCssName()}</#if>">
<app-studioaction :viewTitle="$t(model.srfCaption)" viewName="${view.getCodeName()?lower_case}"></app-studioaction>
<img class="login-bg" src="/assets/img/login_bg.png"/>
<app-studioaction
:viewTitle="$t(model.srfCaption)"
viewName="apploginview"
></app-studioaction>
<img class="login-bg" src="/assets/img/background.png" />
<div class="login-container">
<div class="login-title">{{$t(model.srfCaption)}}</div>
<i-form class="login-form">
<form-item>
<i-input type="text" v-model="formData.loginname" :placeholder="$t('app.viewLayoutPanel.appLoginView.username')" clearable>
<icon type="ios-person-outline" slot="prepend"></icon>
<div class="login-title">{{ $t(model.srfCaption) }}</div>
<i-form class="login-form" :rules="rules" :model="formData">
<form-item prop="loginname">
<i-input
size="large"
prefix="ios-contact"
v-model.trim="formData.loginname"
:placeholder="$t('components.login.placeholder1')"
@keyup.enter.native="handleSubmit"
>
</i-input>
</form-item>
<form-item>
<i-input type="password" v-model="formData.password" :placeholder="$t('app.viewLayoutPanel.appLoginView.password')" clearable>
<icon type="ios-lock-outline" slot="prepend"></icon>
<form-item prop="password">
<i-input
size="large"
prefix="ios-key"
v-model.trim="formData.password"
type="password"
:placeholder="$t('components.login.placeholder2')"
@keyup.enter.native="handleSubmit"
>
</i-input>
</form-item>
<form-item class="app-login-view__buttons">
<i-button @click="handleSubmit" type="primary" class="login_btn"
>{{ $t("components.login.name") }}
</i-button>
<i-button @click="goReset" type="success" class="login_reset"
>{{ $t("components.login.reset") }}
</i-button>
</form-item>
<form-item class="app-login-view__icons">
<div style="text-align: center">
<span class="form_tipinfo">{{ $t("components.login.other") }}</span>
</div>
<div style="text-align: center">
<div class="icon" @click="tencentHandleClick('tencent')">
<img src="/assets/img/QQ.svg" draggable="false" />
</div>
<div class="icon" @click="wechatHandleClick('wechat')">
<img src="/assets/img/weixin.svg" draggable="false" />
</div>
</div>
</form-item>
</i-form>
<div class="form-submit">
<i-button @click="handleSubmit" long type="primary">{{ $t('app.viewLayoutPanel.appLoginView.login') }}</i-button>
<p class="login-tip">
{{ this.loginTip }}
</p>
<div class="app-login-view__footer">
<div class="copyright">
<a href="https://www.ibizlab.cn/" target="_blank"
>{{ appTitle }} is based on ibizlab .</a
>
</div>
</div>
</div>
</div>
@VIEW/应用登录视图/VIEW-BASE.vue.ftl
浏览文件 @ aa89f5ea
......@@ -14,39 +14,128 @@ import { Environment } from '@/environments/environment';
../@MACRO/VIEW_CONTENT-BASE.vue.ftl
</#ibizinclude>
/**
* 应用名称
*
* @type {string}
* @memberof AppLoginViewBase
*/
public appTitle: string = Environment.AppTitle;
/**
* 登录数据对象
*
* @type {*}
* @memberof LoginView
* @memberof AppLoginViewBase
*/
public formData: any = {
loginname: '',
password: ''
}
/**
* 登录提示
*
* @type {*}
* @memberof AppLoginViewBase
*/
public loginTip: any = "";
/**
* 值规则
*
* @type {*}
* @memberof AppLoginViewBase
*/
public rules = {
loginname: [
{required: true, message: this.$t('components.login.loginname.message'), trigger: 'change'},
],
password: [
{required: true, message: this.$t('components.login.password.message'), trigger: 'change'},
],
};
/**
* 登陆处理
*
* @memberof Login
* @memberof AppLoginViewBase
*/
public handleSubmit(): void {
if (Object.is(this.formData.loginname, '') || Object.is(this.formData.password, '')) {
// 清除cookie
let leftTime = new Date();
leftTime.setTime(leftTime.getSeconds() - 1000);
document.cookie = "ibzuaa-token=;expires=" + leftTime.toUTCString();
const form: any = this.$refs.loginForm;
let validatestate: boolean = true;
form.validate((valid: boolean) => {
validatestate = valid ? true : false;
});
if (!validatestate) {
return;
}
const post: Promise<any> = this.$http.post(Environment.RemoteLogin, this.formData, true);
const loginname: any = this.formData.loginname;
const password: any = this.formData.password;
const post: Promise<any> = this.$http.post('/v7/login', this.formData, true);
post.then((response: any) => {
if (response && response.status === 200) {
const data = response.data;
window.localStorage.setItem('token', data.token);
window.localStorage.setItem('user', JSON.stringify(data.user));
if (data && data.token) {
localStorage.setItem('token', data.token);
Util.setCookie('ibzuaa-token',data.token,0);
}
if(data && data.user){
localStorage.setItem('user', JSON.stringify(data.user));
}
// 设置cookie,保存账号密码7天
Util.setCookie("loginname",loginname, 7);
// 跳转首页
const url: any = this.$route.query.redirect ? this.$route.query.redirect : '*';
this.$router.push({ path: url });
this.$router.push({path: url});
}
}).catch((error: any) => {
this.$Notice.error({ title: '错误', desc: '登陆失败' });
// 登录提示
const data = error.data;
if (data && data.message) {
this.loginTip = data.message;
this.$Message.error({
content: (this.$t('components.login.loginfailed') as string)+' ' + data.message,
duration: 5,
closable: true
});
} else {
this.$Message.error({
content: (this.$t('components.login.loginfailed') as string),
duration: 5,
closable: true
});
}
});
}
/**
* 重置页面
*
* @memberof AppLoginViewBase
*/
public goReset(): void {
this.formData = {loginname: 'ibzadmin', password: '123456'};
}
/**
* qq授权登录
* @param thirdpart
*/
public tencentHandleClick(thirdpart: any) {
this.$Message.warning((this.$t('components.login.warning1') as string))
}
/**
* 微信授权登录
* @param thirddpart
*/
public wechatHandleClick(thirddpart: any) {
this.$Message.warning((this.$t('components.login.warning2') as string))
}
<#ibizinclude>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或