feat: 诊所问题优化

components/AssistantConsultationShell.vue

@@ -111,6 +111,30 @@
     </scroll-view>
 
     <slot v-if="customFooterActive && $slots.footer" name="footer"></slot>
+    <view
+      v-else-if="showQuestionButtons && currentQuestion && !isSubmitting && !showWaiting && answerMode === 'multi'"
+      class="action-footer multi-footer safe-area-inset-bottom"
+    >
+      <!-- 多选适用症：点选 toggling，确认后再提交 -->
+      <view class="multi-options">
+        <button
+          v-for="(answer, index) in currentQuestionAnswers"
+          :key="index"
+          :class="['multi-option-btn', { selected: !!multiSelectedMap[index] }]"
+          @click="toggleMultiAnswer(index)"
+        >
+          {{ answer }}
+        </button>
+      </view>
+      <button
+        class="action-btn yes-btn confirm-btn"
+        :disabled="multiSelectedCount === 0"
+        :class="{ disabled: multiSelectedCount === 0 }"
+        @click="confirmMultiAnswer"
+      >
+        确认
+      </button>
+    </view>
     <view
       v-else-if="showQuestionButtons && currentQuestion && !isSubmitting && !showWaiting"
       class="action-footer safe-area-inset-bottom"
@@ -224,6 +248,29 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * 答题模式：single 点一下即提交；multi 可多选后点确认
+     * 诊所复诊按药选适用症用 multi
+     */
+    answerMode: {
+      type: String,
+      default: 'single',
+    },
+  },
+  data() {
+    return {
+      /** 多选模式下已选中的选项下标映射，避免模板里写 indexOf */
+      multiSelectedMap: {},
+    };
+  },
+  watch: {
+    // 题目切换时清空多选，避免上一题选中态残留
+    currentQuestion() {
+      this.multiSelectedMap = {};
+    },
+    answerMode() {
+      this.multiSelectedMap = {};
+    },
   },
   computed: {
     agreementPopupVisible: {
@@ -234,6 +281,9 @@ export default {
         this.$emit('update:showAgreement', val)
       },
     },
+    multiSelectedCount() {
+      return Object.keys(this.multiSelectedMap).filter((k) => this.multiSelectedMap[k]).length;
+    },
   },
   methods: {
     handleHeaderBack() {
@@ -256,6 +306,28 @@ export default {
       if (index === 0) return 'yes-btn'
       return 'no-btn'
     },
+    /** 多选：切换某个适用症的选中状态 */
+    toggleMultiAnswer(index) {
+      if (this.multiSelectedMap[index]) {
+        this.$delete(this.multiSelectedMap, index);
+      } else {
+        this.$set(this.multiSelectedMap, index, true);
+      }
+    },
+    /** 多选确认：把选中标签用顿号拼接后交给父组件 */
+    confirmMultiAnswer() {
+      const indexes = Object.keys(this.multiSelectedMap)
+        .filter((k) => this.multiSelectedMap[k])
+        .map((k) => Number(k))
+        .sort((a, b) => a - b);
+      if (!indexes.length) return;
+      const labels = indexes
+        .map((i) => this.currentQuestionAnswers[i])
+        .filter(Boolean);
+      if (!labels.length) return;
+      this.$emit('answer', labels.join('、'));
+      this.multiSelectedMap = {};
+    },
   },
 }
 </script>
@@ -450,12 +522,15 @@ export default {
 
   .action-btn {
     flex: 1;
-    height: 88rpx;
-    line-height: 88rpx;
+    min-height: 88rpx;
+    height: auto;
+    line-height: 1.35;
+    padding: 20rpx 16rpx;
     border-radius: 44rpx;
-    font-size: 32rpx;
+    font-size: 30rpx;
     font-weight: 500;
     border: none;
+    white-space: normal;
 
     &::after {
       border: none;
@@ -471,6 +546,48 @@ export default {
       color: #333;
       border: 2rpx solid #ddd;
     }
+
+    &.disabled,
+    &[disabled] {
+      opacity: 0.45;
+    }
+  }
+
+  &.multi-footer {
+    flex-direction: column;
+    gap: 16rpx;
+
+    .multi-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16rpx;
+    }
+
+    .multi-option-btn {
+      min-width: 140rpx;
+      padding: 0 28rpx;
+      height: 64rpx;
+      line-height: 64rpx;
+      border-radius: 32rpx;
+      font-size: 26rpx;
+      background: rgba(10, 132, 255, 0.08);
+      color: #475569;
+      border: 2rpx solid transparent;
+
+      &::after {
+        border: none;
+      }
+
+      &.selected {
+        background: #0a84ff;
+        color: #fff;
+      }
+    }
+
+    .confirm-btn {
+      width: 100%;
+      flex: none;
+    }
   }
 }