Browse Source

验证码图片显示测试

zhouna 3 years ago
parent
commit
9bb7c325a5
3 changed files with 18 additions and 19 deletions
  1. 1 1
      src/css/login.less
  2. 0 1
      src/html/login.html
  3. 17 17
      src/js/login.js

+ 1 - 1
src/css/login.less

@@ -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;

+ 0 - 1
src/html/login.html

@@ -10,7 +10,6 @@
 <body>
   <div id="mainBox"></div>
   <div class="login clearfix">
-
   </div>
 </body>
 </html>

+ 17 - 17
src/js/login.js

@@ -12,7 +12,7 @@ const otherLogo = getUrlArgObject("adLg");
 let type
 $(function () {
   getHospitalMark()
-  getSecurityCode();
+  //getSecurityCode();
   if (hideLogo || otherLogo) {
     $(".copy-right").text("");
   }
@@ -31,30 +31,25 @@ function getSecurityCode() {
     $.ajax({
         url:api.getCaptcha,
         method:'get',
-        contentType:'image/png',
-        dataType:'blob',
+        responseType:'blob',
+        emulateJSON:true,
+        /*contentType:'image/png',
+        dataType:'blob',*/
         success:function(res){
-            const data = res.data;console.log(221)
-            const qrUrl = window.URL.createObjectURL(new Blob(data));
+            console.log('success');
             const img = document.createElement("img");
+            const qrUrl = window.URL.createObjectURL(new Blob([res],{type:'image/png'}));
             img.src = qrUrl;
+            //释放对象
             img.onload=function(){
+                console.log('释放')
                 window.URL.revokeObjectURL(qrUrl)
             }
             const imgDiv = document.getElementById("codeImg");
             imgDiv.appendChild(img);
         },
-        error:function(res){
-          //console.log(error)
-            const data = res.data;
-            const qrUrl = window.URL.createObjectURL(new Blob(data));
-            const img = document.createElement("img");
-            img.src = qrUrl;
-            img.onload=function(){
-                window.URL.revokeObjectURL(qrUrl)
-            }
-            const imgDiv = document.getElementById("codeImg");
-            imgDiv.appendChild(img);
+        error:function(error){
+            console.log('error:',error)
         }
     })
 }
@@ -103,17 +98,22 @@ function getHospitalMark() {
         str += '<p class="waring"></p><div class="sureLogin">登录</div></div><div class="copy-right">由杭州朗通信息技术有限公司提供技术支持</div></div>',
         $('.login').html(str)
       }
+      getSecurityCode();
       $(".sureLogin").click(() => {
         sureLogin()
       })
       $("#password").focus(function () {
         $(this).attr("type", "password")
       })
-      $(".iptWrap input").focus(function () {
+      $(".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() != '') {