96 lines
2.6 KiB
Vue
96 lines
2.6 KiB
Vue
<!-- 二维码弹窗 -->
|
|
<template>
|
|
<div>
|
|
<el-dialog title="微信登录" v-model="visible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" @before-close="close">
|
|
<qrcode-vue :value="qrcode" :size="300" :margin="2" colorDark="#2c3e50" colorLight="#f8f9fa" errorCorrectionLevel="H" />
|
|
<!-- 扫码状态 -->
|
|
<div class="text-center">
|
|
<span>{{ checkLoginStatus }}</span>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { getLoginQrcode, checkScanStatus } from '~/api/personal-center/index'
|
|
import QrcodeVue from 'qrcode.vue'
|
|
|
|
const visible = defineModel('visible', {
|
|
default: false,
|
|
})
|
|
|
|
const checkLoginStatus = computed(() => {
|
|
const type = {
|
|
EXPIRED: '已过期',
|
|
CONFIRMED: '已确认',
|
|
SCANNED: '已扫码',
|
|
WAITING: '等待扫码',
|
|
SUCCESS: '登录成功',
|
|
}
|
|
if (checkLoginInfo.value) {
|
|
return type[checkLoginInfo.value.status as keyof typeof type]
|
|
}
|
|
return '微信扫码登录'
|
|
})
|
|
|
|
const qrcode = ref('')
|
|
const sceneStr = ref('')
|
|
const timer = ref<any>()
|
|
const getQrcode = async () => {
|
|
// 获取二维码
|
|
const res = await getLoginQrcode()
|
|
if (res.code === 0) {
|
|
const jsonurl = res.data.qrCodeUrl
|
|
const qrCodeUrl = jsonurl ? JSON.parse(jsonurl) : ''
|
|
|
|
if (qrCodeUrl?.qrCodeUrl) {
|
|
qrcode.value = qrCodeUrl.qrCodeUrl
|
|
sceneStr.value = res.data.sceneStr
|
|
|
|
// 轮询检查扫码状态
|
|
getCheckScanStatus()
|
|
}
|
|
}
|
|
}
|
|
|
|
const checkLoginInfo = ref<{ status: string; openId: string | null; message: string }>()
|
|
const getCheckScanStatus = async () => {
|
|
// 轮询检查扫码状态
|
|
timer.value = setInterval(async () => {
|
|
const response = await checkScanStatus({ sceneStr: sceneStr.value })
|
|
if (response.code === 0) {
|
|
checkLoginInfo.value = response.data
|
|
if (checkLoginInfo.value.status === 'SCANNED') {
|
|
// 扫码成功
|
|
// visible.value = false
|
|
clearInterval(timer.value)
|
|
} else if (checkLoginInfo.value.status === 'EXPIRED') {
|
|
// 二维码过期
|
|
clearInterval(timer.value)
|
|
// 重新获取二维码
|
|
getQrcode()
|
|
}
|
|
}
|
|
}, 5000)
|
|
}
|
|
|
|
const close = () => {
|
|
visible.value = false
|
|
qrcode.value = ''
|
|
}
|
|
|
|
onMounted(() => {
|
|
// 获取二维码
|
|
getQrcode()
|
|
})
|
|
// 关闭定时器
|
|
onUnmounted(() => {
|
|
clearInterval(timer.value)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.el-dialog__body) {
|
|
text-align: center !important;
|
|
}
|
|
</style>
|