feat: 开发收藏和下载功能
This commit is contained in:
R524809
@@ -1,27 +1,24 @@
|
||||
import { NAV_INNER_PX } from '../../utils/navMetrics';
|
||||
import { getFavoriteList, removeFavorite } from '../../utils/favorites';
|
||||
import { getDownloadLogs } from '../../utils/downloadLogs';
|
||||
import type { FavoriteRecord } from '../../utils/favorites';
|
||||
import type { DownloadLogRecord } from '../../utils/downloadLogs';
|
||||
|
||||
const { statusBarHeight } = wx.getWindowInfo();
|
||||
const NAV_BLOCK_HEIGHT = statusBarHeight + NAV_INNER_PX;
|
||||
|
||||
type FavoritesTab = 'favorites' | 'downloads';
|
||||
|
||||
type FavoriteItem =
|
||||
| {
|
||||
id: string;
|
||||
variant: 'standard';
|
||||
title: string;
|
||||
metaLine: string;
|
||||
stars: number;
|
||||
timeBadge: string;
|
||||
thumb: string;
|
||||
}
|
||||
| {
|
||||
id: string;
|
||||
variant: 'featured';
|
||||
title: string;
|
||||
metaLine: string;
|
||||
tags: string[];
|
||||
};
|
||||
type FavoriteItem = {
|
||||
id: string;
|
||||
worksheetId: string;
|
||||
variant: 'standard';
|
||||
title: string;
|
||||
metaLine: string;
|
||||
stars: number;
|
||||
timeBadge: string;
|
||||
thumb: string;
|
||||
};
|
||||
|
||||
type DownloadRow = {
|
||||
id: string;
|
||||
@@ -39,88 +36,94 @@ type DownloadSection = {
|
||||
items: DownloadRow[];
|
||||
};
|
||||
|
||||
const MOCK_FAVORITES: FavoriteItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
variant: 'standard',
|
||||
title: '10以内加法',
|
||||
metaLine: '数学启蒙 · 4-6岁 · ',
|
||||
stars: 2,
|
||||
timeBadge: '收藏于 3 天前',
|
||||
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuD7khp0rJABfa9yFrMt9ZgIhAPyN44XmJ2pXNBgCzbgBvwA5ptFZVty013JedVzbE9_VvCQnToN7QETLDKjtiX22igzK-a5h4E8wjKrembFW4eVuk1RsJIbHjx3_cCz0hJ7_t76hF8t-Qdod_5R9sNMor1ZEjf6dGNp6UI_eIBjsN9b22iCTJ2VB-IEh0Rmil6_iC4Og-4I03IcQDV2rTHYIXcZxjiay1IiYGXw3wJ3bfo2SF2N7ZFT00akTgYU-9JyF7xJ6n15Yzc',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
variant: 'standard',
|
||||
title: '图形连连看',
|
||||
metaLine: '逻辑思维 · 3-5岁 · ',
|
||||
stars: 1,
|
||||
timeBadge: '收藏于 5 天前',
|
||||
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBY_0Rr153ZBT4IHcMyFtrcgl-y2ZRyVnOuGecnn7f4PZKoAx2lOuCorsMmfRa72s0JmbXrt4XT3QU1x7cIbZUyhv_EXwCfMaNxtkHc-ymIBIQ5jqm5oiQebrEWH4kjv14JdkCiziT4xzac4TdVN5yqpk7Wlg80QBl_ldDmAQqIgcUeN2PvlVvhmpOYmFeWE2HS3I_e4vV1J8s_cfV9_4g7y8SbxlSfnTmgQNeXrVbcdwaNEAGQWp92Iif0d2pVIqdfuUHO1pTw8oQ',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
variant: 'standard',
|
||||
title: '拼音字母认读',
|
||||
metaLine: '语文基础 · 5-7岁 · ',
|
||||
stars: 3,
|
||||
timeBadge: '收藏于 1 周前',
|
||||
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuC54mXQ8620XwIsWmUHBHJGdmpF8uE4cSYxwR2NLJTsa6gYdTCHz2tqrKbGOye-y0CGgCPPWwJXzEuB2ZYrQ3CWWPlamvbjhTUDYf8yoA9Lyapll1t2w17AqzSHrbBPNFrq931IUCis64b51kslQZoq3c0KslZsBQiky-YSnuE7xUuNsgiF4hOak_ReFFufWE53h1sPkjHFeRM-H34b-e1MCNxGObGPhI0mNlJ_qz0c8aCuS-jdnDocSvIYda-iVcJLWcIT-mO6klw',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
variant: 'featured',
|
||||
title: '趣味英语单词卡',
|
||||
metaLine: '语言学习 · 4-8岁 · ⭐⭐⭐',
|
||||
tags: ['畅销经典', '全彩打印'],
|
||||
},
|
||||
];
|
||||
function mapFavoriteToItem(record: FavoriteRecord): FavoriteItem {
|
||||
const ws = record.worksheet;
|
||||
const title = ws?.title || '未知题型';
|
||||
const category = ws?.category || '';
|
||||
const ageRange = ws ? `${ws.ageMin}-${ws.ageMax}岁` : '';
|
||||
const metaLine = [category, ageRange].filter(Boolean).join(' · ') + ' · ';
|
||||
const difficulty = ws?.difficulty || 0;
|
||||
const timeBadge = formatTimeBadge(record.createdAt);
|
||||
|
||||
const MOCK_DOWNLOADS: DownloadSection[] = [
|
||||
{
|
||||
key: 'today',
|
||||
label: '今天',
|
||||
items: [
|
||||
{
|
||||
id: 'd1',
|
||||
title: '拼音描红 · 声母表',
|
||||
time: '14:32',
|
||||
status: '已保存相册',
|
||||
statusHighlight: true,
|
||||
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBCm6X4rhibw2_WxP-U0dDyOsiYol3y12OnEXHRkPONZYMQBUcr3Grqo1IbwH3sdWPg5jIUeIbr_AEwv_hFwUOMMz9jTIIMc6Pke1bzSvlQcgdDq-zMEIU4A--IQFX59ac-8BscCajXZcd4v8rE6JEZFf1-aztKclPTkE_Rrgj-nbVCy5V6bOE6yDOB67VdTbcqiOdaFN18ju_MgWVo3FQZLwIUZOBahkPl0vDIKA0mkiaGK9eiFpfnERYxkYG3eWJZ40umTYp46Jo',
|
||||
},
|
||||
{
|
||||
id: 'd2',
|
||||
title: '趣味口算题卡',
|
||||
time: '09:15',
|
||||
status: '已下载 PDF',
|
||||
statusHighlight: false,
|
||||
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBxNORxN_vftYMLaMjZVscL-o9bZnBrfUi7IAqOrFATIztGV12_0ggwgae-fmk0cORWtysZWJJDcAzj0NEyniFxbREoGDuq9U4kytprJkA70_k0MCzPgStmq0bRwu1Gx1j4peglFam8PH6IlPvOMbiHQ7-fMFfYTSBtA1p7Dp06NDOzS2VrMlF8VxjEgihVmhHUrHePVvXlktUkXBKNzrXEXrogO3iOyouTUKyvJh0TeChKUv3KohMoD5ol7C3fjBhdHf7QD4StOQ4',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'yesterday',
|
||||
label: '昨天',
|
||||
items: [
|
||||
{
|
||||
id: 'd3',
|
||||
title: '汉字笔画基础训练',
|
||||
time: '16:40',
|
||||
status: '已发送邮件',
|
||||
statusHighlight: false,
|
||||
placeholder: 'draw',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
return {
|
||||
id: record._id,
|
||||
worksheetId: record.worksheetId,
|
||||
variant: 'standard',
|
||||
title,
|
||||
metaLine,
|
||||
stars: Math.min(difficulty, 3),
|
||||
timeBadge,
|
||||
thumb: ws?.previewImg || '',
|
||||
};
|
||||
}
|
||||
|
||||
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));
|
||||
|
||||
if (days === 0) return '收藏于今天';
|
||||
if (days === 1) return '收藏于昨天';
|
||||
if (days < 7) return `收藏于 ${days} 天前`;
|
||||
if (days < 30) return `收藏于 ${Math.floor(days / 7)} 周前`;
|
||||
return `收藏于 ${Math.floor(days / 30)} 个月前`;
|
||||
}
|
||||
|
||||
function groupDownloadsByDate(records: DownloadLogRecord[]): DownloadSection[] {
|
||||
const now = new Date();
|
||||
const todayStr = formatDateKey(now);
|
||||
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
||||
const yesterdayStr = formatDateKey(yesterday);
|
||||
|
||||
const groups: Record<string, { label: string; items: DownloadRow[] }> = {};
|
||||
|
||||
for (const record of records) {
|
||||
const date = new Date(record.createdAt);
|
||||
const key = formatDateKey(date);
|
||||
let label: string;
|
||||
|
||||
if (key === todayStr) {
|
||||
label = '今天';
|
||||
} else if (key === yesterdayStr) {
|
||||
label = '昨天';
|
||||
} else {
|
||||
label = `${date.getMonth() + 1}月${date.getDate()}日`;
|
||||
}
|
||||
|
||||
if (!groups[key]) {
|
||||
groups[key] = { label, items: [] };
|
||||
}
|
||||
|
||||
const ws = record.worksheet;
|
||||
groups[key].items.push({
|
||||
id: record._id,
|
||||
title: ws?.title || '未知题型',
|
||||
time: `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`,
|
||||
status: '已保存相册',
|
||||
statusHighlight: true,
|
||||
thumb: ws?.previewImg,
|
||||
});
|
||||
}
|
||||
|
||||
return Object.keys(groups).map((key) => ({
|
||||
key,
|
||||
label: groups[key].label,
|
||||
items: groups[key].items,
|
||||
}));
|
||||
}
|
||||
|
||||
function formatDateKey(date: Date): string {
|
||||
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
favScrollHeight: 0,
|
||||
activeTab: 'favorites' as FavoritesTab,
|
||||
favoriteList: MOCK_FAVORITES as FavoriteItem[],
|
||||
downloadSections: MOCK_DOWNLOADS as DownloadSection[],
|
||||
favoriteList: [] as FavoriteItem[],
|
||||
downloadSections: [] as DownloadSection[],
|
||||
loading: false,
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
@@ -136,6 +139,7 @@ Page({
|
||||
this.setData({ activeTab: tab });
|
||||
wx.removeStorageSync('favorites_active_tab');
|
||||
}
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
onTabSwitch(e: WechatMiniprogram.TouchEvent) {
|
||||
@@ -144,6 +148,24 @@ Page({
|
||||
this.setData({ activeTab: tab });
|
||||
},
|
||||
|
||||
async loadData() {
|
||||
this.setData({ loading: true });
|
||||
await Promise.all([this.loadFavorites(), this.loadDownloads()]);
|
||||
this.setData({ loading: false });
|
||||
},
|
||||
|
||||
async loadFavorites() {
|
||||
const records = await getFavoriteList();
|
||||
const list = records.map((r) => mapFavoriteToItem(r));
|
||||
this.setData({ favoriteList: list });
|
||||
},
|
||||
|
||||
async loadDownloads() {
|
||||
const records = await getDownloadLogs();
|
||||
const sections = groupDownloadsByDate(records);
|
||||
this.setData({ downloadSections: sections });
|
||||
},
|
||||
|
||||
onDiscoverTap() {
|
||||
wx.switchTab({ url: '/pages/home/home' });
|
||||
},
|
||||
@@ -152,12 +174,24 @@ Page({
|
||||
wx.showToast({ title: '搜索功能开发中', icon: 'none' });
|
||||
},
|
||||
|
||||
onRemoveFavorite(e: WechatMiniprogram.TouchEvent) {
|
||||
async onRemoveFavorite(e: WechatMiniprogram.TouchEvent) {
|
||||
const id = e.currentTarget.dataset.id as string | undefined;
|
||||
if (!id) return;
|
||||
const list = (this.data.favoriteList as FavoriteItem[]).filter((item) => item.id !== id);
|
||||
|
||||
const item = (this.data.favoriteList as FavoriteItem[]).find(
|
||||
(i) => i.id === id,
|
||||
);
|
||||
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);
|
||||
},
|
||||
|
||||
onClearHistory() {
|
||||
@@ -174,6 +208,9 @@ Page({
|
||||
|
||||
onDownloadMore(e: WechatMiniprogram.TouchEvent) {
|
||||
const id = e.currentTarget.dataset.id as string | undefined;
|
||||
wx.showToast({ title: id ? `更多操作：${id}` : '更多', icon: 'none' });
|
||||
wx.showToast({
|
||||
title: id ? `更多操作：${id}` : '更多',
|
||||
icon: 'none',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user