cloud-web-corejs 1.0.54-dev.197 → 1.0.54-dev.199

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.197",
+  "version": "1.0.54-dev.199",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

package/src/views/user/login/default.vue

@@ -37,7 +37,7 @@
             <el-button :loading="loading" type="primary" @click.prevent.stop="handleLogin" class="btn">登录</el-button>
           </el-form>
         </el-tab-pane>
-        <el-tab-pane label="手机验证码登录" name="second">
+        <el-tab-pane label="手机登录" name="second" v-if="settingConfig.mobileLoginEnabled">
           <el-form ref="loginForm" :model="loginForm2" :rules="loginRules" class="box-form login" autocomplete="on"
                    label-position="left">
             <el-form-item prop="username" class="txt" style="width:66%">
@@ -56,9 +56,11 @@
             <el-button :loading="loading" type="primary" @click.prevent.stop="handleLogin" class="btn">登录</el-button>
           </el-form>
         </el-tab-pane>
-        <el-tab-pane label="二维码登录" name="third">
-          <div class="qr" style="height: 305px">
-            <img class="qr__img" :src="qrBase64" style="left: 20%;position: absolute;" v-if="activeName==='third'"/>
+        <el-tab-pane label="扫码登录" name="third" v-if="settingConfig.qrLoginEnabled">
+          <div class="login-qr">
+            <img class="qr__img" :src="qrBase64" v-if="activeName==='third'"/>
+            <span class="qr__txt">扫一扫，登录系统</span>
+            <div v-if="qrExpired" @click="initQR" class="qr__lose"><span><i class="el-icon-refresh"></i>二维码失效</span></div>
           </div>
         </el-tab-pane>
       </el-tabs>
@@ -74,7 +76,6 @@
 
 <script>
 import mixin from "./indexMixin";
-import QRcode from 'qrcode'
 
 export default {
   name: 'Login',
@@ -138,4 +139,22 @@ export default {
 ::v-deep .login-main .el-tabs__header .el-tabs__nav .el-tabs__item {
   width: 33%;
 }
+.login-qr{height: 305px;text-align: center;position: relative;
+  .qr__img{width: 220px;margin-top:25px;}
+  .qr__txt{color: #666;font-size: 15px;display: block;}
+  .qr__lose{
+    position: absolute;cursor: pointer;
+    width: 192px;
+    height: 192px;
+    background: rgb(255 255 255 / 76%);
+    top: 40px;
+    left: 136px;
+    color: #000;
+    line-height: 64px;
+    font-weight: 600;
+    font-size: 26px;
+    span{line-height: 1;margin-top:30px;}
+    i{display: block;font-size:42px;margin-top: 46px;}
+  }
+}
 </style>

package/src/views/user/login/indexMixin.js

@@ -20,6 +20,7 @@ export default {
       isCounting: false,
       countdown: 0,
       buttonText: '获取验证码',
+      smsTimer: null,
       isRememberPassword: false,
       loginForm: {
         username: '',
@@ -61,7 +62,9 @@ export default {
       qrTimer2: null,
       qrContent: null,
       qrCodeFlag: 0,
-      qrBase64: ""
+      qrBase64: "",
+      settingConfig: settingConfig,
+      qrExpired: false
     };
   },
   watch: {
@@ -78,6 +81,7 @@ export default {
   },
   beforeDestroy() {
     this.clearQrLoginTimer();
+    this.clearSmsTimer();
   },
   created() {
     this.init();
@@ -336,6 +340,7 @@ export default {
         this.$baseAlert("请输入手机号");
         return
       }
+
       this.$http({
         url: USER_PREFIX + '/auth/sendSmsCode',
         method: `post`,
@@ -350,11 +355,12 @@ export default {
           this.isCounting = true
           this.countdown = 60
           this.buttonText = '60秒后重新获取'
-          const times = setInterval(() => {
+          this.clearSmsTimer();
+          this.smsTimer = setInterval(() => {
             this.countdown--;
             this.buttonText = this.countdown + '秒后重新获取'
             if (this.countdown == 0) {
-              clearInterval(times);
+              this.clearSmsTimer();
               this.isCounting = false
               this.buttonText = '获取验证码'
             }
@@ -363,6 +369,12 @@ export default {
       });
 
     },
+    clearSmsTimer() {
+      if (this.smsTimer) {
+        clearInterval(this.smsTimer);
+        this.smsTimer = null;
+      }
+    },
     mobileLogin() {
 
     },
@@ -441,12 +453,14 @@ export default {
       });
     },
     initQR() {
-      this.qrCodeFlag = 0;
+      this.clearQrLoginTimer();
+      this.qrExpired = true;
       let option = {width: 300, height: 300};
       this.qrContent = this.guid();
       this.createQR(this.qrContent, option).then(url => {
+        this.qrExpired = false;
         this.qrBase64 = url
-        this.qrCodeFlag = 1;
+        this.createQrLoginTimer();
       })
     },
     // 生成二维码
@@ -461,32 +475,37 @@ export default {
       // this.initQR();
       // return
       if (this.activeName == "third") {
-        this.createQrLoginTimer();
+        this.initQR();
       } else {
         this.clearQrLoginTimer();
       }
     },
     clearQrLoginTimer() {
       if (this.qrTimer1) {
-        clearInterval(this.qrTimer1)
+        clearTimeout(this.qrTimer1)
         this.qrTimer1 = null;
       }
       if (this.qrTimer2) {
-        clearInterval(this.qrTimer2)
+        clearTimeout(this.qrTimer2)
         this.qrTimer2 = null;
       }
     },
     createQrLoginTimer() {
-      this.qrTimer1 = setInterval(() => {
-        this.checkQrLoginStatus();
+      this.checkQrLoginTimerHanlde()
+      this.qrTimer2 = setTimeout(() => {
+        this.qrExpired = true;
+        this.clearQrLoginTimer();
+      }, 10000)
+    },
+    checkQrLoginTimerHanlde() {
+      this.qrTimer1 = setTimeout(() => {
+        this.checkQrLoginStatusHanlde();
       }, 3000)
-      this.qrTimer2 = setInterval(() => {
-        this.initQR()
-      }, 30000)
-      this.initQR();
     },
-    checkQrLoginStatus() {
-      if (this.qrCodeFlag !== 1) return
+    checkQrLoginStatusHanlde() {
+      if (this.qrExpired) {
+        return
+      }
       this.$http({
         url: USER_PREFIX + '/auth/login',
         method: `post`,
@@ -496,7 +515,11 @@ export default {
         success: res => {
           let token = res.objx;
           if (token) {
-            console.log("token", token)
+            this.$message({
+              message: "登录成功",
+              type: 'success'
+            });
+            this.clearQrLoginTimer();
             this.$store.dispatch('user/addToken', {token}).then(res => {
               localStorage.removeItem('currentMenuId');
               this.rememberPassword();
@@ -504,6 +527,8 @@ export default {
               window.removeEventListener('keydown', this.keyDown, false);
               this.handleRedirectUrl();
             });
+          } else {
+            this.checkQrLoginTimerHanlde();
           }
         }
       });

package/src/views/user/login/index2.vue

@@ -1,131 +0,0 @@
-<template>
-  <div class="login-container" :class="backgroundClass" ref="login-container" v-show="showContent">
-    <div class="login-main" style="height: auto;">
-      <el-tabs v-model="activeName">
-        <el-tab-pane label="账号登录" name="first">
-          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="box-form login" autocomplete="on"
-                   label-position="left">
-            <el-form-item prop="username" class="txt">
-              <span class="svg-container"><i class="el-icon-user"/></span>
-              <el-input ref="username" v-model="loginForm.username" placeholder="请输入用户名" name="" type="text"
-                        tabindex="1" autocomplete="on" @keyup.enter.native="handleLogin"/>
-            </el-form-item>
-            <el-tooltip :enterable="false" v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
-              <el-form-item prop="password" class="txt">
-                <span class="svg-container"><i class="el-icon-lock"/></span>
-                <el-input
-                  :key="passwordType"
-                  ref="password"
-                  v-model="loginForm.password"
-                  :type="passwordType"
-                  placeholder="请输入密码"
-                  name=""
-                  tabindex="2"
-                  autocomplete="on"
-                  auto-complete="new-password"
-                  @keyup.native="checkCapslock"
-                  @blur="capsTooltip = false"
-                  @keyup.enter.native="handleLogin"
-                />
-                <span class="show-pwd" @click="showPwd"><svg-icon
-                  :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/></span>
-              </el-form-item>
-            </el-tooltip>
-            <div class="">
-              <el-checkbox v-model="isRememberPassword">记住密码</el-checkbox>
-            </div>
-            <el-button :loading="loading" type="primary" @click.prevent.stop="handleLogin" class="btn">登录</el-button>
-          </el-form>
-        </el-tab-pane>
-        <el-tab-pane label="手机验证码登录" name="second">
-          <el-form ref="loginForm" :model="loginForm2" :rules="loginRules" class="box-form login" autocomplete="on"
-                   label-position="left">
-            <el-form-item prop="username" class="txt" style="width:66%">
-              <span class="svg-container"><i class="el-icon-mobile-phone"/></span>
-              <el-input ref="mobile" v-model="loginForm2.username" placeholder="请输入手机号" name="" type="text"
-                        tabindex="1" autocomplete="on" @keyup.enter.native="handleLogin"/>
-            </el-form-item>
-            <el-button class="btn-send" type="success" :class="{'gray-btn':isCounting}" @click="sendCode">
-              {{ buttonText }}
-            </el-button>
-            <el-form-item prop="smsCode" class="txt">
-              <span class="svg-container"><i class="el-icon-message"/></span>
-              <el-input ref="smsCode" v-model="loginForm2.smsCode" placeholder="请输入验证码" name="" type="text"
-                        tabindex="1" autocomplete="on" @keyup.enter.native="handleLogin"/>
-            </el-form-item>
-            <el-button :loading="loading" type="primary" @click.prevent.stop="handleLogin" class="btn">登录</el-button>
-          </el-form>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-    <div class="tc copyright">
-      <slot name="footer">
-        © 广州同望科技发展有限公司
-        <span style="margin-left:50px;">4000646100</span>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import mixin from "@base/views/user/login/indexMixin";
-
-export default {
-  name: 'Login',
-  mixins: [mixin]
-}
-</script>
-<style lang="scss" scoped>
-@import '@/resources/css/login.scss';
-
-.login-container.tc {
-  background: url(~@/resources/images/bg-login5.jpg) center center/cover no-repeat;
-}
-
-.login-container.chigo {
-  background: url(~@/resources/images/bg-login6.jpg) center center/cover no-repeat;
-}
-
-.login-container.pcp {
-  background: url(~@/resources/images/bg-login8.jpg) center center/cover no-repeat;
-}
-
-.el-select-dropdown {
-  right: 5px;
-  top: 25px;
-}
-
-::v-deep .login-main .el-tabs__header {
-  margin-bottom: 0;
-
-  .el-tabs__nav {
-    line-height: 65px;
-    margin: 0 25px;
-    width: calc(100% - 50px);
-
-    .el-tabs__item {
-      font-size: 18px;
-      width: 50%;
-      text-align: center;
-      margin-right: 0;
-      padding-right: 0 !important;
-      line-height: 65px;
-      height: 65px;
-    }
-  }
-}
-
-.btn-send {
-  position: absolute;
-  margin-top: -74px;
-  right: 35px;
-  height: 52px;
-  width: 27%;
-
-  &.gray-btn {
-    background: #dedede;
-    border-color: #dedede;
-    color: #8a8686;
-  }
-}
-</style>