diff --git a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue index eaf6bd5..6303680 100644 --- a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue +++ b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue @@ -31,19 +31,19 @@

失败原因:{{ failReason || '-' }}

@@ -62,8 +62,10 @@ import icon1 from '@/assets/img/media-account/icon-warn.png'; import icon2 from '@/assets/img/media-account/icon-feedback-success.png'; import icon3 from '@/assets/img/media-account/icon-feedback-fail.png'; +const OVERDUE_TIME = 30000; // 失效时间 + const visible = ref(false); -const isOverdue = ref(false); +const isOverdue = ref(false); // 二维码失效 const isLoading = ref(false); const isCompleted = ref(false); const isSuccess = ref(false); @@ -73,6 +75,7 @@ const id = ref(''); const imgUrl = ref(''); let progressTimer = null; +let overdueTimer = null; const notCompleted = computed(() => { return !isCompleted.value; @@ -84,7 +87,7 @@ const confirmBtnText = computed(() => { const open = (accountId) => { id.value = accountId; - handleAuthorizedImage(); + getAuthorizedQrCode(); visible.value = true; }; const close = () => { @@ -95,14 +98,21 @@ const close = () => { failReason.value = ''; progress.value = 0; id.value = ''; - + clearFakeProgressTimer(); + clearOverdueTimer(); visible.value = false; }; -const handleAuthorizedImage = async () => { +const getAuthorizedQrCode = async () => { const { code, data } = await getAuthorizedImage(id.value); if (code === 200) { imgUrl.value = data.url; + overdueTimer = null; + + // 约定:后端限制40s内必须扫码,前端定30s后失效 + overdueTimer = setTimeout(() => { + isOverdue.value = true; + }, OVERDUE_TIME); } }; const startLoading = async () => { @@ -136,18 +146,27 @@ const clearFakeProgressTimer = () => { progressTimer = null; } }; +const clearOverdueTimer = () => { + if (overdueTimer) { + clearTimeout(overdueTimer); + overdueTimer = null; + } +}; const handleOk = () => { if (notCompleted.value) { + clearOverdueTimer(); + + if (isOverdue.value) { + AMessage.error('二维码已失效,请重新扫码'); + return; + } + startLoading(); return; } }; -onUnmounted(() => { - clearFakeProgressTimer(); -}); - defineExpose({ open, }); diff --git a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue index ef84c93..bdf86ce 100644 --- a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue +++ b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue @@ -9,11 +9,40 @@ title="重新授权" modal-class="reauthorize-account-modal" :mask-closable="false" - :footer="!isLoading" + :footer="taskStep !== TASK_STEP.loading" @close="close" >
-