微信二维码登陆

front-vue/src/api/system/weChat.js

@@ -1,21 +1,18 @@
 import request from '@/utils/request'
 
 // 获取微信二维码
-export function wxImg(query) {
+export function wxImg() {
   return request({
     url: '/system/api/wx/login',
-    method: 'get',
-    params: query
+    method: 'get'
   })
 }
 
 // 扫码登录
 export function wxLogin(query) {
   return request({
-    url: '/system/api/wx/callback',
+    url: '/system_tu/api/wx/callback',
     method: 'get',
     params: query
   })
 }
-
-

front-vue/src/permission.js

@@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register', '/wxLogin', '/userLogin', '/authorizeLogin', '/auth-redirect', '/bind', '/register']
+const whiteList = ['/login', '/register', '/wxLogin', '/userLogin', '/authorizeLogin', '/auth-redirect', '/bind']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
@@ -16,19 +16,30 @@ router.beforeEach((to, from, next) => {
     if (to.path === '/login') {
       next({ path: '/' })
       NProgress.done()
+    } else if (to.path == '/certification'){
+      next()
+      NProgress.done()
     } else {
       if (store.getters.roles.length === 0) {
         // 判断当前用户是否已拉取完user_info信息
         store.dispatch('GetInfo').then(res => {
           // 拉取user_info
           const roles = res.roles
-          store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => {
-          // 测试 默认静态页面
-          // store.dispatch('permission/generateRoutes', { roles }).then(accessRoutes => {
-            // 根据roles权限生成可访问的路由表
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-          })
+          // 未选择企业或者企业状态不是正常
+          if (res.user.companyId == null || res.user.companyStatus != '00') {
+            this.$store.dispatch('LogOut').then(() => {
+              location.href = '/login';
+            })
+          } else {
+            store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => {
+
+            // 测试 默认静态页面
+            // store.dispatch('permission/generateRoutes', { roles }).then(accessRoutes => {
+              // 根据roles权限生成可访问的路由表
+              router.addRoutes(accessRoutes) // 动态添加可访问路由表
+              next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+            })
+          }
         })
           .catch(err => {
             store.dispatch('FedLogOut').then(() => {

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

@@ -42,10 +42,12 @@ const user = {
       const uuid = userInfo.uuid
       const type = userInfo.type
       const shortMessageCode = userInfo.shortMessageCode
+      const unionId = userInfo.unionId
+
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid, type, shortMessageCode).then(res => {
+        login(username, password, code, uuid, type, shortMessageCode, unionId).then(res => {
           let data = res.data
-          
+
           setToken(data.tokenInfo.access_token);
           commit('SET_TOKEN', data.tokenInfo.access_token)
           setExpiresIn(data.tokenInfo.expires_in)
@@ -71,11 +73,32 @@ const user = {
       return new Promise((resolve, reject) => {
         wxLogin(query).then(res => {
           let data = res.data
-          setToken(data.access_token)
-          commit('SET_TOKEN', data.access_token)
-          setExpiresIn(data.expires_in)
-          commit('SET_EXPIRES_IN', data.expires_in)
-          resolve()
+
+
+          // 未认证
+          if (data.code == "0") {
+            console.log("未绑定企业")
+            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 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 if (data.code == "2") {
+            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 {
+            
+          }
+          resolve(res)
         }).catch(error => {
           reject(error)
         })
@@ -125,7 +148,12 @@ const user = {
             commit('SET_ROLES', res.roles)
             commit('SET_PERMISSIONS', res.permissions)
           } else {
-            commit('SET_ROLES', ['ROLE_DEFAULT'])
+            // 管理员
+            if (user.companyId == "000000") {
+              commit('SET_ROLES', ['ROLE_DEFAULT'])
+            } else {
+              commit('SET_ROLES', [])
+            }
           }
           commit('SET_NAME', user.userName)
           commit('SET_AVATAR', avatar)

front-vue/src/views/login.vue

@@ -233,7 +233,8 @@ export default {
                       .then((data) => {
                         console.log(data)
                           if (data.code == "0") {
-                            alert("未认证!")
+                            console.log("未认证!")
+                            this.$router.push({ path: "/certification" });
                           // 认证单个企业
                           } else if (data.code == "1") {
                             // 认证通过
@@ -246,7 +247,8 @@ export default {
                               this.$router.push({ path: this.redirect || "/" });
                             // 认证未通过
                             } else {
-                              alert("未认证通过!")
+                              console.log("未认证通过!")
+                              this.$router.push({ path: "/certification" });
                             }
                           // 多加企业
                           } else {
@@ -267,10 +269,7 @@ export default {
           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) => {
+          wxImg().then((res) => {
               // console.log(res)
               location.href = res
           })
@@ -313,8 +312,16 @@ export default {
       chooseLogin(){
         chooseCompanyLogin(this.chooseCompanyId).then(response => {
           if (response.code == "200") {
-              this.$router.push({ path: this.redirect || "/" });
-              this.dialogVisible = false;
+            // 认证通过
+            if (response.data.sysUser.companyStatus == "00") {
+              this.$store.dispatch('GetInfo').then(res => {
+                this.$router.push({ path: this.redirect || "/" });
+              })
+            // 认证未通过
+            } else {
+              console.log("未认证通过!")
+              this.$router.push({ path: "/certification" });
+            }
           }
         }).catch((response)=>{
 

front-vue/src/views/register.vue

@@ -1,22 +1,230 @@
 <template>
-    <div style="text-align:center">
-        <el-image 
-            style="width: 400px; height: 400px;margin-top:150px"
-            :src="register" 
-            :preview-src-list="registerList">
-        </el-image>
-        <br/>
-        <span>打开微信扫一扫绑定用户,使用扫码登录更方便快捷</span>
+    <div class="backdrop" :style="{backgroundImage: 'url({'+(this.baseImg)+')'}">
+        <el-container>
+            <el-header style="display:block;position:relative;margin:auto;">
+                <!-- logo -->
+                <img :src="this.baseLogo" alt="" class="rightulliimg" />
+            </el-header>
+             <el-main>
+                <!-- 中间部分 -->
+                <div class="login">
+                  <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+                    <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.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="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%">
+                        <span v-if="!loading">注 册</span>
+                        <span v-else>注 册 中...</span>
+                    </el-button>
+                  </el-form>
+                </div>
+              </el-main>
+        </el-container>
     </div>
 </template>
 <script>
+import { getCodeImg, sendShortMessage, chooseCompanyLogin} from "@/api/login";
 export default {
     name: "register",
     data() {
         return {
-            register: require("../assets/images/register.png"),
-            registerList: [require("../assets/images/register.png")],
+            loginForm: {
+                shortMessageCode: '',
+                username: "",
+                code: "",
+                uuid: "",
+                unionId : ''
+            },
+            codeUrl : '',
+            loading : false,
+            sendShortMessageBtn : false,
+            codeBtnWord : '获取验证码',
+            loginRules: {
+                username: [
+                    {
+                        required: true,
+                        trigger: "blur",
+                        message: "用户名不能为空",
+                    },
+                ],
+                code: [
+                    {
+                        required: true,
+                        trigger: "change",
+                        message: "验证码不能为空",
+                    },
+                ]
+            },
+            baseLogo: require('../assets/images/lgo.png'),
+            baseImg: require('../assets/images/logi_bg1.jpg'),
         };
     },
+    created() {
+      this.loginForm.unionId = this.getUrlKey("unionId");
+      this.getCode();
+    },
+    methods:{
+      getCode() {
+          getCodeImg().then((res) => {
+              this.codeUrl = "data:image/gif;base64," + res.img;
+              this.loginForm.uuid = res.uuid;
+          });
+      },
+      handleLogin() {
+          this.$refs.loginForm.validate((valid) => {
+              if (valid) {
+                  this.loading = true;
+                  this.loginForm.type = "2";
+                  // 密码不能为空
+                  if (this.loginForm.shortMessageCode == null || this.loginForm.shortMessageCode == "") {
+                    this.msgError("请输入短信验证码!");
+                    this.loading = false;
+                    return;
+                  }
+
+                  this.$store
+                      .dispatch("Login", this.loginForm)
+                      .then((data) => {
+                        console.log("跳转认证!")
+                        this.loading = false;
+                        this.$router.push({ path: "/certification" });
+                      })
+                      .catch(() => {
+                          this.loading = false;
+                          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
+      },
+    }
 };
 </script>
+<style rel="stylesheet/scss" lang="scss">
+.login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    background-size: cover;
+}
+// 中间背景图
+.login-form {
+    border-radius: 6px;
+    width: 935px;
+    height: 434px;
+    padding: 73px 138px 103px 597px;
+    background-image: url("../assets/images/login_bg2.png");
+    background-size: 935px 434px;
+    background-repeat: no-repeat;
+    margin-top: 40px;
+    // 输入框大小
+    .el-input {
+        height: 40px;
+        width: 100%;
+        input {
+            height: 40px;
+            width: 100%;
+        }
+    }
+    .input-icon {
+        height: 39px;
+        width: 14px;
+        margin-left: 2px;
+    }
+}
+.login-tip {
+    font-size: 13px;
+    text-align: center;
+}
+// 验证码
+.login-code {
+    width: 33%;
+    height: 38px;
+    float: right;
+        margin-right: 6%;
+
+    img {
+        cursor: pointer;
+        vertical-align: middle;
+    }
+}
+.login-code-img {
+    height: 38px;
+}
+// 大背景图
+.backdrop {
+
+    background-repeat: no-repeat;
+    background-size: 1536px 752px;
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-position: right top;
+    background-attachment: fixed;
+}
+.rightulliimg{
+    width: 860px;
+
+}
+.divider_left{
+    margin-left: -40px;
+}.el-button.disabled-style {
+    background-color: #EEEEEE;
+    color: #CCCCCC;
+}
+</style>

front-vue/src/views/wxLogin.vue

@@ -1,12 +1,70 @@
+<template>
+    <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>
+</template>
 <script>
+  import {chooseCompanyLogin} from "@/api/login";
 export default {
+  data() {
+    return {
+      companyList : [],
+      chooseCompanyId : '',
+      unionId : '',
+      dialogVisible : false
+    }
+  },
   created() {
     const code = this.getUrlKey("code")
-    const state = this.getUrlKey("state")
-    if(code && state){
-      location.href = state + "/userLogin?code="+code
+    if(code){
+      let params = {}
+      params.code = code
+      this.$store.dispatch("WxLogin", params).then((response) => {
+        var data = response.data;
+        var unionId = data.unionId;
+        if (data.code == "0") {
+          alert("未认证!")
+        // 认证单个企业
+        } else if (data.code == "1") {
+          // 认证通过
+          if (data.loginUser.sysUser.companyStatus == "00") {
+            this.$router.push({ path: this.redirect || "/" });
+          // 认证未通过
+          } else {
+            console.log("未认证通过!")
+            this.$router.push({ path: "/certification" });
+          }
+        // 多家企业
+        } else if (data.code == "2") {
+          this.companyList = data.companyList;
+          this.chooseCompanyId = this.companyList[0].scyId;
+          this.dialogVisible = true;
+        // 未绑定用户
+        } else {
+          this.$router.push({ path: "/register?unionId="+ unionId});
+        }
+      }).catch((res) => {
+        console.log(res)
+          // console.log(code)
+          //this.$router.push({ path: "/login" });
+          // this.$router.push({ path: "/register" });
+      });
     }else{
-      location.href = state + "/login"
+      this.$router.push({ path: "/login" });
+          //this.$router.push({ path: "/register" });
     }
   },
   render: function(h) {
@@ -16,6 +74,24 @@ export default {
       getUrlKey(name) {
           return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
       },
+      chooseLogin(){
+        chooseCompanyLogin(this.chooseCompanyId).then(response => {
+          if (response.code == "200") {
+            // 认证通过
+            if (response.data.sysUser.companyStatus == "00") {
+              this.$store.dispatch('GetInfo').then(res => {
+                this.$router.push({ path: this.redirect || "/" });
+              })
+            // 认证未通过
+            } else {
+              console.log("未认证通过!")
+              this.$router.push({ path: "/certification" });
+            }
+          }
+        }).catch((response)=>{
+
+        });
+      }
   }
 }
 </script>