renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 处理二维码生成失败状态

Browse Source
This commit is contained in:
rd
2025-07-04 18:24:52 +08:00
parent 6404924e29
commit b6c7f74a90
2 changed files with 37 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
View File

@ -32,12 +32,15 @@
</template>
<template v-else>
<div class="img-box">
<template v-if="qrCodeLoading">
<template v-if="qrCodeLoading || isFailLoadQrCode">
<div class="relative w-160px h-160px">
<a-image :src="icon1" width="160" height="160" />
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
<icon-loading size="24" class="color-#6D4CFE mb-13px" />
<span class="s2 !color-#6D4CFE">二维码生成中...</span>
<img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
<icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
<span :class="isFailLoadQrCode ? '!color-#F64B31' : '!color-#6D4CFE'" class="s2">{{
isFailLoadQrCode ? '二维码生成失败' : '二维码生成中...'
}}</span>
</div>
<div
class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
@ -70,6 +73,7 @@ import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/
import icon1 from '@/assets/img/media-account/icon-default-qrcode.png';
import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
import icon4 from '@/assets/img/media-account/icon-warn.png';
// 失效时间
@ -85,7 +89,7 @@ const failReason = ref('');
const progress = ref(0);
const id = ref('');
const qrCodeError = ref(false);
const isFailLoadQrCode = ref(false);
const qrCodeUrl = ref('');
const qrCodeLoading = ref(false);
@ -94,6 +98,7 @@ let overdueTimer = null;
let statusPollingTimer = null;
const confirmBtnText = computed(() => {
if (isFailLoadQrCode.value) return '重新生成';
if (!isCompleted.value) return '完成扫码';
return isSuccess.value ? '继续添加' : '重新扫码';
});
@ -112,7 +117,7 @@ const resetTaskFields = () => {
progress.value = 0;
qrCodeUrl.value = '';
qrCodeLoading.value = false;
qrCodeError.value = false;
isFailLoadQrCode.value = false;
};
const close = () => {
resetTaskFields();
@ -137,10 +142,10 @@ const getAuthorizedQrCode = async () => {
isOverdue.value = true;
}, OVERDUE_TIME);
} else {
qrCodeError.value = true;
isFailLoadQrCode.value = true;
}
} catch (error) {
qrCodeError.value = true;
isFailLoadQrCode.value = true;
} finally {
qrCodeLoading.value = false;
}
@ -219,8 +224,14 @@ const clearOverdueTimer = () => {
};
const handleOk = () => {
if (isFailLoadQrCode.value) {
resetTaskFields();
getAuthorizedQrCode();
return;
}
if (!qrCodeUrl.value) {
AMessage.error('二维码生成中，请稍等');
AMessage.warning('二维码生成中，请稍等');
return;
}

26
src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
View File

@ -32,12 +32,15 @@
</template> -->
<!-- <template v-else> -->
<div class="img-box">
<template v-if="qrCodeLoading">
<template v-if="qrCodeLoading || isFailLoadQrCode">
<div class="relative w-160px h-160px">
<a-image :src="icon1" width="160" height="160" />
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
<icon-loading size="24" class="color-#6D4CFE mb-13px" />
<span class="s2 !color-#6D4CFE">二维码生成中...</span>
<img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
<icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
<span :class="isFailLoadQrCode ? '!color-#F64B31' : '!color-#6D4CFE'" class="s2">{{
isFailLoadQrCode ? '二维码生成失败' : '二维码生成中...'
}}</span>
</div>
<div
class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
@ -122,7 +125,7 @@ const failReason = ref('');
const progress = ref(0);
const id = ref('');
const qrCodeError = ref(false);
const isFailLoadQrCode = ref(false);
const qrCodeUrl = ref('');
const qrCodeLoading = ref(false);
@ -136,6 +139,7 @@ let overdueTimer = null;
let statusPollingTimer = null;
const confirmBtnText = computed(() => {
if (isFailLoadQrCode.value) return '重新生成';
if (taskStep.value === TASK_STEP.default) {
// return hasUnsyncData.value ? '确定' : '完成扫码';
return '完成扫码';
@ -162,7 +166,7 @@ const resetTaskFields = () => {
qrCodeUrl.value = '';
qrCodeLoading.value = false;
isNicknameChanged.value = false;
qrCodeError.value = false;
isFailLoadQrCode.value = false;
actionType.value = 1;
taskStep.value = TASK_STEP.default;
};
@ -215,10 +219,10 @@ const getAuthorizedQrCode = async () => {
isOverdue.value = true;
}, OVERDUE_TIME);
} else {
qrCodeError.value = true;
isFailLoadQrCode.value = true;
}
} catch (error) {
qrCodeError.value = true;
isFailLoadQrCode.value = true;
} finally {
qrCodeLoading.value = false;
}
@ -271,10 +275,16 @@ const clearStatusPollingTimer = () => {
const handleOk = () => {
if (taskStep.value === TASK_STEP.default) {
if (isFailLoadQrCode.value) {
resetTaskFields();
getAuthorizedQrCode();
return;
}
clearOverdueTimer();
if (!qrCodeUrl.value) {
AMessage.error('二维码生成中，请稍等');
AMessage.warning('二维码生成中，请稍等');
return;
}
if (isOverdue.value) {