fix: 更新 AliyunAuthDialog 以使用二维码 URL 并调整状态处理逻辑

This commit is contained in:
jxxghp
2025-03-28 13:39:36 +08:00
parent 4f238dc1a3
commit 8aca17f0c6
+17 -22
View File
@@ -1,9 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import QrcodeVue from 'qrcode.vue'
import api from '@/api' import api from '@/api'
// 定义输入 // 定义输入
const props = defineProps({ defineProps({
conf: { conf: {
type: Object as PropType<{ [key: string]: any }>, type: Object as PropType<{ [key: string]: any }>,
required: true, required: true,
@@ -14,13 +13,7 @@ const props = defineProps({
const emit = defineEmits(['done', 'close']) const emit = defineEmits(['done', 'close'])
// 二维码内容 // 二维码内容
const qrCodeContent = ref('') const qrCodeUrl = ref('')
// ck参数
const ck = ref('')
// t参数
const t = ref('')
// 下方的提示信息 // 下方的提示信息
const text = ref('请用阿里云盘 App 扫码') const text = ref('请用阿里云盘 App 扫码')
@@ -42,9 +35,7 @@ async function getQrcode() {
try { try {
const result: { [key: string]: any } = await api.get('/storage/qrcode/alipan') const result: { [key: string]: any } = await api.get('/storage/qrcode/alipan')
if (result.success && result.data) { if (result.success && result.data) {
qrCodeContent.value = result.data.codeContent qrCodeUrl.value = result.data.codeUrl
ck.value = result.data.ck
t.value = result.data.t
timeoutTimer = setTimeout(checkQrcode, 3000) timeoutTimer = setTimeout(checkQrcode, 3000)
} else { } else {
text.value = result.message text.value = result.message
@@ -57,23 +48,21 @@ async function getQrcode() {
// 调用/aliyun/check api验证二维码 // 调用/aliyun/check api验证二维码
async function checkQrcode() { async function checkQrcode() {
try { try {
const result: { [key: string]: any } = await api.get('/storage/check/alipan', { const result: { [key: string]: any } = await api.get('/storage/check/alipan')
params: { ck: ck.value, t: t.value },
})
if (result.success && result.data) { if (result.success && result.data) {
const qrCodeStatus = result.data.qrCodeStatus const qrCodeStatus = result.data.status
text.value = result.data.tip text.value = result.data.tip
if (qrCodeStatus == 'CONFIRMED') { if (qrCodeStatus == 'LoginSuccess') {
// 已确认完成 // 登录成功
alertType.value = 'success' alertType.value = 'success'
handleDone() handleDone()
} else if (qrCodeStatus == 'NEW' || qrCodeStatus == 'SCANED') { } else if (qrCodeStatus == 'WaitLogin' || qrCodeStatus == 'ScanSuccess') {
// 等待登录扫码成功
alertType.value = 'info' alertType.value = 'info'
// 新建、待扫码
clearTimeout(timeoutTimer) clearTimeout(timeoutTimer)
timeoutTimer = setTimeout(checkQrcode, 3000) timeoutTimer = setTimeout(checkQrcode, 3000)
} else { } else {
// 过期或者已取消 // 二维码过期
alertType.value = 'error' alertType.value = 'error'
} }
} else { } else {
@@ -100,7 +89,13 @@ onUnmounted(() => {
<DialogCloseBtn @click="emit('close')" /> <DialogCloseBtn @click="emit('close')" />
<VCardText class="pt-2 flex flex-col items-center"> <VCardText class="pt-2 flex flex-col items-center">
<div class="my-6 shadow-lg rounded text-center p-3 border"> <div class="my-6 shadow-lg rounded text-center p-3 border">
<QrcodeVue class="mx-auto" :value="qrCodeContent" :size="200" /> <VImg class="mx-auto" :src="qrCodeUrl" width="200" height="200">
<template #placeholder>
<div class="w-full h-full">
<VSkeletonLoader class="object-cover aspect-w-1 aspect-h-1" />
</div>
</template>
</VImg>
</div> </div>
<VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text"> <VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
<template #prepend /> <template #prepend />