wjx há 1 ano atrás
pai
commit
055eaa0b52
2 ficheiros alterados com 88 adições e 41 exclusões
  1. 7 0
      src/api/login.js
  2. 81 41
      src/views/login.vue

+ 7 - 0
src/api/login.js

@@ -45,6 +45,13 @@ export function getCode(phone) {
   });
   });
 }
 }
 
 
+// 手机短信验证码获取
+export function getNoteCode(phone) {
+  return request({
+    url: `/erp/user/smsCodeLoginState/${phone}`
+  })
+}
+
 /**获取钉钉扫码前的后台KEY*/
 /**获取钉钉扫码前的后台KEY*/
 export function getDingKey() {
 export function getDingKey() {
   return request({url: '/erp/user/dLoginState'})
   return request({url: '/erp/user/dLoginState'})

+ 81 - 41
src/views/login.vue

@@ -8,9 +8,9 @@
       </div>
       </div>
       <div v-if="signInType === 'ding'">
       <div v-if="signInType === 'ding'">
         <h3 class="title">趣程后台管理系统</h3>
         <h3 class="title">趣程后台管理系统</h3>
-        <div id='login_container'/>
+        <div id='login_container' />
       </div>
       </div>
-      
+
       <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" v-if="signInType === 'pwd'">
       <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" v-if="signInType === 'pwd'">
         <h3 class="title">趣程后台管理系统</h3>
         <h3 class="title">趣程后台管理系统</h3>
         <el-form-item prop="phone">
         <el-form-item prop="phone">
@@ -19,34 +19,30 @@
           </el-input>
           </el-input>
         </el-form-item>
         </el-form-item>
         <el-form-item prop="code">
         <el-form-item prop="code">
-          <el-input
-            v-model="loginForm.code"
-            auto-complete="on"
-            placeholder="验证码"
-            :maxlength="4"
-            style="width: 63%"
-            @keyup.enter.native="handleLogin"
-          >
+          <el-input v-model="loginForm.code" auto-complete="on" placeholder="验证码" :maxlength="4" style="width: 63%"
+            @keyup.enter.native="handleLogin">
             <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
             <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
           </el-input>
           </el-input>
           <div class="login-code">
           <div class="login-code">
-            <el-button style="width: 115px" :disabled="!loginForm.phone || getCodeBtText !== '获取验证码'" @click="getCodeHandle(loginForm.phone)">{{getCodeBtText}}</el-button>
+            <el-button style="width: 115px" :disabled="!loginForm.phone || getCodeBtText !== '获取验证码'"
+              @click="getCodeHandle(loginForm.phone)">{{ getCodeBtText }}</el-button>
           </div>
           </div>
         </el-form-item>
         </el-form-item>
         <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住手机号</el-checkbox>
         <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住手机号</el-checkbox>
+        <div style="display: flex;justify-content: center; margin-bottom: 18px;">
+          <el-radio-group v-model="msgType">
+            <el-radio label="ding">钉钉验证码</el-radio>
+            <el-radio label="phone">手机验证码</el-radio>
+          </el-radio-group>
+        </div>
         <el-form-item style="width:100%;">
         <el-form-item style="width:100%;">
-          <el-button
-            :loading="loading"
-            size="medium"
-            type="primary"
-            style="width:100%;"
-            @click.native.prevent="handleLogin"
-          >
+          <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
+            @click.native.prevent="handleLogin">
             <span v-if="!loading">登 录</span>
             <span v-if="!loading">登 录</span>
             <span v-else>登 录 中...</span>
             <span v-else>登 录 中...</span>
           </el-button>
           </el-button>
         </el-form-item>
         </el-form-item>
-        
+
       </el-form>
       </el-form>
     </div>
     </div>
     <div v-else-if="companyList.length > 1" style="margin-bottom: 160px">
     <div v-else-if="companyList.length > 1" style="margin-bottom: 160px">
@@ -54,10 +50,12 @@
       <div class="login-form company-account">
       <div class="login-form company-account">
         <h3>请选择公司账户登录</h3>
         <h3>请选择公司账户登录</h3>
         <div class="choose-tableBlock">
         <div class="choose-tableBlock">
-          <div class="ac-tableLine" v-for="item in companyList" :key="item.companyId" @click="setCompanyHandle(item.companyId)">
-            <div class="actname">{{item.companyInfo.companyName}}</div>
+          <div class="ac-tableLine" v-for="item in companyList" :key="item.companyId"
+            @click="setCompanyHandle(item.companyId)">
+            <div class="actname">{{ item.companyInfo.companyName }}</div>
             <div class="right">
             <div class="right">
-              <span>{{item.powerLevel === 999 ? '超级管理员' : item.powerLevel === 100 ? '公司超管' : item.powerLevel === 99 ? '管理员' : '普通用户'}}</span>
+              <span>{{ item.powerLevel === 999 ? '超级管理员' : item.powerLevel === 100 ? '公司超管' : item.powerLevel === 99 ?
+                '管理员' : '普通用户' }}</span>
               <i class="el-icon-right"></i>
               <i class="el-icon-right"></i>
             </div>
             </div>
           </div>
           </div>
@@ -73,7 +71,7 @@
 </template>
 </template>
 
 
 <script>
 <script>
-import { getCode, getDingKey } from "@/api/login";
+import { getNoteCode, getCode, getDingKey } from "@/api/login";
 import Cookies from "js-cookie";
 import Cookies from "js-cookie";
 import { mapState } from 'vuex'
 import { mapState } from 'vuex'
 export default {
 export default {
@@ -100,6 +98,7 @@ export default {
       callback()
       callback()
     };
     };
     return {
     return {
+      msgType: 'ding',
       signInType: 'pwd',  // 登录类型
       signInType: 'pwd',  // 登录类型
       APPID: process.env.VUE_APP_DDAPPID, // dingdsfuoevmawlyyrjx
       APPID: process.env.VUE_APP_DDAPPID, // dingdsfuoevmawlyyrjx
       REDIRECT_URI: encodeURIComponent(process.env.VUE_APP_BASE_URL), //encodeURIComponent(location.href),
       REDIRECT_URI: encodeURIComponent(process.env.VUE_APP_BASE_URL), //encodeURIComponent(location.href),
@@ -215,7 +214,7 @@ export default {
     dingdingLogin(code, state) {
     dingdingLogin(code, state) {
       if (!this.token) {
       if (!this.token) {
         this.loading = true;
         this.loading = true;
-        this.$store.dispatch("DingDingLogin", {code, state, stateKey: sessionStorage.getItem('DDK')}).then(res => {
+        this.$store.dispatch("DingDingLogin", { code, state, stateKey: sessionStorage.getItem('DDK') }).then(res => {
           if (res) {
           if (res) {
             this.setCompanyHandle(res)
             this.setCompanyHandle(res)
           } else {
           } else {
@@ -247,20 +246,37 @@ export default {
       //   return
       //   return
       // }
       // }
       this.getCodeBtText = 30
       this.getCodeBtText = 30
-      getCode(phone).then(res => {
-        if(res.data) {
-          this.$message.success('发送成功,请到钉钉查看')
-          let time = 30
-          this.timer = setInterval(() => {
-            time--
-            this.getCodeBtText = time
-              if(time <= 0) {
+      if (this.msgType === 'ding') {
+        getCode(phone).then(res => {
+          if (res.data) {
+            this.$message.success('发送成功,请到钉钉查看')
+            let time = 30
+            this.timer = setInterval(() => {
+              time--
+              this.getCodeBtText = time
+              if (time <= 0) {
                 this.getCodeBtText = '获取验证码'
                 this.getCodeBtText = '获取验证码'
                 clearInterval(this.timer)
                 clearInterval(this.timer)
               }
               }
-          }, 1000)
-        }
-      }).catch(() => this.getCodeBtText = '获取验证码');
+            }, 1000)
+          }
+        }).catch(() => this.getCodeBtText = '获取验证码');
+      } else {
+        getNoteCode(phone).then(res => {
+          if (res.data) {
+            this.$message.success('发送成功,请到手机查看')
+            let time = 30
+            this.timer = setInterval(() => {
+              time--
+              this.getCodeBtText = time
+              if (time <= 0) {
+                this.getCodeBtText = '获取验证码'
+                clearInterval(this.timer)
+              }
+            }, 1000)
+          }
+        }).catch(() => this.getCodeBtText = '获取验证码');
+      }
     },
     },
     getCookie() {
     getCookie() {
       const rememberMe = Cookies.get('rememberMe')
       const rememberMe = Cookies.get('rememberMe')
@@ -321,6 +337,7 @@ export default {
   height: 100%;
   height: 100%;
   background-image: url("../assets/image/login-background.jpg");
   background-image: url("../assets/image/login-background.jpg");
   background-size: cover;
   background-size: cover;
+
   &>div {
   &>div {
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
@@ -328,6 +345,7 @@ export default {
     align-items: center;
     align-items: center;
   }
   }
 }
 }
+
 .title {
 .title {
   margin: 0px auto 30px auto;
   margin: 0px auto 30px auto;
   text-align: center;
   text-align: center;
@@ -340,37 +358,45 @@ export default {
   width: 400px;
   width: 400px;
   padding: 25px 25px 5px 25px;
   padding: 25px 25px 5px 25px;
   margin-bottom: 80px;
   margin-bottom: 80px;
+
   .el-input {
   .el-input {
     height: 38px;
     height: 38px;
+
     input {
     input {
-      background: rgba(255,255,255, .2);
+      background: rgba(255, 255, 255, .2);
       border-color: #5a5a5a;
       border-color: #5a5a5a;
       height: 38px;
       height: 38px;
     }
     }
+
     .el-input__prefix {
     .el-input__prefix {
       color: #5a5a5a;
       color: #5a5a5a;
     }
     }
   }
   }
+
   .input-icon {
   .input-icon {
     height: 39px;
     height: 39px;
     width: 14px;
     width: 14px;
     margin-left: 2px;
     margin-left: 2px;
   }
   }
 }
 }
+
 .login-tip {
 .login-tip {
   font-size: 13px;
   font-size: 13px;
   text-align: center;
   text-align: center;
   color: #bfbfbf;
   color: #bfbfbf;
 }
 }
+
 .login-code {
 .login-code {
   width: 33%;
   width: 33%;
   height: 38px;
   height: 38px;
   float: right;
   float: right;
+
   img {
   img {
     cursor: pointer;
     cursor: pointer;
     vertical-align: middle;
     vertical-align: middle;
   }
   }
 }
 }
+
 .el-login-footer {
 .el-login-footer {
   height: 40px;
   height: 40px;
   line-height: 40px;
   line-height: 40px;
@@ -383,13 +409,16 @@ export default {
   font-size: 12px;
   font-size: 12px;
   letter-spacing: 1px;
   letter-spacing: 1px;
 }
 }
+
 .login-code-img {
 .login-code-img {
   height: 38px;
   height: 38px;
 }
 }
+
 .tabs {
 .tabs {
   display: flex;
   display: flex;
   margin: 0 20px 30px;
   margin: 0 20px 30px;
   width: 300px;
   width: 300px;
+
   &>div {
   &>div {
     width: 50%;
     width: 50%;
     text-align: center;
     text-align: center;
@@ -403,24 +432,27 @@ export default {
     }
     }
   }
   }
 }
 }
+
 .account-title {
 .account-title {
   color: #FFFFFF;
   color: #FFFFFF;
   margin-bottom: 40px;
   margin-bottom: 40px;
 }
 }
+
 .company-account {
 .company-account {
   box-shadow: 0 4px 20px 0 rgba(0, 60, 179, 0.12);
   box-shadow: 0 4px 20px 0 rgba(0, 60, 179, 0.12);
   margin-bottom: 10px;
   margin-bottom: 10px;
   width: 500px;
   width: 500px;
   padding: 48px 36px;
   padding: 48px 36px;
 
 
-  &>h3{
+  &>h3 {
     margin: 0;
     margin: 0;
     font-size: 20px;
     font-size: 20px;
   }
   }
+
   &>.choose-tableBlock {
   &>.choose-tableBlock {
     margin-top: 20px;
     margin-top: 20px;
     border-top: 1px solid rgba(181, 181, 181, .4);
     border-top: 1px solid rgba(181, 181, 181, .4);
-    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans CN",sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
     max-height: 250px;
     max-height: 250px;
     overflow-y: auto;
     overflow-y: auto;
     padding: 0 10px;
     padding: 0 10px;
@@ -436,6 +468,7 @@ export default {
       border: 2px solid transparent;
       border: 2px solid transparent;
       position: relative;
       position: relative;
       border-radius: 4px;
       border-radius: 4px;
+
       .actname {
       .actname {
         width: 250px;
         width: 250px;
         color: #0b1531;
         color: #0b1531;
@@ -444,31 +477,38 @@ export default {
         text-overflow: ellipsis;
         text-overflow: ellipsis;
         overflow: hidden;
         overflow: hidden;
       }
       }
+
       .right {
       .right {
         display: flex;
         display: flex;
         justify-content: flex-end;
         justify-content: flex-end;
         align-items: center;
         align-items: center;
         font-size: 13px;
         font-size: 13px;
-        &>span{
+
+        &>span {
           margin-right: 10px;
           margin-right: 10px;
         }
         }
       }
       }
-      i{
+
+      i {
         color: #1890ff;
         color: #1890ff;
         font-size: 20px;
         font-size: 20px;
       }
       }
+
       &:hover {
       &:hover {
         border: 2px solid #296aef;
         border: 2px solid #296aef;
         z-index: 5;
         z-index: 5;
         transition: all .2s;
         transition: all .2s;
-        box-shadow: 0 0 12px rgba(0, 60, 179 , 0.12);
+        box-shadow: 0 0 12px rgba(0, 60, 179, 0.12);
+
         .right {
         .right {
           color: #296aef;
           color: #296aef;
         }
         }
+
         i {
         i {
           color: #296aef;
           color: #296aef;
         }
         }
       }
       }
+
       &::after {
       &::after {
         content: '';
         content: '';
         position: absolute;
         position: absolute;