114 lines
3.3 KiB
Vue
114 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
// import { useRouter } from 'vue-router'
|
|
// import { getUUid, uuidLogin } from '@api/login'
|
|
// import { useStore } from '@store/index'
|
|
// import { IosRefresh } from '@vicons/ionicons5';
|
|
import { RotateCcw } from 'lucide-vue-next'
|
|
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
|
// 定义事件
|
|
const emit = defineEmits<{
|
|
(event: 'login-success', data: any): void
|
|
}>()
|
|
|
|
interface UserToken {
|
|
token: string
|
|
}
|
|
interface ApiResponse<T> {
|
|
code: number
|
|
msg: string
|
|
token: string
|
|
}
|
|
const qrUrl = ref<string>('')
|
|
const qrSize = ref(174)
|
|
// const router = useRouter()
|
|
// const store = useStore()
|
|
let pollingTimer: ReturnType<typeof setInterval> | undefined
|
|
const bindTimeout = ref(false)
|
|
|
|
async function onGetUUid() {
|
|
bindTimeout.value = false
|
|
try {
|
|
// /wx/uuid/get
|
|
const res = await request.get('/wx/uuid/get')
|
|
if (res.code === 200) {
|
|
const appid = 'wx0a72f196ec9c3a70'
|
|
const { uuid } = res
|
|
const redirect_uri = `http://www.mc158c.com/login-success?uuid=${uuid}`
|
|
const codeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(
|
|
redirect_uri,
|
|
)}&response_type=code&scope=snsapi_userinfo&state=12345e23436#wechat_redirect`
|
|
qrUrl.value = codeUrl
|
|
let counter = 1
|
|
pollingTimer && clearTimeout(pollingTimer)
|
|
pollingTimer = setInterval(async () => {
|
|
await request.get('/wx/uuid/login', { uuid }).then(async (res) => {
|
|
counter++
|
|
if (counter === 59) {
|
|
clearTimeout(pollingTimer)
|
|
bindTimeout.value = true
|
|
}
|
|
if (res.status === 1) {
|
|
clearTimeout(pollingTimer)
|
|
const userStore = useUserStore()
|
|
await userStore.setToken(res.token)
|
|
await userStore.getUserInfo()
|
|
// const res1 = await request.get<ApiResponse<UserToken>>('/getInfo', {
|
|
// token: res.token,
|
|
// })
|
|
// const res1 = await request.get('/system/user/selectUserById', {
|
|
// token: token.value,
|
|
// })
|
|
// userStore.setUserInfo(res1.user)
|
|
// window.location.href = '/'
|
|
// 刷新页面
|
|
window.location.reload()
|
|
}
|
|
}).catch(() => {
|
|
clearTimeout(pollingTimer)
|
|
})
|
|
}, 1000)
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
|
|
// 处理登录成功
|
|
// const handleLoginSuccess = (data: any) => {
|
|
// // 发出登录成功事件
|
|
// emit('login-success', data)
|
|
// }
|
|
|
|
// 组件挂载时生成二维码
|
|
onMounted(() => {
|
|
onGetUUid()
|
|
})
|
|
onBeforeUnmount(() => {
|
|
clearInterval(pollingTimer)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-[280px] px-5 text-center relative">
|
|
<div v-if="qrUrl" class="relative w-full">
|
|
<div v-if="bindTimeout" class="absolute py-3 left-0 w-full h-full top-0 z-[9999] flex items-center justify-center flex-col cursor-pointer text-white bg-black/40" @click="onGetUUid">
|
|
刷新二维码
|
|
<RotateCcw />
|
|
</div>
|
|
<!-- <component
|
|
is="RotateCcw"
|
|
class="h-[18px] w-[18px] color-white"
|
|
/> -->
|
|
<n-qr-code style="padding: 0;" class="p-0 w-full h-full" :value="qrUrl" :size="qrSize" />
|
|
</div>
|
|
<div v-else class="p-5 text-gray-400">
|
|
加载中...
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|