|
|
@@ -0,0 +1,585 @@
|
|
|
+# 饮食偏好调研页面重新设计 实现计划
|
|
|
+
|
|
|
+> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
|
|
|
+
|
|
|
+**目标：** 将 `cfc-frontend/pages/diet/preferences.vue` 从 3 张灰色长表单卡改造为 3 步引导式问卷（Step1 忌口必填 / Step2 口味偏好 / Step3 健康目标），对齐「暖灶」暖橙主题，补全 `mustEat`/`cookingMethods` 采集。
|
|
|
+
|
|
|
+**架构：** 单 `.vue` 文件内维护 `currentStep`（1/2/3）+ 顶部进度条 + 底部"上一步/下一步/完成"；数据用扁平数组字段存储（`allergies`/`absoluteAvoid`/`flavorPref`/`cuisinePref`/`cookingMethods`/`healthGoals`/`mustEat`），chip 选中态用 `arr.indexOf(name) >= 0` 内联表达式；`onLoad` 预填、`saveDietPreferences` 一次性提交。
|
|
|
+
|
|
|
+**技术栈：** uni-app Vue 2 Options API（微信小程序），flexbox（禁 Grid），无 `?.`，`:key`/`:class` 禁方法调用式绑定。
|
|
|
+
|
|
|
+**规格文档：** `docs/superpowers/specs/2026-08-30-diet-preferences-redesign-design.md`
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 文件结构
|
|
|
+
|
|
|
+| 文件 | 职责 | 变更 |
|
|
|
+|------|------|------|
|
|
|
+| `cfc-frontend/pages/diet/preferences.vue` | 3 步引导问卷（模板 + 逻辑 + 样式） | 重写 |
|
|
|
+| `cfc-frontend/pages.json` | 页面注册与标题 | 不变（已注册，标题"饮食偏好调研"） |
|
|
|
+| `cfc-frontend/utils/api.js` | `getDietPreferences`/`saveDietPreferences` | 不变（已存在） |
|
|
|
+| `cfc-backend/**` | 数据存储 | 不变（`must_eat`/`cooking_methods` 列已存在） |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 任务 1：重写 preferences.vue — 模板结构（数据层 + 进度条 + Step1）
|
|
|
+
|
|
|
+**文件：**
|
|
|
+- 修改：`cfc-frontend/pages/diet/preferences.vue`（整体重写，保留现有 `savePreferences` 校验语义）
|
|
|
+
|
|
|
+- [ ] **步骤 1：重写 `<script>` data 与状态字段**
|
|
|
+
|
|
|
+将整个文件替换为以下结构（模板与样式在任务 2、3 中填充，先确保逻辑完整）：
|
|
|
+
|
|
|
+```vue
|
|
|
+<script>
|
|
|
+import { getDietPreferences, saveDietPreferences } from '@/utils/api.js'
|
|
|
+
|
|
|
+// 预设选项（常量，非响应式）
|
|
|
+const PRESET_ALLERGIES = ['海鲜', '花生', '乳糖', '鸡蛋', '牛奶', '豆类', '麸质', '坚果', '芒果', '其他']
|
|
|
+const PRESET_AVOID = ['牛肉', '羊肉', '猪肉', '内脏', '油腻', '辛辣', '生冷', '腌制']
|
|
|
+const PRESET_FLAVOR = ['酸', '甜', '咸', '鲜', '苦', '清淡', '浓郁']
|
|
|
+const PRESET_CUISINE = ['川', '粤', '鲁', '淮扬', '日料', '西餐', '东南亚', '韩餐']
|
|
|
+const PRESET_COOKING = ['蒸', '煮', '炒', '烤', '炖', '凉拌', '煎', '炸']
|
|
|
+const PRESET_MUSTEAT = ['蔬菜', '水果', '粗粮', '鱼类', '鸡蛋', '豆制品', '菌菇']
|
|
|
+const PRESET_GOALS = ['减脂', '增肌', '控糖', '肠道调理', '增强免疫']
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ familyMemberId: null,
|
|
|
+ currentStep: 1,
|
|
|
+ // 数据字段（与后端 DTO 对齐）
|
|
|
+ allergies: [],
|
|
|
+ absoluteAvoid: [],
|
|
|
+ religiousDiet: 'none',
|
|
|
+ spiceLevel: 0,
|
|
|
+ flavorPref: [],
|
|
|
+ cuisinePref: [],
|
|
|
+ cookingMethods: [],
|
|
|
+ healthGoals: [],
|
|
|
+ mustEat: [],
|
|
|
+ goalConfirmed: 0,
|
|
|
+ // 自定义输入
|
|
|
+ customInput: '',
|
|
|
+ customField: null,
|
|
|
+ // UI 状态
|
|
|
+ submitting: false,
|
|
|
+ loading: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 预设选项映射（供模板 v-for）
|
|
|
+ presetAllergies: function() { return PRESET_ALLERGIES },
|
|
|
+ presetAvoid: function() { return PRESET_AVOID },
|
|
|
+ presetFlavor: function() { return PRESET_FLAVOR },
|
|
|
+ presetCuisine: function() { return PRESET_CUISINE },
|
|
|
+ presetCooking: function() { return PRESET_COOKING },
|
|
|
+ presetMustEat: function() { return PRESET_MUSTEAT },
|
|
|
+ presetGoals: function() { return PRESET_GOALS },
|
|
|
+ religiousOptions: function() {
|
|
|
+ return [
|
|
|
+ { value: 'none', label: '无限制' },
|
|
|
+ { value: 'halal', label: '清真' },
|
|
|
+ { value: 'vegetarian', label: '素食' },
|
|
|
+ { value: 'vegan', label: '纯素' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // 进度条百分比
|
|
|
+ progressPercent: function() {
|
|
|
+ var total = 3
|
|
|
+ var done = this.currentStep - 1
|
|
|
+ if (this.currentStep === 3) done = 3
|
|
|
+ return Math.round((done / total) * 100)
|
|
|
+ },
|
|
|
+ isLastStep: function() { return this.currentStep === 3 }
|
|
|
+ },
|
|
|
+ onLoad: function() {
|
|
|
+ this.familyMemberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('currentMemberId') || uni.getStorageSync('userId')
|
|
|
+ this.loadPreferences()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadPreferences: function() {
|
|
|
+ var self = this
|
|
|
+ getDietPreferences({ memberId: self.familyMemberId }).then(function(res) {
|
|
|
+ self.loading = false
|
|
|
+ if (res) {
|
|
|
+ self.allergies = res.allergies || []
|
|
|
+ self.absoluteAvoid = res.absoluteAvoid || []
|
|
|
+ self.religiousDiet = res.religiousDiet || 'none'
|
|
|
+ self.spiceLevel = res.spiceLevel || 0
|
|
|
+ self.flavorPref = res.flavorPref || []
|
|
|
+ self.cuisinePref = res.cuisinePref || []
|
|
|
+ self.cookingMethods = res.cookingMethods || []
|
|
|
+ self.healthGoals = res.healthGoals || []
|
|
|
+ self.mustEat = res.mustEat || []
|
|
|
+ self.goalConfirmed = res.goalConfirmed || 0
|
|
|
+ }
|
|
|
+ }).catch(function() {
|
|
|
+ self.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // ——— chip 选中态（模板用内联 indexOf，方法供 toggle 用） ———
|
|
|
+ toggleChip: function(field, value) {
|
|
|
+ var idx = this[field].indexOf(value)
|
|
|
+ if (idx >= 0) {
|
|
|
+ this[field].splice(idx, 1)
|
|
|
+ } else {
|
|
|
+ this[field].push(value)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // ——— 自定义输入追加（@confirm 触发） ———
|
|
|
+ openCustom: function(field) {
|
|
|
+ this.customField = field
|
|
|
+ this.customInput = ''
|
|
|
+ },
|
|
|
+ addCustom: function() {
|
|
|
+ var value = (this.customInput || '').trim()
|
|
|
+ if (!value) return
|
|
|
+ if (this[this.customField].indexOf(value) < 0) {
|
|
|
+ this[this.customField].push(value)
|
|
|
+ }
|
|
|
+ this.customInput = ''
|
|
|
+ this.customField = null
|
|
|
+ },
|
|
|
+ // ——— 步骤导航 ———
|
|
|
+ goNext: function() {
|
|
|
+ if (this.currentStep === 1) {
|
|
|
+ if (this.allergies.length === 0 && this.absoluteAvoid.length === 0) {
|
|
|
+ uni.showToast({ title: '请至少填写一项过敏原或忌口', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.currentStep < 3) {
|
|
|
+ this.currentStep += 1
|
|
|
+ } else {
|
|
|
+ this.savePreferences()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goPrev: function() {
|
|
|
+ if (this.currentStep > 1) {
|
|
|
+ this.currentStep -= 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // ——— 提交 ———
|
|
|
+ savePreferences: function() {
|
|
|
+ var self = this
|
|
|
+ this.submitting = true
|
|
|
+ saveDietPreferences({
|
|
|
+ allergies: this.allergies,
|
|
|
+ absoluteAvoid: this.absoluteAvoid,
|
|
|
+ religiousDiet: this.religiousDiet,
|
|
|
+ spiceLevel: this.spiceLevel,
|
|
|
+ flavorPref: this.flavorPref,
|
|
|
+ cuisinePref: this.cuisinePref,
|
|
|
+ cookingMethods: this.cookingMethods,
|
|
|
+ healthGoals: this.healthGoals,
|
|
|
+ mustEat: this.mustEat,
|
|
|
+ goalConfirmed: 1
|
|
|
+ }).then(function(res) {
|
|
|
+ self.submitting = false
|
|
|
+ uni.showToast({ title: '保存成功', icon: 'success' })
|
|
|
+ setTimeout(function() {
|
|
|
+ uni.navigateBack()
|
|
|
+ }, 1000)
|
|
|
+ }).catch(function() {
|
|
|
+ self.submitting = false
|
|
|
+ uni.showToast({ title: '保存失败', icon: 'none' })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+```
|
|
|
+
|
|
|
+**验证：** `node --check` 对提取出的 script 块做语法校验。
|
|
|
+预期：无语法错误。
|
|
|
+
|
|
|
+- [ ] **步骤 2：编写 `<template>` — 进度条 + Step1 忌口与过敏**
|
|
|
+
|
|
|
+在 `<template>` 根节点 `<view class="preferences-page">` 内，进度条 + 内容区 + 底栏三部分（Step2/3 内容在任务 2 追加）：
|
|
|
+
|
|
|
+```html
|
|
|
+<template>
|
|
|
+ <view class="preferences-page">
|
|
|
+ <!-- 顶部进度条 -->
|
|
|
+ <view class="progress-bar">
|
|
|
+ <view class="progress-track">
|
|
|
+ <view class="progress-fill" :style="'width:' + progressPercent + '%'"></view>
|
|
|
+ </view>
|
|
|
+ <view class="progress-labels">
|
|
|
+ <text class="progress-label" :class="{ 'progress-label-active': currentStep >= 1 }">忌口·过敏</text>
|
|
|
+ <text class="progress-label" :class="{ 'progress-label-active': currentStep >= 2 }">口味·偏好</text>
|
|
|
+ <text class="progress-label" :class="{ 'progress-label-active': currentStep >= 3 }">健康目标</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 步骤内容 -->
|
|
|
+ <scroll-view class="content" scroll-y>
|
|
|
+ <!-- ===== Step 1 忌口与过敏 ===== -->
|
|
|
+ <view v-if="currentStep === 1">
|
|
|
+ <view class="step-head">
|
|
|
+ <text class="step-icon">🚫</text>
|
|
|
+ <view class="step-head-text">
|
|
|
+ <text class="step-title">哪些食物绝对不能碰？</text>
|
|
|
+ <text class="step-sub">为了家人的安全，过敏原和忌口请务必填写</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="card">
|
|
|
+ <text class="card-title">过敏原 *</text>
|
|
|
+ <view class="chip-group">
|
|
|
+ <view class="chip" v-for="(item, i) in presetAllergies" :key="'a' + i"
|
|
|
+ :class="{ 'chip-active': allergies.indexOf(item) >= 0 }"
|
|
|
+ @tap="toggleChip('allergies', item)">
|
|
|
+ <text>{{ item }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-row" v-if="customField === 'allergies'">
|
|
|
+ <input class="custom-input" placeholder="输入其他过敏原" v-model="customInput"
|
|
|
+ confirm-type="done" @confirm="addCustom" />
|
|
|
+ <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-add" v-else @tap="openCustom('allergies')">
|
|
|
+ <text>＋ 自定义添加</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="card">
|
|
|
+ <text class="card-title">绝对忌口 *</text>
|
|
|
+ <view class="chip-group">
|
|
|
+ <view class="chip" v-for="(item, i) in presetAvoid" :key="'v' + i"
|
|
|
+ :class="{ 'chip-active': absoluteAvoid.indexOf(item) >= 0 }"
|
|
|
+ @tap="toggleChip('absoluteAvoid', item)">
|
|
|
+ <text>{{ item }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-row" v-if="customField === 'absoluteAvoid'">
|
|
|
+ <input class="custom-input" placeholder="输入其他忌口" v-model="customInput"
|
|
|
+ confirm-type="done" @confirm="addCustom" />
|
|
|
+ <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-add" v-else @tap="openCustom('absoluteAvoid')">
|
|
|
+ <text>＋ 自定义添加</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="card">
|
|
|
+ <text class="card-title">宗教饮食</text>
|
|
|
+ <view class="chip-group">
|
|
|
+ <view class="chip" v-for="(opt, i) in religiousOptions" :key="'r' + i"
|
|
|
+ :class="{ 'chip-active': religiousDiet === opt.value }"
|
|
|
+ @tap="religiousDiet = opt.value">
|
|
|
+ <text>{{ opt.label }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- /Step 1 -->
|
|
|
+
|
|
|
+ <!-- Step 2、Step 3 在此追加（任务 2） -->
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <!-- 底部按钮栏 -->
|
|
|
+ <view class="footer-bar">
|
|
|
+ <view class="footer-btn footer-btn-ghost" v-if="currentStep > 1" @tap="goPrev">
|
|
|
+ <text>上一步</text>
|
|
|
+ </view>
|
|
|
+ <view class="footer-btn footer-btn-primary" @tap="goNext">
|
|
|
+ <text>{{ submitting ? '提交中...' : (isLastStep ? '完成' : '下一步') }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+```
|
|
|
+
|
|
|
+**验证：** 检查无 `?.` 可选链、无 CSS Grid、`:class`/`:key` 均为简单表达式（`indexOf >= 0`、`'a' + i`），符合小程序限制。
|
|
|
+
|
|
|
+- [ ] **步骤 3：Commit**
|
|
|
+
|
|
|
+```bash
|
|
|
+git add cfc-frontend/pages/diet/preferences.vue
|
|
|
+git commit -m "feat(diet): 饮食偏好调研 重构为3步引导问卷 - 数据层+进度条+Step1忌口过敏"
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 任务 2：追加 Step2 口味偏好 + Step3 健康目标
|
|
|
+
|
|
|
+**文件：**
|
|
|
+- 修改：`cfc-frontend/pages/diet/preferences.vue`（在 `<!-- /Step 1 -->` 与 `</scroll-view>` 之间插入）
|
|
|
+
|
|
|
+- [ ] **步骤 1：插入 Step2 模板**
|
|
|
+
|
|
|
+在 Step1 的 `<!-- /Step 1 -->` 之后追加：
|
|
|
+
|
|
|
+```html
|
|
|
+ <!-- ===== Step 2 口味与偏好（4 卡片完整代码） ===== -->
|
|
|
+ <view v-if="currentStep === 2">
|
|
|
+ <view class="step-head">
|
|
|
+ <text class="step-icon">😋</text>
|
|
|
+ <view class="step-head-text">
|
|
|
+ <text class="step-title">口味和做法，说说看？</text>
|
|
|
+ <text class="step-sub">选得越细，推荐食谱越合家人口味</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 辣度 -->
|
|
|
+ <view class="card">
|
|
|
+ <text class="card-title">辣度偏好</text>
|
|
|
+ <view class="slider-row">
|
|
|
+ <text class="slider-label">不辣</text>
|
|
|
+ <slider class="slider" min="0" max="5" :value="spiceLevel" @change="spiceLevel = $event.detail.value" show-value />
|
|
|
+ <text class="slider-label">特辣</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 口味 -->
|
|
|
+ <view class="card">
|
|
|
+ <text class="card-title">口味偏好</text>
|
|
|
+ <view class="chip-group">
|
|
|
+ <view class="chip" v-for="(item, i) in presetFlavor" :key="'f' + i"
|
|
|
+ :class="{ 'chip-active': flavorPref.indexOf(item) >= 0 }"
|
|
|
+ @tap="toggleChip('flavorPref', item)">
|
|
|
+ <text>{{ item }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-row" v-if="customField === 'flavorPref'">
|
|
|
+ <input class="custom-input" placeholder="输入其他口味" v-model="customInput"
|
|
|
+ confirm-type="done" @confirm="addCustom" />
|
|
|
+ <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-add" v-else @tap="openCustom('flavorPref')">
|
|
|
+ <text>＋ 自定义添加</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 菜系 -->
|
|
|
+ <view class="card">
|
|
|
+ <text class="card-title">菜系偏好</text>
|
|
|
+ <view class="chip-group">
|
|
|
+ <view class="chip" v-for="(item, i) in presetCuisine" :key="'c' + i"
|
|
|
+ :class="{ 'chip-active': cuisinePref.indexOf(item) >= 0 }"
|
|
|
+ @tap="toggleChip('cuisinePref', item)">
|
|
|
+ <text>{{ item }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-row" v-if="customField === 'cuisinePref'">
|
|
|
+ <input class="custom-input" placeholder="输入其他菜系" v-model="customInput"
|
|
|
+ confirm-type="done" @confirm="addCustom" />
|
|
|
+ <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-add" v-else @tap="openCustom('cuisinePref')">
|
|
|
+ <text>＋ 自定义添加</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 烹饪方式 -->
|
|
|
+ <view class="card">
|
|
|
+ <text class="card-title">烹饪方式</text>
|
|
|
+ <view class="chip-group">
|
|
|
+ <view class="chip" v-for="(item, i) in presetCooking" :key="'k' + i"
|
|
|
+ :class="{ 'chip-active': cookingMethods.indexOf(item) >= 0 }"
|
|
|
+ @tap="toggleChip('cookingMethods', item)">
|
|
|
+ <text>{{ item }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-row" v-if="customField === 'cookingMethods'">
|
|
|
+ <input class="custom-input" placeholder="输入其他做法" v-model="customInput"
|
|
|
+ confirm-type="done" @confirm="addCustom" />
|
|
|
+ <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-add" v-else @tap="openCustom('cookingMethods')">
|
|
|
+ <text>＋ 自定义添加</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- /Step 2 -->
|
|
|
+```
|
|
|
+
|
|
|
+**验证：** 4 卡片完整闭合（辣度/口味/菜系/烹饪方式），`spiceLevel`/`flavorPref`/`cuisinePref`/`cookingMethods` 均正确绑定。
|
|
|
+
|
|
|
+- [ ] **步骤 2：插入 Step3 模板**
|
|
|
+
|
|
|
+```html
|
|
|
+ <!-- ===== Step 3 健康目标 ===== -->
|
|
|
+ <view v-if="currentStep === 3">
|
|
|
+ <view class="step-head">
|
|
|
+ <text class="step-icon">🎯</text>
|
|
|
+ <view class="step-head-text">
|
|
|
+ <text class="step-title">想优先改善哪方面？</text>
|
|
|
+ <text class="step-sub">没想好可以跳过，之后随时能改</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="card">
|
|
|
+ <text class="card-title">必吃食物</text>
|
|
|
+ <view class="chip-group">
|
|
|
+ <view class="chip" v-for="(item, i) in presetMustEat" :key="'m' + i"
|
|
|
+ :class="{ 'chip-active': mustEat.indexOf(item) >= 0 }"
|
|
|
+ @tap="toggleChip('mustEat', item)">
|
|
|
+ <text>{{ item }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-row" v-if="customField === 'mustEat'">
|
|
|
+ <input class="custom-input" placeholder="输入其他必吃" v-model="customInput"
|
|
|
+ confirm-type="done" @confirm="addCustom" />
|
|
|
+ <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-add" v-else @tap="openCustom('mustEat')">
|
|
|
+ <text>＋ 自定义添加</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="card">
|
|
|
+ <text class="card-title">健康目标</text>
|
|
|
+ <view class="chip-group">
|
|
|
+ <view class="chip" v-for="(item, i) in presetGoals" :key="'g' + i"
|
|
|
+ :class="{ 'chip-active': healthGoals.indexOf(item) >= 0 }"
|
|
|
+ @tap="toggleChip('healthGoals', item)">
|
|
|
+ <text>{{ item }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-row" v-if="customField === 'healthGoals'">
|
|
|
+ <input class="custom-input" placeholder="输入其他目标" v-model="customInput"
|
|
|
+ confirm-type="done" @confirm="addCustom" />
|
|
|
+ <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-add" v-else @tap="openCustom('healthGoals')">
|
|
|
+ <text>＋ 自定义添加</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- /Step 3 -->
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **步骤 3：语法校验 + Commit**
|
|
|
+
|
|
|
+```bash
|
|
|
+node --check 提取的script块 # 预期无错误
|
|
|
+git add cfc-frontend/pages/diet/preferences.vue
|
|
|
+git commit -m "feat(diet): 饮食偏好调研 Step2口味偏好+Step3健康目标chip交互"
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 任务 3：样式（暖灶主题）+ 验收
|
|
|
+
|
|
|
+**文件：**
|
|
|
+- 修改：`cfc-frontend/pages/diet/preferences.vue`（`<style scoped>`）
|
|
|
+
|
|
|
+- [ ] **步骤 1：编写 `<style scoped>`**
|
|
|
+
|
|
|
+```css
|
|
|
+<style scoped>
|
|
|
+.preferences-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: linear-gradient(180deg, #FFF7ED 0%, #FFF3E6 100%);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+/* ===== 进度条 ===== */
|
|
|
+.progress-bar { padding: 30rpx 32rpx 10rpx; }
|
|
|
+.progress-track {
|
|
|
+ height: 12rpx; background: #FFE3C7; border-radius: 6rpx; overflow: hidden;
|
|
|
+}
|
|
|
+.progress-fill {
|
|
|
+ height: 100%; background: linear-gradient(90deg, #FF8C42, #FFB366);
|
|
|
+ border-radius: 6rpx; transition: width 0.3s ease;
|
|
|
+}
|
|
|
+.progress-labels { display: flex; justify-content: space-between; margin-top: 12rpx; }
|
|
|
+.progress-label { font-size: 22rpx; color: #C2A78A; }
|
|
|
+.progress-label-active { color: #FF8C42; font-weight: 600; }
|
|
|
+/* ===== 内容 ===== */
|
|
|
+.content { flex: 1; padding: 10rpx 32rpx 30rpx; box-sizing: border-box; }
|
|
|
+.step-head { display: flex; align-items: center; margin: 20rpx 0 24rpx; }
|
|
|
+.step-icon { font-size: 52rpx; margin-right: 20rpx; }
|
|
|
+.step-head-text { display: flex; flex-direction: column; }
|
|
|
+.step-title { font-size: 34rpx; font-weight: 700; color: #4A2E1A; }
|
|
|
+.step-sub { font-size: 24rpx; color: #A08B72; margin-top: 6rpx; }
|
|
|
+/* ===== 卡片 ===== */
|
|
|
+.card {
|
|
|
+ background: #FFFFFF; border-radius: 24rpx; padding: 28rpx;
|
|
|
+ margin-bottom: 24rpx; box-shadow: 0 4rpx 20rpx rgba(255, 140, 66, 0.08);
|
|
|
+}
|
|
|
+.card-title { font-size: 28rpx; font-weight: 600; color: #4A2E1A; margin-bottom: 20rpx; display: block; }
|
|
|
+/* ===== chip ===== */
|
|
|
+.chip-group { display: flex; flex-wrap: wrap; }
|
|
|
+.chip {
|
|
|
+ padding: 14rpx 28rpx; border-radius: 999rpx; background: #F5F0EA;
|
|
|
+ font-size: 26rpx; color: #6B5340; margin: 0 16rpx 16rpx 0;
|
|
|
+ border: 2rpx solid transparent;
|
|
|
+}
|
|
|
+.chip-active {
|
|
|
+ background: #FF8C42; color: #FFFFFF; font-weight: 600;
|
|
|
+ border-color: #E8732A;
|
|
|
+}
|
|
|
+/* ===== 自定义添加 ===== */
|
|
|
+.custom-add {
|
|
|
+ padding: 14rpx 0; font-size: 26rpx; color: #FF8C42; font-weight: 500;
|
|
|
+}
|
|
|
+.custom-row { display: flex; align-items: center; margin-top: 8rpx; }
|
|
|
+.custom-input {
|
|
|
+ flex: 1; border: 2rpx solid #FFD9B8; border-radius: 999rpx;
|
|
|
+ padding: 14rpx 24rpx; font-size: 26rpx; background: #FFF9F2;
|
|
|
+}
|
|
|
+.custom-confirm {
|
|
|
+ background: #FF8C42; color: #fff; font-size: 26rpx; font-weight: 600;
|
|
|
+ padding: 14rpx 32rpx; border-radius: 999rpx; margin-left: 16rpx;
|
|
|
+}
|
|
|
+/* ===== 滑块 ===== */
|
|
|
+.slider-row { display: flex; align-items: center; }
|
|
|
+.slider-label { font-size: 24rpx; color: #A08B72; width: 72rpx; }
|
|
|
+.slider { flex: 1; }
|
|
|
+/* ===== 底栏 ===== */
|
|
|
+.footer-bar {
|
|
|
+ display: flex; padding: 20rpx 32rpx 30rpx; background: #FFFDF8;
|
|
|
+ border-top: 2rpx solid #FFE9D4;
|
|
|
+}
|
|
|
+.footer-btn {
|
|
|
+ flex: 1; text-align: center; padding: 24rpx 0; border-radius: 999rpx;
|
|
|
+ font-size: 30rpx; font-weight: 600;
|
|
|
+}
|
|
|
+.footer-btn-ghost {
|
|
|
+ background: #F5F0EA; color: #6B5340; margin-right: 20rpx;
|
|
|
+}
|
|
|
+.footer-btn-primary {
|
|
|
+ background: linear-gradient(135deg, #FF8C42, #FFB366); color: #FFFFFF;
|
|
|
+}
|
|
|
+</style>
|
|
|
+```
|
|
|
+
|
|
|
+**验证：** 无 CSS Grid、无中文类名、无 `?.`。
|
|
|
+
|
|
|
+- [ ] **步骤 2：验收检查**
|
|
|
+
|
|
|
+对照规格验收清单逐条核验：
|
|
|
+- [ ] Step1 必填校验（`allergies.length === 0 && absoluteAvoid.length ===0` 时 goNext 弹 toast）
|
|
|
+- [ ] Step2 四项 chip 均可选
|
|
|
+- [ ] Step3 必吃/目标 chip 可选，无"系统推荐目标"区块
|
|
|
+- [ ] 预填回填（`loadPreferences` 各数组赋值）
|
|
|
+- [ ] 提交含 `cookingMethods`/`mustEat`（空数组也可）
|
|
|
+- [ ] 暖橙主题（背景渐变/`#FF8C42`/圆角阴影）
|
|
|
+- [ ] 无 `?.`、无 Grid、`：key`简单表达式、无自定义 nav-title
|
|
|
+
|
|
|
+- [ ] **步骤 3：Commit**
|
|
|
+
|
|
|
+```bash
|
|
|
+git add cfc-frontend/pages/diet/preferences.vue
|
|
|
+git commit -m "style(diet): 饮食偏好调研 暖灶暖橙主题样式"
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 自检记录
|
|
|
+
|
|
|
+**1. 规格覆盖度：** 规格 4 节全覆盖——步骤流（任务1 进度条+底栏/任务2 内容）、交互（chip+自定义）、视觉（任务3）、后端兼容（零改动，全部字段映射见任务1 save 提交体）。
|
|
|
+**2. 占位符扫描：** 无"待定/TODO"。任务2 步骤1 已含 Step2 四卡片完整代码（辣度/口味/菜系/烹饪方式），无"类似任务"式简写。
|
|
|
+**3. 类型一致性：** 字段名 `allergies/absoluteAvoid/religiousDiet/spiceLevel/flavorPref/cuisinePref/cookingMethods/healthGoals/mustEat` 与 DTO 一致；方法 `toggleChip/openCustom/addCustom/goNext/goPrev/savePreferences` 前后引用一致；预设常量名 `presetAllergies...presetGoals` 与 computed 一致。
|
|
|
+
|
|
|
+**已知修正（对比规格）：** Step3 无"系统推荐目标"区块（规格自检已确认后端无 `systemGoals` 数据源）。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+**验证方式：** 修改后需在 HBuilderX 重新打包（agent 不执行 build 命令）；`node --check` 校验 script 块语法。
|
iwt