feat:生产初版页面

2026-03-26 17:33:04 +08:00
parent 3aaf340781
commit dc5e057cb3
63 changed files with 2940 additions and 543 deletions
@@ -0,0 +1,8 @@
+{
+    "navigationBarTitleText": "分龄推荐",
+    "navigationBarTextStyle": "black",
+    "navigationBarBackgroundColor": "#ffffff",
+    "backgroundColor": "#F5F5F5",
+    "enablePullDownRefresh": false,
+    "usingComponents": {}
+}
@@ -0,0 +1,108 @@
+.age-page {
+    min-height: 100vh;
+    background: #f5f5f5;
+    padding-bottom: 48rpx;
+    box-sizing: border-box;
+}
+
+.age-hero {
+    background: #fff;
+    padding: 40rpx 32rpx 36rpx;
+    margin-bottom: 24rpx;
+}
+
+.age-hero__title {
+    display: block;
+    font-size: 44rpx;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.88);
+    margin-bottom: 12rpx;
+}
+
+.age-hero__subtitle {
+    display: block;
+    font-size: 26rpx;
+    line-height: 1.5;
+    color: #999;
+}
+
+.age-grid {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    padding: 0 24rpx;
+    box-sizing: border-box;
+}
+
+.age-card {
+    width: calc((100% - 24rpx) / 2);
+    background: #fff;
+    border-radius: 32rpx;
+    overflow: hidden;
+    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
+    box-sizing: border-box;
+}
+
+.age-card__art {
+    height: 160rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.age-card__emoji {
+    font-size: 72rpx;
+    line-height: 1;
+}
+
+.age-card__body {
+    padding: 24rpx 24rpx 28rpx;
+}
+
+.age-card__label {
+    display: block;
+    font-size: 32rpx;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.88);
+    margin-bottom: 8rpx;
+}
+
+.age-card__desc {
+    display: block;
+    font-size: 24rpx;
+    color: #999;
+    margin-bottom: 12rpx;
+}
+
+.age-card__count {
+    display: block;
+    font-size: 22rpx;
+    color: #ccc;
+}
+
+.age-tip {
+    margin: 40rpx 24rpx 0;
+    background: #fff;
+    border-radius: 24rpx;
+    padding: 28rpx 24rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 20rpx;
+    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
+    box-sizing: border-box;
+}
+
+.age-tip__duck {
+    font-size: 64rpx;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.age-tip__text {
+    flex: 1;
+    font-size: 26rpx;
+    line-height: 1.55;
+    color: rgba(0, 0, 0, 0.65);
+}
@@ -0,0 +1,44 @@
+import { ALL_WORKSHEETS, getWorksheetsByAge } from '../../core/data/worksheets';
+
+interface AgeGroup {
+    label: string;
+    desc: string;
+    emoji: string;
+    minAge: number;
+    maxAge: number;
+    count: number;
+    gradient: string;
+}
+
+Page({
+    data: {
+        ageGroups: [] as AgeGroup[],
+    },
+
+    onLoad() {
+        const groups = [
+            { label: '3-4 岁', desc: '启蒙认知', emoji: '👶', minAge: 3, maxAge: 4, gradient: 'linear-gradient(135deg, #fff9c4, #fff176)' },
+            { label: '4-5 岁', desc: '基础练习', emoji: '🧒', minAge: 4, maxAge: 5, gradient: 'linear-gradient(135deg, #c8e6c9, #81c784)' },
+            { label: '5-6 岁', desc: '能力提升', emoji: '👦', minAge: 5, maxAge: 6, gradient: 'linear-gradient(135deg, #bbdefb, #64b5f6)' },
+            { label: '6-7 岁', desc: '幼小衔接', emoji: '👧', minAge: 6, maxAge: 7, gradient: 'linear-gradient(135deg, #e1bee7, #ba68c8)' },
+            { label: '7-8 岁', desc: '巩固挑战', emoji: '🎒', minAge: 7, maxAge: 8, gradient: 'linear-gradient(135deg, #ffccbc, #ff8a65)' },
+        ];
+
+        const ageGroups = groups.map((g) => ({
+            ...g,
+            count: getWorksheetsByAge(ALL_WORKSHEETS, g.minAge).length,
+        }));
+
+        this.setData({ ageGroups });
+    },
+
+    onAgeCardTap(e: WechatMiniprogram.TouchEvent) {
+        const minAge = Number(e.currentTarget.dataset.minAge);
+        const maxAge = Number(e.currentTarget.dataset.maxAge);
+        if (Number.isNaN(minAge) || Number.isNaN(maxAge)) return;
+        const title = `${minAge}-${maxAge}岁推荐`;
+        wx.navigateTo({
+            url: `/pages/category/category?minAge=${minAge}&maxAge=${maxAge}&title=${encodeURIComponent(title)}`,
+        });
+    },
+});
@@ -0,0 +1,31 @@
+<view class="age-page">
+    <view class="age-hero">
+        <text class="age-hero__title">分龄推荐</text>
+        <text class="age-hero__subtitle">按年龄段挑选适合的练习单，循序渐进更省心</text>
+    </view>
+
+    <view class="age-grid">
+        <view
+            wx:for="{{ageGroups}}"
+            wx:key="label"
+            class="age-card"
+            bindtap="onAgeCardTap"
+            data-min-age="{{item.minAge}}"
+            data-max-age="{{item.maxAge}}"
+        >
+            <view class="age-card__art" style="background: {{item.gradient}}">
+                <text class="age-card__emoji">{{item.emoji}}</text>
+            </view>
+            <view class="age-card__body">
+                <text class="age-card__label">{{item.label}}</text>
+                <text class="age-card__desc">{{item.desc}}</text>
+                <text class="age-card__count">{{item.count}} 个练习</text>
+            </view>
+        </view>
+    </view>
+
+    <view class="age-tip">
+        <text class="age-tip__duck">🦆</text>
+        <text class="age-tip__text">建议家长根据孩子当前能力微调难度，不必严格按年龄划分哦～</text>
+    </view>
+</view>