企业微信登录06

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

@@ -1,40 +1,35 @@
 <template>
-  <el-form ref="formRef" :model="state.ruleForm" :rules="rules" class="login-content-form" size="large"
-           @keyup.enter="loginClick">
+  <el-form ref="formRef" size="large" class="login-content-form" :model="state.ruleForm" :rules="rules" @keyup.enter="loginClick">
     <el-form-item class="login-animation1" prop="username">
-      <el-input v-model="ruleForm.username" :placeholder="$t('message.account.accountPlaceholder1')" autocomplete="off"
-                clearable type="text">
+      <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>
+          <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 v-model="ruleForm.password" :placeholder="$t('message.account.accountPlaceholder2')"
-                :type="isShowPassword ? 'text' : '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="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
-             class="iconfont el-input__icon login-content-password"
+          <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 v-if="isShowCaptcha" class="login-animation3" prop="captcha">
+    <el-form-item class="login-animation3" v-if="isShowCaptcha" prop="captcha">
       <el-col :span="15">
-        <el-input v-model="ruleForm.captcha" :placeholder="$t('message.account.accountPlaceholder3')" autocomplete="off"
-                  clearable maxlength="4" type="text">
+        <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>
+            <el-icon class="el-input__icon"><ele-Position /></el-icon>
           </template>
         </el-input>
       </el-col>
@@ -46,8 +41,8 @@
       </el-col>
     </el-form-item>
     <el-form-item class="login-animation4">
-      <el-button :loading="loginLoading" class="login-content-submit" round type="primary"
-                 @click="loginClick">
+      <el-button type="primary" class="login-content-submit" round @click="loginClick"
+                 :loading="loading.signIn">
         <span>{{ $t('message.account.accountBtnText') }}</span>
       </el-button>
     </el-form-item>
@@ -79,7 +74,6 @@ import emitter from '/@/utils/emitter'
 export default defineComponent({
   name: 'loginAccount',
   setup() {
-    const loginLoading = ref(false);
     const { t } = useI18n();
     const storesThemeConfig = useThemeConfig();
     const { themeConfig } = storeToRefs(storesThemeConfig);
@@ -93,31 +87,31 @@ export default defineComponent({
         password: '',
         captcha: '',
         captchaKey: '',
-        captchaImgBase: ''
+        captchaImgBase: '',
       },
       loading: {
-        signIn: false
-      }
+        signIn: false,
+      },
     });
     const rules = reactive<FormRules>({
       username: [
-        { required: true, message: '请填写账号', trigger: 'blur' }
+        { required: true, message: '请填写账号', trigger: 'blur' },
       ],
       password: [
         {
           required: true,
           message: '请填写密码',
-          trigger: 'blur'
-        }
+          trigger: 'blur',
+        },
       ],
       captcha: [
         {
           required: true,
           message: '请填写验证码',
-          trigger: 'blur'
-        }
-      ]
-    });
+          trigger: 'blur',
+        },
+      ],
+    })
     const formRef = ref();
     // 时间获取
     const currentTime = computed(() => {
@@ -135,17 +129,16 @@ export default defineComponent({
       });
     };
     const refreshCaptcha = async () => {
-      state.ruleForm.captcha = '';
+      state.ruleForm.captcha=''
       loginApi.getCaptcha().then((ret: any) => {
         state.ruleForm.captchaImgBase = ret.data.image_base;
         state.ruleForm.captchaKey = ret.data.key;
       });
     };
     const loginClick = async () => {
-      if (!formRef.value) return;
+      if (!formRef.value) return
       await formRef.value.validate((valid: any) => {
         if (valid) {
-          loginLoading.value = true;
           loginApi.login({ ...state.ruleForm, password: Md5.hashStr(state.ruleForm.password) }).then((res: any) => {
             if (res.code === 2000) {
               Session.set('token', res.data.access);
@@ -165,13 +158,11 @@ export default defineComponent({
           }).catch((err: any) => {
             // 登录错误之后，刷新验证码
             refreshCaptcha();
-          }).finally(() => {
-            loginLoading.value = false;
           });
         } else {
-          errorMessage('请填写登录信息');
+          errorMessage("请填写登录信息")
         }
-      });
+      })
 
     };
     const getUserInfo = () => {
@@ -195,6 +186,7 @@ export default defineComponent({
       }
     })
 
+
     // 登录成功后的跳转
     const loginSuccess = () => {
       //登录成功获取用户信息,获取系统字典数据
@@ -209,7 +201,7 @@ export default defineComponent({
       if (route.query?.redirect) {
         router.push({
           path: <string>route.query?.redirect,
-          query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : ''
+          query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
         });
       } else {
         router.push('/');
@@ -218,7 +210,7 @@ export default defineComponent({
       // 关闭 loading
       state.loading.signIn = true;
       const signInText = t('message.signInText');
-      ElMessage.success(`${ currentTimeInfo }，${ signInText }`);
+      ElMessage.success(`${currentTimeInfo}，${signInText}`);
       // 添加 loading，防止第一次进入界面时出现短暂空白
       NextLoading.start();
     };
@@ -228,8 +220,8 @@ export default defineComponent({
       SystemConfigStore().getSystemConfigs();
     });
 
+
     return {
-      loginLoading,
       refreshCaptcha,
       loginClick,
       loginSuccess,
@@ -237,13 +229,13 @@ export default defineComponent({
       state,
       formRef,
       rules,
-      ...toRefs(state)
+      ...toRefs(state),
     };
-  }
+  },
 });
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .login-content-form {
   margin-top: 20px;
 

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

@@ -37,13 +37,11 @@ function initWeComQRCode() {
 }
 
 async function handleWeComLogin(query: any) {
-  console.log('扫码成功')
   try {
     const res = await WeComLogin(query);
     console.log("=>(scan.vue:43) res", res);
     if (res) {
       emitter.emit('scan-wecomLogin', { loginInfo: res });
-      console.log('发送跳转')
     }
   } catch (error) {
     console.log('error:', error);