Selaa lähdekoodia

参数验证码图片显示

zhouna 3 vuotta sitten
vanhempi
commit
9b7444b2f8
5 muutettua tiedostoa jossa 74 lisäystä ja 38 poistoa
  1. 28 0
      src/css/login.less
  2. 1 34
      src/html/login.html
  3. 1 0
      src/js/api.js
  4. 43 2
      src/js/login.js
  5. 1 2
      src/js/utils.js

+ 28 - 0
src/css/login.less

@@ -264,4 +264,32 @@ 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: 41px;
+    vertical-align: middle;
+  }
+  img{
+    margin-left: 8px;
+    cursor: pointer;
+    vertical-align: middle;
+  }
+  a{
+    color: #fff;
+    font-size: 12px;
+    cursor: pointer;
+    text-decoration: underline;
+  }
 }

+ 1 - 34
src/html/login.html

@@ -10,40 +10,7 @@
 <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', //获取质控评分菜单

+ 43 - 2
src/js/login.js

@@ -12,6 +12,7 @@ const otherLogo = getUrlArgObject("adLg");
 let type
 $(function () {
   getHospitalMark()
+  getSecurityCode();
   if (hideLogo || otherLogo) {
     $(".copy-right").text("");
   }
@@ -25,13 +26,46 @@ $(function () {
   
 });
 
+//获取验证码
+function getSecurityCode() {
+    $.ajax({
+        url:api.getCaptcha,
+        method:'get',
+        contentType:'image/png',
+        dataType:'blob',
+        success:function(res){
+            const data = res.data;console.log(221)
+            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(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);
+        }
+    })
+}
+
 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) {
+      if (parseInt(data.data) == 1) {   //湘雅三院登录样式
         str = '<div class="bg2">'
         str += '<div class="login-info">'
         str += '<div class="info-perPub">'
@@ -46,7 +80,7 @@ function getHospitalMark() {
         str += '</div></div>'
         str += '<p class="waring"></p><div class="sureLogin">登录</div></div>'
         $('.login').html(str)
-      } else {
+      } 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">'
@@ -58,6 +92,13 @@ function getHospitalMark() {
         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 href="changeCode">换一张</a>'
         str += '</div></div>'
         str += '<p class="waring"></p><div class="sureLogin">登录</div></div><div class="copy-right">由杭州朗通信息技术有限公司提供技术支持</div></div>',
         $('.login').html(str)

+ 1 - 2
src/js/utils.js

@@ -4,7 +4,7 @@ const axios = require('axios');
 var Utils = require('./rePromise');
 const {ywCheckApi} = require('./api.js')
 require('./scrollBar.js');
-const baseUrl = 'http://192.168.2.241:1488';
+const baseUrl = 'http://192.168.2.236:5858';
 //页面映射
 const pageMap = {
   'YH-KZT': 'console.html',
@@ -158,7 +158,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',