feat: 器械分类网格化 + 分类页标题防乱码 + 按器械/部位多维度筛选

- 首页『热门器械』由横滑 chips 改为与『按部位浏览』一致的网格
- 分类页 navbar 标题改由本地分类枚举回写,避免外部传入标题乱码
- 分类页新增二级维度多选筛选:器械维度交叉按部位,其余维度交叉按器械
- 后端 exercises.service 支持 equipment/bodyPart 逗号分隔多值 OR 过滤(向后兼容)
This commit is contained in:
2026-07-24 10:28:40 +08:00
parent ec0eb98411
commit 393157e56b
6 changed files with 122 additions and 27 deletions

View File

@@ -124,10 +124,10 @@
</view>
</view>
<!-- 热门器械 -->
<!-- 热门器械(网格,与按部位浏览一致) -->
<view class="section" wx:if="{{equipment.length}}">
<section-header eyebrow="EQUIPMENT" title="热门器械" subtitle="按器械筛选动作" />
<scroll-view scroll-x class="chip-scroll">
<section-header eyebrow="EQUIPMENT" title="按器械浏览" subtitle="选择你的训练器械" />
<view class="eq-grid">
<view
wx:for="{{equipment}}"
wx:key="value"
@@ -135,10 +135,10 @@
data-value="{{item.value}}"
data-label="{{item.label}}"
bindtap="onScanEquipment">
<text class="eq__name">{{item.label}}</text>
<text class="eq__count">{{item.count}}</text>
<text class="eq__label">{{item.label}}</text>
<text class="eq__count">{{item.count}} 个动作</text>
</view>
</scroll-view>
</view>
</view>
<view style="height: 160rpx;"></view>

View File

@@ -100,12 +100,15 @@
.bp__label { font-size: 26rpx; color: var(--text); font-weight: 600; }
.bp__count { font-size: 20rpx; color: var(--text-3); margin-top: 6rpx; }
.eq-grid { display: flex; flex-wrap: wrap; gap: 16rpx; }
.eq {
display: inline-flex; align-items: center; gap: 12rpx;
background: var(--surface-2); border: 1rpx solid var(--line);
border-radius: var(--radius-pill); padding: 16rpx 28rpx; margin-right: 16rpx;
width: calc((100% - 48rpx) / 4);
background: var(--surface); border: 1rpx solid var(--line);
border-radius: var(--radius-sm); padding: 22rpx 12rpx;
display: flex; flex-direction: column; align-items: center;
}
.eq__name { font-size: 26rpx; color: var(--text); }
.eq__count { font-size: 22rpx; color: var(--accent); }
.eq:active { background: var(--surface-2); }
.eq__label { font-size: 26rpx; color: var(--text); font-weight: 600; }
.eq__count { font-size: 20rpx; color: var(--text-3); margin-top: 6rpx; }
.empty { color: var(--text-3); font-size: var(--fs-sm); text-align: center; padding: 40rpx 0; }