H5 订货页分类导航 · 改造原型 v4
顶部一级分类去掉「全部」,仅留 5 个一级;默认选中「酒类」直接进入两栏(左二级、右商品);点二级 → 右侧立即筛该二级商品;二级右侧有小三角 ▶,点击即在二级下方展开三级(手风琴,同时只展开一个),点三级立即筛商品;面包屑可一键返回一级。不再使用浮窗。
交互说明
① 顶部分类行仅 5 个一级(无「全部」),默认选中「酒类」进入两栏;
② 左侧二级列表首项「全部」默认选中(展示酒类全部商品,含二/三/四级);
③ 点其他一级(如「饮品类」)→ 切到饮品类两栏,二级、三级、展开态全部清空;
④ 点二级(非「全部」)→ 右侧立即筛该二级商品(含其下所有三级),并自动展开三级;
⑤ 点二级右侧的小三角 ▶ → 在该二级下方内联展开三级(手风琴,同时只展开一个,再点收起),三角旋转 90° 变蓝;
⑥ 点三级 → 右侧筛该三级商品,三级高亮为蓝底白字;选中三级后商品卡片上不再重复显示三级标签(只选二级、未选三级时才显示,用于区分来源);
⑦ 三级分类项不加白底,直接铺在二级下方的浅灰区上,仅选中时变蓝底白字;
⑧ 面包屑返回一级可清空二级 / 三级 / 展开态。
已移除 v3 的悬停浮窗方案 —— 移动端没有 hover,点击展开更稳。
改造清单(确认后落地)
- 后台数据 需在商品分类管理中新增两个一级:雪糕、清洁用品(不需要 icon)。
- 后端 新增
GET /store/product-category/tree:全量 → 过滤 is_delect != 1 OR is_delect IS NULL → 按 sort 排序 → 组装三级树返回;加入 AuthInterceptor.PUBLIC_PATTERNS。
- 前端 ai_order.vue:顶部分类改为 5 个一级(去「全部」);点击一级切换两栏布局(左侧二级 + 右侧商品);二级行右侧渲染小三角,点击在该二级下方内联展开三级(手风琴,同时只展开一个);点二级 / 三级即刷新商品;面包屑可清除二级三级回到一级全量。
- 前端 删除
components/custom-popup-category/ 目录;清理 ai_order.vue 中「更多」按钮及弹窗引用。
待确认:
① 点二级文字时是同时自动展开三级(原型当前行为,方便用户看到还能细分),还是只筛商品不展开?
② 三级展开是手风琴(同时只展开一个,点新的自动收起旧的)(原型当前行为),还是允许多個同时展开?
③ 左侧栏宽度从 88px 加宽到 96px 以容纳三级文字,是否需要再放宽?
④ 若某二级没有三级,三角是隐藏(原型当前行为,用占位保持对齐)还是不显示?