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

<template>
  <view class="vitals-step">
    <view class="step-title-row">
      <text class="step-title">基础体征</text>
      <text class="step-sub">填写身高、体重、血压、血糖等基础指标</text>
    </view>

    <!-- 身高 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">身高 (cm)</text>
        <view class="quick-chips">
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': heightQuick === 'normal' }"
            @click="setHeightQuick('normal')"
          ><text>正常</text></view>
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': heightQuick === 'high' }"
            @click="setHeightQuick('high')"
          ><text>偏高</text></view>
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': heightQuick === 'low' }"
            @click="setHeightQuick('low')"
          ><text>偏低</text></view>
        </view>
      </view>
      <input class="num-input" type="digit" v-model="inner.heightCm" placeholder="如 170"
             @input="onInput" />
      <text class="unit-hint">单位：厘米</text>
    </view>

    <!-- 体重 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">体重 (kg)</text>
        <view class="quick-chips">
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': weightQuick === 'normal' }"
            @click="setWeightQuick('normal')"
          ><text>正常</text></view>
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': weightQuick === 'high' }"
            @click="setWeightQuick('high')"
          ><text>偏重</text></view>
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': weightQuick === 'low' }"
            @click="setWeightQuick('low')"
          ><text>偏轻</text></view>
        </view>
      </view>
      <input class="num-input" type="digit" v-model="inner.weightKg" placeholder="如 60"
             @input="onInput" />
      <text class="unit-hint">单位：公斤</text>
    </view>

    <!-- 血压 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">血压</text>
        <view class="quick-chips">
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': bpQuick === 'normal' }"
            @click="setBpQuick('normal')"
          ><text>正常</text></view>
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': bpQuick === 'high' }"
            @click="setBpQuick('high')"
          ><text>偏高</text></view>
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': bpQuick === 'low' }"
            @click="setBpQuick('low')"
          ><text>偏低</text></view>
        </view>
      </view>
      <input class="num-input" type="text" v-model="inner.bloodPressure" placeholder="如 120/80"
             @input="onInput" />
      <text class="unit-hint">格式：收缩压/舒张压 (mmHg)</text>
    </view>

    <!-- 血糖 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">空腹血糖 (mmol/L)</text>
        <view class="quick-chips">
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': glucoseQuick === 'normal' }"
            @click="setGlucoseQuick('normal')"
          ><text>正常</text></view>
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': glucoseQuick === 'high' }"
            @click="setGlucoseQuick('high')"
          ><text>偏高</text></view>
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': glucoseQuick === 'low' }"
            @click="setGlucoseQuick('low')"
          ><text>偏低</text></view>
        </view>
      </view>
      <input class="num-input" type="digit" v-model="inner.bloodGlucose" placeholder="如 5.6"
             @input="onInput" />
    </view>

    <!-- 血脂 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">总胆固醇 (mmol/L)</text>
        <view class="quick-chips">
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': lipidQuick === 'normal' }"
            @click="setLipidQuick('normal')"
          ><text>正常</text></view>
          <view
            class="quick-chip"
            :class="{ 'quick-chip-on': lipidQuick === 'high' }"
            @click="setLipidQuick('high')"
          ><text>偏高</text></view>
        </view>
      </view>
      <input class="num-input" type="digit" v-model="inner.lipidCholesterol" placeholder="如 4.5"
             @input="onInput" />
    </view>

    <!-- 其他补充 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">其他补充（选填）</text>
      </view>
      <textarea class="notes-area" v-model="inner.notes" placeholder="其他想补充的健康信息"
                :maxlength="500" @input="onInput" />
    </view>
  </view>
</template>

<script>
// 快捷标签 → 参考数值（近似参考值，点击后填入输入框，用户可继续手改）
var QUICK_VALUES = {
  height: { normal: '170', high: '185', low: '155' },
  weight: { normal: '60', high: '80', low: '45' },
  bloodPressure: { normal: '120/80', high: '140/90', low: '90/60' },
  bloodGlucose: { normal: '5.0', high: '7.0', low: '3.5' },
  lipid: { normal: '4.5', high: '6.2' }
}

function matchQuick(map, val) {
  if (val === '' || val === null || val === undefined) return ''
  var v = String(val)
  for (var k in map) {
    if (Object.prototype.hasOwnProperty.call(map, k) && map[k] === v) return k
  }
  return ''
}

export default {
  name: 'BasicVitalsStep',
  props: {
    value: {
      type: Object,
      default: function() { return {} }
    }
  },
  data() {
    return {
      inner: {
        heightCm: '',
        weightKg: '',
        bloodPressure: '',
        bloodGlucose: '',
        lipidCholesterol: '',
        notes: ''
      }
    }
  },
  computed: {
    heightQuick: function() { return matchQuick(QUICK_VALUES.height, this.inner.heightCm) },
    weightQuick: function() { return matchQuick(QUICK_VALUES.weight, this.inner.weightKg) },
    bpQuick: function() { return matchQuick(QUICK_VALUES.bloodPressure, this.inner.bloodPressure) },
    glucoseQuick: function() { return matchQuick(QUICK_VALUES.bloodGlucose, this.inner.bloodGlucose) },
    lipidQuick: function() { return matchQuick(QUICK_VALUES.lipid, this.inner.lipidCholesterol) }
  },
  watch: {
    value: {
      deep: true,
      handler: function(val) {
        this.syncFromValue(val)
      }
    }
  },
  created: function() {
    this.syncFromValue(this.value)
  },
  methods: {
    syncFromValue: function(val) {
      if (!val) return
      this.inner.heightCm = val.heightCm != null ? String(val.heightCm) : ''
      this.inner.weightKg = val.weightKg != null ? String(val.weightKg) : ''
      this.inner.bloodPressure = val.bloodPressure != null ? String(val.bloodPressure) : ''
      this.inner.bloodGlucose = val.bloodGlucose != null ? String(val.bloodGlucose) : ''
      this.inner.lipidCholesterol = val.lipidCholesterol != null ? String(val.lipidCholesterol) : ''
      this.inner.notes = val.notes != null ? String(val.notes) : ''
    },
    onInput: function() {
      var payload = {
        heightCm: this.inner.heightCm,
        weightKg: this.inner.weightKg,
        bloodPressure: this.inner.bloodPressure,
        bloodGlucose: this.inner.bloodGlucose,
        lipidCholesterol: this.inner.lipidCholesterol,
        notes: this.inner.notes
      }
      this.$emit('input', payload)
    },
    // 快捷选择：点击标签把对应参考数值填入输入框（用户可继续手改）
    setHeightQuick: function(k) {
      this.inner.heightCm = QUICK_VALUES.height[k] || ''
      this.onInput()
    },
    setWeightQuick: function(k) {
      this.inner.weightKg = QUICK_VALUES.weight[k] || ''
      this.onInput()
    },
    setBpQuick: function(k) {
      this.inner.bloodPressure = QUICK_VALUES.bloodPressure[k] || ''
      this.onInput()
    },
    setGlucoseQuick: function(k) {
      this.inner.bloodGlucose = QUICK_VALUES.bloodGlucose[k] || ''
      this.onInput()
    },
    setLipidQuick: function(k) {
      this.inner.lipidCholesterol = QUICK_VALUES.lipid[k] || ''
      this.onInput()
    }
  }
}
</script>

<style scoped>
.vitals-step {
  padding: 10rpx 0 30rpx;
}
.step-title-row {
  margin-bottom: 20rpx;
}
.step-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #333;
}
.step-sub {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}
.form-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}
.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}
.quick-chips {
  display: flex;
  flex-wrap: wrap;
}
.quick-chip {
  padding: 8rpx 20rpx;
  border-radius: 999rpx;
  background: #F1F5F9;
  font-size: 22rpx;
  color: #64748B;
  margin-left: 10rpx;
  margin-bottom: 6rpx;
}
.quick-chip-on {
  background: #FFF3E0;
  color: #F97316;
  font-weight: 600;
}
.num-input {
  height: 80rpx;
  border: 2rpx solid #E2E8F0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  background: #F8FAFC;
}
.unit-hint {
  display: block;
  font-size: 22rpx;
  color: #999;
  margin-top: 10rpx;
}
.notes-area {
  width: 100%;
  min-height: 160rpx;
  background: #F8FAFC;
  border: 2rpx solid #E2E8F0;
  border-radius: 12rpx;
  padding: 16rpx;
  font-size: 26rpx;
  color: #333;
}
</style>