FE-CollegeBigData/src/views/login.vue

<template>
  <div class="login-page scrollbar-box" v-show="showType">
    <!--<img class="logo-img" src="@/assets/image/logo@1x.png">-->
    <img class="logo-img" :src="rectangleLogo">
    <div class="title-img-box">
      <div>
        <img class="title-img" src="@/assets/image/login/title_icon.png">
      </div>
    </div>
    <div class="login-form-box">
      <p class="form-title-p">登录</p>
      <el-form ref="loginForm" :model="loginForm" class="login-form">
        <div class="username-input-box" :class="userTypeCode == 1||userTypeCode == 4?'username-input-box-code':''">
          <img src="@/assets/image/login/icon_dl_zh.png" alt="">
          <input type="text" v-model="loginForm.username" placeholder="请输入账号" maxlength="20" @keyup.enter="handleLogin()">
        </div>
        <div class="password-input-box" :class="userTypeCode == 2||userTypeCode == 4?'username-input-box-code':''">
          <img src="@/assets/image/login/icon_dl_mm.png" alt="">
          <input type="password" v-model="loginForm.password" placeholder="请输入密码" maxlength="20" @keyup.enter="handleLogin()">
        </div>
        <p class="text-p">{{text}}</p>
        <div class="code-input-box">
          <div class="code-input-left-box" :class="userTypeCode == 3||userTypeCode == 5?'username-input-box-code':''">
            <img src="@/assets/image/login/icon_dl_yzm.png" alt="">
            <input type="text" v-model="loginForm.code" placeholder="请输入验证码" maxlength="4" @keyup.enter="handleLogin()">
          </div>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
          </div>
        </div>
        <el-form-item>
          <el-button
                  class="form-button-p"
                  :loading="loading"
                  size="medium"
                  height="50"
                  @click.native.prevent="handleLogin()"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <p class="introduction-p">技术支持：江苏忠江智能科技有限公司</p>
  </div>
</template>

<script>
    import md5 from 'js-md5';
    import Cookies from "js-cookie";
    import { login,authInfo,getCodeImg,getConfigByType,configInfo,getInfo } from "@/api/login";
    import {Decrypt} from "@/utils/secret";
    import { setToken,getToken,removeToken } from '@/utils/auth'

    export default {
        name: "Login",
        data() {
            return {
                codeUrl: "",
                cookiePassword: "",
                type:1,
                loginForm: {
                    username: "",
                    password: "",
                    rememberMe: false,
                    code: "",
                    uuid: "",
                },
                loading: false,
                // 验证码开关
                captchaOnOff: true,
                // 注册开关
                register: false,
                redirect: undefined,
                text:"",
                userTypeCode:"",
                rectangleLogo:localStorage.getItem('rectangleLogo'),
                //手机登录
                loginType:1,
                loginFormTwo:{
                    username:"",
                    password:"",
                },
                loginRulesTwo:{
                    username: [
                        { required: true, message: "请输入手机号码", trigger: "blur" },
                        { required: true, message: "请输入手机号码", validator: this.spaceJudgment, trigger: "blur" }
                    ],
                    password: [
                        { required: true, message: "请输入验证码", trigger: "blur" },
                        { required: true, message: "请输入验证码", validator: this.spaceJudgment, trigger: "blur" }
                    ],
                },
                textTwo:"",
                codeNum:"",
                timer:null,
                codeButtonType:true,
                showType:false,
            };
        },
        watch: {
            $route: {
                handler: function(route) {
                    this.redirect = route.query && route.query.redirect;
                },
                immediate: true
            }
        },
        created() {
            let self = this;
            if(getToken()){
                this.$set(this,'showType',false);
                Promise.all([
                    this.getExploitConfig(),
                    this.getInfo(),
                    this.fullScreen(),
                ]).then((result)=>{
                    setTimeout(function(){
                        self.$router.push({path:'/home'});
                    },300);
                }).catch((error) => {})
            }else{
                this.$set(this,'showType',true);
                this.getCode();
            }
        },
        mounted(){
            this.configInfo();
        },
        methods: {
            //获取公共配置数据
            configInfo(){
                let self = this;
                configInfo({ type: '1,2,3' }).then(response => {
                    let list = JSON.parse(response.data)
                    let newData = {};
                    list.forEach((item) => {
                        let obj = JSON.parse(item.configValue)
                        newData = {...newData,...obj}
                    })
                    setTimeout(function(){
                        self.$set(self,'rectangleLogo',newData.rectangleLogo);
                        localStorage.setItem('schoolName',newData.schoolName)
                        localStorage.setItem('circularLogo',newData.circularLogo)
                        localStorage.setItem('rectangleLogo',newData.rectangleLogo)
                        localStorage.setItem('videoCover',newData.videoCover)
                        localStorage.setItem('setSmartAlarmType',newData.smartLock)
                    },200);
                });
            },
            //获取开发配置
            getExploitConfig(){
                getConfigByType({ category: 2, configType: 5 }).then(response => {
                    let obj = JSON.parse(response.data.configValue);
                    //判定http或者https
                    let urlText = window.location.href.split('://')[0]+'://';
                    let outerNet = window.location.href.indexOf(obj.ipIdentify) == -1//true外网 false 内网
                    if(outerNet){//外网
                        //MQTT地址
                        localStorage.setItem('mqttUrl','wss://'+Decrypt(obj.mqttExtranetUrl))
                        //MQTT账号
                        localStorage.setItem('mqttUser',Decrypt(obj.mqttExtranetUser))
                        //MQTT密码
                        localStorage.setItem('mqttPassword',Decrypt(obj.mqttExtranetPassword))
                        //PC端回跳地址
                        localStorage.setItem('pcUrl',urlText+obj.pcExtranetUrl)
                        localStorage.setItem('fileBrowseEnvironment',urlText+Decrypt(obj.fileBrowseEnvironmentExtranet))
                        localStorage.setItem('fileBrowseEnvironmentExtranet',urlText+Decrypt(obj.fileBrowseEnvironmentExtranet))
                    }else{
                        //MQTT地址
                        localStorage.setItem('mqttUrl','ws://'+Decrypt(obj.mqttIntranetUrl))
                        //MQTT账号
                        localStorage.setItem('mqttUser',Decrypt(obj.mqttIntranetUser))
                        //MQTT密码
                        localStorage.setItem('mqttPassword',Decrypt(obj.mqttIntranetPassword))
                        //PC端回跳地址
                        localStorage.setItem('pcUrl',urlText+obj.pcIntranetUrl)
                        localStorage.setItem('fileBrowseEnvironment',urlText+Decrypt(obj.fileBrowseEnvironment))
                        localStorage.setItem('fileBrowseEnvironmentExtranet',urlText+Decrypt(obj.fileBrowseEnvironmentExtranet))
                    }
                });
            },
            getCode() {
                getCodeImg().then(res => {
                    this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
                    if (this.captchaOnOff) {
                        this.codeUrl = "data:image/gif;base64," + res.data.image;
                        this.loginForm.uuid = res.data.uuid;
                    }
                });
            },
            getInfo() {
                getInfo().then(res => {
                    localStorage.setItem('deptName',res.data.userInfo.deptName)
                    localStorage.setItem('deptId',res.data.userInfo.deptId)
                });
            },
            handleLogin() {
                let self = this;
                //账号登录
                if(this.loginForm.username.length<1){
                    this.text = "*请输入账号";
                    this.userTypeCode = "1";
                    return
                }else if(this.loginForm.password.length<1){
                    this.text = "*请输入密码";
                    this.userTypeCode = "2";
                    return
                }else if(!this.loginForm.code||this.loginForm.code.length<1){
                    this.text = "*请输入验证码";
                    this.userTypeCode = "3";
                    return
                }
                this.text = "";
                this.userTypeCode = "";
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        if (this.loginForm.rememberMe) {
                            Cookies.set("username", this.loginForm.username, { expires: 30 });
                            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
                            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
                        } else {
                            Cookies.remove("username");
                            Cookies.remove("password");
                            Cookies.remove('rememberMe');
                        }
                        this.login(this.loginForm);
                    }
                });
            },
            login(userInfo){
                localStorage.setItem('entranceJumpType','SCHOOL');
                let self = this;
                const account = userInfo.username.trim()
                const password = md5(userInfo.password);
                const code = userInfo.code
                const uuid = userInfo.uuid
                const userType = userInfo.userType
                login(account, password, code, uuid, userType).then(res => {
                    if(res.code == 200){
                        if(res.data.userType != 3){
                            this.text = "* 非院级大屏账号,无权登录本系统.";
                            this.loading = false;
                            this.getCode();
                        }else{
                            localStorage.setItem('userId',res.data.userId);
                            localStorage.setItem('instituteToken',res.data.token);
                            setToken(res.data.token)
                            //身份字段规则转义 原定11老师 22学生  新版本后0系统1老师2学生,这里身份字段转义为旧版本规则
                            localStorage.setItem('userType',res.data.userType)
                            //等待配置与字段获取到后跳转
                            Promise.all([
                                this.getExploitConfig(),
                                this.getInfo(),
                                this.fullScreen(),
                            ]).then((result)=>{
                                setTimeout(function(){
                                    self.$router.push({path:'/home'});
                                },300);
                            }).catch((error) => {})
                        }
                    }else{
                        if(res.code == 5007){
                            this.userTypeCode = "4";
                        }else if(res.code == 500){
                            this.userTypeCode = "5";
                        }
                        this.text = res.message;
                        this.loading = false;
                        this.getCode();
                    }
                });
            },
            //全屏
            fullScreen() {
                var element = document.documentElement;
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                }
            },
            //退出全屏
            exitFullscreen() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            },
            /*******************手机登录*******************/
            loginTypeClick(type){
                if(type!=this.loginType){
                    this.loginType = type;
                }
            },
            getCodeOne() {
                if(this.checkPhone(this.loginFormTwo.username)){
                    if(this.codeButtonType){
                        sendCode(this.loginFormTwo.username).then(response => {
                            if(response.code != 200){
                                this.textTwo = "*"+response.message;
                                if(response.code == 530){
                                    this.textTwo = "*"+response.message;
                                }
                            }else {
                                this.textTwo = "";
                                // this.msgSuccess('发送成功');
                                this.codeButtonType = false;
                                this.time();
                            }
                        });
                    }
                }
            },
            //定时器
            time(){
                let self = this;
                let time = 30;
                self.codeNum = parseInt(time);
                this.timer = window.setInterval(refreshCount, 1000);
                function refreshCount() {
                    if(time<=0){
                        self.codeNum = parseInt(time);
                        self.codeButtonType = true;
                        window.clearInterval(self.timer);
                    }else{
                        time--;
                        self.codeNum = parseInt(time);
                    }
                }
            },
            //手机号验证
            checkPhone(value) {
                if (!value) {
                    this.textTwo = '*手机号不能为空哦~';
                    return false
                } else {
                    const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
                    if (reg.test(value)) {
                        this.textTwo = '';
                        return true
                    } else {
                        this.textTwo = '*请输入正确的手机号码';
                        return false
                    }
                }
            },
        },
        beforeDestroy() {
            //清除定时器
            clearInterval(this.timer);
        },
        destroyed() {
            //清除定时器
            clearInterval(this.timer);
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss">
  .login-page{
    height: 100%;
    width:100%;
    background-image: url("../assets/image/login/icon_dl_bbg.png");
    background-repeat:no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    position: relative;
    *{
      margin:0;
    }
    .forgotPasswordBox{
      margin-top:5px;
      display: flex;
      .forgotPasswordNull{
        flex:1;
      }
      .forgotPassword{
        text-align: center;
        color:#ffffff;
        font-size:14px;
        cursor: pointer;
      }
      .forgotPassword:hover{
        color:#00ffff;
      }
    }
    .logo-img{
      position: absolute;
      top:29px;
      left:52px;
      width:250px;
      height:55px;
    }
    .title-img-box{
      position: absolute;
      top:74px;
      left:50%;
      margin-left:-580px;
      width:1180px;
      height:230px;
      div{
        position: relative;
        img{
          width:1180px;
          height:230px;
        }
        p{
          position: absolute;
          top:72px;
          right:300px;
          width:50px;
          height:26px;
          line-height:26px;
          text-align: center;
          background: #0045AF;
          color:#fff;
          font-size:14px;
          border-radius:70px;
        }
      }
    }
    .login-form-box{
      width:680px;
      height:520px;
      background-image: url("../assets/image/login/img_dlk_bg.png");
      position: absolute;
      top:290px;
      left:50%;
      margin-left:-340px;
      .form-title-p{
        line-height:52px;
        font-size:24px;
        text-align: center;
        color:#fff;
        font-weight:700;
      }
      .username-input-box-code:hover{
        box-shadow: 0 0 4px 1px rgba(255,39,39,1)!important;
      }
      .username-input-box-code{
        border: 1px solid #FF6A6A!important;
      }
      .username-input-box:hover{
        box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
      }
      .username-input-box{
        width:480px;
        height:60px;
        border: 1px solid #00FFFC;
        border-radius: 10px;
        background: rgba(0, 13, 41, 0.2);
        margin: 40px auto 32px;
        display: flex;
        overflow: hidden;
        img{
          height:20px;
          width:20px;
          margin:20px;
        }
        input:-webkit-autofill {
          -webkit-box-shadow : 0 0 0 1000px rgba(1,25,67,1) inset !important;
          -webkit-text-fill-color: #FFFFFF !important;
        }
        input{
          flex:1;
          border:none;
          outline:none;
          background-color: transparent !important;
          color: #dedede;
          font-size:16px;
        }
        ::placeholder{
          color:#999999 ;
          font-size:16px;
        }
      }
      .password-input-box:hover{
        box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
      }
      .password-input-box{
        width:480px;
        height:60px;
        border: 1px solid #00FFFC;
        border-radius: 10px;
        background: rgba(0, 13, 41, 0.2);
        margin: 0 auto;
        display: flex;
        overflow: hidden;
        img{
          height:20px;
          width:20px;
          margin:20px;
        }
        input:-webkit-autofill {
          -webkit-box-shadow : 0 0 0 1000px rgba(1,25,67,1) inset !important;
          -webkit-text-fill-color: #FFFFFF !important;
        }
        input{
          flex:1;
          border:none;
          outline:none;
          background-color: transparent !important;
          color: #dedede;
          font-size:16px;
        }
        ::placeholder{
          color:#999999 ;
          font-size:16px;
        }
      }
      .text-p{
        width:480px;
        height:59px;
        line-height: 59px;
        margin: 0 auto;
        font-size: 14px;
        font-family: Microsoft YaHei;
        color: #DC1616;
      }
      .code-input-box{
        width:480px;
        height:60px;
        display: flex;
        margin: 0 auto;
        .code-input-left-box:hover{
          box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
        }
        .code-input-left-box{
          width:330px;
          height:60px;
          border: 1px solid #00FFFC;
          border-radius: 10px;
          background: rgba(0, 13, 41, 0.2);
          display: flex;
          overflow: hidden;
          img{
            height:20px;
            width:20px;
            margin:20px;
          }
          input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px white inset !important;
          }
          input{
            flex:1;
            border:none;
            outline:none;
            background-color: transparent !important;
            color: #dedede;
            font-size:16px;
          }
          ::placeholder{
            color:#999999 ;
            font-size:16px;
          }
        }
        .login-code{
          width:124px;
          height:50px;
          margin:6px 0 0 25px;
          img {
            width:124px;
            height:50px;
            cursor: pointer;
            vertical-align: middle;
          }
        }
      }
      .form-button-p{
        font-size:16px!important;
        display: block!important;
        width:480px!important;
        height: 60px!important;
        background: #0045AF!important;
        color:#fff!important;
        border:none!important;
        border-radius: 10px!important;
        margin:34px auto 0!important;
      }
    }
    .introduction-p{
      width:100%;
      text-align: center;
      color:#fff;
      font-size:16px;
      line-height:44px;
      position: absolute;
      left:0;
      bottom:0;
    }
  }
</style>