<template>
    <div id="login_container"></div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import { apiGetLoginParam } from '@/apis/login'

let wxElement: HTMLElement | null = null;
onMounted(() => {
    if (!wxElement) {
        //1. 创建script标签 
        wxElement = document.createElement('script');
        //2. script标签的src赋值
        wxElement.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js';
        //3. script添加到body中
        document.body.appendChild(wxElement);
        //4. 当script加载完毕，请求接口
        wxElement.onload = async () => {
            let data = await apiGetLoginParam();
            let { redirectUri, appid, scope, state } = data;
            new WxLogin({
                id: "login_container",
                appid,
                scope,
                state,
                redirect_uri: decodeURIComponent(redirectUri),
                href: "",
            })
        }
    }
})

onUnmounted(() => {
    if (wxElement) {
        document.body.removeChild(wxElement);
    }
})
</script>

<style scoped>
#login_container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>














import { watch } from 'vue';
import loginDialog from '@shared/components/login.vue'
watch(() => window.location.href, async () => {
  const urlParams = new URLSearchParams(window.location.search);
  //1. 拿到token
  const token = urlParams.get('token');
  //2. hooks
  console.log(token)
}, { immediate: true })