企业微信扫码登录

vben28/src/views/sys/login/LoginForm.vue

@@ -40,17 +40,17 @@
         </Button>
       </ACol>
     </ARow>
- <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>
+    <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>
 
     <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
-            <a-button type="link" @click="workWechatLogin" aria-placeholder="sf"
-        ><WechatFilled/>
+      <a-button type="link" @click="workWechatLogin" aria-placeholder="sf"
+        ><WechatFilled />
       </a-button>
     </div>
   </Form>
 </template>
 <script lang="ts" setup>
-  import { reactive, ref, toRaw, unref, computed } from 'vue';
+  import { reactive, ref, toRaw, unref, computed, watch } from 'vue';
 
   import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
   import {
@@ -67,15 +67,10 @@
   import { useMessage } from '/@/hooks/web/useMessage';
 
   import { useUserStore } from '/@/store/modules/user';
-  import {
-    LoginStateEnum,
-    useLoginState,
-    useFormRules,
-    useFormValid,
-  } from './useLogin';
+  import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
   import { useDesign } from '/@/hooks/web/useDesign';
   //import { onKeyStroke } from '@vueuse/core';
-
+  import { useRouter, useRoute } from 'vue-router';
   const ACol = Col;
   const ARow = Row;
   const FormItem = Form.Item;
@@ -96,16 +91,28 @@
     account: 'admin',
     password: '1q2w3E*',
   });
-
+  const router = useRouter();
+  const { currentRoute } = router;
   const { validForm } = useFormValid(formRef);
 
   //onKeyStroke('Enter', handleLogin);
+  const a = computed(() => {
+    const route = unref(currentRoute);
+    const query = route.query;
+    console.log(query);
+    debugger;
+    if (query) {
+      console.log(query);
+      debugger;
+    }
+    return;
+  });
 
   const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
-  function workWechatLogin(){
+
+  function workWechatLogin() {
     setLoginState(LoginStateEnum.WORKWECHAT_QR_CODE);
-    debugger
-  };
+  }
 
   async function handleLogin() {
     const data = await validForm();
@@ -118,7 +125,7 @@
           username: data.account,
           tenantId: '',
           mode: 'none', //不要默认的错误提示
-        })
+        }),
       );
       if (userInfo) {
         notification.success({

vben28/src/views/sys/login/WorkWeChatQrCodeForm.vue

@@ -1,52 +1,38 @@
 <template>
   <!-- <template> -->
-    <div v-show="getShow">
+  <div v-show="getShow">
     <!-- <LoginFormTitle class="enter-x" /> -->
     <div class="enter-x min-w-64 min-h-64">
       <div class="qr_login" id="qr_login"></div>
-      <Divider class="enter-x">{{ t('sys.login.scanSign') }}</Divider>
       <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
         {{ t('sys.login.backSignIn') }}
       </Button>
     </div>
-    </div>
+  </div>
 
   <!-- </template> -->
 </template>
 <script lang="ts" setup>
-  import { computed, unref,nextTick } from 'vue';
+  import { computed, unref, nextTick } from 'vue';
   import LoginFormTitle from './LoginFormTitle.vue';
   import { Button, Divider } from 'ant-design-vue';
   import { QrCode } from '/@/components/Qrcode/index';
-  import { useRouter } from 'vue-router';
+
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useLoginState, LoginStateEnum } from './useLogin';
- 
-  const qrCodeUrl = 'https://vvbin.cn/next/login';
 
   const { t } = useI18n();
   const { handleBackLogin, getLoginState } = useLoginState();
-
   const getShow = computed(() => unref(getLoginState) === LoginStateEnum.WORKWECHAT_QR_CODE);
-  nextTick(()=>{
-var wwLogin =new WwLogin({
-    id: 'qr_login',
-    appid: "wwd54b6d4fa4de4ac1",
-    agentid: "1000003",
-    redirect_uri: encodeURI('http://myapp.com:4200/redirect'),
-    state: "hellowecom",
-    href: "",
-    lang: "zh",});      
-
-
-})
-  
-     /**
-      * 使用watch监控当前 router 的变化
-      */
-  //  const router = useRouter()
-  //   watch(() => router.currentRoute.value.path,(toPath) => {
-  //     debugger
-  //       //要执行的方法
-  //    },{immediate: true,deep: true})
+  nextTick(() => {
+    var wwLogin = new WwLogin({
+      id: 'qr_login',
+      appid: 'wwd54b6d4fa4de4ac1',
+      agentid: '1000003',
+      redirect_uri: encodeURI('http://myapp.com:4200/login'),
+      state: 'hellowecom',
+      href: '',
+      lang: 'zh',
+    });
+  });
 </script>