feat: 完成分类页开发

2026-04-22 11:18:56 +08:00
parent 28151018ee
commit 3bb8476e93
42 changed files with 1070 additions and 56 deletions
@@ -0,0 +1,151 @@
+import { CATEGORY_DATA, type CategoryItem } from './category.data';
+
+type CategoryTab = {
+    id: string;
+    name: string;
+    icon: string;
+};
+
+type DisplayItem = CategoryItem & {
+    thumbBg: string;
+};
+
+const CATEGORY_BG: Record<string, string> = {
+    math: '#fff3c4',
+    pinyin: '#d8f0d0',
+    puzzle: '#f5e6dc',
+    chinese: '#d8f0d0',
+    english: '#e8f4ff',
+    craft: '#fce4ec',
+};
+
+const ALL_TAB: CategoryTab = { id: 'all', name: '全部', icon: '📋' };
+
+const SIDEBAR_TABS: CategoryTab[] = [
+    ALL_TAB,
+    ...CATEGORY_DATA.categories.map((c) => ({
+        id: c.id,
+        name: c.name,
+        icon: c.icon,
+    })),
+];
+
+function buildAllItems(): DisplayItem[] {
+    const items: DisplayItem[] = [];
+    for (const group of CATEGORY_DATA.categories) {
+        for (const item of group.items) {
+            items.push({
+                ...item,
+                thumbBg: CATEGORY_BG[group.id] ?? '#f0e7d6',
+            });
+        }
+    }
+    return items;
+}
+
+function getItemsByCategory(categoryId: string): DisplayItem[] {
+    if (categoryId === 'all') return buildAllItems();
+    const group = CATEGORY_DATA.categories.find((c) => c.id === categoryId);
+    if (!group) return [];
+    return group.items.map((item) => ({
+        ...item,
+        thumbBg: CATEGORY_BG[group.id] ?? '#f0e7d6',
+    }));
+}
+
+function filterByKeyword(items: DisplayItem[], keyword: string): DisplayItem[] {
+    if (!keyword) return items;
+    const kw = keyword.toLowerCase();
+    return items.filter(
+        (item) =>
+            item.title.toLowerCase().includes(kw) ||
+            item.subtitle.toLowerCase().includes(kw),
+    );
+}
+
+const TAB_BAR_PATHS = new Set([
+    '/pages/home/home',
+    '/pages/category/category',
+    '/pages/age/age',
+    '/pages/favorites/favorites',
+    '/pages/profile/profile',
+]);
+
+Page({
+    data: {
+        searchPlaceholder: CATEGORY_DATA.searchPlaceholder,
+        searchKeyword: '',
+        sidebarTabs: SIDEBAR_TABS,
+        activeCategoryId: 'all',
+        displayItems: buildAllItems() as DisplayItem[],
+        scrollIntoViewId: '',
+    },
+
+    onTapCategory(e: WechatMiniprogram.TouchEvent) {
+        const id = e.currentTarget.dataset.id as string;
+        if (!id || id === this.data.activeCategoryId) return;
+
+        const items = getItemsByCategory(id);
+        const filtered = filterByKeyword(items, this.data.searchKeyword);
+
+        this.setData({
+            activeCategoryId: id,
+            displayItems: filtered,
+            scrollIntoViewId: '',
+        });
+    },
+
+    onSearchInput(e: WechatMiniprogram.Input) {
+        const keyword = (e.detail.value ?? '').trim();
+        const items = getItemsByCategory(this.data.activeCategoryId);
+        const filtered = filterByKeyword(items, keyword);
+
+        this.setData({
+            searchKeyword: keyword,
+            displayItems: filtered,
+        });
+    },
+
+    onClearSearch() {
+        const items = getItemsByCategory(this.data.activeCategoryId);
+        this.setData({
+            searchKeyword: '',
+            displayItems: items,
+        });
+    },
+
+    onTapItem(e: WechatMiniprogram.TouchEvent) {
+        const path = e.currentTarget.dataset.path as string;
+        const title = e.currentTarget.dataset.title as string;
+        const available = e.currentTarget.dataset.available;
+
+        if (!available || !path) {
+            wx.showToast({
+                title: title ? `${title} 即将上线` : '即将上线',
+                icon: 'none',
+            });
+            return;
+        }
+
+        if (TAB_BAR_PATHS.has(path)) {
+            wx.switchTab({ url: path });
+            return;
+        }
+
+        wx.navigateTo({ url: path });
+    },
+
+    onShareAppMessage() {
+        return {
+            title: '涂鸦丫 - 全部练习分类',
+            path: '/pages/category/category',
+        };
+    },
+
+    onShareTimeline() {
+        return {
+            title: '涂鸦丫 - 全部练习分类',
+            query: '',
+        };
+    },
+});