实现微信扫码登录PC端

2026-01-29 13:01:57 +08:00 · 2024-06-29 09:51:19 +08:00
parent 193e93f60a
commit d669f04f55
39 changed files with 708 additions and 146 deletions
--- a/ruoyi-ui/src/api/login.js
+++ b/ruoyi-ui/src/api/login.js
@@ -12,6 +12,17 @@ export function login(username, password, code, uuid) {
  })
 }

+// 微信扫码登录状态检查方法
+export function wxScanLoginCheck(query) {
+  return request({
+    url: '/auth/wxScanLoginCheck',
+    headers: {
+      isToken: false
+    },
+    method: 'get',
+    params: query
+  })
+}
 // 注册方法
 export function register(data) {
  return request({
@@ -33,12 +44,22 @@ export function refreshToken() {
 }

 // 获取用户详细信息
-export function getInfo() {
+export function getInfo(params) {
  return request({
    url: '/system/user/getInfo',
-    method: 'get'
+    method: 'get',
+    params: params
  })
 }
+// 获取微信扫码用户详细信息
+export function getWxScanInfo(params) {
+  return request({
+    url: '/system/user/getWxScanInfo',
+    method: 'get',
+    params: params
+  })
+}
+

 // 退出方法
 export function logout() {
@@ -58,4 +79,4 @@ export function getCodeImg() {
    method: 'get',
    timeout: 20000
  })
-}
+}
--- a/ruoyi-ui/src/api/system/wxApplesCode.js
+++ b/ruoyi-ui/src/api/system/wxApplesCode.js
@@ -9,12 +9,22 @@ export function getWxApplesAccessToken(query) {
  })
 }

-// 查询约战详细
+// 获取微信小程序码
 export function genWxApplesAqrCode(data) {
  return request({
    url: '/system/wxApplesCode/genWxApplesAqrCode',
    method: 'post',
    data: data
  })
+
+}
+
+//获取微信小程序码二进制数据
+export function genWxApplesAqrCodeForPc(data) {
+  return request({
+    url: '/system/wxApplesCode/genWxApplesAqrCodeForPc',
+    method: 'post',
+    data: data
+  })
 }

--- a/ruoyi-ui/src/permission.js
+++ b/ruoyi-ui/src/permission.js
@@ -3,7 +3,7 @@ import store from './store'
 import { Message } from 'element-ui'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
-import { getToken } from '@/utils/auth'
+import {getToken, getWxScanUserId} from '@/utils/auth'
 import { isRelogin } from '@/utils/request'

 NProgress.configure({ showSpinner: false })
@@ -22,7 +22,10 @@ router.beforeEach((to, from, next) => {
      if (store.getters.roles.length === 0) {
        isRelogin.show = true
        // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
+          let params ={
+             userId: getWxScanUserId()
+        }
+        store.dispatch('GetInfo',params).then(() => {
          isRelogin.show = false
          store.dispatch('GenerateRoutes').then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
--- a/ruoyi-ui/src/store/modules/user.js
+++ b/ruoyi-ui/src/store/modules/user.js
@@ -1,5 +1,5 @@
-import { login, logout, getInfo, refreshToken } from '@/api/login'
-import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
+import { login, logout, getInfo, refreshToken,getWxScanInfo } from '@/api/login'
+import {getToken, setToken, setExpiresIn, removeToken, setWxScanUserId, removeWxScanUserId} from '@/utils/auth'

 const user = {
  state: {
@@ -7,7 +7,8 @@ const user = {
    name: '',
    avatar: '',
    roles: [],
-    permissions: []
+    permissions: [],
+    wxScanUserId: null
  },

  mutations: {
@@ -17,6 +18,9 @@ const user = {
    SET_EXPIRES_IN: (state, time) => {
      state.expires_in = time
    },
+    SET_WX_SCAN_USER_ID_IN: (state, wxScanUserId) => {
+      state.wxScanUserId = wxScanUserId
+    },
    SET_NAME: (state, name) => {
      state.name = name
    },
@@ -51,11 +55,42 @@ const user = {
        })
      })
    },
-
-    // 获取用户信息
-    GetInfo({ commit, state }) {
+   // 微信扫码登录
+    WxScanLogin({ commit }, data) {
      return new Promise((resolve, reject) => {
-        getInfo().then(res => {
+        setToken(data.access_token)
+        commit('SET_TOKEN', data.access_token)
+        setExpiresIn(data.expires_in)
+        commit('SET_EXPIRES_IN', data.expires_in)
+        setWxScanUserId(data.user.userid)
+        commit('SET_WX_SCAN_USER_ID_IN', data.user.userid)
+        resolve()
+      })
+    },
+    // 获取微信扫码用户信息
+    GetWxScanInfo({ commit, state },params) {
+      return new Promise((resolve, reject) => {
+        getWxScanInfo(params).then(res => {
+          const user = res.user
+          const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : user.avatar;
+          if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
+            commit('SET_ROLES', res.roles)
+            commit('SET_PERMISSIONS', res.permissions)
+          } else {
+            commit('SET_ROLES', ['ROLE_DEFAULT'])
+          }
+          commit('SET_NAME', user.userName)
+          commit('SET_AVATAR', avatar)
+          resolve(res)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    // 获取用户信息
+    GetInfo({ commit, state },params) {
+      return new Promise((resolve, reject) => {
+        getInfo(params).then(res => {
          const user = res.user
          const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : user.avatar;
          if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
@@ -85,7 +120,7 @@ const user = {
        })
      })
    },
-    
+
    // 退出系统
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
@@ -93,7 +128,9 @@ const user = {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          commit('SET_PERMISSIONS', [])
+          commit('SET_WX_SCAN_USER_ID_IN', null)
          removeToken()
+          removeWxScanUserId()
          resolve()
        }).catch(error => {
          reject(error)
@@ -105,7 +142,9 @@ const user = {
    FedLogOut({ commit }) {
      return new Promise(resolve => {
        commit('SET_TOKEN', '')
+        commit('SET_WX_SCAN_USER_ID_IN', null)
        removeToken()
+        removeWxScanUserId()
        resolve()
      })
    }
--- a/ruoyi-ui/src/utils/auth.js
+++ b/ruoyi-ui/src/utils/auth.js
@@ -4,6 +4,16 @@ const TokenKey = 'Admin-Token'

 const ExpiresInKey = 'Admin-Expires-In'

+const WxScanUserIdKey = 'Admin-Wx-UserId-In'
+export function getWxScanUserId() {
+    return Cookies.get(WxScanUserIdKey)
+}
+export function setWxScanUserId(userId) {
+    return Cookies.set(WxScanUserIdKey, userId)
+}
+export function removeWxScanUserId() {
+    return Cookies.remove(WxScanUserIdKey)
+}
 export function getToken() {
  return Cookies.get(TokenKey)
 }
--- a/ruoyi-ui/src/views/login.vue
+++ b/ruoyi-ui/src/views/login.vue
@@ -1,68 +1,80 @@
 <template>
  <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">篮球Zone后台管理系统</h3>
-      <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="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @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"/>
+    <el-tabs v-model="activeName" @tab-click="handleTagClick" class="login-form">
+      <el-tab-pane name="first" label="账号登录">
+        <el-form ref="loginForm" :model="loginForm" :rules="loginRules"  >
+          <h3 class="title">篮球Zone后台管理系统</h3>
+          <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="password">
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              auto-complete="off"
+              placeholder="密码"
+              @keyup.enter.native="handleLogin"
+            >
+              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="code" v-if="captchaEnabled">
+            <el-input
+              v-model="loginForm.code"
+              auto-complete="off"
+              placeholder="验证码"
+              style="width: 63%"
+              @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-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+          <el-form-item style="width:100%;">
+            <el-button
+              :loading="loading"
+              size="medium"
+              type="primary"
+              style="width:100%;"
+              @click.native.prevent="handleLogin"
+            >
+              <span v-if="!loading">登 录</span>
+              <span v-else>登 录 中...</span>
+            </el-button>
+            <div style="float: right;" v-if="register">
+              <router-link class="link-type" :to="'/register'">立即注册</router-link>
+            </div>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane name="second" label="微信扫码登录">
+        <div   class="wx-qrcode" >
+          <el-image v-if="imageLoaded" :src="qrCodeUrl" class="wx-qrcode-login-img" @load="handleImageLoad" @error="handleImageError" @click="getWxScanQrCode"/>
+          <div class="el-icon-loading" v-else></div>
        </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          type="primary"
-          style="width:100%;"
-          @click.native.prevent="handleLogin"
-        >
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
-        </div>
-      </el-form-item>
-    </el-form>
+      </el-tab-pane>
+    </el-tabs>
+
    <!--  底部  -->
    <div class="el-login-footer">
-      <span>Copyright © 2018-2022 future.basket All Rights Reserved.</span>
+      <span>Copyright © 2020-2024 lzsport.com All Rights Reserved.</span>
    </div>
  </div>
 </template>

 <script>
-import { getCodeImg } from "@/api/login";
+import { getCodeImg, wxScanLoginCheck } from "@/api/login";
+import {genWxApplesAqrCodeForPc, genWxApplesAqrCode} from "@/api/system/wxApplesCode";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from '@/utils/jsencrypt'

@@ -92,7 +104,11 @@ export default {
      captchaEnabled: true,
      // 注册开关
      register: false,
-      redirect: undefined
+      redirect: undefined,
+      qrCodeUrl: "",
+      activeName: 'first',
+      showexpire: false,
+      imageLoaded: false,
    };
  },
  watch: {
@@ -107,6 +123,11 @@ export default {
    this.getCode();
    this.getCookie();
  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer); // 销毁组件前清除定时器
+    }
+  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
@@ -117,6 +138,50 @@ export default {
        }
      });
    },
+    handleImageLoad(){
+      console.log('图片加载完成');
+      this.imageLoaded = true;
+    },
+    handleImageError(){
+        console.log('图片加载失败');
+      this.$modal.msgWarning("二维码加载失败");
+    },
+    getWxScanQrCode() {
+      const timestamp = Date.now();
+      let checkCode = 'wxScanLogin'+timestamp;
+      let params ={
+        // envVersion: 'develop',
+        checkPath: false,
+        scene: checkCode,
+        page: 'pages/wxScanLogin/wxScanLogin'
+      };
+      console.log(params)
+      genWxApplesAqrCodeForPc(params).then(res => {
+          this.qrCodeUrl = "data:image/png;base64," + res.data.base64;
+          this.imageLoaded = true;
+          this.timer = setInterval(() => {
+            let param1 = {
+              checkCode: checkCode
+            }
+            wxScanLoginCheck(param1).then(res1 => {
+              console.log(res1)
+              if(res1.data){
+                console.log("登录成功")
+                // 登录成功清除定时器
+                clearInterval(this.timer);
+                this.$store.dispatch("WxScanLogin", res1.data).then(() => {
+                  this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+                }).catch(() => {
+                  console.log("登录失败")
+                });
+              }else{
+                console.log("登录失败")
+              }
+            });
+            // 执行需要定时重复执行的任务
+          }, 2000); // 每2秒钟执行一次
+      });
+    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
@@ -150,12 +215,24 @@ export default {
          });
        }
      });
+    },
+    // 切换登录方式
+    handleTagClick(tab, event) {
+      if (tab.name === 'first') {
+        this.getCode();
+        this.getCookie();
+      } else {
+         this.getWxScanQrCode();
+      }
    }
  }
 };
 </script>

 <style rel="stylesheet/scss" lang="scss">
+body {
+  margin: 0;
+}
 .login {
  display: flex;
  justify-content: center;
@@ -216,4 +293,13 @@ export default {
 .login-code-img {
  height: 38px;
 }
+.wx-qrcode{
+  width: 100%;
+  height: 320px;
+  text-align: center;
+}
+.wx-qrcode-login-img{
+  height: 300px;
+  cursor: pointer;
+}
 </style>
--- a/ruoyi-ui/src/views/system/competition/index.vue
+++ b/ruoyi-ui/src/views/system/competition/index.vue
@@ -207,9 +207,7 @@
            size="mini"
            type="text"
            icon="el-icon-setting"
-            @click="handleCompetitionSet(scope.row)"
-            v-hasPermi="['system:competition:edit']"
-          >设置</el-button>
+            @click="handleCompetitionSet(scope.row)">设置</el-button>
        </template>
      </el-table-column>
    </el-table>
--- a/ruoyi-ui/src/views/system/competitionSet/index.vue
+++ b/ruoyi-ui/src/views/system/competitionSet/index.vue
@@ -94,16 +94,16 @@
        <el-table-column label="领队人电话" align="center" prop="contactsTel" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
-            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditOfTeam(scope.row)" v-hasPermi="['system:competitionOfTeam:edit']">编辑</el-button>
+            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditOfTeam(scope.row)" >编辑</el-button>
            <el-popconfirm  v-if="scope.row.status===0" @confirm="bindConfirm(scope.row.id,1)" title="你确定同意此球队加入赛会吗？">
-              <el-button slot="reference" size="mini" type="text" icon="el-icon-success" v-hasPermi="['system:competitionOfTeam:edit']">同意</el-button>
+              <el-button slot="reference" size="mini" type="text" icon="el-icon-success" >同意</el-button>
            </el-popconfirm>
            <el-popconfirm  v-if="scope.row.status===0" @confirm="bindConfirm(scope.row.id,-1)" title="你确定不同意此球队加入赛会吗？">
-            <el-button slot="reference" size="mini" type="text" icon="el-icon-info" v-hasPermi="['system:competitionOfTeam:remove']">驳回</el-button>
+            <el-button slot="reference" size="mini" type="text" icon="el-icon-info" >驳回</el-button>
            </el-popconfirm>
-            <el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleTeamUser(scope.row)" v-hasPermi="['system:competitionOfTeam:list']">球队成员</el-button>
+            <el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleTeamUser(scope.row)" >球队成员</el-button>
            <el-popconfirm  v-if="scope.row.status===0" @confirm="bindDelOfTeamConfirm(scope.row.id,1)" title="你确定要删除此球队吗？">
-              <el-button slot="reference" size="mini" type="text" icon="el-icon-delete" v-hasPermi="['system:competitionOfTeam:remove']">删除</el-button>
+              <el-button slot="reference" size="mini" type="text" icon="el-icon-delete" >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
@@ -120,7 +120,6 @@
                plain
                icon="el-icon-plus"
                @click="handleAddGroup"
-                v-hasPermi="['system:competition:add']"
              >新增分组</el-button>
            </el-col>
          </el-row>
@@ -179,7 +178,6 @@
            plain
            icon="el-icon-time"
            @click="handleTeamVsTeamAdd"
-            v-hasPermi="['system:competitionTeamVsTeam:add']"
          >手动设置赛程</el-button>
        </el-col>
        <el-col :span="1.5">
@@ -188,7 +186,6 @@
            plain
            icon="el-icon-bangzhu"
            @click="handleMindTeamVsTeam"
-            v-hasPermi="['system:competitionTeamVsTeam:add']"
          >系统智能设置小组循环赛赛程</el-button>
        </el-col>
      </el-row>
@@ -237,10 +234,10 @@
        <el-table-column label="球场名称" align="center" prop="buildingName" width="250"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
-            <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleTeamVsTeamRecord(scope.row)" v-hasPermi="['system:competitionOfTeam:edit']">比赛记录</el-button>
-            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleTeamVsTeamEdit(scope.row)" v-hasPermi="['system:competitionTeamVsTeam:edit']">编辑赛程</el-button>
-            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleTeamVsTeamDel(scope.row)" v-hasPermi="['system:competitionOfTeam:del']">删除赛程</el-button>
-<!--            <el-button v-if="new Date(scope.row.competitionDate).getTime() > new Date().getTime()" size="mini" type="text" icon="el-icon-delete" @click="handleTeamVsTeamDel(scope.row)" v-hasPermi="['system:competitionOfTeam:del']">删除赛程</el-button>-->
+            <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleTeamVsTeamRecord(scope.row)" >比赛记录</el-button>
+            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleTeamVsTeamEdit(scope.row)">编辑赛程</el-button>
+            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleTeamVsTeamDel(scope.row)">删除赛程</el-button>
+<!--            <el-button v-if="new Date(scope.row.competitionDate).getTime() > new Date().getTime()" size="mini" type="text" icon="el-icon-delete" @click="handleTeamVsTeamDel(scope.row)" ">删除赛程</el-button>-->
          </template>
        </el-table-column>
      </el-table>
@@ -642,7 +639,6 @@
            type="primary"
            icon="el-icon-check"
            @click="handleTeamVsTeamRecordSave"
-            v-hasPermi="['system:competitionOfTeam:save']"
          >数据保存</el-button>
          <el-button
            type="primary"
@@ -688,7 +684,6 @@
                 type="text"
                 icon="el-icon-edit"
                 @click="handleUpdateMemberScore(scope.row)"
-                 v-hasPermi="['system:competitionMemberScore:edit']"
               >计分</el-button>
             </template>
           </el-table-column>
@@ -1595,6 +1590,7 @@ export default {
      genCompetitionCommonAqrSpread(data).then(response => {
        this.$modal.msgSuccess("生成普通推广二维码成功");
        this.spreadImgurl = response.data.codeImgUrl;
+        // this.spreadImgurl =  "data:image/png;base64," + response.data.bytesBase64;
      });
    },
    clickCarousel(data){