Files
fitness-coach/miniprogram/pages/index/index.wxml
wm b6e2093c82 feat: 分类浏览体验优化
- 后端 CategoryItem 新增 sample 字段,每个器械/部位分类附首条动作代表图(720 JPG 海报),前端网格无需点进详情即可预览
- 首页『按器械浏览』『按部位浏览』网格 tile 改为图文卡片,展示分类代表图
- filter-bar 内联改为一行可横滑的分类 chips + 末尾『全部类型』入口;点开面板展开全部,选中项自动置顶
2026-07-26 12:45:28 +08:00

149 lines
5.6 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<view class="home" style="padding-top: {{statusBarHeight}}px;">
<!-- Hero -->
<view class="hero">
<view class="hero__eyebrow">FITCOACH · 智能健身教练</view>
<view class="hero__title">今天,练点什么?</view>
<view class="hero__sub">精准匹配你的目标肌群,让每一次训练都更高效</view>
<view class="search-pill" bindtap="onSearch">
<fc-icon name="search" size="28" color="var(--text-2)" />
<text class="search-pill__ph">搜索动作 / 器械 / 部位</text>
</view>
<view class="cta" bindtap="goRecommend">
<fc-icon name="sparkles" size="24" />
<text class="cta__txt">智能推荐</text>
<text class="cta__arrow"></text>
</view>
</view>
<!-- 为你准备(登录后个性化) -->
<view class="section personal" wx:if="{{isLogin}}">
<view class="personal__head">
<view class="personal__titlewrap">
<view class="eyebrow">FOR YOU</view>
<view class="personal__hi">{{greeting}}准备好训练了吗?</view>
</view>
<fc-icon name="sparkles" size="22" color="var(--accent)" />
</view>
<view class="personal__block" wx:if="{{myPlans.length}}">
<view class="personal__sub">我的计划</view>
<view class="plan-row">
<view class="plan-chip" wx:for="{{myPlans}}" wx:key="id" data-id="{{item.id}}" bindtap="onPlanTap">
<fc-icon name="clipboard-list" size="20" color="var(--accent)" />
<view class="plan-chip__body">
<text class="plan-chip__name">{{item.name}}</text>
<text class="plan-chip__meta">{{item.count}} 个动作</text>
</view>
</view>
</view>
</view>
<view class="personal__block" wx:if="{{todayRecommend.length}}">
<view class="personal__sub">今日推荐</view>
<view class="rec-row">
<view class="rec-item" wx:for="{{todayRecommend}}" wx:key="id" data-id="{{item.id}}" catch:tap="onExercise">
<view class="rec-item__body">
<text class="rec-item__name">{{item.name}}</text>
<text class="rec-item__reason">{{item.reason}}</text>
</view>
<fc-icon name="chevron-right" size="18" color="var(--text-3)" />
</view>
</view>
</view>
<view class="personal__block" wx:if="{{myFavorites.length}}">
<view class="personal__sub">我的收藏</view>
<scroll-view scroll-x class="hscroll fav-scroll">
<view class="fav-card" wx:for="{{myFavorites}}" wx:key="id" data-id="{{item.id}}" catch:tap="onExercise">
<image class="fav-card__img" src="{{item.image}}" mode="aspectFill" lazy-load />
<text class="fav-card__name">{{item.displayName || item.name}}</text>
</view>
</scroll-view>
</view>
</view>
<!-- 快捷入口 2x3 -->
<view class="section quick">
<view class="quick__grid">
<view
wx:for="{{quickEntries}}"
wx:key="key"
class="quick__tile"
data-url="{{item.url}}"
bindtap="onQuick">
<fc-icon name="{{item.icon}}" size="28" color="var(--text)" />
<text class="quick__label">{{item.label}}</text>
</view>
</view>
</view>
<!-- 精选动作 横向滑动 -->
<view class="section">
<section-header eyebrow="FEATURED" title="精选动作" subtitle="编辑精选 · 高效入门" action="全部" bind:action="goRecommend" />
<scroll-view wx:if="{{featured.length}}" scroll-x class="hscroll">
<view class="hscroll__item" wx:for="{{featured}}" wx:key="id">
<exercise-card exercise="{{item}}" compact catch:tap="onExercise" />
</view>
</scroll-view>
<view wx:else class="empty">暂无数据</view>
</view>
<!-- 训练组合 横向 -->
<view class="section" wx:if="{{collections.length}}">
<section-header eyebrow="PROGRAMS" title="训练组合" subtitle="一键开启主题训练" />
<scroll-view scroll-x class="chip-scroll">
<view
wx:for="{{collections}}"
wx:key="slug"
class="prog"
style="background: {{item.color}}22; border-color: {{item.color}}55;"
data-slug="{{item.slug}}"
bindtap="onCollection">
<fc-icon name="{{item.icon}}" size="36" color="{{item.color}}" />
<text class="prog__name" style="color: {{item.color}};">{{item.name}}</text>
</view>
</scroll-view>
</view>
<!-- 按部位浏览 -->
<view class="section">
<section-header eyebrow="BY BODY PART" title="按部位浏览" subtitle="选择你的目标区域" />
<view class="bp-grid">
<view
wx:for="{{bodyParts}}"
wx:key="value"
class="bp"
data-value="{{item.value}}"
data-label="{{item.label}}"
bindtap="onScanBodyPart">
<image class="bp__img" src="{{item.sample}}" mode="aspectFill" lazy-load />
<text class="bp__label">{{item.label}}</text>
<text class="bp__count">{{item.count}} 个动作</text>
</view>
</view>
</view>
<!-- 热门器械(网格,与按部位浏览一致) -->
<view class="section" wx:if="{{equipment.length}}">
<section-header eyebrow="EQUIPMENT" title="按器械浏览" subtitle="选择你的训练器械" />
<view class="eq-grid">
<view
wx:for="{{equipment}}"
wx:key="value"
class="eq"
data-value="{{item.value}}"
data-label="{{item.label}}"
bindtap="onScanEquipment">
<image class="eq__img" src="{{item.sample}}" mode="aspectFill" lazy-load />
<text class="eq__label">{{item.label}}</text>
<text class="eq__count">{{item.count}} 个动作</text>
</view>
</view>
</view>
<view style="height: 160rpx;"></view>
<bottom-nav active="home" />
</view>