ads_web/src/views/demo/index.vue

<script setup lang="ts">
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 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 getWeiComQrCode()
//     qrCodeUrl.value= response.data
//   } catch(error) {
//       console.log('error:', error)
//   }
// }

function createWXQRCode() {
  ww.createWWLoginPanel({
    el: '#wx_qrcode',
    params: {
      login_type: 'CorpApp',
      appid: 'ww467ec1685e8262e6',
      agentid: '1000065',
      // redirect_uri: 'https://ads.vzzon.com/web/api/system/wechat/login',
      redirect_uri : "https://ads.vzzon.com/web/api/system/wechat/oauth_callback",
      state: 'loginState',
      // redirect_type: 'callback',
    },
    onCheckWeComLogin({ isWeComLogin }) {
      console.log(isWeComLogin)
    },
    onLoginSuccess({ code }) {
      console.log({ code })
    },
    onLoginFail(err) {
      console.log(err)
    },
  })
}

function onLoginSuccess({ code }) {
  console.log({ code })
}

</script>

<template>
  <div>
    <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>
</style>