feat(diet): 饮食偏好调研 Step2口味偏好+Step3健康目标chip交互

cfc-frontend/pages/diet/preferences.vue

@@ -75,7 +75,137 @@
       </view>
       <!-- /Step 1 -->
 
-      <!-- Step 2、Step 3 在此追加（任务 2） -->
+      <!-- ===== 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="getChipKey('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="getChipKey('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="getChipKey('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 -->
+
+      <!-- ===== 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="getChipKey('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="getChipKey('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 -->
     </scroll-view>
 
     <!-- 底部按钮栏 -->
@@ -364,6 +494,23 @@ export default {
   background-color: #FFF5EB;
 }
 
+/* 辣度滑块 */
+.slider-row {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+.slider-label {
+  font-size: 24rpx;
+  color: #999;
+  flex-shrink: 0;
+  width: 48rpx;
+  text-align: center;
+}
+.slider {
+  flex: 1;
+}
+
 /* 自定义输入 */
 .custom-row {
   display: flex;