调整登录逻辑及ui

src/assets/img/QQ.svg

+<?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

+<?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

@@ -86,6 +86,9 @@ export default class AppUser extends Vue {
             if (response && response.status === 200) {
                 localStorage.removeItem('user');
                 localStorage.removeItem('token');
+                let leftTime = new Date();
+                leftTime.setTime(leftTime.getSeconds() - 1);
+                document.cookie = "ibzuaa-token=;expires=" + leftTime.toUTCString();
                 this.$router.push({ name: 'login' });
             }
         }).catch((error: any) =>{

src/components/login/login.less

 .login{
-    width: 100vh;
-    height: 100vh;
+    display: -webkit-box;
+    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{
         width: 100vw;
         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{
-        position: fixed;
-        right: 160px;
-        top: 50%;
-        transform: translateY(-60%);
-        width: 300px;
-        .ivu-card{
-            border-radius: 15px;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 20%;
+        margin: auto;
+        width: 450px;
         .ivu-card-head {
-                padding: 14px 6px;
+            padding: 30px 0px 20px 0px;
+            border-bottom: 0px;
             >p{
-                    line-height: 20px;
+                height: 30px;
+                line-height: 30px;
                 font-size: 20px;
-                    color: #17233d;
-                    font-weight: 700;
-                    text-align:center;
+                color: #666666;
+                font-weight: 600;
             }
         }
         &-header{
@@ -45,26 +38,81 @@
             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;
+            padding: 0px 20px 0px 20px;
+            >i-button{
+                width: 170px;
+                height: 40px;
             }
         }
         .login-tip{
             font-size: 10px;
             text-align: center;
-                color: #5f4949;    
-            }
+            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

 <template>
     <div class='login'>
-        <img src="/assets/img/login_bg.png"/>
-        <div class="login-logo">
-            <img src ="/assets/img/logo.svg"/>
-        </div>
-        <div class="login-content">
-            <span>{{appTitle}}</span>
-        </div>
+        <img src="/assets/img/background.png"/>
+
         <div class='login-con'>
             <card :bordered="false">
-                <p slot='title'>
-                    <!-- <icon type='ios-log-in'></icon> -->
-                    <!-- &nbsp;&nbsp; -->
-                    {{this.$t('components.login.caption')}}
+                <p slot='title' style="text-align: center">
+                    &nbsp;&nbsp;{{appTitle}}
                 </p>
                 <div class='form-con'>
                     <i-form ref='loginForm' :rules="rules" :model="form">
                         <form-item prop='loginname'>
-                            <p>用户名</p>
                             <i-input
+                                    size='large'
                                     prefix='ios-contact'
-                                v-model="form.loginname"
-                                :placeholder="this.$t('components.login.loginname.placeholder')">
+                                    v-model.trim="form.loginname"
+                                    placeholder="用户名"
+                                    @keyup.enter.native="handleSubmit">
                             </i-input>
                         </form-item>
                         <form-item prop='password'>
-                            <p>密码</p>
                             <i-input
+                                    size='large'
                                     prefix='ios-key'
-                                v-model="form.password"
+                                    v-model.trim="form.password"
                                     type='password'
-                                :placeholder="this.$t('components.login.password.placeholder')">
+                                    placeholder="密码"
+                                    @keyup.enter.native="handleSubmit">
                             </i-input>
                         </form-item>
                         <form-item>
                             <i-button
                                     @click="handleSubmit"
                                     type='primary'
-                                long>
-                                {{this.$t('components.login.name')}}
+                                    class="login_btn">登录
                             </i-button>
+                            <i-button
+                                    @click="goReset"
+                                    type='success'
+                                    class="login_reset">重置
+                            </i-button>
+                        </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>
                     <p class='login-tip'>
-                        {{this.$t('components.login.tip')}}
+                        {{this.loginTip}}
+                        <!--{{this.$t('components.login.tip')}}-->
                     </p>
                 </div>
             </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>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Watch } from 'vue-property-decorator';
-import { Environment } from '@/environments/environment';
+import {Vue, Component, Watch} from 'vue-property-decorator';
+import {Environment} from '@/environments/environment';
+//import Divider from "ibiz-vue-lib/lib/ibiz-vue-lib.common";
 
 @Component({
+    components: {}
 })
 export default class Login extends Vue {
 
@@ -65,15 +87,25 @@ export default class Login extends Vue {
      * @type {*}
      * @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}
      * @memberof Login
      */
-    public appTitle:string = Environment.AppTitle;
+    public appTitle: string = Environment.AppTitle;
 
     /**
      * 值规则
@@ -88,13 +120,13 @@ export default class Login extends Vue {
      *
      * @memberof Login
      */
-    public setRules(){
+    public setRules() {
         this.rules = {
             loginname: [
-              { required: true, message: this.$t('components.login.loginname.message'), trigger: 'change' },
+                {required: true, message: this.$t('components.login.loginname.message'), trigger: 'change'},
             ],
             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 {
      *
      * @memberof Login
      */
-    public created(){
+    public created() {
         this.setRules();
     }
 
+    public mounted() {
+        this.getCookie("loginname");
+    }
+
     /**
      * 监听语言变化
      *
@@ -132,29 +168,107 @@ export default class Login extends Vue {
         if (!validatestate) {
             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);
         post.then((response: any) => {
             if (response && response.status === 200) {
                 const data = response.data;
-                if(data && data.token){
+                if (data && data.token) {
                     localStorage.setItem('token', data.token);
+                    this.setCookie('ibzuaa-token',data.token,0);
                 }
-                if(data && data.user){
-                    localStorage.setItem('user', JSON.stringify(data.user));
-                }
+                // 设置cookie,保存账号密码7天
+                this.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) => {
-            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>
 
 <style lang='less'>
-@import './login.less';
+    @import './login.less';
 </style>
\ No newline at end of file

src/utils/interceptor/interceptor.ts

@@ -84,6 +84,13 @@ export class Interceptors {
             if (appdata && appdata.context) {
                 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')) {
                 const token = window.localStorage.getItem('token');
                 config.headers['Authorization'] = `Bearer ${token}`;