FE-V2-PC/src/views/login.vue

<template>
  <div class="login-page scrollbar-box">
    <!--<img class="logo-img" src="@/assets/ZDimages/login/logo.png">-->
    <img class="logo-img" :src="rectangleLogo">
    <div class="title-img-box">
      <div>
        <img class="title-img" src="@/assets/ZDimages/login/title_icon.png">
        <!--<p>v 2.0</p>-->
      </div>
    </div>
    <div class="form-box">
      <p class="form-title-p">登录</p>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <div class="username-input-box" :class="userTypeCode == 1||userTypeCode == 4?'username-input-box-code':''">
          <img src="@/assets/ZDimages/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/ZDimages/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/ZDimages/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>
          <div style="float: right;" v-if="register">
            <router-link class="link-type" :to="'/register'">立即注册</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!--<p class="introduction-p">技术支持：江苏忠江智能科技有限公司</p>-->
  </div>
</template>

<script>
import { getCodeImg,initPage } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import store from '@/store'
import { getLogoInfo,getUrlConfig} from "@/api/system/publicConfig";
import { Encrypt,Decrypt} from '@/utils/secret.js'

export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      cookiePassword: "",
      type:1,
      loginForm: {
        // username: "admin",
        // password: "admin123",
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
        // userType:""
      },
      loginRules: {
        // username: [
        //   { required: true, trigger: "blur", message: "请输入您的账号" }
        // ],
        // password: [
        //   { required: true, trigger: "blur", message: "请输入您的密码" }
        // ],
        // code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      // 验证码开关
      captchaOnOff: true,
      // 注册开关
      register: false,
      redirect: undefined,
      text:"",
      userTypeCode:"",
      rectangleLogo:localStorage.getItem('rectangleLogo'),
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    localStorage.setItem('windowHref',window.location.href)
    this.getCode();
    this.getCookie();
    // this.exitFullscreen();
  },
  mounted(){
    this.getLogoInfo();
    this.initPage();
  },
  methods: {
    //获取首页配置
    initPage(){
      initPage().then(response => {
        if(response.data){
          localStorage.setItem('initPage',true);
        }else{
          localStorage.setItem('initPage',false);
        }
      });
    },
    //获取公共配置数据
    getLogoInfo(){
      getLogoInfo().then(response => {
        store.dispatch('settings/setSmartAlarmType', response.data.smartLock)
        localStorage.setItem('setSmartAlarmType',response.data.smartLock)
        this.rectangleLogo = response.data.rectangleLogo;
        localStorage.setItem('circularLogo',response.data.circularLogo)
        localStorage.setItem('rectangleLogo',response.data.rectangleLogo)
        localStorage.setItem('videoCover',response.data.videoCover)
      });
      getUrlConfig().then(response => {
        //判定http或者https
        let urlText = window.location.href.split('://')[0]+'://';
        let outerNet=window.location.href.indexOf(Decrypt(response.data.ipIdentify)) == -1//true外网 false 内网
        if(outerNet){//外网
          //文件预览地址
          localStorage.setItem('filePreviewUrl',urlText+Decrypt(response.data.fileExtranetUrl))
          //摄像头代理访问地址
          localStorage.setItem('cameraExtranetAgent',urlText+Decrypt(response.data.cameraExtranetAgent))
          //摄像头地址ip段
          localStorage.setItem('ipIdentify',Decrypt(response.data.ipIdentify))
          //摄像头访问地址
          localStorage.setItem('cameraUrl','wss://'+Decrypt(response.data.cameraExtranetUrl))
          //判定ws或者wss
          if(window.location.href.indexOf('https') != -1){
            //MQTT地址
            localStorage.setItem('mqttUrl','wss://'+Decrypt(response.data.mqttExtranetUrl))
          }else{
            //MQTT地址
            localStorage.setItem('mqttUrl','ws://'+Decrypt(response.data.mqttIntranetUrl))
          }
          //MQTT账号
          localStorage.setItem('mqttUser',Decrypt(response.data.mqttExtranetUser))
          //MQTT密码
          localStorage.setItem('mqttPassword',Decrypt(response.data.mqttExtranetPassword))
          //可视化大屏访问地址
          localStorage.setItem('screenUrl',urlText+Decrypt(response.data.screenExtranetUrl))
        }else{
          //文件预览地址
          localStorage.setItem('filePreviewUrl',urlText+Decrypt(response.data.fileIntranetUrl))
          //摄像头代理访问地址
          localStorage.setItem('cameraExtranetAgent',urlText+Decrypt(response.data.cameraIntranetAgent))
          //摄像头地址ip段
          localStorage.setItem('ipIdentify',Decrypt(response.data.ipIdentify))
          //摄像头访问地址
          localStorage.setItem('cameraUrl','wss://'+Decrypt(response.data.cameraIntranetUrl))
          //MQTT地址
          localStorage.setItem('mqttUrl','ws://'+Decrypt(response.data.mqttIntranetUrl))
          //MQTT账号
          localStorage.setItem('mqttUser',Decrypt(response.data.mqttIntranetUser))
          //MQTT密码
          localStorage.setItem('mqttPassword',Decrypt(response.data.mqttIntranetPassword))
          //可视化大屏访问地址
          localStorage.setItem('screenUrl',urlText+Decrypt(response.data.screenIntranetUrl))
        }



      });


    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        if (this.captchaOnOff) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    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.$store.dispatch("Login", this.loginForm).then((res) => {
            if(res.code != 200){
              this.text = "*"+res.msg;
              if(res.code == 530){
                this.userTypeCode = "4";
              }else if(res.code == 503){
                this.userTypeCode = "5";
              }
              this.loading = false;
              this.getCode();
              return
            }
            if(res.data.reset_password){
              this.$confirm('账号当前登录密码为默认密码,是否现在修改?', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(function() {
                let routeData = JSON.parse(localStorage.getItem("routeData"))
                for(let i=0;i<routeData.length;i++){
                  if(!routeData[i].hidden&&routeData[i].name != 'Https://www.sxitdlc.com'){
                    store.dispatch('settings/setPageName', routeData[i].meta.title)
                    self.$store.commit("SET_SIDEBAR_ROUTERS", routeData[i].children);
                    // self.$router.push({ path: '/mine' });
                    self.$router.push({ path: '/comprehensive/system/mine' });
                    // self.$router.push({ path: '/user/profile' });
                    break
                  }
                }
              }).then(() => {
              }).catch(() => {
              });
            }
            if(res.data.type){
              localStorage.setItem('userType',res.data.type)
              localStorage.setItem('userId',res.data.user_id)
              localStorage.setItem('identity',res.data.screen_token);
              localStorage.setItem('identityType',res.data.screen_type);
            }
            this.fullScreen();
            this.$router.push({ path: this.redirect || "/home" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            if (this.captchaOnOff) {
              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();
      }
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
  .login-page{
    height: 100%;
    width:100%;
    background-image: url("../assets/ZDimages/login/icon_dl_bbg.png");
    background-repeat:no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    position: relative;
    *{
      margin:0;
    }
    .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;
        }
      }
    }
    .form-box{
      width:680px;
      height:520px;
      background-image: url("../assets/ZDimages/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 {
          //input 背景色     #0C2034根据自己需要替换
          -webkit-box-shadow : 0 0 0px 1000px rgba(1,25,67,1) inset !important;
          //input字体颜色 颜色根据自己要求替换
          -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 {
          //input 背景色     #0C2034根据自己需要替换
          -webkit-box-shadow : 0 0 0px 1000px rgba(1,25,67,1) inset !important;
          //input字体颜色 颜色根据自己要求替换
          -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;
        display: block;
        width:480px;
        height: 60px;
        background: #0045AF;
        color:#fff;
        border:none;
        border-radius: 10px;
        margin:34px auto 0;
      }
    }
    .introduction-p{
      width:100%;
      text-align: center;
      color:#fff;
      font-size:16px;
      line-height:44px;
      position: absolute;
      left:0;
      bottom:0;
    }
  }
.login {
  /*display: flex;*/
  /*justify-content: right;*/
  /*padding-right:220px;*/
  /*align-items: center;*/
  height: 100%;
  width:100%;
  background-image: url("../assets/ZDimages/img_dl_bg.png");
  background-size: 100%;
  position: relative;
  .login-max-box{
    position: absolute;
    height:800px;
    width:1600px;
    background: #FFFFFF;
    border-radius: 30px;
    top:50%;
    left:50%;
    margin-top:-400px;
    margin-left:-800px;
    display: flex;
    .left-box{
      width:591px;
      height:500px;
      background-image: url("../assets/ZDimages/img_dl_sy.png");
      background-size: 100%;
      margin:172px 0 178px 140px;
    }
    .right-box{
      flex:1;
      .title {
        margin:91px 0 40px 0;
        text-align: center;
        padding:0;
        font-size: 50px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #0045AF;
        /*
        position: absolute;
        margin:0;
        top: -100px;
        right:-120px;
        font-size:60px;
        width:770px;
        text-align: center;
        font-weight:700;
        */
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently not supported by any browser */
      }
      .login-form {
        border-radius: 6px;
        background: #ffffff;
        width: 500px;
        margin:0 auto;
        padding: 25px 25px 5px 25px;
        .el-input {
          height: 38px;
          input {
            height: 38px;
          }
        }
        .input-icon {
          height: 39px;
          width: 14px;
          margin-left: 2px;
        }
        .username-input-box{
          width:448px;
          height:48px;
          background: #f8f8f8;
          border: 1px solid #E0E0E0;
          border-radius:10px;
          display: flex;
          margin-bottom:30px;
          img{
            width:20px;
            height:20px;
            margin:14px 16px 0 16px;
          }
          input{
            height:46px;
            flex:1;
            background: #f8f8f8;
            outline: none;
            border:none;
            margin-right:20px;
            color:#333;
          }
          input::placeholder{
            color:#ccc;
          }
        }
        .password-input-box{
          width:448px;
          height:48px;
          background: #f8f8f8;
          border: 1px solid #E0E0E0;
          border-radius:10px;
          display: flex;
          img{
            width:20px;
            height:20px;
            margin:14px 16px 0 16px;
          }
          input{
            height:46px;
            flex:1;
            background: #f8f8f8;
            outline: none;
            border:none;
            margin-right:20px;
            color:#333;
          }
          input::placeholder{
            color:#ccc;
          }
        }
        .code-input-box{
          width:450px;
          height:50px;
          display: flex;
          margin-bottom:60px;
          .code-input-left-box{
            width:274px;
            height:48px;
            background: #f8f8f8;
            border: 1px solid #E0E0E0;
            border-radius:10px;
            img{
              width:20px;
              height:20px;
              margin:14px 16px 0 16px;
            }
            input{
              height:46px;
              flex:1;
              background: #f8f8f8;
              outline: none;
              border:none;
              margin-right:20px;
              color:#333;
            }
            input::placeholder{
              color:#ccc;
            }
            display: flex;
          }
          .login-code {
            margin-left:24px;
            width: 150px;
            height: 48px;
            img {
              width: 150px;
              height: 48px;
              cursor: pointer;
              vertical-align: middle;
            }
          }
        }
      }
      .login-tip {
        font-size: 13px;
        text-align: center;
        color: #bfbfbf;
      }
      .el-login-footer {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
      }
      .login-code-img {
        height: 38px;
      }
      .type-max-box{
        display: flex;
        margin-bottom:58px;
        width:450px;
        /*border-bottom:1px solid #e0e0e0;*/
        p{
          font-size:18px;
          text-align: center;
          line-height:56px;
          margin:0;
          color:#666666;
          cursor:pointer;
        }
        p:nth-child(1){
          width:90px;
          margin-right:30px;
        }
        p:nth-child(2){
          width:126px;
        }
        .typeColorA{
          color:#0045af;
          border-bottom:2px solid #0045af;
        }
      }
      .text-p{
        margin:0;
        width: 172px;
        height: 50px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        color: #DC1616;
        line-height: 50px;
      }
    }
    .logo-img{
      position: absolute;
      left:20px;
      top:20px;
      width:267px;
      height:66px;
    }
  }
  .position-p{
    position: absolute;
    right:0;
    bottom:20px;
    width: 638px;
    height: 15px;
    font-size: 14px;
    color: #AAE1FF;
    line-height: 15px;
    padding:0;
    margin:0;
  }
}
</style>