Skip to content

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

调整登录逻辑及ui

上级 41eccc1c
隐藏空白字符变更
内嵌 并排
正在显示 包含 281 行增加 和 107 行删除
src/assets/img/QQ.svg 0 → 100644
浏览文件 @ ccc6ff73
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M511.999 1024a512 512 0 1 0-512-512 512 512 0 0 0 512 512z" fill="#23A0F0" /><path d="M735.765 604.422c-3.55-49.47-36.192-90.932-55.09-112.47a70.383 70.383 0 0 0-15.577-67.003v-1.718c0-97.235-68.028-167.254-153.35-167.55-85.333 0.342-153.35 70.315-153.35 167.55v1.718a70.383 70.383 0 0 0-15.576 67.003c-18.898 21.413-51.54 62.874-55.09 112.47a75.39 75.39 0 0 0 7.554 40.425c7.555 10.308 28.513-2.06 43.406-34.93a210.33 210.33 0 0 0 35.499 67.914c-36.307 8.477-46.729 44.897-34.475 64.853 8.59 14.086 28.445 25.657 62.419 25.657 60.473 0 87.267-16.611 99.18-28.057a16.259 16.259 0 0 1 20.844 0c11.913 11.57 38.684 28.057 99.18 28.057 34.02 0 53.715-11.57 62.419-25.657 12.253-19.922 1.831-56.342-34.475-64.853a211.627 211.627 0 0 0 35.499-67.914c14.893 32.87 35.85 45.124 43.406 34.93a76.493 76.493 0 0 0 7.577-40.425z" fill="#FFFFFF" /></svg>
\ No newline at end of file
src/assets/img/weixin.svg 0 → 100644
浏览文件 @ ccc6ff73
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#36ab60" d="M352.814545 385.396364m-33.512727 0a33.512727 33.512727 0 1 0 67.025455 0 33.512727 33.512727 0 1 0-67.025455 0Z" /><path fill="#36ab60" d="M502.690909 384.465455m-33.512727 0a33.512727 33.512727 0 1 0 67.025454 0 33.512727 33.512727 0 1 0-67.025454 0Z" /><path fill="#36ab60" d="M576.232727 534.341818m-23.272727 0a23.272727 23.272727 0 1 0 46.545455 0 23.272727 23.272727 0 1 0-46.545455 0Z" /><path fill="#36ab60" d="M694.458182 536.203636m-23.272727 0a23.272727 23.272727 0 1 0 46.545454 0 23.272727 23.272727 0 1 0-46.545454 0Z" /><path fill="#36ab60" d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m-87.505455 630.225455c-26.996364 0-48.407273-5.585455-75.403636-11.17091l-75.403636 37.236364 21.410909-64.232727c-53.992727-37.236364-85.643636-85.643636-85.643637-145.221818 0-102.4 96.814545-182.458182 215.04-182.458182 105.192727 0 198.283636 64.232727 216.901819 150.807273-6.516364-0.930909-13.963636-0.930909-20.48-0.93091-102.4 0-182.458182 76.334545-182.458182 170.356364 0 15.825455 2.792727 30.72 6.516363 44.683636-7.447273 0-13.963636 0.930909-20.48 0.93091z m314.647273 75.403636l15.825455 53.992727-58.647273-32.581818c-21.410909 5.585455-42.821818 11.170909-64.232727 11.170909-102.4 0-182.458182-69.818182-182.458182-155.461818s80.058182-155.461818 182.458182-155.461818c96.814545 0 182.458182 69.818182 182.458182 155.461818 0 47.476364-31.650909 90.298182-75.403637 122.88z" /></svg>
\ No newline at end of file
src/components/app-user/app-user.vue
浏览文件 @ ccc6ff73
...@@ -86,6 +86,9 @@ export default class AppUser extends Vue { ...@@ -86,6 +86,9 @@ export default class AppUser extends Vue {
if (response && response.status === 200) { if (response && response.status === 200) {
localStorage.removeItem('user'); localStorage.removeItem('user');
localStorage.removeItem('token'); localStorage.removeItem('token');
let leftTime = new Date();
leftTime.setTime(leftTime.getSeconds() - 1);
document.cookie = "ibzuaa-token=;expires=" + leftTime.toUTCString();
this.$router.push({ name: 'login' }); this.$router.push({ name: 'login' });
} }
}).catch((error: any) =>{ }).catch((error: any) =>{
......
src/components/login/login.less
浏览文件 @ ccc6ff73
.login{ .login{
width: 100vh; display: -webkit-box;
height: 100vh; display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
background: #108cee;
> img{ > img{
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
.login-logo{
position: fixed;
left: 80px;
top: 80px;
}
.login-content{
position: fixed;
left: 10%;
top: 30%;
width: 60%;
>span{
color: #fff;
font-size: 84px;
}
}
&-con{ &-con{
position: fixed; position: absolute;
right: 160px; left: 0;
top: 50%; right: 0;
transform: translateY(-60%); top: 20%;
width: 300px; margin: auto;
.ivu-card{ width: 450px;
border-radius: 15px; .ivu-card-head {
.ivu-card-head { padding: 30px 0px 20px 0px;
padding: 14px 6px; border-bottom: 0px;
>p{ >p{
line-height: 20px; height: 30px;
font-size: 20px; line-height: 30px;
color: #17233d; font-size: 20px;
font-weight: 700; color: #666666;
text-align:center; font-weight: 600;
}
}
&-header{
font-size: 16px;
font-weight: 300;
text-align: center;
padding: 30px 0;
}
.form-con{
padding: 10px 0 0;
.ivu-form-item{
margin-bottom: 20px;
}
p{
font-size: 14px;
font-weight: bold;
height: 21px;
line-height: 21px;
}
button{
background-image: linear-gradient(to bottom,#8bbcf1 0%,#2d8cf0 100%);
border-color:#8bbcf1;
}
} }
.login-tip{ }
font-size: 10px; &-header{
text-align: center; font-size: 16px;
color: #5f4949; font-weight: 300;
text-align: center;
padding: 30px 0;
}
.form-con{
padding: 0px 20px 0px 20px;
>i-button{
width: 170px;
height: 40px;
} }
} }
.login-tip{
font-size: 10px;
text-align: center;
color: red;
height: 30px;
}
} }
}
.login_btn{
width: 175px;
height: 40px;
font-size: 18px;
font-family: MicrosoftYaHei;
}
.login_reset {
width: 175px;
height: 40px;
font-size: 18px;
font-family: MicrosoftYaHei;
float: right;
}
.form_tipinfo {
font-family: MicrosoftYaHei-Bold;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
line-height: 24px;
letter-spacing: 0px;
color: #666666;
}
form_tipinfo_more {
font-family: MicrosoftYaHei;
font-size: 14px;
font-weight: normal;
letter-spacing: 0px;
color: #666666;
}
.log_footer {
display: block;
padding: 0 16px;
margin: 48px 0 24px;
text-align: center;
color: #212529;
}
.log_footer a {
color: white;
text-decoration: none;
}
.sign-btn {
display: inline-block;
cursor: pointer;
margin-left: 10px;
}
.wx-svg-container,
.qq-svg-container {
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;
} }
\ No newline at end of file
src/components/login/login.vue
浏览文件 @ ccc6ff73
<template> <template>
<div class='login'> <div class='login'>
<img src="/assets/img/login_bg.png"/> <img src="/assets/img/background.png"/>
<div class="login-logo">
<img src ="/assets/img/logo.svg"/>
</div>
<div class="login-content">
<span>{{appTitle}}</span>
</div>
<div class='login-con'> <div class='login-con'>
<card :bordered="false"> <card :bordered="false">
<p slot='title'> <p slot='title' style="text-align: center">
<!-- <icon type='ios-log-in'></icon> --> &nbsp;&nbsp;{{appTitle}}
<!-- &nbsp;&nbsp; -->
{{this.$t('components.login.caption')}}
</p> </p>
<div class='form-con'> <div class='form-con'>
<i-form ref='loginForm' :rules="rules" :model="form"> <i-form ref='loginForm' :rules="rules" :model="form">
<form-item prop='loginname'> <form-item prop='loginname'>
<p>用户名</p>
<i-input <i-input
prefix='ios-contact' size='large'
v-model="form.loginname" prefix='ios-contact'
:placeholder="this.$t('components.login.loginname.placeholder')"> v-model.trim="form.loginname"
placeholder="用户名"
@keyup.enter.native="handleSubmit">
</i-input> </i-input>
</form-item> </form-item>
<form-item prop='password'> <form-item prop='password'>
<p>密码</p>
<i-input <i-input
prefix='ios-key' size='large'
v-model="form.password" prefix='ios-key'
type='password' v-model.trim="form.password"
:placeholder="this.$t('components.login.password.placeholder')"> type='password'
placeholder="密码"
@keyup.enter.native="handleSubmit">
</i-input> </i-input>
</form-item> </form-item>
<form-item> <form-item>
<i-button <i-button
@click="handleSubmit" @click="handleSubmit"
type='primary' type='primary'
long> class="login_btn">登录
{{this.$t('components.login.name')}} </i-button>
<i-button
@click="goReset"
type='success'
class="login_reset">重置
</i-button> </i-button>
</form-item> </form-item>
<form-item>
<div style="text-align: center">
<span class="form_tipinfo">其他登录方式</span>
</div>
<div style="text-align: center">
<div class="sign-btn" @click="tencentHandleClick('tencent')">
<img src="/assets/img/QQ.svg" class="qq-svg-container" draggable="false">
</div>
<div class="sign-btn" @click="wechatHandleClick('wechat')">
<img src="/assets/img/weixin.svg" class="wx-svg-container" draggable="false">
</div>
</div>
</form-item>
</i-form> </i-form>
<p class='login-tip'> <p class='login-tip'>
{{this.$t('components.login.tip')}} {{this.loginTip}}
<!--{{this.$t('components.login.tip')}}-->
</p> </p>
</div> </div>
</card> </card>
<div class="log_footer">
<div class="copyright">
<a href="https://www.ibizlab.cn/" target="_blank">{{appTitle}} is based on ibizlab .</a>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'; import {Vue, Component, Watch} from 'vue-property-decorator';
import { Environment } from '@/environments/environment'; import {Environment} from '@/environments/environment';
//import Divider from "ibiz-vue-lib/lib/ibiz-vue-lib.common";
@Component({ @Component({
components: {}
}) })
export default class Login extends Vue { export default class Login extends Vue {
...@@ -65,15 +87,25 @@ export default class Login extends Vue { ...@@ -65,15 +87,25 @@ export default class Login extends Vue {
* @type {*} * @type {*}
* @memberof Login * @memberof Login
*/ */
public form: any = { loginname: 'guest', password: 'guest' }; public form: any = {loginname: 'ibzadmin', password: '123456'};
/**
*　登录提示语
*/
public loginTip: any = "";
/**
*　按钮可点击
*/
public canClick: any = true;
/** /**
* 应用标题 * 应用名称
* *
* @type {string} * @type {string}
* @memberof Login * @memberof Login
*/ */
public appTitle:string = Environment.AppTitle; public appTitle: string = Environment.AppTitle;
/** /**
* 值规则 * 值规则
...@@ -82,20 +114,20 @@ export default class Login extends Vue { ...@@ -82,20 +114,20 @@ export default class Login extends Vue {
* @memberof Login * @memberof Login
*/ */
public rules = {}; public rules = {};
/** /**
* 设置值规则 * 设置值规则
* *
* @memberof Login * @memberof Login
*/ */
public setRules(){ public setRules() {
this.rules = { this.rules = {
loginname: [ loginname: [
{ required: true, message: this.$t('components.login.loginname.message'), trigger: 'change' }, {required: true, message: this.$t('components.login.loginname.message'), trigger: 'change'},
], ],
password: [ password: [
{ required: true, message: this.$t('components.login.password.message'), trigger: 'change' }, {required: true, message: this.$t('components.login.password.message'), trigger: 'change'},
], ],
} }
}; };
...@@ -104,10 +136,14 @@ export default class Login extends Vue { ...@@ -104,10 +136,14 @@ export default class Login extends Vue {
* *
* @memberof Login * @memberof Login
*/ */
public created(){ public created() {
this.setRules(); this.setRules();
} }
public mounted() {
this.getCookie("loginname");
}
/** /**
* 监听语言变化 * 监听语言变化
* *
...@@ -132,29 +168,107 @@ export default class Login extends Vue { ...@@ -132,29 +168,107 @@ export default class Login extends Vue {
if (!validatestate) { if (!validatestate) {
return; return;
} }
const loginname: any = this.form.loginname;
const password: any = this.form.password;
const post: Promise<any> = this.$http.post('v7/login', this.form, true); const post: Promise<any> = this.$http.post('v7/login', this.form, true);
post.then((response: any) => { post.then((response: any) => {
if (response && response.status === 200) { if (response && response.status === 200) {
const data = response.data; const data = response.data;
if(data && data.token){ if (data && data.token) {
localStorage.setItem('token', data.token); localStorage.setItem('token', data.token);
this.setCookie('ibzuaa-token',data.token,0);
} }
if(data && data.user){ // 设置cookie,保存账号密码7天
localStorage.setItem('user', JSON.stringify(data.user)); this.setCookie("loginname",loginname, 7);
} // 跳转首页
const url: any = this.$route.query.redirect ? this.$route.query.redirect : '*'; const url: any = this.$route.query.redirect ? this.$route.query.redirect : '*';
this.$router.push({ path: url }); this.$router.push({path: url});
} }
}).catch((error: any) => { }).catch((error: any) => {
const loginfailed: any = this.$t('components.login.loginfailed'); // 登录提示
this.$Notice.error({ title: (this.$t('components.login.error') as any), desc: loginfailed }); const data = error.data;
if (data && data.message) {
this.loginTip = data.message;
this.$Message.error({
content: "登录失败，" + data.message,
duration: 5,
closable: true
});
} else {
this.$Message.error({
content: "登录失败",
duration: 5,
closable: true
});
}
}); });
} }
/**
* 重置页面
*
* @memberof Login
*/
public goReset(): void {
const _this = this;
_this.form={loginname: 'ibzadmin', password: '123456'}
}
/**
* 设置cookie
*
* @memberof Login
*/
public setCookie(name: any, value: any, day: any) {
if (day !== 0) { //当设置的时间等于0时，不设置expires属性，cookie在浏览器关闭后删除
let curDate = new Date();
let curTamp = curDate.getTime();
let curWeeHours = new Date(curDate.toLocaleDateString()).getTime() - 1;
let passedTamp = curTamp - curWeeHours;
let leftTamp = 24 * 60 * 60 * 1000 - passedTamp;
let leftTime = new Date();
leftTime.setTime(leftTamp + curTamp);
document.cookie = name + "=" + escape(value) + ";expires=" + leftTime.toUTCString();
} else {
document.cookie = name + "=" + escape(value);
}
}
/**
* 获取cookie
*
* @memberof Login
*/
public getCookie(name: any): any {
let arr;
let reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
/**
* qq授权登录
* @param thirdpart
*/
public tencentHandleClick(thirdpart: any) {
this.$Message.warning("qq授权登录暂未支持")
}
/**
* 微信授权登录
* @param thirddpart
*/
public wechatHandleClick(thirddpart: any) {
this.$Message.warning("微信授权登录暂未支持")
}
} }
</script> </script>
<style lang='less'> <style lang='less'>
@import './login.less'; @import './login.less';
</style> </style>
\ No newline at end of file
src/utils/interceptor/interceptor.ts
浏览文件 @ ccc6ff73
...@@ -84,6 +84,13 @@ export class Interceptors { ...@@ -84,6 +84,13 @@ export class Interceptors {
if (appdata && appdata.context) { if (appdata && appdata.context) {
config.headers['srforgsectorid'] = appdata.context.srforgsectorid; config.headers['srforgsectorid'] = appdata.context.srforgsectorid;
} }
if(!window.localStorage.getItem('token')){
let arr;
let reg = new RegExp("(^| )ibzuaa-token=([^;]*)(;|$)");
if (arr = document.cookie.match(reg)){
window.localStorage.setItem('token',unescape(arr[2]));
}
}
if (window.localStorage.getItem('token')) { if (window.localStorage.getItem('token')) {
const token = window.localStorage.getItem('token'); const token = window.localStorage.getItem('token');
config.headers['Authorization'] = `Bearer ${token}`; config.headers['Authorization'] = `Bearer ${token}`;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或