实现微信扫码登录PC端

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>