feat: 完成 4 个TabBar 页面初版样式修改
This commit is contained in:
R524809
+140
-124
@@ -1,169 +1,185 @@
|
||||
import { CATEGORIES } from '../../core/data/categories';
|
||||
import { AGE_BANDS, AgeBandKey } from '../../core/data/difficulty';
|
||||
import { NAV_INNER_PX } from '../../utils/navMetrics';
|
||||
import {
|
||||
HOME_CURRENT_CAPABILITY_DATA,
|
||||
type HomeDisplayItem,
|
||||
type HomeDisplaySection,
|
||||
} from './home.data';
|
||||
|
||||
const CATEGORY_TABS = [
|
||||
{ id: 'all', name: '全部' },
|
||||
...CATEGORIES.map((c) => ({ id: c.id, name: c.name })),
|
||||
];
|
||||
type AgeBandKey = string;
|
||||
|
||||
const AGE_BAND_ICONS = ['🌱', '🚀', '🎓', '🧠', '🏆'] as const;
|
||||
|
||||
type HomeTrackCard = {
|
||||
type HomeTab = {
|
||||
id: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
type HomeAgeBandView = {
|
||||
key: string;
|
||||
label: string;
|
||||
desc: string;
|
||||
path: string;
|
||||
icon: string;
|
||||
};
|
||||
|
||||
type HomeDisplayItemView = HomeDisplayItem & {
|
||||
topBg: string;
|
||||
};
|
||||
|
||||
const MOCK_MATH_TRACK: HomeTrackCard[] = [
|
||||
{
|
||||
id: 'm1',
|
||||
title: '认识数字1-10',
|
||||
subtitle: '启蒙第一课',
|
||||
icon: '🔢',
|
||||
topBg: '#fff3c4',
|
||||
},
|
||||
{
|
||||
id: 'm2',
|
||||
title: '形状对对碰',
|
||||
subtitle: '空间感训练',
|
||||
icon: '📐',
|
||||
topBg: '#f5e6dc',
|
||||
},
|
||||
{
|
||||
id: 'm3',
|
||||
title: '数量比一比',
|
||||
subtitle: '数感小游戏',
|
||||
icon: '⚖️',
|
||||
topBg: '#d8f0d0',
|
||||
},
|
||||
{
|
||||
id: 'm4',
|
||||
title: '规律找一找',
|
||||
subtitle: '逻辑思维',
|
||||
icon: '🔍',
|
||||
topBg: '#e8f4ff',
|
||||
},
|
||||
{
|
||||
id: 'm5',
|
||||
title: '简单加减',
|
||||
subtitle: '动手练一练',
|
||||
icon: '➕',
|
||||
topBg: '#fce4ec',
|
||||
},
|
||||
];
|
||||
type HomeDisplaySectionView = HomeDisplaySection & {
|
||||
anchorId: string;
|
||||
items: HomeDisplayItemView[];
|
||||
};
|
||||
|
||||
const MOCK_CHINESE_TRACK: HomeTrackCard[] = [
|
||||
{
|
||||
id: 'c1',
|
||||
title: '基础笔画连连看',
|
||||
subtitle: '书法初体验',
|
||||
icon: '🖌',
|
||||
topBg: '#f5e6dc',
|
||||
},
|
||||
{
|
||||
id: 'c2',
|
||||
title: '看图识汉字',
|
||||
subtitle: '字形联想',
|
||||
icon: '📖',
|
||||
topBg: '#d8f0d0',
|
||||
},
|
||||
{
|
||||
id: 'c3',
|
||||
title: '拼音小闯关',
|
||||
subtitle: '声母韵母',
|
||||
icon: '🔤',
|
||||
topBg: '#fff3c4',
|
||||
},
|
||||
{
|
||||
id: 'c4',
|
||||
title: '词语搭配',
|
||||
subtitle: '词汇积累',
|
||||
icon: '✏️',
|
||||
topBg: '#e8f4ff',
|
||||
},
|
||||
{
|
||||
id: 'c5',
|
||||
title: '古诗诵读',
|
||||
subtitle: '语感培养',
|
||||
icon: '🎵',
|
||||
topBg: '#fce4ec',
|
||||
},
|
||||
];
|
||||
const AGE_BAND_ICONS = ['🌱', '🚀', '🎓', '🧠', '🏆'] as const;
|
||||
|
||||
const MOCK_HOT_RECOMMENDS = [
|
||||
{
|
||||
id: 'hot-1',
|
||||
title: '100以内的加减法',
|
||||
desc: '让算术变得像游戏一样简单',
|
||||
tag: '数学',
|
||||
score: '4.8',
|
||||
emoji: '🍊',
|
||||
},
|
||||
{
|
||||
id: 'hot-2',
|
||||
title: '创意涂鸦大作战',
|
||||
desc: '释放孩子的艺术想象力',
|
||||
tag: '艺术',
|
||||
score: '4.9',
|
||||
emoji: '🎨',
|
||||
},
|
||||
] as const;
|
||||
const CATEGORY_TOP_BG: Record<HomeDisplayItem['category'], string> = {
|
||||
math: '#fff3c4',
|
||||
chinese: '#d8f0d0',
|
||||
english: '#e8f4ff',
|
||||
puzzle: '#f5e6dc',
|
||||
craft: '#fce4ec',
|
||||
};
|
||||
|
||||
const { statusBarHeight } = wx.getWindowInfo();
|
||||
const SECTION_ANCHOR_PREFIX = 'section-';
|
||||
const TAB_BAR_PATHS = new Set([
|
||||
'/pages/home/home',
|
||||
'/pages/age/age',
|
||||
'/pages/favorites/favorites',
|
||||
'/pages/profile/profile',
|
||||
]);
|
||||
|
||||
function toItemView(item: HomeDisplayItem): HomeDisplayItemView {
|
||||
return {
|
||||
...item,
|
||||
topBg: CATEGORY_TOP_BG[item.category],
|
||||
};
|
||||
}
|
||||
|
||||
function sortSectionsByTabs(
|
||||
tabs: readonly { id: string }[],
|
||||
sections: HomeDisplaySection[],
|
||||
): HomeDisplaySectionView[] {
|
||||
const orderMap = tabs.reduce<Record<string, number>>((acc, tab, index) => {
|
||||
acc[tab.id] = index;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return [...sections]
|
||||
.sort((a, b) => {
|
||||
const aOrder = orderMap[a.id];
|
||||
const bOrder = orderMap[b.id];
|
||||
// 注意：0 需要保留（不能用 || 进行兜底）
|
||||
return (aOrder ?? 999) - (bOrder ?? 999);
|
||||
})
|
||||
.map((section) => ({
|
||||
...section,
|
||||
anchorId: `${SECTION_ANCHOR_PREFIX}${section.id}`,
|
||||
items: section.items.map(toItemView),
|
||||
}));
|
||||
}
|
||||
|
||||
function navigateByPath(path?: string, fallbackTitle?: string) {
|
||||
if (!path) {
|
||||
wx.showToast({
|
||||
title: fallbackTitle ? `${fallbackTitle} 即将上线` : '即将上线',
|
||||
icon: 'none',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (TAB_BAR_PATHS.has(path)) {
|
||||
wx.switchTab({ url: path });
|
||||
return;
|
||||
}
|
||||
|
||||
wx.navigateTo({ url: path });
|
||||
}
|
||||
|
||||
const win = wx.getWindowInfo();
|
||||
const HOME_DATA = HOME_CURRENT_CAPABILITY_DATA;
|
||||
const HOME_TABS: HomeTab[] = HOME_DATA.categoryTabs.map((item) => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
}));
|
||||
const HOME_SECTIONS = sortSectionsByTabs(HOME_TABS, HOME_DATA.sections);
|
||||
console.log('HOME_DATA', HOME_DATA);
|
||||
console.log('HOME_SECTIONS', HOME_SECTIONS);
|
||||
|
||||
Page({
|
||||
data: {
|
||||
statusBarHeight,
|
||||
tabs: CATEGORY_TABS,
|
||||
statusBarHeight: win.statusBarHeight,
|
||||
navBlockHeight: win.statusBarHeight + NAV_INNER_PX,
|
||||
searchPlaceholder: HOME_DATA.searchPlaceholder,
|
||||
tabs: HOME_TABS,
|
||||
activeTab: 'all',
|
||||
ageBands: AGE_BANDS.map((item, idx) => ({
|
||||
ageBands: HOME_DATA.ageBands.map((item, idx) => ({
|
||||
...item,
|
||||
icon: AGE_BAND_ICONS[idx] || '🌟',
|
||||
})),
|
||||
activeAgeBand: AGE_BANDS[0].key as AgeBandKey,
|
||||
hotRecommends: [...MOCK_HOT_RECOMMENDS],
|
||||
mathTrackCards: MOCK_MATH_TRACK,
|
||||
chineseTrackCards: MOCK_CHINESE_TRACK,
|
||||
})) as HomeAgeBandView[],
|
||||
activeAgeBand: HOME_DATA.ageBands[0]?.key || ('3-4' as AgeBandKey),
|
||||
featuredItems: HOME_DATA.featured.map(toItemView),
|
||||
hotRecommends: HOME_DATA.hot.map(toItemView),
|
||||
sections: HOME_SECTIONS,
|
||||
},
|
||||
|
||||
onTabChange(e: WechatMiniprogram.CustomEvent) {
|
||||
this.setData({ activeTab: e.detail.id });
|
||||
const id = e.detail.id as string | undefined;
|
||||
if (!id) return;
|
||||
|
||||
this.setData({ activeTab: id });
|
||||
|
||||
if (id === 'all') {
|
||||
wx.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: 400,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
wx.pageScrollTo({
|
||||
selector: `#${SECTION_ANCHOR_PREFIX}${id}`,
|
||||
duration: 400,
|
||||
offsetTop: -(win.statusBarHeight + NAV_INNER_PX + 24),
|
||||
});
|
||||
},
|
||||
|
||||
onTapAgeBand(e: WechatMiniprogram.TouchEvent) {
|
||||
const key = e.currentTarget.dataset.key as AgeBandKey | undefined;
|
||||
const path = e.currentTarget.dataset.path as string | undefined;
|
||||
if (!key) return;
|
||||
this.setData({ activeAgeBand: key });
|
||||
navigateByPath(path, '分龄内容');
|
||||
},
|
||||
|
||||
onTapFeatured(e: WechatMiniprogram.TouchEvent) {
|
||||
const path = e.currentTarget.dataset.path as string | undefined;
|
||||
const title = e.currentTarget.dataset.title as string | undefined;
|
||||
navigateByPath(path, title);
|
||||
},
|
||||
|
||||
onTapHotRecommend(e: WechatMiniprogram.TouchEvent) {
|
||||
const path = e.currentTarget.dataset.path as string | undefined;
|
||||
const title = e.currentTarget.dataset.title as string | undefined;
|
||||
if (!title) return;
|
||||
wx.showToast({ title: `已选择：${title}`, icon: 'none' });
|
||||
navigateByPath(path, title);
|
||||
},
|
||||
|
||||
onTapAgeMore() {
|
||||
wx.showToast({ title: '分龄全部 即将上线', icon: 'none' });
|
||||
wx.switchTab({ url: '/pages/age/age' });
|
||||
},
|
||||
|
||||
onTapHotMore() {
|
||||
wx.showToast({ title: '热门推荐 即将上线', icon: 'none' });
|
||||
wx.showToast({ title: '热门内容整理中', icon: 'none' });
|
||||
},
|
||||
|
||||
onTapTrackMore(e: WechatMiniprogram.TouchEvent) {
|
||||
const category = e.currentTarget.dataset.category as string | undefined;
|
||||
if (!category) return;
|
||||
wx.navigateTo({
|
||||
url: `/pages/category/category?category=${category}`,
|
||||
});
|
||||
const path = e.currentTarget.dataset.path as string | undefined;
|
||||
const title = e.currentTarget.dataset.title as string | undefined;
|
||||
navigateByPath(path, title);
|
||||
},
|
||||
|
||||
onTapTrackCard(e: WechatMiniprogram.TouchEvent) {
|
||||
const path = e.currentTarget.dataset.path as string | undefined;
|
||||
const title = e.currentTarget.dataset.title as string | undefined;
|
||||
if (!title) return;
|
||||
wx.showToast({ title, icon: 'none' });
|
||||
navigateByPath(path, title);
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
|
||||
Reference in New Issue
Block a user