feat: 公告弹窗优化
This commit is contained in:
@@ -1,11 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
import type { AnnouncementLogDto } from '@/api';
|
||||
import type { CloseType } from '@/stores/modules/announcement';
|
||||
import { getSystemAnnouncements } from '@/api';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useAnnouncementStore } from '@/stores';
|
||||
|
||||
const announcementStore = useAnnouncementStore();
|
||||
const isLoadingData = ref(false);
|
||||
|
||||
const activeTab = ref('activity');
|
||||
|
||||
@@ -73,6 +75,31 @@ function getActivityStatus(activity: AnnouncementLogDto): 'active' | 'expired' {
|
||||
const endTime = new Date(activity.endTime);
|
||||
return now > endTime ? 'expired' : 'active';
|
||||
}
|
||||
|
||||
// 监听弹窗显示状态,每次打开时从后端获取最新数据
|
||||
watch(isDialogVisible, async (newValue) => {
|
||||
if (newValue) {
|
||||
// 弹窗打开时,从后端获取最新数据
|
||||
isLoadingData.value = true;
|
||||
try {
|
||||
const res = await getSystemAnnouncements();
|
||||
if (res && res.data && Array.isArray(res.data)) {
|
||||
announcementStore.setAnnouncementData(res.data);
|
||||
}
|
||||
else {
|
||||
announcementStore.setAnnouncementData([]);
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取系统公告失败:', error);
|
||||
ElMessage.error('获取公告数据失败,请稍后重试');
|
||||
announcementStore.setAnnouncementData([]);
|
||||
}
|
||||
finally {
|
||||
isLoadingData.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -83,7 +110,7 @@ function getActivityStatus(activity: AnnouncementLogDto): 'active' | 'expired' {
|
||||
:close-on-click-modal="true"
|
||||
class="announcement-dialog"
|
||||
>
|
||||
<div class="announcement-dialog-content">
|
||||
<div v-loading="isLoadingData" class="announcement-dialog-content">
|
||||
<el-tabs v-model="activeTab" class="announcement-tabs">
|
||||
<!-- 活动Tab -->
|
||||
<el-tab-pane label="活动" name="activity">
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<!-- 纵向布局作为基础布局 -->
|
||||
<script setup lang="ts">
|
||||
import { getSystemAnnouncements } from '@/api';
|
||||
import SystemAnnouncementDialog from '@/components/SystemAnnouncementDialog/index.vue';
|
||||
import { useSafeArea } from '@/hooks/useSafeArea';
|
||||
import { useWindowWidthObserver } from '@/hooks/useWindowWidthObserver';
|
||||
@@ -29,27 +28,11 @@ useSafeArea({
|
||||
useWindowWidthObserver();
|
||||
|
||||
// 应用加载时检查是否需要显示公告弹窗
|
||||
onMounted(async () => {
|
||||
onMounted(() => {
|
||||
console.log('announcementStore.shouldShowDialog--', announcementStore.shouldShowDialog);
|
||||
// 检查是否应该显示弹窗(只有"关闭一周"且未超过7天才不显示)
|
||||
// 数据获取已移至 SystemAnnouncementDialog 组件内部,每次打开弹窗时都会获取最新数据
|
||||
if (announcementStore.shouldShowDialog) {
|
||||
try {
|
||||
// 从接口获取公告数据(不使用缓存)
|
||||
const res = await getSystemAnnouncements();
|
||||
if (res && res.data && Array.isArray(res.data) && res.data.length > 0) {
|
||||
announcementStore.setAnnouncementData(res.data);
|
||||
}
|
||||
else {
|
||||
// 接口返回成功但数据为空,设置空数组
|
||||
announcementStore.setAnnouncementData([]);
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取系统公告失败:', error);
|
||||
// API失败时设置空数组,仍然显示弹窗(显示错误或空状态)
|
||||
announcementStore.setAnnouncementData([]);
|
||||
}
|
||||
// 无论成功失败都显示弹窗
|
||||
announcementStore.openDialog();
|
||||
}
|
||||
});
|
||||
|
||||
1
Yi.Ai.Vue3/types/import_meta.d.ts
vendored
1
Yi.Ai.Vue3/types/import_meta.d.ts
vendored
@@ -6,6 +6,7 @@ interface ImportMetaEnv {
|
||||
readonly VITE_WEB_ENV: string;
|
||||
readonly VITE_WEB_BASE_API: string;
|
||||
readonly VITE_API_URL: string;
|
||||
readonly VITE_BUILD_COMPRESS: string;
|
||||
readonly VITE_SSO_SEVER_URL: string;
|
||||
readonly VITE_APP_VERSION: string;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user