cfc/cfc-frontend/pages/health/components/HealthQuestionnaireWizard.vue

<template>
  <view class="wizard-wrap">
    <!-- 内部步骤指示器（4 步：基础体征/疾病史/饮食习惯/确认） -->
    <view class="wizard-steps">
      <view
        v-for="(s, i) in wizardSteps"
        :key="i"
        class="wizard-step"
        :class="{ 'wizard-step-active': currentStep === i + 1, 'wizard-step-done': currentStep > i + 1 }"
        @click="goToStep(i + 1)"
      >
        <text class="wizard-step-num">{{ i + 1 }}</text>
        <text class="wizard-step-label">{{ s }}</text>
      </view>
    </view>

    <!-- 步骤内容 -->
    <view class="wizard-body">
      <!-- Step 1: 基础体征 -->
      <view v-if="currentStep === 1">
        <basic-vitals-step
          ref="stepRef"
          :value="currentMemberForm"
          @input="onVitalsInput"
        />
      </view>

      <!-- Step 2: 疾病史与用药 -->
      <view v-if="currentStep === 2">
        <medical-history-step
          ref="stepRef"
          :value="currentMemberForm"
          @input="onMedicalInput"
        />
      </view>

      <!-- Step 3: 饮食习惯 -->
      <view v-if="currentStep === 3">
        <diet-habits-step
          ref="stepRef"
          :value="currentMemberDiet"
          @input="onDietInput"
          @skip-no-preference="onDietSkipNoPreference"
        />
      </view>

      <!-- Step 4: 确认 -->
      <view v-if="currentStep === 4">
        <confirm-step
          ref="stepRef"
          :health-status="currentMemberForm"
          :diet-preferences="currentMemberDiet"
          :submitting="submitting"
          @submit="handleSubmit"
          @back="prev"
        />
      </view>
    </view>

    <!-- 底部导航：上一步 / 下一步（最后一步为保存并生成） -->
    <view class="wizard-footer" v-if="currentStep < 4">
      <button class="btn-prev" :disabled="currentStep === 1" @click="prev">
        <text>上一步</text>
      </button>
      <button class="btn-next" :disabled="validating" @click="next">
        <text>{{ validating ? '校验中...' : '下一步' }}</text>
      </button>
    </view>
  </view>
</template>

<script>
import BasicVitalsStep from './BasicVitalsStep.vue'
import MedicalHistoryStep from './MedicalHistoryStep.vue'
import DietHabitsStep from './DietHabitsStep.vue'
import ConfirmStep from './ConfirmStep.vue'

export default {
  name: 'HealthQuestionnaireWizard',
  components: {
    BasicVitalsStep,
    MedicalHistoryStep,
    DietHabitsStep,
    ConfirmStep
  },
  props: {
    // 成员表单快照：memberId → { form, lipidCholesterol, selectedDiseases, medRows }
    memberFormMap: {
      type: Object,
      default: function() { return {} }
    },
    // 成员饮食习惯快照：memberId → dietPreferences 对象
    dietMap: {
      type: Object,
      default: function() { return {} }
    },
    // 当前填写成员
    activeFormMemberId: {
      type: String,
      default: ''
    },
    // 提交中（由父组件 loading 驱动，失败后按钮可恢复）
    submitting: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentStep: 1,
      validating: false
    }
  },
  computed: {
    wizardSteps: function() {
      return ['基础体征', '疾病史', '饮食习惯', '确认']
    },
    // 当前成员的健康表单（来自父组件快照）
    currentMemberForm: function() {
      var map = this.memberFormMap || {}
      var key = this.activeFormMemberId || '__account'
      var snapshot = map[key] || {}
      return {
        heightCm: snapshot.form && snapshot.form.heightCm || '',
        weightKg: snapshot.form && snapshot.form.weightKg || '',
        bloodPressure: snapshot.form && snapshot.form.bloodPressure || '',
        bloodGlucose: snapshot.form && snapshot.form.bloodGlucose || '',
        notes: snapshot.form && snapshot.form.notes || '',
        lipidCholesterol: snapshot.lipidCholesterol || '',
        selectedDiseases: snapshot.selectedDiseases || [],
        medRows: snapshot.medRows || [],
        noMedication: !!snapshot.noMedication
      }
    },
    // 当前成员的饮食习惯
    currentMemberDiet: function() {
      var map = this.dietMap || {}
      var key = this.activeFormMemberId || '__account'
      return map[key] || {}
    }
  },
  watch: {
    // 切换填写成员时回到第 1 步（各成员数据快照已保留，不影响已填内容）
    activeFormMemberId: function() {
      this.currentStep = 1
    }
  },
  methods: {
    // —— 步骤导航 ——
    goToStep: function(n) {
      if (n < 1 || n > 4) return
      if (n <= this.currentStep) {
        // 回退到已完成步骤，无需校验
        this.currentStep = n
        return
      }
      // 向前跳需逐级校验中间每一步（保证"每步都校验"）
      for (var s = this.currentStep; s < n; s++) {
        if (!this.validateStep(s)) return
      }
      this.currentStep = n
    },
    prev: function() {
      if (this.currentStep > 1) {
        this.currentStep -= 1
      }
    },
    next: function() {
      var pass = this.validateStep(this.currentStep)
      if (!pass) return
      if (this.currentStep < 4) {
        this.currentStep += 1
      }
    },
    // —— 每步校验（用户在确认需求时明确要求"每步都校验"） ——
    validateStep: function(step) {
      var self = this
      var validatorMap = {
        1: this.validateVitals,
        2: this.validateMedical,
        3: this.validateDiet
      }
      var fn = validatorMap[step]
      if (fn) {
        var msg = fn.call(this)
        if (msg) {
          uni.showToast({ title: msg, icon: 'none' })
          return false
        }
      }
      return true
    },
    // Step1: 体征数值合法性
    validateVitals: function() {
      var form = this.currentMemberForm
      var height = String(form.heightCm || '').trim()
      var weight = String(form.weightKg || '').trim()
      var bp = String(form.bloodPressure || '').trim()
      var glucose = String(form.bloodGlucose || '').trim()
      if (height && !/^\d{2,3}(\.\d+)?$/.test(height)) {
        return '身高格式不正确'
      }
      if (weight && !/^\d{1,3}(\.\d+)?$/.test(weight)) {
        return '体重格式不正确'
      }
      if (bp && !/^\d{2,3}\/\d{2,3}$/.test(bp)) {
        return '血压格式应为 120/80'
      }
      if (glucose && !/^\d{1,2}(\.\d+)?$/.test(glucose)) {
        return '血糖格式不正确'
      }
      return ''
    },
    // Step2: 疾病史至少填写一项，或已标记"无长期用药"
    validateMedical: function() {
      var snapshot = this.currentMemberForm
      if (snapshot.noMedication) return ''
      var diseases = snapshot.selectedDiseases || []
      var meds = snapshot.medRows || []
      var hasMed = meds.some(function(m) { return m && m.name && String(m.name).trim() })
      if (diseases.length === 0 && !hasMed) {
        return '请至少填写一项疾病史或药物，如无请勾选"无长期用药"'
      }
      return ''
    },
    // Step3: 饮食习惯至少填写一项（忌口/偏好/必吃/菜系/烹饪/辣度/宗教饮食/目标任一）
    validateDiet: function() {
      var diet = this.currentMemberDiet || {}
      // 已明确选择「无特殊偏好」→ 直接通过
      if (diet.noPreference) return ''
      var arrays = [diet.allergies, diet.absoluteAvoid, diet.mustEat, diet.flavorPref, diet.cuisinePref, diet.cookingMethods, diet.healthGoals]
      var hasAny = arrays.some(function(a) { return a && a.length > 0 })
      if (!hasAny && !(diet.spiceLevel && Number(diet.spiceLevel) > 0) && !(diet.religiousDiet && diet.religiousDiet !== 'none')) {
        return '请至少选择一项饮食习惯偏好'
      }
      return ''
    },
    // —— 子组件数据同步回父组件 ——
    onVitalsInput: function(payload) {
      this.$emit('update-vitals', payload)
    },
    onMedicalInput: function(payload) {
      this.$emit('update-medical', payload)
    },
    onDietInput: function(payload) {
      this.$emit('update-diet', payload)
    },
    // 第3步「无特殊偏好」：跳过校验直接进入确认步
    onDietSkipNoPreference: function() {
      this.currentStep = 4
    },
    // —— 确认步骤提交：聚合所有成员数据后交给父组件统一保存+生成 ——
    handleSubmit: function() {
      var self = this
      this.$emit('submit', {
        memberFormMap: self.memberFormMap,
        dietMap: self.dietMap,
        activeFormMemberId: self.activeFormMemberId
      })
    }
  }
}
</script>

<style scoped>
.wizard-wrap {
  display: flex;
  flex-direction: column;
  min-height: 600rpx;
}
.wizard-steps {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 10rpx 10rpx;
  background: #fff;
}
.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.wizard-step-num {
  width: 44rpx;
  height: 44rpx;
  border-radius: 22rpx;
  background: #e0e0e0;
  color: #999;
  font-size: 24rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wizard-step-active .wizard-step-num {
  background: #F97316;
  color: #fff;
}
.wizard-step-done .wizard-step-num {
  background: #4CAF50;
  color: #fff;
}
.wizard-step-label {
  font-size: 20rpx;
  color: #999;
  white-space: nowrap;
  margin-top: 6rpx;
}
.wizard-step-active .wizard-step-label,
.wizard-step-done .wizard-step-label {
  color: #333;
  font-weight: 500;
}
.wizard-body {
  flex: 1;
  padding: 10rpx 20rpx;
}
.wizard-footer {
  display: flex;
  padding: 20rpx 20rpx 30rpx;
}
.btn-prev,
.btn-next {
  flex: 1;
  margin: 0 10rpx;
  border-radius: 999rpx;
  font-size: 30rpx;
  font-weight: 600;
}
.btn-prev {
  background: #F1F5F9;
  color: #334155;
}
.btn-next {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
}
</style>