✅ test: 企业微信扫码登录2

.env.development

@@ -3,8 +3,8 @@ ENV = 'development'
 
 # 本地环境接口地址
 # VITE_API_URL = 'http://127.0.0.1:8000'
-VITE_API_URL = 'http://192.168.1.225/'
-# VITE_API_URL = 'https://ads.vzzon.com'
+# VITE_API_URL = 'http://192.168.1.225/'
+VITE_API_URL = 'https://ads.vzzon.com'
 
 # 是否启用按钮权限
 VITE_PM_ENABLED = true

index.html

@@ -27,6 +27,7 @@
 			})();
 		</script> -->
 		<script type="module" src="/src/main.ts"></script>
+    <script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-1.4.5.js"></script>
 		<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wsijQt8sLXrCW71YesmispvYHitfG9gv&s=1"></script> -->
 	</body>
 </html>

package-lock.json

@@ -17,6 +17,7 @@
 				"@vitejs/plugin-vue-jsx": "^3.0.0",
 				"@wangeditor/editor": "^5.1.23",
 				"@wangeditor/editor-for-vue": "^5.1.12",
+				"@wecom/jssdk": "^1.4.5",
 				"autoprefixer": "^10.4.14",
 				"axios": "^1.2.1",
 				"countup.js": "^2.3.2",
@@ -5026,6 +5027,11 @@
 				"snabbdom": "^3.1.0"
 			}
 		},
+		"node_modules/@wecom/jssdk": {
+			"version": "1.4.5",
+			"resolved": "https://registry.npmmirror.com/@wecom/jssdk/-/jssdk-1.4.5.tgz",
+			"integrity": "sha512-1SSmcDUid7QOQNNFaM4d884NXJQYuoO+oLZtM9TRO5uMXYj2s69hmuAoPUr3D3br6VDgv4H+tbIG5A5A+uB9lA=="
+		},
 		"node_modules/acorn": {
 			"version": "8.10.0",
 			"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.10.0.tgz",
@@ -14192,6 +14198,11 @@
 			"integrity": "sha512-ZdodDPqKQrgx3IwWu4ZiQmXI8EXZ3hm2/fM6E3t5dB8tCaIGWQZhmqd6P5knfkRAd3z2+YRSRbxOGfoRSp/rLg==",
 			"requires": {}
 		},
+		"@wecom/jssdk": {
+			"version": "1.4.5",
+			"resolved": "https://registry.npmmirror.com/@wecom/jssdk/-/jssdk-1.4.5.tgz",
+			"integrity": "sha512-1SSmcDUid7QOQNNFaM4d884NXJQYuoO+oLZtM9TRO5uMXYj2s69hmuAoPUr3D3br6VDgv4H+tbIG5A5A+uB9lA=="
+		},
 		"acorn": {
 			"version": "8.10.0",
 			"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.10.0.tgz",

package.json

@@ -17,6 +17,7 @@
 		"@vitejs/plugin-vue-jsx": "^3.0.0",
 		"@wangeditor/editor": "^5.1.23",
 		"@wangeditor/editor-for-vue": "^5.1.12",
+		"@wecom/jssdk": "^1.4.5",
 		"autoprefixer": "^10.4.14",
 		"axios": "^1.2.1",
 		"countup.js": "^2.3.2",

src/views/demo/api.ts

@@ -41,9 +41,9 @@ export function DelObj(id: number) {
     });
 }
 
-export function getWechatCode() {
+export function getWeiComQrCode() {
     return request({
-        url: '/api/system/qrcode/link',
+        url: '/api/system/wechat/start_oauth',
         method: 'get',
         // params: query,
     });

src/views/demo/index.vue

@@ -1,141 +1,77 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-import { Connection, Picture as IconPicture } from '@element-plus/icons-vue'
-import { getParentAsin } from '../adManage/sp/api'
-import { useShopInfo } from '../../stores/shopInfo'
-import { storeToRefs } from 'pinia'
-import { getWechatCode } from './api'
+import { onMounted, reactive, ref, watch } from 'vue'
+import * as ww from '@wecom/jssdk'
+import  { getWeiComQrCode } from './api'
+import { useRoute } from 'vue-router'
+import { createWWLoginPanel } from '@wecom/jssdk'
 
-// const count = ref(0)
-// const load = () => {
-//   count.value += 2
-// }
-// const parentLoading = ref(false)
-// const shopInfo = useShopInfo()
-// const { profile } = storeToRefs(shopInfo)
-//
-// const gridOptions = <any>reactive({
-//   height: 500,
-//   align: null,
-//   columns: [
-//     { type: 'checkbox', width: 30 },
-//     { field: 'parentAsin', title: '父ASIN', slots: { default: 'parentAsin_default' } },
-//   ],
-//   data: [],
-// })
-//
-// async function fetchParentAsin() {
-//   parentLoading.value = true
-//   const body = { profileId: profile.value.profile_id }
+const route = useRoute();
+const code = ref('');
+
+watch(() => route.query, (newCode) => {
+  if (newCode) {
+    // code.value = newCode;
+    console.log('Authorization Code:', newCode);
+    // 这里可以添加更多处理code的逻辑
+  }
+}, {deep: true});
+
+defineProps(['code', 'state', 'redirect', 'params'])
+// const authCode = ref('')
+
+// const qrCodeUrl = ref('')
+// async function fetchQrCode() {
 //   try {
-//     const response = await getParentAsin(body)
-//     gridOptions.data = response.data
-//   } catch (error) {
-//     console.log('error:', error)
-//   } finally {
-//     parentLoading.value = false
+//       const response = await getWeiComQrCode()
+//     qrCodeUrl.value= response.data
+//   } catch(error) {
+//       console.log('error:', error)
 //   }
 // }
-//
-// function handleScroll(event: any) {
-//   // 获取滚动容器
-//   const target = event.$event.target
-//   // console.log('target:', target)
-//   // // 计算是否达到底部：容器高度 + 滚动顶部距离 >= 滚动内容的总高度
-//   if (target.scrollHeight - (target.scrollTop + target.clientHeight) < 1) {
-//     parentLoading.value = true
-//     console.log('执行了')
-//     load()
-//     parentLoading.value = false
-//   }
-// }
-//
-// onMounted(() => {
-//   fetchParentAsin()
-// })
 
-async function getCode() {
-  try {
-    const response = await getWechatCode()
-    console.log('response', response.data)
-    setTimeout(() => {
-      window.location.href = response.data
-    }, 0)
-  } catch (error) {
-    console.log('error:', error)
-  }
+function createWXQRCode() {
+  ww.createWWLoginPanel({
+    el: '#wx_qrcode',
+    params: {
+      login_type: 'CorpApp',
+      appid: 'ww467ec1685e8262e6',
+      agentid: '1000065',
+      redirect_uri: 'http://amzads.zositechc.cn/web/api/system/wechat/login',
+      state: 'loginState',
+      // redirect_type: 'callback',
+    },
+    onCheckWeComLogin({ isWeComLogin }) {
+      console.log(isWeComLogin)
+    },
+    onLoginSuccess({ code }) {
+      console.log({ code })
+    },
+    onLoginFail(err) {
+      console.log(err)
+    },
+  })
 }
-</script>
 
-<template>
-  <!--<ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">-->
-  <!--  <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>-->
-  <!--</ul>-->
-  <!--<vxe-grid-->
-  <!--    v-loading="parentLoading"-->
-  <!--    v-bind="gridOptions"-->
-  <!--    :header-row-style="changeHeaderCellStyle"-->
-  <!--    :header-cell-style="changeHeaderCellStyle"-->
-  <!--    class="ml-2 mb-2 mt-0 border border-r-0 rounded-bl-md rounded-tl-md overflow-hidden"-->
-  <!--    style="flex: 0 1 260px; overflow: auto"-->
-  <!--    @scroll.native="handleScroll">-->
-  <!--  <template #parentAsin_default="{ row }">-->
-  <!--    <div style="display: flex">-->
-  <!--      <el-image class="w-14 h-14 mr-1 border rounded" v-if="row.Image" :src="row.Image" alt="" fit="contain"/>-->
-  <!--      <el-image v-else class="w-12 h-12 mr-1 border rounded">-->
-  <!--        <template #error>-->
-  <!--          <div class="image-slot">-->
-  <!--            <el-icon>-->
-  <!--              <icon-picture/>-->
-  <!--            </el-icon>-->
-  <!--          </div>-->
-  <!--        </template>-->
-  <!--      </el-image>-->
+function onLoginSuccess({ code }) {
+  console.log({ code })
+}
 
-  <!--      <div class="flex flex-col justify-center">-->
-  <!--        <div class="font-medium text-black">{{ row.parentAsin }}</div>-->
-  <!--        <div>-->
-  <!--          ASIN:<span class="text-black">{{ row.asinNum }}</span>-->
-  <!--          <el-link-->
-  <!--              :href="row.amazonUrl"-->
-  <!--              target="_blank"-->
-  <!--              :disabled="!row.amazonUrl"-->
-  <!--              :underline="false"-->
-  <!--              :icon="Connection"-->
-  <!--              :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">-->
-  <!--          </el-link>-->
-  <!--          <span class="text-gray-300 mx-1">|</span>-->
-  <!--          SKU:<span class="text-black">{{ row.skuNum }}</span>-->
-  <!--        </div>-->
-  <!--      </div>-->
-  <!--    </div>-->
-  <!--  </template>-->
-  <!--</vxe-grid>-->
+</script>
 
+<template>
   <div>
-    <el-button type="primary" @click="getCode" 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>
+  <!--<div>-->
+  <!--  <h1>Login</h1>-->
+  <!--  <p>Code: {{ code }}</p>-->
+  <!--  <p>State: {{ state }}</p>-->
+  <!--  <p>Redirect: {{ redirect }}</p>-->
+  <!--  <p>Params: {{ params }}</p>-->
+  <!--</div>-->
+  <!--<iframe :src="qrCodeUrl" style="height: 300px; width: 300px;"></iframe>-->
 </template>
 
 <style scoped>
-.infinite-list {
-  height: 300px;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.infinite-list .infinite-list-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  background: var(--el-color-primary-light-9);
-  margin: 10px;
-  color: var(--el-color-primary);
-}
-
-.infinite-list .infinite-list-item + .list-item {
-  margin-top: 10px;
-}
 </style>

src/views/system/login/api.ts

@@ -27,7 +27,7 @@ export function getUserInfo() {
 
 export function getWorkWeChatCode() {
   return request({
-    url: '/api/system/wechat/start',
+    url: '/api/system/wechat/start_oauth',
     method: 'get',
   })
 }

src/views/system/login/index.vue

@@ -29,16 +29,17 @@ const getThemeConfig = computed(() => {
 
 const qrCode = ref('')
 
-async function scanClick() {
+async function fetchWorkWeChatCode() {
   try {
     if (!state.isScan) {
       const response = await getWorkWeChatCode()
       qrCode.value = response.data
-      console.log('qrCode.value', qrCode.value)
-      state.isScan = !state.isScan
+      window.location.href = qrCode.value
     }
   } catch (error) {
     console.log('error:', error)
+  } finally {
+    state.isScan = !state.isScan
   }
 }
 
@@ -87,8 +88,8 @@ onMounted(() => {
                 <!--</el-tab-pane>-->
               </el-tabs>
             </div>
-            <Scan v-if="state.isScan && qrCode" :qrCode="qrCode" />
-            <div class="login-content-main-sacn" @click="scanClick">
+            <Scan v-if="state.isScan" :qrCode="qrCode" />
+            <div class="login-content-main-sacn" @click="fetchWorkWeChatCode">
               <i class="iconfont" :class="state.isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
               <div class="login-content-main-sacn-delta"></div>
             </div>