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

<template>
  <div class="login-page scrollbar-box">
    <img class="logo-img" :src="rectangleLogo">
    <div class="title-img-box">
      <div>
        <img class="title-img" src="@/assets/ZDimages/login/title_icon_one.png">
        <!--<p>v 2.0</p>-->
      </div>
    </div>
    <div class="form-box">
      <div class="form-title-box">
        <p class="form-title-null"></p>
        <p class="form-title-p" :class="loginType==1?'form-title-p-color':''" @click="loginTypeClick(1)">密码登录</p>
        <p class="form-title-p" :class="loginType==2?'form-title-p-color':''" @click="loginTypeClick(2)">短信登录</p>
        <p class="form-title-null"></p>
      </div>
      <el-form ref="loginForm"v-show="loginType == 1"
               :model="loginForm" :rules="loginRules" class="login-form-one">
        <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(1)">
        </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(1)">
          </div>
          <div class="login-code">
            <img :src="codeUrl" @click="getCodeOne" 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(1)"
          >
            <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>
      <el-form ref="loginFormTwo" v-show="loginType == 2"
               :model="loginFormTwo" :rules="loginRulesTwo" class="login-form-two">
        <div class="username-input-box">
          <img src="@/assets/ZDimages/medicUniversity-3_1/user.png" alt="">
          <p>
            <span>+86</span>
            <span>丨</span>
          </p>
          <input type="text" v-model="loginFormTwo.username" placeholder="请输入联系方式"
                 onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                 maxlength="11">
        </div>
        <p class="text-p">{{textTwo}}</p>
        <div class="code-input-box">
          <div class="code-input-left-box">
            <img src="@/assets/ZDimages/medicUniversity-3_1/code.png" alt="">
            <input type="text" v-model="loginFormTwo.password" placeholder="请输入验证码"
                   onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                   maxlength="6">
          </div>
          <div class="login-code" :class="codeNum>0?'login-code-one':'login-code-two'" @click="getCode">
            获取验证码 {{codeNum>0?'('+codeNum+')':''}}
            <!--<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(2)"
          >
            <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 Cookies from "js-cookie";
  import { encrypt, decrypt } from '@/utils/jsencrypt'
  import store from '@/store'
  import { getCodeImg,initPage,sendCode,phoneLogin } from "@/api/login";
  import { getRouters } from "@/api/menu";
  import { getLogoInfo } from "@/api/system/publicConfig";
    export default {
      name: "login",
      data() {
        return {
          loading:false,
          loginType:1,
          //账号登录
          loginForm: {
            username: "",
            password: "",
            rememberMe: false,
            code: "",
            uuid: "",
          },
          text:"",
          userTypeCode:"",
          codeUrl: "",
          captchaOnOff: true,
          register: false,
          redirect: undefined,
          loginRules: {
            // username: [
            //   { required: true, trigger: "blur", message: "请输入您的账号" }
            // ],
            // password: [
            //   { required: true, trigger: "blur", message: "请输入您的密码" }
            // ],
            // code: [{ required: true, trigger: "change", message: "请输入验证码" }]
          },
          //手机登录
          loginFormTwo:{
            username:"",
            password:"",
          },
          textTwo:"",
          rectangleLogo:localStorage.getItem('rectangleLogo'),
          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" }
            ],
          },
          timer:null,
          codeButtonType:true,
          codeNum:"",
        }
      },
      watch: {
        $route: {
          handler: function(route) {
            this.redirect = route.query && route.query.redirect;
          },
          immediate: true
        }
      },
      created(){
        localStorage.setItem('windowHref',window.location.href)
        this.getCodeOne();
        this.getCookie();
      },
      mounted(){
        this.getLogoInfo();
        this.initPage();
      },
      methods: {
        /***************************************账号登录部分***************************************/
        getCodeOne() {
          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)
          };
        },
        /***************************************手机号登录部分***************************************/
        loginTypeClick(type){
          if(type!=this.loginType){
            this.loginType = type;
          }
        },
        getCode(){
          if(this.checkPhone(this.loginFormTwo.username)){
            if(this.codeButtonType){
              sendCode(this.loginFormTwo.username).then(response => {
                if(response.code != 200){
                  this.textTwo = "*"+response.msg;
                  if(response.code == 530){
                    this.textTwo = "*"+response.msg;
                  }
                }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 = '';
              console.log("*0")
              return true
            } else {
              this.textTwo = '*请输入正确的手机号码';
              return false
            }
          }
        },
        //登录
        handleLogin(type){
          let self = this;
          if(type == 1){
            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.getCodeOne();
                    this.loading = false;
                    return
                  }
                  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();
                  if(res.data.type == 22){
                    getRouters().then(response => {
                      // let routeData = JSON.parse(localStorage.getItem("routeData"))
                      let routeData = response.data;
                      for(let i=0;i<routeData.length;i++){
                        if (routeData[i].children&&!routeData[i].hidden&&routeData[i].alwaysShow){
                          for(let o=0;o<routeData[i].children.length;o++){
                            if(!routeData[i].children[o].alwaysShow&&!routeData[i].children[o].hidden){
                              let urlText = routeData[i].path + '/' + routeData[i].children[o].path;
                              console.log("urlText=1",urlText)
                              this.$router.push({ path: this.redirect || urlText }).catch(()=>{});
                              return
                            }else{
                              if(routeData[i].children[o].children){
                                for(let x=0;x<routeData[i].children[o].children.length;x++){
                                  if(!routeData[i].children[o].children[x].alwaysShow&&!routeData[i].children[o].children[x].hidden){
                                    let urlText = routeData[i].path + '/' + routeData[i].children[o].path + '/' + routeData[i].children[o].children[x].path;
                                    console.log("urlText=2",urlText)
                                    this.$router.push({ path: this.redirect || urlText }).catch(()=>{});
                                    return
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    });
                  } else {
                    // this.$router.push({ path: this.redirect || "/chemicalLibrary/medicUniversityHome" }).catch(()=>{});
                    this.$router.push({ path: this.redirect || "/chemicalLibrary/medicUniversityHome" }).catch(()=>{});
                  }
                }).catch(() => {
                  this.loading = false;
                  if (this.captchaOnOff) {
                    this.getCodeOne();
                  }
                });
              }
            });
          }else if(type == 2){
            if(this.checkPhone(this.loginFormTwo.username)){
              if(!this.loginFormTwo.password){
                this.textTwo = '*请输入正确的验证码';
                return
              }
              this.textTwo = "";
              this.$refs.loginFormTwo.validate(valid => {
                if (valid) {
                  this.loading = true;
                  this.loginFormTwo.authType = 'mobile'
                  this.$store.dispatch("LoginPhone", this.loginFormTwo).then((res) => {
                    if(res.code != 200){
                      this.textTwo = "*"+res.msg;
                      if(res.code == 530){
                        this.textTwo = "*"+res.msg;
                      }else if(res.code == 503){
                        this.textTwo = "*"+res.msg;
                      }
                      this.loading = false;
                      return
                    }
                    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();
                    if(res.data.type == 22){
                      // this.$router.push({ path: this.redirect || "/comprehensive/system/mine" }).catch(()=>{});
                      getRouters().then(response => {
                        // let routeData = JSON.parse(localStorage.getItem("routeData"))
                        let routeData = response.data;
                        for(let i=0;i<routeData.length;i++){
                          if (routeData[i].children&&!routeData[i].hidden&&routeData[i].alwaysShow){
                            for(let o=0;o<routeData[i].children.length;o++){
                              if(!routeData[i].children[o].alwaysShow&&!routeData[i].children[o].hidden){
                                let urlText = routeData[i].path + '/' + routeData[i].children[o].path;
                                this.$router.push({ path: this.redirect || urlText }).catch(()=>{});
                                return
                              }else{
                                if(routeData[i].children[o].children){
                                  for(let x=0;x<routeData[i].children[o].children.length;x++){
                                    if(!routeData[i].children[o].children[x].alwaysShow&&!routeData[i].children[o].children[x].hidden){
                                      let urlText = routeData[i].path + '/' + routeData[i].children[o].path + '/' + routeData[i].children[o].children[x].path;
                                      this.$router.push({ path: this.redirect || urlText }).catch(()=>{});
                                      return
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      });
                    } else {
                      this.$router.push({ path: this.redirect || "/chemicalLibrary/medicUniversityHome" }).catch(()=>{});
                    }
                  }).catch(() => {
                    this.loading = false;
                  });
                }
              });
            }
          }
        },
        /***************************************公共部分***************************************/
        //获取首页配置
        initPage(){
          initPage().then(response => {
            if(response.data){
              localStorage.setItem('initPage',true);
            }else{
              localStorage.setItem('initPage',false);
            }
          });
        },
        //获取公共配置数据
        getLogoInfo(){
          getLogoInfo().then(response => {
            this.rectangleLogo = response.data.rectangleLogo;
            localStorage.setItem('circularLogo',response.data.circularLogo)
            localStorage.setItem('rectangleLogo',response.data.rectangleLogo)
            localStorage.setItem('videoCover',response.data.videoCover)
          });
        },
        //全屏
        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();
          }
        },
      },
      beforeDestroy() {
        //清除定时器
        clearInterval(this.timer);
        console.log("beforeDestroy");
      },
      destroyed() {
        //清除定时器
        clearInterval(this.timer);
        console.log("destroyed");
      }
    }
</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_one.png");
      position: absolute;
      top:290px;
      left:50%;
      margin-left:-340px;
      .form-title-box{
        height:52px;
        display: flex;
        .form-title-null{
          flex:1;
        }
        .form-title-p{
          padding:0 30px;
          line-height:52px;
          font-size:20px;
          text-align: center;
          color:#fff;
          font-weight:700;
          cursor: pointer;
        }
        .form-title-p-color{
          color:#00ffff;
        }
      }
      .login-form-one {
        .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;
        }
      }
      .login-form-two{
        .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: 70px auto 0;
          display: flex;
          overflow: hidden;
          img{
            height:20px;
            width:20px;
            margin:19px 30px 19px 20px;
          }
          p{
            color: #999999;
            line-height:60px;
            span:nth-child(1){

            }
            span:nth-child(2){
              margin:0 10px;
            }
          }
          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:300px;
            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:19px 30px 19px 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-one{
            background: #999;
            color:#fff;
          }
          .login-code-two{
            background: #0045AF;
            color:#fff;
          }
          .login-code{
            width:160px;
            height:60px;
            line-height:60px;
            cursor: pointer;
            margin-left:20px;
            border-radius:10px;
            font-size:14px;
            text-align: center;
          }
        }
        .form-button-p{
          font-size:16px;
          display: block;
          width:480px;
          height: 60px;
          background: #0045AF;
          color:#fff;
          border:none;
          border-radius: 10px;
          margin:50px auto 0;
        }
      }
    }
    .introduction-p{
      width:100%;
      text-align: center;
      color:#fff;
      font-size:16px;
      line-height:44px;
      position: absolute;
      left:0;
      bottom:0;
    }
  }

</style>