|
|
@@ -0,0 +1,132 @@
|
|
|
+# 饮食偏好调研页面重新设计
|
|
|
+
|
|
|
+**日期：** 2026-08-30
|
|
|
+**状态：** 待审查
|
|
|
+**优先级：** P1
|
|
|
+**范围：** 纯前端（`cfc-frontend/pages/diet/preferences.vue`），零后端改动
|
|
|
+
|
|
|
+## 一、背景与问题
|
|
|
+
|
|
|
+现有饮食偏好调研页（`pages/diet/preferences.vue`）存在 4 个问题：
|
|
|
+
|
|
|
+1. **体验差、门槛高**：3 张灰色长表单卡片堆叠，绝大多数字段靠"输入后回车添加"手动输入标签（过敏原/忌口/口味/菜系/健康目标），无预设选项、无进度提示、无引导文案，看着像后台表单，用户填不下去。
|
|
|
+2. **视觉割裂**：页面冷灰底（`#F5F7FA`）与饮食首页「暖灶·家的味道」的暖橙主题（`#FF8C42` + emoji + 渐变）严重不一致。
|
|
|
+3. **数据采集不完整**：后端 `DietPreferences` 实体和 `diet_preferences` 表已存在 `must_eat`（必吃）、`cooking_methods`（烹饪方式）字段（schema.sql 第 4451、4456 行），但页面完全未采集。
|
|
|
+4. **无编辑回填交互**：虽然 `onLoad` 预填已有数据，但整体交互偏"一次性填写"，无步骤化确认感。
|
|
|
+
|
|
|
+**目标：** 将单页长表单改造为 3 步引导式问卷，对齐暖橙主题，补全 `mustEat`/`cookingMethods` 采集。
|
|
|
+
|
|
|
+## 二、方案选型
|
|
|
+
|
|
|
+采用**方案 A（分步引导式问卷）**：
|
|
|
+
|
|
|
+- 单页面内分步（一个 `.vue` 文件维护 `currentStep` 1/2/3），不做多路由
|
|
|
+- 顶部进度条 + 步骤切换 + 底部"上一步/下一步/完成"按钮
|
|
|
+- 各步骤交互从"手动输入标签"改为"预设 chip 点选 + 自定义追加"
|
|
|
+- 视觉完全对齐「暖灶」暖橙主题
|
|
|
+- 补全 `mustEat` / `cookingMethods` 两个缺失字段采集
|
|
|
+
|
|
|
+不做方案 B（仅视觉升级，引导性弱、交互未简化）或方案 C（单页智能预设，视觉升级不彻底）。
|
|
|
+
|
|
|
+## 三、页面架构与步骤流
|
|
|
+
|
|
|
+单页面内分步，维护 `currentStep`（1/2/3），用 `v-if`/swiper 切换三屏内容。
|
|
|
+
|
|
|
+```
|
|
|
+[进度条: ① 忌口与过敏 ●───○───○]
|
|
|
+[步骤内容区域]
|
|
|
+[底部: 上一步 | 下一步 / 完成]
|
|
|
+```
|
|
|
+
|
|
|
+| 步骤 | 标题（emoji） | 必填 |
|
|
|
+|------|--------------|:---:|
|
|
|
+| 1 | 🚫 忌口与过敏 | ✅ |
|
|
|
+| 2 | 😋 口味与偏好 | — |
|
|
|
+| 3 | 🎯 健康目标 | — |
|
|
|
+
|
|
|
+**数据流：**
|
|
|
+- `onLoad`：调 `getDietPreferences`（`POST /api/diet/preferences/current-member`）预填已有数据（编辑模式）
|
|
|
+- 第 3 步点「完成」：校验 → 调 `saveDietPreferences`（`POST /api/diet/preferences/save`）一次性提交全量字段
|
|
|
+- 成功后 `uni.navigateBack()`（保持现有导航栈）
|
|
|
+
|
|
|
+## 四、各步骤交互设计
|
|
|
+
|
|
|
+### Step 1 忌口与过敏（必填）
|
|
|
+
|
|
|
+- **过敏原**：预设 chip 多选 + 自定义输入追加
|
|
|
+ - 预设：海鲜、花生、乳糖、鸡蛋、牛奶、豆类、麸质、坚果、芒果、其他
|
|
|
+- **绝对忌口**：预设 chip 多选 + 自定义输入追加
|
|
|
+ - 预设：牛肉、羊肉、猪肉、内脏、油腻、辛辣、生冷、腌制
|
|
|
+- **宗教饮食**：单选胶囊
|
|
|
+ - 选项：无限制、清真、素食、纯素
|
|
|
+- **校验**：过敏原或忌口至少填一项（沿用现有规则）
|
|
|
+
|
|
|
+### Step 2 口味与偏好（可选）
|
|
|
+
|
|
|
+- **辣度**：滑块 0-5（不辣 → 特辣）
|
|
|
+- **口味**：预设 chip 多选 + 自定义追加
|
|
|
+ - 预设：酸、甜、咸、鲜、苦、清淡、浓郁
|
|
|
+- **菜系**：预设 chip 多选 + 自定义追加
|
|
|
+ - 预设：川、粤、鲁、淮扬、日料、西餐、东南亚、韩餐
|
|
|
+- **烹饪方式（新增字段）**：预设 chip 多选 + 自定义追加
|
|
|
+ - 预设：蒸、煮、炒、烤、炖、凉拌、煎、炸
|
|
|
+
|
|
|
+### Step 3 健康目标（可选）
|
|
|
+
|
|
|
+- **系统推荐目标**：只读展示，若存在显示绿色徽标"系统推荐"（数据来自健康报告，经 `current-member` 返回 `systemGoals`）
|
|
|
+- **必吃（新增字段）**：预设 chip 多选 + 自定义追加
|
|
|
+ - 预设：蔬菜、水果、粗粮、鱼类、鸡蛋、豆制品、菌菇
|
|
|
+- **自定义目标**：预设 chip 多选 + 自定义追加
|
|
|
+ - 预设：减脂、增肌、控糖、肠道调理、增强免疫
|
|
|
+
|
|
|
+## 五、视觉与样式
|
|
|
+
|
|
|
+沿用 `pages/diet/index.vue` 的「暖灶」主题：
|
|
|
+
|
|
|
+| Token | 值 | 用途 |
|
|
|
+|-------|-----|------|
|
|
|
+| 背景 | `linear-gradient(180deg, #FFF7ED, #FFF3E6)` | 页面暖底 |
|
|
|
+| 主色 | `#FF8C42` | 强调、进度条、激活 chip |
|
|
|
+| 卡片 | 白底圆角 24rpx + 暖橙阴影 | 表单容器 |
|
|
|
+| 进度条 | 分段圆点 + 橙色填充 + 完成打勾 | 顶部 |
|
|
|
+
|
|
|
+- chip 默认浅灰底（`#F5F5F5`），选中暖橙底白字
|
|
|
+- 每步标题区放 emoji + 一句引导文案（如"哪些食物绝对不能碰？"）
|
|
|
+- 底部固定按钮栏：左"上一步"（第 1 步隐藏），右"下一步/完成"
|
|
|
+
|
|
|
+**小程序约束（强制遵守）：**
|
|
|
+- 不用 CSS Grid，用 flexbox
|
|
|
+- 不用可选链 `?.`，用 `&&`
|
|
|
+- `:key` 用方法调用（如 `getChipKey(name)`），不用带运算符表达式
|
|
|
+- 不用 `new Date(string)`，用 `utils/format.js` 的 `parseDate()`
|
|
|
+- Vue 2 Options API
|
|
|
+- 页面标题在 `pages.json` 配置（`navigationBarTitleText`），不写自定义 nav-title
|
|
|
+
|
|
|
+## 六、后端兼容性
|
|
|
+
|
|
|
+**零后端改动：**
|
|
|
+
|
|
|
+- 请求体复用现有 `DietPreferencesDTO`（`allergies`/`absoluteAvoid`/`religiousDiet`/`spiceLevel`/`flavorPref`/`cuisinePref`/`cookingMethods`/`healthGoals`/`mustEat`/`goalConfirmed`）
|
|
|
+- `cookingMethods`、`mustEat` 实体字段已存在（`entity/DietPreferences.java`），`diet_preferences` 表列已存在（`must_eat`、`cooking_methods` JSON），**无需数据库迁移**
|
|
|
+- 响应复用 `current-member` 接口回填
|
|
|
+- 不需要修改 `docs/superpowers/api/API_REFERENCE.md`（无新增接口）
|
|
|
+
|
|
|
+## 七、涉及文件
|
|
|
+
|
|
|
+| 文件 | 操作 |
|
|
|
+|------|------|
|
|
|
+| `cfc-frontend/pages/diet/preferences.vue` | 重写（分步引导 + 暖橙主题 + 补字段） |
|
|
|
+| `cfc-frontend/utils/api.js` | 不变（`getDietPreferences`/`saveDietPreferences` 已存在） |
|
|
|
+
|
|
|
+## 八、验收标准
|
|
|
+
|
|
|
+- [ ] 页面为 3 步引导问卷，顶部有进度条，可前后切换，第 1 步无"上一步"
|
|
|
+- [ ] Step 1 过敏原/忌口 chip 点选 + 自定义追加可用，未填过敏原且未填忌口时点"下一步"弹提示
|
|
|
+- [ ] Step 2 辣度滑块、口味/菜系/烹饪方式 chip 可选
|
|
|
+- [ ] Step 3 系统推荐目标只读展示（有则显示"系统推荐"徽标），必吃/自定义目标 chip 可选
|
|
|
+- [ ] 已保存的数据回填到各步骤对应 chip/滑块
|
|
|
+- [ ] 「完成」提交 `saveDietPreferences`，成功 toast 后 `navigateBack`
|
|
|
+- [ ] 提交数据含 `cookingMethods`、`mustEat`（空数组也可）
|
|
|
+- [ ] 视觉对齐暖橙主题（暖底渐变、`#FF8C42` 主色、卡片圆角阴影）
|
|
|
+- [ ] 无 `?.`、无 CSS Grid、`:key` 用方法、日期用 `parseDate()`、无自定义 nav-title
|
|
|
+- [ ] `node --check` 语法校验通过（script 块提取后）
|
iwt