⚰ perf: 登录页: 优化代码结构

src/views/demo/index.vue

@@ -39,7 +39,7 @@ async function handleWeComLogin(query) {
 
 <template>
   <div>
-    <el-button type="primary" @click="createWXQRCode" class="m-2.5">发送</el-button>
+    <!--<el-button type="primary" @click="createWXQRCode" class="m-2.5">发送</el-button>-->
   </div>
   <div id="wx_qrcode" style="height: 300px; width: 300px"></div>
 </template>

src/views/system/login/component/account.vue

@@ -1,80 +1,7 @@
-<template>
-  <el-form ref="formRef" size="large" class="login-content-form" :model="state.ruleForm" :rules="rules">
-    <el-form-item class="login-animation1" prop="username">
-      <el-input
-        type="text"
-        :placeholder="$t('message.account.accountPlaceholder1')"
-        v-model="ruleForm.username"
-        clearable
-        autocomplete="off">
-        <template #prefix>
-          <el-icon class="el-input__icon">
-            <ele-User />
-          </el-icon>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item class="login-animation2" prop="password">
-      <el-input
-        :type="isShowPassword ? 'text' : 'password'"
-        :placeholder="$t('message.account.accountPlaceholder2')"
-        v-model="ruleForm.password">
-        <template #prefix>
-          <el-icon class="el-input__icon">
-            <ele-Unlock />
-          </el-icon>
-        </template>
-        <template #suffix>
-          <i
-            class="iconfont el-input__icon login-content-password"
-            :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
-            @click="isShowPassword = !isShowPassword">
-          </i>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item class="login-animation3" v-if="isShowCaptcha" prop="captcha">
-      <el-col :span="15">
-        <el-input
-          type="text"
-          maxlength="4"
-          :placeholder="$t('message.account.accountPlaceholder3')"
-          v-model="ruleForm.captcha"
-          clearable
-          autocomplete="off">
-          <template #prefix>
-            <el-icon class="el-input__icon">
-              <ele-Position />
-            </el-icon>
-          </template>
-        </el-input>
-      </el-col>
-      <el-col :span="1"></el-col>
-      <el-col :span="8">
-        <el-button class="login-content-captcha">
-          <el-image :src="ruleForm.captchaImgBase" @click="refreshCaptcha" />
-        </el-button>
-      </el-col>
-    </el-form-item>
-    <el-form-item class="login-animation4">
-      <el-button
-        type="primary"
-        class="login-content-submit"
-        round
-        @keyup.enter="loginClick"
-        @click="loginClick"
-        :loading="loading.signIn">
-        <span>{{ $t('message.account.accountBtnText') }}</span>
-      </el-button>
-      <el-button type="primary" class="login-content-submit" round @click="qrLoginClick"> 企业微信扫码登录</el-button>
-    </el-form-item>
-  </el-form>
-</template>
-
 <script lang="ts">
-import { toRefs, reactive, defineComponent, computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, defineComponent, onMounted, onBeforeUnmount, reactive, ref, toRefs } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { ElMessage, FormRules } from 'element-plus'
 import { useI18n } from 'vue-i18n'
 import Cookies from 'js-cookie'
 import { storeToRefs } from 'pinia'
@@ -88,10 +15,8 @@ import * as loginApi from '/@/views/system/login/api'
 import { useUserInfo } from '/@/stores/userInfo'
 import { DictionaryStore } from '/@/stores/dictionary'
 import { SystemConfigStore } from '/@/stores/systemConfig'
-import { BtnPermissionStore } from '/@/plugin/permission/store.permission'
 import { Md5 } from 'ts-md5'
 import { errorMessage } from '/@/utils/message'
-import { getWorkWeChatCode, postWorkWeChatCode } from '../api'
 import emitter from '/@/utils/emitter'
 
 export default defineComponent({
@@ -189,23 +114,19 @@ export default defineComponent({
     }
 
     emitter.on('scan-wecomLogin', (userInfo: any) => {
-      console.log('进入企业微信扫码登录')
-      console.log('userInfo', userInfo)
-      console.log('userInfo.loginInfo.code', userInfo.loginInfo.code)
-        if (userInfo.loginInfo.code == 2000) {
-          Session.set('token', userInfo.loginInfo.data.access)
-          Cookies.set('username', userInfo.loginInfo.data.name)
-          console.log('写入token')
-          if (!themeConfig.value.isRequestRoutes) {
-            // 前端控制路由，2、请注意执行顺序
-            console.log('成功获取token，开始初始化前端路由')
-            initFrontEndControlRoutes()
-            loginSuccess()
-          } else {
-            initBackEndControlRoutes()
-            loginSuccess()
-          }
+      if (userInfo.loginInfo.code == 2000) {
+        Session.set('token', userInfo.loginInfo.data.access)
+        Cookies.set('username', userInfo.loginInfo.data.name)
+        if (!themeConfig.value.isRequestRoutes) {
+          // 前端控制路由，2、请注意执行顺序
+          console.log('成功获取token，开始初始化前端路由')
+          initFrontEndControlRoutes()
+          loginSuccess()
+        } else {
+          initBackEndControlRoutes()
+          loginSuccess()
         }
+      }
     })
 
     // 登录成功后的跳转
@@ -236,41 +157,16 @@ export default defineComponent({
       NextLoading.start()
     }
 
-    const qrCode = ref('')
-
-    async function qrLoginClick() {
-      try {
-        const response = await getWorkWeChatCode()
-        window.location.href = response.data
-        qrCode.value = response.data
-        // if (qrCode.value) {
-          console.log(123, this.$route.query.code)
-        //   await WorkWeChatCodeLogin()
-        // }
-      } catch (error) {
-        console.log('error:', error)
-      }
-    }
-
-    async function WorkWeChatCodeLogin() {
-      const post = {
-        code: qrCode.value,
-        state: 'Wechat',
-      }
-      try {
-        const response = await postWorkWeChatCode(post)
-        console.log('response', response.data)
-      } catch (error) {
-        console.log('error:', error)
-      }
-    }
-
     onMounted(() => {
       getCaptcha()
       //获取系统配置
       SystemConfigStore().getSystemConfigs()
     })
 
+    onBeforeUnmount(() => {
+      emitter.all.clear()
+    })
+
     return {
       refreshCaptcha,
       loginClick,
@@ -280,14 +176,84 @@ export default defineComponent({
       formRef,
       rules,
       ...toRefs(state),
-      qrLoginClick,
-      qrCode,
-      WorkWeChatCodeLogin,
     }
   },
 })
 </script>
 
+<template>
+  <el-form ref="formRef" size="large" class="login-content-form" :model="state.ruleForm" :rules="rules">
+    <el-form-item class="login-animation1" prop="username">
+      <el-input
+        type="text"
+        :placeholder="$t('message.account.accountPlaceholder1')"
+        v-model="ruleForm.username"
+        clearable
+        autocomplete="off">
+        <template #prefix>
+          <el-icon class="el-input__icon">
+            <ele-User />
+          </el-icon>
+        </template>
+      </el-input>
+    </el-form-item>
+    <el-form-item class="login-animation2" prop="password">
+      <el-input
+        :type="isShowPassword ? 'text' : 'password'"
+        :placeholder="$t('message.account.accountPlaceholder2')"
+        v-model="ruleForm.password">
+        <template #prefix>
+          <el-icon class="el-input__icon">
+            <ele-Unlock />
+          </el-icon>
+        </template>
+        <template #suffix>
+          <i
+            class="iconfont el-input__icon login-content-password"
+            :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
+            @click="isShowPassword = !isShowPassword">
+          </i>
+        </template>
+      </el-input>
+    </el-form-item>
+    <el-form-item class="login-animation3" v-if="isShowCaptcha" prop="captcha">
+      <el-col :span="15">
+        <el-input
+          type="text"
+          maxlength="4"
+          :placeholder="$t('message.account.accountPlaceholder3')"
+          v-model="ruleForm.captcha"
+          clearable
+          autocomplete="off">
+          <template #prefix>
+            <el-icon class="el-input__icon">
+              <ele-Position />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-col>
+      <el-col :span="1"></el-col>
+      <el-col :span="8">
+        <el-button class="login-content-captcha">
+          <el-image :src="ruleForm.captchaImgBase" @click="refreshCaptcha" />
+        </el-button>
+      </el-col>
+    </el-form-item>
+    <el-form-item class="login-animation4">
+      <el-button
+        type="primary"
+        class="login-content-submit"
+        round
+        @keyup.enter="loginClick"
+        @click="loginClick"
+        :loading="loading.signIn">
+        <span>{{ $t('message.account.accountBtnText') }}</span>
+      </el-button>
+      <!--<el-button type="primary" class="login-content-submit" round @click="qrLoginClick"> 企业微信扫码登录</el-button>-->
+    </el-form-item>
+  </el-form>
+</template>
+
 <style scoped lang="scss">
 .login-content-form {
   margin-top: 20px;

src/views/system/login/component/scan.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { ref, defineComponent, onMounted, watch } from 'vue'
-import QRCode from 'qrcodejs2-fixes'
+import { onMounted } from 'vue'
 import * as ww from '@wecom/jssdk'
 import { WeComLogin } from '../api'
 import emitter from '/@/utils/emitter'
@@ -12,9 +11,8 @@ const props = defineProps({
   },
 })
 
-console.log(props.isScan)
-
-function createWXQRCode() {
+// 初始化企业微信扫码登录
+function initWeComQRCode() {
   ww.createWWLoginPanel({
     el: '#wx_qrcode',
     params: {
@@ -27,13 +25,13 @@ function createWXQRCode() {
       redirect_type: 'callback',
     },
     onCheckWeComLogin({ isWeComLogin }) {
-      console.log(isWeComLogin)
+      // console.log(isWeComLogin)
     },
     onLoginSuccess({ code }) {
       handleWeComLogin({ code: code, state: 'Wechat' })
     },
     onLoginFail(err) {
-      console.log(err)
+      // console.log(err)
     },
   })
 }
@@ -41,7 +39,6 @@ function createWXQRCode() {
 async function handleWeComLogin(query) {
   try {
     const res = await WeComLogin(query)
-    console.log('res', res)
     if (res) {
       emitter.emit('scan-wecomLogin', { loginInfo: res })
     }
@@ -52,39 +49,15 @@ async function handleWeComLogin(query) {
 
 onMounted(() => {
   if (props.isScan) {
-    createWXQRCode();
+    initWeComQRCode()
   }
-});
-
-
-// export default defineComponent({
-//   name: 'loginScan',
-//   setup() {
-//     const qrcodeRef = ref<HTMLElement | null>(null);
-//     // 初始化生成二维码
-//     const initQrcode = () => {
-//       (qrcodeRef.value as HTMLElement).innerHTML = '';
-//       new QRCode(qrcodeRef.value, {
-//         text: `https://jq.qq.com/?_wv=1027&k=hUu2GeU1`,
-//         width: 260,
-//         height: 260,
-//         colorDark: '#000000',
-//         colorLight: '#ffffff',
-//       });
-//     };
-//     // 页面加载时
-//     onMounted(() => {
-//       initQrcode();
-//     });
-//     return { qrcodeRef };
-//   },
-// });
+})
 </script>
 
 <template>
   <div class="login-scan-container">
-    <div id="wx_qrcode" style="width: 260px; height: 260px;"></div>
-    <div class="font12 mt20 login-msg">{{ $t('message.scan.text') }}</div>
+    <div id="wx_qrcode"></div>
+    <!--<div class="font12 mt20 login-msg">{{ $t('message.scan.text') }}</div>-->
   </div>
 </template>
 
@@ -99,6 +72,7 @@ onMounted(() => {
 .login-scan-container {
   padding: 20px;
   display: flex;
+  align-items: center;
   flex-direction: column;
   text-align: center;
   @extend .login-scan-animation;

src/views/system/login/index.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts" name="loginIndex">
-import { defineAsyncComponent, onMounted, reactive, computed, ref } from 'vue'
+import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useThemeConfig } from '/@/stores/themeConfig'
 import { NextLoading } from '/@/utils/loading'
-import logoMini from '/@/assets/logo-mini.svg'
 import loginMain from '/@/assets/login-main.svg'
 import loginBg from '/@/assets/login-bg.svg'
 import AnsjerImg from '/@/assets/ansjer_image.png'
-import { getWorkWeChatCode, WeComLogin } from './api'
-import * as ww from '@wecom/jssdk'
-import emitter from '/@/utils/emitter'
 
 // 引入组件
 const Account = defineAsyncComponent(() => import('/@/views/system/login/component/account.vue'))
@@ -29,10 +25,9 @@ const getThemeConfig = computed(() => {
   return themeConfig.value
 })
 
-const qrCode = ref('')
-
+// 切换登录方式
 function showScan() {
-  state.isScan = true
+  state.isScan = !state.isScan
 }
 
 // 页面加载时