Parcourir la source

Merge remote-tracking branch 'origin/securityCode1015' into test

# Conflicts:
#	src/js/login.js
zhouna il y a 3 ans
Parent
commit
6ff34e4d2f
5 fichiers modifiés avec 205 ajouts et 156 suppressions
  1. 33 2
      src/css/login.less
  2. 0 34
      src/html/login.html
  3. 1 0
      src/js/api.js
  4. 171 119
      src/js/login.js
  5. 0 1
      src/js/utils.js

+ 33 - 2
src/css/login.less

@@ -14,7 +14,7 @@ body {
   }
   .waring {
     color: #FF4D4F;
-    margin-top: 18px;
+    margin-top: 6px;
     height: 18px;
   }
   .sureLogin {
@@ -108,7 +108,7 @@ p.title {
     }
     
   }
-  .inputFocus{
+  .inputFocus,.security-code input.inputFocus{
       border: 1px solid @activeColor ;
       outline: 0;
       -webkit-box-shadow:@activeColor  0px 0px 2px;
@@ -264,4 +264,35 @@ p.title {
     margin-left: -20px;
     margin-top: -20px;
   }
+}
+.security-code{
+  border:none;
+  input{
+    width: 140px;
+    height: 100%;
+    margin-left: -10px;
+    padding-left: 5px;
+    border-radius: 4px;
+    border: 1px solid #97A4BA;
+  }
+  .code-img{
+    display: inline-block;
+    width: 100px;
+    height: 40px;
+    vertical-align: middle;
+  }
+  img{
+    width: 100%;
+    height: 100%;
+    margin-left: 8px;
+    cursor: pointer;
+    vertical-align: middle;
+  }
+  a{
+    color: #fff;
+    font-size: 12px;
+    cursor: pointer;
+    text-decoration: underline;
+    float: right;
+  }
 }

+ 0 - 34
src/html/login.html

@@ -10,40 +10,6 @@
 <body>
   <div id="mainBox"></div>
   <div class="login clearfix">
-    
-    <!--<div class="logoTop">
-      <img src="../images/lantone.png" alt="">
-      <span></span>
-      <i>AI病案质控平台</i>
-    </div>-->
-    <!-- <div class="bg fl">
-      <p class="title">AI病案质控平台</p>
-    </div> -->
-    <!--<div class="loginForm clearfix">-->
-      <!-- <div class="message fr">
-        <div class="inner">
-          <p class="welcome">欢迎使用!</p>
-          <div class="perPub">
-            <p>用户名</p>
-            <div class="iptWrap">
-              <img src="../images/yonghu.png" alt="">
-              <input type="text" placeholder="请输入用户名" id="username" value="" autocomplete="off">
-            </div>
-          </div>
-          <br>
-          <div class="perPub">
-            <p>密码</p>
-            <div class="iptWrap">
-              <img src="../images/mima.png" alt="">
-              <input type="text" placeholder="请输入密码" id="password" value="" autocomplete="off">
-            </div>
-          </div>
-          <p class="waring"></p>
-          <div class="sureLogin">登录</div>
-        </div>
-        <div class="copy-right">由杭州朗通信息技术有限公司提供技术支持</div>
-      </div> -->
-    <!--</div>-->
   </div>
 </body>
 </html>

+ 1 - 0
src/js/api.js

@@ -1,5 +1,6 @@
 const api = {
   getHospitalMark: '/sys/user/getHospitalMark', //登录标识
+  getCaptcha:'/sys/user/getCaptcha',  //获取验证码
   getMenu: '/sys/user/getUserOrgMenu', //获取菜单
   midifyPassword: '/sys/user/midifyPassword', //修改密码
   getSubMenu: '/qc/mode/getMenu', //获取质控评分菜单

+ 171 - 119
src/js/login.js

@@ -11,138 +11,190 @@ const hideLogo = getUrlArgObject("hideLg");
 const otherLogo = getUrlArgObject("adLg");
 let type
 $(function () {
-    getHospitalMark()
-    if (hideLogo || otherLogo) {
-        $(".copy-right").text("");
+  getHospitalMark()
+  //getSecurityCode();
+  if (hideLogo || otherLogo) {
+    $(".copy-right").text("");
+  }
+  delCookie('accessToken')
+  $(document).keyup(function (event) {
+    if (event.keyCode == 13) {
+      sureLogin()
     }
-    delCookie('accessToken')
-    $(document).keyup(function (event) {
-        if (event.keyCode == 13) {
-            sureLogin()
-        }
-    });
+  });
 
 
 });
 
+//获取验证码
+function getSecurityCode() {
+  var windowUrl = window.URL || window.webkitURL;//处理浏览器兼容性
+  var xhr = new XMLHttpRequest();
+  var url = api.getCaptcha;//验证码请求地址
+  xhr.open("GET", url, true);
+  xhr.responseType = "blob";
+  xhr.onload = function () {
+    if (this.status == 200) {
+      var blob = this.response;
+      const img = document.createElement("img");
+      const qrUrl = window.URL.createObjectURL(blob);
+      img.src = qrUrl;
+      //释放对象
+      img.onload = function () {
+        console.log('释放')
+        window.URL.revokeObjectURL(qrUrl)
+      }
+      const imgDiv = document.getElementById("codeImg");
+      $(imgDiv).html(img);
+    }
+  }
+  xhr.send();
+}
 function getHospitalMark() {
-    localStorage.removeItem('accessToken')
-    post(api.getHospitalMark).then((res) => {
-        const data = res.data;
-        if (data.code == 0) {
-            type = parseInt(data.data)
-            if (parseInt(data.data) == 1) {
-                str = '<div class="bg2">'
-                str += '<div class="login-info">'
-                str += '<div class="info-perPub">'
-                str += ' <p> 用户名:</p>'
-                str += '<div class="info-iptWrap">'
-                str += '<input type="text" placeholder="请输入用户名" id="username" value="" autocomplete="off">'
-                str += '</div></div>'
-                str += '<div class="info-perPub">'
-                str += ' <p> 密码:</p>'
-                str += '<div class="info-iptWrap">'
-                str += '<input type="text" placeholder="请输入密码" id="password" value="" autocomplete="off">'
-                str += '</div></div>'
-                str += '<p class="waring"></p><div class="sureLogin">登录</div></div>'
-                $('.login').html(str)
-            } else {
-                str = '<div class="bg fl"><p class="title">AI病案质控平台</p></div>'
-                str += '<div class="message fr"><div class="inner"><p class="welcome">欢迎使用!</p>'
-                str += '<div class="perPub">'
-                str += ' <p> 用户名:</p>'
-                str += '<div class="iptWrap">'
-                str += '<input type="text" placeholder="请输入用户名" id="username" value="" autocomplete="off">'
-                str += '</div></div><br>'
-                str += '<div class="perPub">'
-                str += ' <p> 密码:</p>'
-                str += '<div class="iptWrap">'
-                str += '<input type="text" placeholder="请输入密码" id="password" value="" autocomplete="off">'
-                str += '</div></div>'
-                str += '<p class="waring"></p><div class="sureLogin">登录</div></div><div class="copy-right">由杭州朗通信息技术有限公司提供技术支持</div></div>',
-                    $('.login').html(str)
-            }
-            $(".sureLogin").click(() => {
-                sureLogin()
-            })
-            $("#password").focus(function () {
-                $(this).attr("type", "password")
-            })
-            $(".iptWrap input").focus(function () {
-                $(this).parent().addClass('inputFocus')
-            })
-            $(".iptWrap input").blur(function () {
-                $(this).parent().removeClass('inputFocus')
-            })
-            $("body").on('input', '#username,#password', function () {
-                if ($(this).val().trim() != '') {
-                    $(".login .waring").html('')
-                }
-            })
-        }
-    }).catch(() => {
-
+  localStorage.removeItem('accessToken')
+  //post(api.getHospitalMark).then((res) => {
+  const data = { code: 0, data: 0 }//res.data;
+  if (data.code == 0) {
+    type = parseInt(data.data)
+    if (parseInt(data.data) == 1) {   //湘雅三院登录样式
+      str = '<div class="bg2">'
+      str += '<div class="login-info">'
+      str += '<div class="info-perPub">'
+      str += ' <p> 用户名:</p>'
+      str += '<div class="info-iptWrap">'
+      str += '<input type="text" placeholder="请输入用户名" id="username" value="" autocomplete="off">'
+      str += '</div></div>'
+      str += '<div class="info-perPub">'
+      str += ' <p> 密码:</p>'
+      str += '<div class="info-iptWrap">'
+      str += '<input type="text" placeholder="请输入密码" id="password" value="" autocomplete="off">'
+      str += '</div></div>'
+      str += '<p class="waring"></p><div class="sureLogin">登录</div></div>'
+      $('.login').html(str)
+    } else {    //通用版样式
+      str = '<div class="bg fl"><p class="title">AI病案质控平台</p></div>'
+      str += '<div class="message fr"><div class="inner"><p class="welcome">欢迎使用!</p>'
+      str += '<div class="perPub">'
+      str += ' <p> 用户名:</p>'
+      str += '<div class="iptWrap">'
+      str += '<input type="text" placeholder="请输入用户名" id="username" value="" autocomplete="off">'
+      str += '</div></div><br>'
+      str += '<div class="perPub">'
+      str += ' <p> 密码:</p>'
+      str += '<div class="iptWrap">'
+      str += '<input type="text" placeholder="请输入密码" id="password" value="" autocomplete="off">'
+      str += '</div></div><br>'
+      str += '<div class="perPub">'
+      str += ' <p> 验证码:</p>'
+      str += '<div class="iptWrap security-code">'
+      str += '<input type="text" placeholder="请输入验证码" id="code" value="" autocomplete="off">'
+      str += '<div id="codeImg" class="code-img"></div>'
+      str += '<a id="changeCode" >换一张</a>'
+      str += '</div></div>'
+      str += '<p class="waring"></p><div class="sureLogin">登录</div></div><div class="copy-right">由杭州朗通信息技术有限公司提供技术支持</div></div>',
+        $('.login').html(str)
+    }
+    getSecurityCode();
+    $(".sureLogin").click(() => {
+      sureLogin()
+    })
+    //点击换一张事件
+    $("#codeImg,#changeCode").click(function () {
+      getSecurityCode();
+    })
+    $("#password").focus(function () {
+      $(this).attr("type", "password")
+    })
+    $(".iptWrap:not(.security-code) input").focus(function () {
+      $(this).parent().addClass('inputFocus')
+    })
+    $(".security-code input").focus(function () {
+      $(this).addClass('inputFocus')
     })
+    $(".iptWrap input").blur(function () {
+      $(this).parent().removeClass('inputFocus')
+      $(this).removeClass('inputFocus')
+    })
+    $("body").on('input', '#username,#password', function () {
+      if ($(this).val().trim() != '') {
+        $(".login .waring").html('')
+      }
+    })
+  }
+  /*}).catch(() => {
+
+  })*/
 }
 function sureLogin() {
-    localStorage.removeItem('accessToken')
-    $(".login .waring").html('')
-    let username = $("#username").val().trim();
-    let password = $("#password").val().trim();
-    if (!username) {
-        if(type == 1){
-            toast("请输入用户名!");
-        }else{
-            $(".login .waring").css('visibility', 'visible').html('请输入用户名')
-        }
-        return
-    } else if (!password) {
-        if (type == 1) {
-            toast("请输入密码!");
-        } else {
-            $(".login .waring").css('visibility', 'visible').html('请输入密码')
-        }
-        return
+  localStorage.removeItem('accessToken')
+  $(".login .waring").html('')
+  let username = $("#username").val().trim();
+  let password = $("#password").val().trim();
+  const captcha = $("#code").val().trim();
+  if (!username) {
+    if (type == 1) {
+      toast("请输入用户名!");
+    } else {
+      $(".login .waring").css('visibility', 'visible').html('请输入用户名')
+    }
+    return
+  } else if (!password) {
+    if (type == 1) {
+      toast("请输入密码!");
+    } else {
+      $(".login .waring").css('visibility', 'visible').html('请输入密码')
     }
-    $.alerModal({ type: "loading" });
-    post(api.getJwt, {
-        username: username,
-        password: password
-    }).then((res) => {
-        const data = res.data;
-        if (data.code == 0) {
-            setCookie('accessToken', data.data.accessToken)
-            setCookie('isPlacefile', 1)
-            setCookie('passwordComplexity', data.data.passwordComplexity)
-            //setCookie('mmps',password);
-            localStorage.setItem('accessToken', data.data.accessToken)
-            $(".divModal").remove()
-            $.alerModal({ "message": "登录成功", type: "tip", time: '1000', win: true });
-            setTimeout(() => {
-                cacheCheckDatas(data.data.selRoles);
-                const otherLogoPm = otherLogo ? '?adLg=1' : '';
-                const hideLgPm = hideLogo ? '?hideLg=1' : '';
-                window.location.href = 'index.html' + hideLgPm + otherLogoPm;
-            }, 600);
-        } else {
-            $(".divModal").remove()
-            if (type == 1) {
-                toast(data.msg);
-            } else {
-                $(".login .waring").css('visibility', 'visible').html(data.msg)
-            }
+    return
+  } else if (!captcha) {
+    if (type == 1) {
+      toast("请输入验证码!");
+    } else {
+      $(".login .waring").css('visibility', 'visible').html('请输入验证码')
+    }
+    return
+  }
+  $.alerModal({ type: "loading" });
+  post(api.getJwt, {
+    username: username,
+    password: password,
+    captcha: captcha
+  }).then((res) => {
+    const data = res.data;
+    if (data.code == 0) {
+      setCookie('accessToken', data.data.accessToken)
+      setCookie('isPlacefile', 1)
+      setCookie('passwordComplexity', data.data.passwordComplexity)
+      //setCookie('mmps',password);
+      localStorage.setItem('accessToken', data.data.accessToken)
+      $(".divModal").remove()
+      $.alerModal({ "message": "登录成功", type: "tip", time: '1000', win: true });
+      setTimeout(() => {
+        cacheCheckDatas(data.data.selRoles);
+        const otherLogoPm = otherLogo ? '?adLg=1' : '';
+        const hideLgPm = hideLogo ? '?hideLg=1' : '';
+        window.location.href = 'index.html' + hideLgPm + otherLogoPm;
+      }, 600);
+    } else {
+        getSecurityCode();//登录失败切换验证码
+      $(".divModal").remove()
+      if (type == 1) {
+        toast(data.msg);
+      } else {
+        $(".login .waring").css('visibility', 'visible').html(data.msg)
 
-        }
-    }).catch(() => {
-        $(".divModal").remove()
-    })
+      }
+
+    }
+  }).catch(() => {
+    $(".divModal").remove()
+  })
 }
 
 //核查权限数据保存
 function cacheCheckDatas(data) {
-    delCookie("checkAuth");
-    const arr = data && data.map((it) => {
-        return it.id;
-    }) || [];
-    setCookie("checkAuth", arr.join(","));
+  delCookie("checkAuth");
+  const arr = data && data.map((it) => {
+    return it.id;
+  }) || [];
+  setCookie("checkAuth", arr.join(","));
 }

+ 0 - 1
src/js/utils.js

@@ -160,7 +160,6 @@ const post = function(url, data) {
       url: (need ? baseUrl : '') + url,
       async: true,
       cache: false,
-      contentType: false,
       processData: false,
       data: JSON.stringify(Object.assign({}, data, { isPlacefile: isPlacefile })),
       contentType: 'application/json; charset=UTF-8',