登陆修改

front-vue/src/api/login.js

@@ -5,11 +5,11 @@ const client_secret = '123456'
 const scope = 'server'
 
 // 登录方法
-export function login(username, password, code, uuid,sscDomain) {
+export function login(username, password, code, uuid, type, shortMessageCode) {
   return request({
     url: '/auth/zcLogin',
     method: 'post',
-    data: { username, password, code, uuid, sscDomain }
+    data: { username, password, code, uuid, type, shortMessageCode}
   })
 }
 
@@ -51,3 +51,26 @@ export function listSscDomain(sscDomain) {
     method: 'get'
   })
 }
+
+// 发送登陆短信验证码
+export function sendShortMessage(phone, imgCode, uuid) {
+  return request({
+    url: '/sc-service/shortMessage/sendShortMessage',
+    method: 'post',
+    data : {
+      phone : phone,
+      verificationCode : '000000_verification_code',
+      imgCode : imgCode,
+      uuid : uuid
+    }
+  })
+}
+
+// 选择企业登陆
+export function chooseCompanyLogin(companyId) {
+  return request({
+    url: '/auth/chooseCompanyLogin',
+    method: 'post',
+    data: {companyId : companyId}
+  })
+}

front-vue/src/store/modules/user.js

@@ -40,26 +40,27 @@ const user = {
       const password = userInfo.password
       const code = userInfo.code
       const uuid = userInfo.uuid
-      const sscDomain = userInfo.sscDomain
+      const type = userInfo.type
+      const shortMessageCode = userInfo.shortMessageCode
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid,sscDomain).then(res => {
+        login(username, password, code, uuid, type, shortMessageCode).then(res => {
           let data = res.data
+          
+          setToken(data.tokenInfo.access_token);
+          commit('SET_TOKEN', data.tokenInfo.access_token)
+          setExpiresIn(data.tokenInfo.expires_in)
+          commit('SET_EXPIRES_IN', data.tokenInfo.expires_in)
           // 未认证
           if (data.code == "0") {
-
+            console.log("未绑定企业")
           // 认证单个企业
           } else if (data.code == "1") {
-            setToken(data.tokenInfo.access_token);
-            commit('SET_TOKEN', data.tokenInfo.access_token)
-            setExpiresIn(data.tokenInfo.expires_in)
-            commit('SET_EXPIRES_IN', data.tokenInfo.expires_in)
+
           // 多加企业
           } else {
-
+            console.log("绑定了多家企业!")
           }
-
-
-          resolve()
+          resolve(data)
         }).catch(error => {
           reject(error)
         })

front-vue/src/views/login.vue

@@ -4,13 +4,13 @@
             <el-header style="display:block;position:relative;margin:auto;">
                 <!-- logo -->
                 <img :src="this.logo ? this.logo  : this.baseLogo" alt="" class="rightulliimg" />
-            </el-header> 
+            </el-header>
              <el-main>
                 <!-- 中间部分 -->
                 <div class="login">
                     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-                        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: -61px;margin-top:-45px">
-                            <el-tab-pane label="账号密码登录" name="first">
+                        <el-tabs v-model="activeName" style="margin-left: -61px;margin-top:-45px" @tab-click="changeLoginType">
+                            <el-tab-pane label="账号密码登录" name="login_password">
                                 <el-form-item prop="username">
                                     <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                                         <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
@@ -41,18 +41,25 @@
                                     <img :src="wxSrc" @mouseover="changeImg" @mouseleave="returnImg" @click="getWeChatImg" style="width:30px;margin-left: 77px;">
                                 </el-form-item>
                             </el-tab-pane>
-                            <el-tab-pane label="手机验证码" name="second">
-                                
-                                <el-form-item prop="phone">
-                                    <el-input v-model="loginForm.phone" type="tel" maxlength="11" auto-complete="off" placeholder="手机号" style="  width: 260px; ">
+                            <el-tab-pane label="手机验证码" name="login_shortMessage">
+                                <el-form-item prop="username">
+                                    <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="手机号">
                                         <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                                     </el-input>
                                 </el-form-item>
+                                <el-form-item prop="code">
+                                    <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 53%;" @keyup.enter.native="handleLogin">
+                                        <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+                                    </el-input>
+                                    <div class="login-code">
+                                        <img :src="codeUrl" @click="getCode" class="login-code-img" />
+                                    </div>
+                                </el-form-item>
                                 <el-form-item prop="cade">
-                                    <el-input v-model="loginForm.cade" type="text"  maxlength="" auto-complete="off" placeholder="短信验证码" id="" onkeydown="enterHandler(event)" style="  width: 120px; ">
+                                    <el-input v-model="loginForm.shortMessageCode" type="text"  maxlength="" auto-complete="off" placeholder="短信验证码" id="" onkeydown="enterHandler(event)" style="  width: 120px; ">
                                         <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                                     </el-input>
-                                 <el-button @click="getCode()" :class="{'disabled-style':getCodeBtnDisable}" :disabled="getCodeBtnDisable">{{codeBtnWord}}</el-button>
+                                 <el-button @click="sendMessage" :disabled="sendShortMessageBtn">{{codeBtnWord}}</el-button>
                                 </el-form-item>
 
                                 <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin" style="width: 190px;border-radius: 50px;margin-left:10%;margin-top:10%">
@@ -66,12 +73,28 @@
                     <!--  底部  -->
                 </div>
             </el-main>
+            <el-dialog
+              title="选择企业"
+              :visible.sync="dialogVisible"
+              width="30%">
+              <el-select v-model="chooseCompanyId" placeholder="请选择">
+                <el-option
+                  v-for="item in companyList"
+                  :key="item.scyId"
+                  :label="item.scyName"
+                  :value="item.scyId">
+                </el-option>
+              </el-select>
+              <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="chooseLogin()">确 定</el-button>
+              </span>
+            </el-dialog>
         </el-container>
         <el-footer></el-footer>
     </div>
 </template>
 <script>
-import { getCodeImg, listSscDomain } from "@/api/login";
+import { getCodeImg, sendShortMessage, chooseCompanyLogin} from "@/api/login";
 import { wxImg } from "@/api/system/weChat";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
@@ -79,9 +102,8 @@ export default {
     name: "Login",
     data() {
         return {
-
             //默认背景图
-            activeName: "first",
+            activeName: "login_password",
             baseImg: require('../assets/images/logi_bg1.jpg'),
             BackgroundImg : require('../assets/images/logi_bg1.jpg'),
             logo: '',
@@ -89,14 +111,11 @@ export default {
             codeUrl: "",
             cookiePassword: "",
             loginForm: {
-                phoneNumber: '',
-            verificationCode: '',
-              username: "",
+                shortMessageCode: '',
+                username: "",
                 password: "",
-                phone: "",
                 rememberMe: false,
                 code: "",
-                cade: "",
                 uuid: "",
             },
             codeBtnWord: '获取验证码', // 获取验证码按钮文字
@@ -109,31 +128,21 @@ export default {
                         message: "用户名不能为空",
                     },
                 ],
-                //   phone: [
-                //     {
-                //         required: true,
-                //         trigger: "blur",
-                //         message: "手机号不能为空",
-                //     },
-                // ],
                 code: [
                     {
                         required: true,
                         trigger: "change",
                         message: "验证码不能为空",
                     },
-                ],
-                // cade: [
-                //     {
-                //         required: true,
-                //         trigger: "change",
-                //         message: "验证码不能为空",
-                //     },
-                // ],
+                ]
             },
             loading: false,
             redirect: undefined,
             wxSrc: require("../assets/images/wx1.png"),
+            sendShortMessageBtn : false,
+            dialogVisible : false,
+            companyList : [],
+            chooseCompanyId : ''
         };
     },
     watch: {
@@ -147,163 +156,170 @@ export default {
     created() {
         this.getCode();
         this.getCookie();
-        this.getlistDomain();
+        // this.getlistDomain();
     },
-//     computed: {
-//     // 用于校验手机号码格式是否正确
-//     phoneNumberStyle(){
-//         let reg = /^1[3456789]\d{9}$/
-//         if(!reg.test(this.loginForm.phoneNumber)){
-//             return false
-//         }
-//         return true
-//     },
-//     // 控制获取验证码按钮是否可点击
-//     getCodeBtnDisable:{
-//         get(){
-//             if(this.waitTime == 2){
-//                 if(this.loginForm.phoneNumber){
-//                     return false
-//                 }
-//                 return true
-//             }
-//             return true
-//         },
-//         // 注意：因为计算属性本身没有set方法，不支持在方法中进行修改，而下面我要进行这个操作，所以需要手动添加
-//         set(){} 
-//     }
-// },
     methods: {
-        getCode(){
-    if(this.phoneNumberStyle){
-        let params = {}
-        params.phone = this.loginForm.phoneNumber
-        // 调用获取短信验证码接口
-        axios.post('/sendMessage',params).then(res=>{
-            res = res.data
-            if(res.status==200) {
-                this.$message({
-                    message: '验证码已发送，请稍候...',
-                    type: 'success',
-                    center:true
-                })
-            }
-        })
-        // 因为下面用到了定时器，需要保存this指向
-        let that = this
-        that.waitTime--
-        that.getCodeBtnDisable = true
-        this.codeBtnWord = `${this.waitTime}s 后重新获取`
-        let timer = setInterval(function(){
-            if(that.waitTime>1){
-                that.waitTime--
-                that.codeBtnWord = `${that.waitTime}s 后重新获取`
-            }else{
-                clearInterval(timer)
-                that.codeBtnWord = '获取验证码'
-                that.getCodeBtnDisable = false
-                that.waitTime = 61
-            }
-        },1000)
-    }
-},
-        changeImg(){
-            this.wxSrc = require("../assets/images/wx.png")
-        },
-        returnImg(){
-            this.wxSrc = require("../assets/images/wx1.png")
-        },
-        getCode() {
-            getCodeImg().then((res) => {
-                this.codeUrl = "data:image/gif;base64," + res.img;
-                this.loginForm.uuid = res.uuid;
-            });
-        },
-        getCookie() {
-            const username = Cookies.get("username");
-            const password = Cookies.get("password");
-            const rememberMe = Cookies.get("rememberMe");
-            this.loginForm = {
-                username:
-                    username === undefined ? this.loginForm.username : username,
-                password:
-                    password === undefined
-                        ? this.loginForm.password
-                        : decrypt(password),
-                rememberMe:
-                    rememberMe === undefined ? false : Boolean(rememberMe),
-            };
-        },
-        // 查询域名
-        getlistDomain() {
-            var sscDomain = document.location.hostname;
-            this.loginForm.sscDomain = document.location.hostname;
-            listSscDomain(sscDomain).then(response => {
-            if(response && response.data.lenth > 0){
-            const sscConfig = response.data[0].sscConfig;
-            const companyId = response.data[0].sscCompanyId;
-            console.log(companyId)
-            const imgForm = JSON.parse(sscConfig);
-            if(imgForm){
-            this.BackgroundImg = imgForm.BackgroundImg;
-            this.logo = imgForm.logo;
-            }
-            console.log(this.logo)
-            }
-      });
-        },
+      changeImg(){
+          this.wxSrc = require("../assets/images/wx.png")
+      },
+      returnImg(){
+          this.wxSrc = require("../assets/images/wx1.png")
+      },
+      getCode() {
+          getCodeImg().then((res) => {
+              this.codeUrl = "data:image/gif;base64," + res.img;
+              this.loginForm.uuid = res.uuid;
+          });
+      },
+      getCookie() {
+          const username = Cookies.get("username");
+          const password = Cookies.get("password");
+          const rememberMe = Cookies.get("rememberMe");
+          this.loginForm = {
+              username:
+                  username === undefined ? this.loginForm.username : username,
+              password:
+                  password === undefined
+                      ? this.loginForm.password
+                      : decrypt(password),
+              rememberMe:
+                  rememberMe === undefined ? false : Boolean(rememberMe),
+          };
+      },
 
-        handleLogin() {
-            this.$refs.loginForm.validate((valid) => {
-                if (valid) {
-                    this.loading = true;
-                    if (this.loginForm.rememberMe) {
-                        Cookies.set("username", this.loginForm.username, {
-                            expires: 30,
-                        });
-                        Cookies.set(
-                            "password",
-                            encrypt(this.loginForm.password),
-                            { expires: 30 }
-                        );
-                        Cookies.set("rememberMe", this.loginForm.rememberMe, {
-                            expires: 30,
-                        });
-                    } else {
-                        Cookies.remove("username");
-                        Cookies.remove("password");
-                        Cookies.remove("rememberMe");
+      handleLogin() {
+          this.$refs.loginForm.validate((valid) => {
+              if (valid) {
+                  this.loading = true;
+                  // 密码登陆
+                  if (this.activeName == "login_password") {
+                    this.loginForm.type = "0";
+                    // 密码不能为空
+                    if (this.loginForm.password == null || this.loginForm.password == "") {
+                      this.msgError("请输入密码!");
+                      this.loading = false;
+                      return;
                     }
-                    this.$store
-                        .dispatch("Login", this.loginForm)
-                        .then(() => {
-                            if(this.redirect == '/index'){
-                                this.$router.push({ path: "/homePage"+this.redirect || "/" });
-                            }else{
-                                this.$router.push({ path: this.redirect || "/" });
+                  // 短信验证码登陆
+                  } else{
+                    this.loginForm.type = "1";
+                    // 密码不能为空
+                    if (this.loginForm.shortMessageCode == null || this.loginForm.shortMessageCode == "") {
+                      this.msgError("请输入短信验证码!");
+                      this.loading = false;
+                      return;
+                    }
+                  }
+                  if (this.loginForm.rememberMe) {
+                      Cookies.set("username", this.loginForm.username, {
+                          expires: 30,
+                      });
+                      Cookies.set(
+                          "password",
+                          encrypt(this.loginForm.password),
+                          { expires: 30 }
+                      );
+                      Cookies.set("rememberMe", this.loginForm.rememberMe, {
+                          expires: 30,
+                      });
+                  } else {
+                      Cookies.remove("username");
+                      Cookies.remove("password");
+                      Cookies.remove("rememberMe");
+                  }
+
+                  this.$store
+                      .dispatch("Login", this.loginForm)
+                      .then((data) => {
+                        console.log(data)
+                          if (data.code == "0") {
+                            alert("未认证!")
+                          // 认证单个企业
+                          } else if (data.code == "1") {
+                            // 认证通过
+                            if (data.loginUser.sysUser.companyStatus == "00") {
+                              /* if(this.redirect == '/index'){
+                                  this.$router.push({ path: "/homePage"+this.redirect || "/" });
+                              }else{
+                                  this.$router.push({ path: this.redirect || "/" });
+                              } */
+                              this.$router.push({ path: this.redirect || "/" });
+                            // 认证未通过
+                            } else {
+                              alert("未认证通过!")
                             }
-                            
-                            
-                        })
-                        .catch(() => {
-                            this.loading = false;
-                            this.getCode();
-                        });
+                          // 多加企业
+                          } else {
+                            this.companyList = data.companyList;
+                            this.chooseCompanyId = this.companyList[0].scyId;
+                            this.dialogVisible = true;
+                          }
+                          this.loading = false;
+                      })
+                      .catch(() => {
+                          this.loading = false;
+                          this.getCode();
+                      });
+              }
+          });
+      },
+      getUrlKey(name) {
+          return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
+      },
+      getWeChatImg(){
+          const origin = document.location.origin.toString();
+          let params = {}
+          params.state = origin
+          wxImg(params).then((res) => {
+              // console.log(res)
+              location.href = res
+          })
+      },
+      changeLoginType(e){
+        this.getCode();
+      },
+      sendMessage(){
+            this.$refs.loginForm.validate((valid) => {
+                if (valid) {
+                  // 调用获取短信验证码接口
+                  sendShortMessage(this.loginForm.username, this.loginForm.code, this.loginForm.uuid).then(response => {
+                    this.sendShortMessageBtn = true;
+                    this.msgSuccess("发送成功!");
+
+                    // 因为下面用到了定时器，需要保存this指向
+                    let that = this
+                    that.waitTime = 60;
+                    this.codeBtnWord = `${this.waitTime}s 后重新获取`
+                    let timer = setInterval(function(){
+                        if(that.waitTime>1){
+                            that.waitTime--
+                            that.codeBtnWord = `${that.waitTime}s 后重新获取`
+                        }else{
+                            clearInterval(timer)
+                            that.codeBtnWord = '获取验证码'
+                            that.waitTime = 60
+                            that.getCode();
+                            that.sendShortMessageBtn = false;
+                        }
+                    },1000)
+
+                  }).catch((response)=>{
+                    this.getCode();
+                  });
+
                 }
-            });
-        },
-        getUrlKey(name) {
-            return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
-        },
-        getWeChatImg(){
-            const origin = document.location.origin.toString();
-            let params = {}
-            params.state = origin
-            wxImg(params).then((res) => {
-                // console.log(res)
-                location.href = res
             })
-        },
+      },
+      chooseLogin(){
+        chooseCompanyLogin(this.chooseCompanyId).then(response => {
+          if (response.code == "200") {
+              this.$router.push({ path: this.redirect || "/" });
+              this.dialogVisible = false;
+          }
+        }).catch((response)=>{
+
+        });
+      }
     },
 };
 </script>
@@ -361,7 +377,7 @@ export default {
 }
 // 大背景图
 .backdrop {
-    
+
     background-repeat: no-repeat;
     background-size: 1536px 752px;
     background-size: cover;
@@ -375,7 +391,7 @@ export default {
 }
 .rightulliimg{
     width: 860px;
-   
+
 }
 .divider_left{
     margin-left: -40px;