feat:收藏下载页优化loading逻辑
This commit is contained in:
R524809
@@ -3,6 +3,7 @@ import { getFavoriteList, removeFavorite } from '../../utils/favorites';
|
||||
import { getDownloadLogs } from '../../utils/downloadLogs';
|
||||
import type { FavoriteRecord } from '../../utils/favorites';
|
||||
import type { DownloadLogRecord } from '../../utils/downloadLogs';
|
||||
import { getCategoryName } from '../../core/data/categories';
|
||||
|
||||
const { statusBarHeight } = wx.getWindowInfo();
|
||||
const NAV_BLOCK_HEIGHT = statusBarHeight + NAV_INNER_PX;
|
||||
@@ -12,7 +13,7 @@ type FavoritesTab = 'favorites' | 'downloads';
|
||||
type FavoriteItem = {
|
||||
id: string;
|
||||
worksheetId: string;
|
||||
variant: 'standard';
|
||||
path: string;
|
||||
title: string;
|
||||
metaLine: string;
|
||||
stars: number;
|
||||
@@ -22,7 +23,11 @@ type FavoriteItem = {
|
||||
|
||||
type DownloadRow = {
|
||||
id: string;
|
||||
worksheetId: string;
|
||||
path: string;
|
||||
title: string;
|
||||
metaLine: string;
|
||||
stars: number;
|
||||
time: string;
|
||||
status: string;
|
||||
statusHighlight: boolean;
|
||||
@@ -36,19 +41,34 @@ type DownloadSection = {
|
||||
items: DownloadRow[];
|
||||
};
|
||||
|
||||
function buildWorksheetPath(worksheetId: string, category: string): string {
|
||||
if (category === 'math') {
|
||||
return `/mathPages/mathDraw/mathDraw?id=${worksheetId}`;
|
||||
}
|
||||
if (category === 'puzzle') {
|
||||
return `/focusPages/focusDraw/focusDraw?id=${worksheetId}`;
|
||||
}
|
||||
if (category === 'english') {
|
||||
return `/englishPages/letterTracing/letterTracing?id=${worksheetId}`;
|
||||
}
|
||||
return `/mathPages/mathDraw/mathDraw?id=${worksheetId}`;
|
||||
}
|
||||
|
||||
function mapFavoriteToItem(record: FavoriteRecord): FavoriteItem {
|
||||
const ws = record.worksheet;
|
||||
const title = ws?.title || '未知题型';
|
||||
const category = ws?.category || '';
|
||||
const categoryName = getCategoryName(category);
|
||||
const ageRange = ws ? `${ws.ageMin}-${ws.ageMax}岁` : '';
|
||||
const metaLine = [category, ageRange].filter(Boolean).join(' · ') + ' · ';
|
||||
const metaLine =
|
||||
[categoryName, ageRange].filter(Boolean).join(' · ') + ' · ';
|
||||
const difficulty = ws?.difficulty || 0;
|
||||
const timeBadge = formatTimeBadge(record.createdAt);
|
||||
|
||||
return {
|
||||
id: record._id,
|
||||
worksheetId: record.worksheetId,
|
||||
variant: 'standard',
|
||||
path: buildWorksheetPath(record.worksheetId, category),
|
||||
title,
|
||||
metaLine,
|
||||
stars: Math.min(difficulty, 3),
|
||||
@@ -60,8 +80,19 @@ function mapFavoriteToItem(record: FavoriteRecord): FavoriteItem {
|
||||
function formatTimeBadge(dateStr: string): string {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
|
||||
// 按日历天数计算差值
|
||||
const todayStart = new Date(
|
||||
now.getFullYear(),
|
||||
now.getMonth(),
|
||||
now.getDate(),
|
||||
).getTime();
|
||||
const dateStart = new Date(
|
||||
date.getFullYear(),
|
||||
date.getMonth(),
|
||||
date.getDate(),
|
||||
).getTime();
|
||||
const days = Math.round((todayStart - dateStart) / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (days === 0) return '收藏于今天';
|
||||
if (days === 1) return '收藏于昨天';
|
||||
@@ -96,11 +127,21 @@ function groupDownloadsByDate(records: DownloadLogRecord[]): DownloadSection[] {
|
||||
}
|
||||
|
||||
const ws = record.worksheet;
|
||||
const category = ws?.category || '';
|
||||
const categoryName = getCategoryName(category);
|
||||
const ageRange = ws ? `${ws.ageMin}-${ws.ageMax}岁` : '';
|
||||
const metaLine =
|
||||
[categoryName, ageRange].filter(Boolean).join(' · ') + ' · ';
|
||||
const difficulty = ws?.difficulty || 0;
|
||||
groups[key].items.push({
|
||||
id: record._id,
|
||||
worksheetId: record.worksheetId,
|
||||
path: buildWorksheetPath(record.worksheetId, category),
|
||||
title: ws?.title || '未知题型',
|
||||
metaLine,
|
||||
stars: Math.min(difficulty, 3),
|
||||
time: `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`,
|
||||
status: '已保存相册',
|
||||
status: '已保存到相册',
|
||||
statusHighlight: true,
|
||||
thumb: ws?.previewImg,
|
||||
});
|
||||
@@ -123,7 +164,8 @@ Page({
|
||||
activeTab: 'favorites' as FavoritesTab,
|
||||
favoriteList: [] as FavoriteItem[],
|
||||
downloadSections: [] as DownloadSection[],
|
||||
loading: false,
|
||||
favLoading: false,
|
||||
dlLoading: false,
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
@@ -139,37 +181,68 @@ Page({
|
||||
this.setData({ activeTab: tab });
|
||||
wx.removeStorageSync('favorites_active_tab');
|
||||
}
|
||||
this.loadData();
|
||||
this.setData({ favoriteList: [], downloadSections: [] });
|
||||
this.loadActiveTab();
|
||||
},
|
||||
|
||||
loadActiveTab() {
|
||||
const tab = this.data.activeTab;
|
||||
if (tab === 'favorites' && this.data.favoriteList.length === 0) {
|
||||
this.loadFavorites();
|
||||
} else if (tab === 'downloads' && this.data.downloadSections.length === 0) {
|
||||
this.loadDownloads();
|
||||
}
|
||||
},
|
||||
|
||||
onTabSwitch(e: WechatMiniprogram.TouchEvent) {
|
||||
const tab = e.currentTarget.dataset.tab as FavoritesTab;
|
||||
if (tab !== 'favorites' && tab !== 'downloads') return;
|
||||
if (tab === this.data.activeTab) return;
|
||||
this.setData({ activeTab: tab });
|
||||
},
|
||||
|
||||
async loadData() {
|
||||
this.setData({ loading: true });
|
||||
await Promise.all([this.loadFavorites(), this.loadDownloads()]);
|
||||
this.setData({ loading: false });
|
||||
// 只在数据为空时才请求
|
||||
if (tab === 'favorites' && this.data.favoriteList.length === 0) {
|
||||
this.loadFavorites();
|
||||
} else if (
|
||||
tab === 'downloads' &&
|
||||
this.data.downloadSections.length === 0
|
||||
) {
|
||||
this.loadDownloads();
|
||||
}
|
||||
},
|
||||
|
||||
async loadFavorites() {
|
||||
const records = await getFavoriteList();
|
||||
const list = records.map((r) => mapFavoriteToItem(r));
|
||||
this.setData({ favoriteList: list });
|
||||
this.setData({ favLoading: true });
|
||||
try {
|
||||
const records = await getFavoriteList();
|
||||
this.setData({
|
||||
favoriteList: records.map((r) => mapFavoriteToItem(r)),
|
||||
});
|
||||
} finally {
|
||||
this.setData({ favLoading: false });
|
||||
}
|
||||
},
|
||||
|
||||
async loadDownloads() {
|
||||
const records = await getDownloadLogs();
|
||||
const sections = groupDownloadsByDate(records);
|
||||
this.setData({ downloadSections: sections });
|
||||
this.setData({ dlLoading: true });
|
||||
try {
|
||||
const records = await getDownloadLogs();
|
||||
this.setData({ downloadSections: groupDownloadsByDate(records) });
|
||||
} finally {
|
||||
this.setData({ dlLoading: false });
|
||||
}
|
||||
},
|
||||
|
||||
onDiscoverTap() {
|
||||
wx.switchTab({ url: '/pages/home/home' });
|
||||
},
|
||||
|
||||
onCardTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const path = e.currentTarget.dataset.path as string | undefined;
|
||||
console.log('path:', path);
|
||||
if (!path) return;
|
||||
wx.navigateTo({ url: path });
|
||||
},
|
||||
|
||||
onSearchTap() {
|
||||
wx.showToast({ title: '搜索功能开发中', icon: 'none' });
|
||||
},
|
||||
@@ -183,15 +256,16 @@ Page({
|
||||
);
|
||||
if (!item) return;
|
||||
|
||||
// 乐观更新 UI
|
||||
const list = (this.data.favoriteList as FavoriteItem[]).filter(
|
||||
(i) => i.id !== id,
|
||||
);
|
||||
this.setData({ favoriteList: list });
|
||||
wx.showToast({ title: '已取消收藏', icon: 'none' });
|
||||
|
||||
// 调用云端
|
||||
await removeFavorite(item.worksheetId);
|
||||
try {
|
||||
await removeFavorite(item.worksheetId);
|
||||
const list = (this.data.favoriteList as FavoriteItem[]).filter(
|
||||
(i) => i.id !== id,
|
||||
);
|
||||
this.setData({ favoriteList: list });
|
||||
wx.showToast({ title: '已取消收藏', icon: 'success' });
|
||||
} catch {
|
||||
wx.showToast({ title: '操作失败，请重试', icon: 'none' });
|
||||
}
|
||||
},
|
||||
|
||||
onClearHistory() {
|
||||
|
||||
Reference in New Issue
Block a user