feat(category): 主分类(按器械/按部位)改为多选; filter-bar 内联默认展示几个分类其余收进"全部类型"面板

This commit is contained in:
2026-08-02 22:40:09 +08:00
parent 5744a9a166
commit 16621d9c07
5 changed files with 126 additions and 122 deletions

View File

@@ -29,9 +29,10 @@ Page({
statusBarHeight: 20,
dimension: 'bodyPart',
title: '分类',
value: '',
dimTitle: '分类',
// 主维度支持多选activeValues 为已选 value 数组(空数组 = 全部)
activeValues: [],
values: [],
activeValue: '',
// 二级维度(多维度筛选):进入器械维度时交叉按部位,其余维度交叉按器械
secondaryDim: 'equipment',
secondaryKey: 'equipment',
@@ -50,12 +51,14 @@ Page({
onLoad(query) {
const dimension = query.dimension || 'bodyPart';
const value = query.value || '';
const activeValues = value ? [value] : [];
const secondaryDim = dimension === 'equipment' ? 'bodyPart' : 'equipment';
const title = query.title || labelForDim(dimension);
this.setData({
statusBarHeight: app.globalData.statusBarHeight || 20,
dimension,
value,
activeValues,
dimTitle: labelForDim(dimension),
secondaryDim,
secondaryKey: DIM_MAP[secondaryDim] || 'equipment',
secondaryLabel: SECONDARY_LABEL[secondaryDim] || '器械',
@@ -75,20 +78,23 @@ Page({
const list = (items || []).slice();
// 头部插入「全部」项:明确当前为「全部」
list.unshift({ value: '', label: '全部' });
const activeValue = this.data.value || '';
// 用分类枚举里的干净中文标签回写标题,避免外部传入的标题出现乱码
let title = this.data.title;
if (activeValue) {
const hit = list.find((it) => it.value === activeValue);
const { activeValues } = this.data;
if (activeValues.length === 1) {
const hit = list.find((it) => it.value === activeValues[0]);
if (hit && hit.label) title = hit.label;
} else if (activeValues.length > 1) {
title = `已选 ${activeValues.length}`;
}
// 主维度 items 带 active 标志(供 filter-bar 置顶/内联展示)
const primaryItems = list.map((it) => ({ ...it, active: activeValues.includes(it.value) }));
const secList = (secItems || []).slice().map((it) => ({
...it,
active: this.data.secondarySelected.includes(it.value)
}));
this.setData({
values: list,
activeValue: activeValue,
values: primaryItems,
secondaryList: secList,
title,
loading: false
@@ -99,20 +105,19 @@ Page({
});
},
syncSecondaryActive() {
const sel = this.data.secondarySelected;
const list = this.data.secondaryList.map((it) => ({ ...it, active: sel.includes(it.value) }));
this.setData({ secondaryList: list });
buildParams(page) {
const params = { page, pageSize: this.data.pageSize };
const av = this.data.activeValues;
if (av.length) params[this.data.dimension] = av.join(',');
if (this.data.secondarySelected.length) {
params[this.data.secondaryDim] = this.data.secondarySelected.join(',');
}
return params;
},
loadExercises() {
this.setData({ loading: true, page: 1 });
const params = { page: 1, pageSize: this.data.pageSize };
params[this.data.dimension] = this.data.activeValue;
if (this.data.secondarySelected.length) {
params[this.data.secondaryDim] = this.data.secondarySelected.join(',');
}
svc.listExercises(params).then((res) => {
svc.listExercises(this.buildParams(1)).then((res) => {
const items = (res && res.items) || [];
const total = (res && res.total) || 0;
this.setData({
@@ -134,12 +139,7 @@ Page({
loadMore() {
const next = this.data.page + 1;
this.setData({ loadingMore: true });
const params = { page: next, pageSize: this.data.pageSize };
params[this.data.dimension] = this.data.activeValue;
if (this.data.secondarySelected.length) {
params[this.data.secondaryDim] = this.data.secondarySelected.join(',');
}
svc.listExercises(params).then((res) => {
svc.listExercises(this.buildParams(next)).then((res) => {
const items = (res && res.items) || [];
const total = (res && res.total) || 0;
const merged = this.data.exercises.concat(items);
@@ -155,28 +155,32 @@ Page({
});
},
onValue(e) {
const value = e.detail.value;
if (value === this.data.activeValue) return;
this.setData({ activeValue: value, page: 1 }, () => this.loadExercises());
// 主维度(按器械/按部位)多选
onPrimaryChange(e) {
const vals = e.detail.values || [];
const values = this.data.values.map((it) => ({ ...it, active: vals.includes(it.value) }));
let title = this.data.title;
if (vals.length === 1) {
const hit = values.find((it) => it.value === vals[0]);
title = (hit && hit.label) || labelForDim(this.data.dimension);
} else if (vals.length > 1) {
title = `已选 ${vals.length}`;
} else {
title = labelForDim(this.data.dimension);
}
this.setData({ activeValues: vals, values, title, page: 1 }, () => this.loadExercises());
},
onSecondary(e) {
const value = e.detail.value;
if (!value) return;
const cur = this.data.secondarySelected;
const next = cur.includes(value) ? cur.filter((v) => v !== value) : cur.concat(value);
this.setData({ secondarySelected: next, page: 1 }, () => {
this.syncSecondaryActive();
this.loadExercises();
});
// 二级维度(部位/器械)多选
onSecondaryChange(e) {
const values = e.detail.values || [];
const secondaryList = this.data.secondaryList.map((it) => ({ ...it, active: values.includes(it.value) }));
this.setData({ secondarySelected: values, secondaryList, page: 1 }, () => this.loadExercises());
},
onSecondaryClear() {
this.setData({ secondarySelected: [], page: 1 }, () => {
this.syncSecondaryActive();
this.loadExercises();
});
const secondaryList = this.data.secondaryList.map((it) => ({ ...it, active: false }));
this.setData({ secondarySelected: [], secondaryList, page: 1 }, () => this.loadExercises());
},
onExercise(e) {