ChronicDisease_UniApp/src/pages/public/profile/infos/patient-filing.vue

<template>
  <CustomNav title="患者建档信息" leftType="home" />
  <view class="complete-container">
    <view class="form-section">
      <text class="section-title">患者建档信息</text>

      <!-- 吸烟饮酒史 -->
      <view class="form-item">
        <text class="label">吸烟史</text>
        <picker mode="selector" :range="smokingOptions" :value="smokingIndex" range-key="label" @change="onSmokingChange">
          <view class="picker">{{ smokingSelected ? smokingOptions[smokingIndex]?.label : '请点击选择' }}</view>
        </picker>
      </view>

      <view class="form-item">
        <text class="label">饮酒史</text>
        <picker mode="selector" :range="drinkingOptions" :value="drinkingIndex" range-key="label" @change="onDrinkingChange">
          <view class="picker">{{ drinkingSelected ? drinkingOptions[drinkingIndex]?.label : '请点击选择' }}</view>
        </picker>
      </view>

      <!-- 疾病诊断 -->
      <view class="form-item">
        <text class="label">疾病诊断</text>
        <view class="disease-list">
          <view class="disease-item" v-for="disease in diseases" :key="disease.key">
            <text class="disease-label">{{ disease.label }}</text>
            <switch :checked="diseaseHistory[disease.key]" @change="(e: any) => toggleDisease(disease.key, e.detail.value)" />
          </view>
        </view>
      </view>

      <!-- 用药情况 -->
      <view class="form-item">
        <text class="label">用药情况</text>
        <textarea
          v-model="medicationHistory"
          placeholder="请输入用药情况"
          class="input"
        />
      </view>

      <!-- 过敏史 -->
      <view class="form-item">
        <view class="switch-row">
          <text class="label">过敏史</text>
          <switch :checked="hasAllergy" @change="(e: any) => hasAllergy = e.detail.value" />
        </view>
        <view v-if="hasAllergy" class="input-container">
          <textarea
            v-model="allergyHistory"
            placeholder="请输入过敏史"
            class="input"
          />
        </view>
      </view>

      <!-- 家族史 -->
      <view class="form-item">
        <view class="switch-row">
          <text class="label">家族史</text>
          <switch :checked="hasFamilyHistory" @change="(e: any) => hasFamilyHistory = e.detail.value" />
        </view>
        <view v-if="hasFamilyHistory" class="input-container">
          <textarea
            v-model="familyHistory"
            placeholder="请输入家族史"
            class="input"
          />
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-section">
        <button class="submit-btn" @click="submitForm">提交</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CustomNav from '@/components/custom-nav.vue'

// 吸烟选项
const smokingOptions = [
  { label: '否', value: 'no' },
  { label: '偶尔（吸烟<1包/周）', value: 'occasional' },
  { label: '经常', value: 'frequent' }
]

// 饮酒选项
const drinkingOptions = [
  { label: '否', value: 'no' },
  { label: '偶尔（饮酒<1次/周）', value: 'occasional' },
  { label: '经常', value: 'frequent' }
]

// 疾病列表
const diseases = [
  { key: 'diabetes', label: '糖尿病' },
  { key: 'hypertension', label: '高血压' },
  { key: 'dyslipidemia', label: '血脂异常' },
  { key: 'coronaryHeartDisease', label: '冠心病' },
  { key: 'cerebralInfarction', label: '脑梗塞' }
]

// 响应式数据
const smokingHistory = ref('')
const drinkingHistory = ref('')
const smokingIndex = ref(0)
const drinkingIndex = ref(0)
const smokingSelected = ref(false)
const drinkingSelected = ref(false)
const diseaseHistory = ref<Record<string, boolean>>({
  diabetes: false,
  hypertension: false,
  dyslipidemia: false,
  coronaryHeartDisease: false,
  cerebralInfarction: false
})
const medicationHistory = ref('')
const allergyHistory = ref('')
const familyHistory = ref('')
const hasAllergy = ref(false)
const hasFamilyHistory = ref(false)

// 切换疾病状态
const toggleDisease = (key: string, value: boolean) => {
  diseaseHistory.value[key] = value
}

// picker change事件处理
const onSmokingChange = (e: any) => {
  smokingIndex.value = e.detail.value
  smokingHistory.value = smokingOptions[smokingIndex.value].value
  smokingSelected.value = true
}

const onDrinkingChange = (e: any) => {
  drinkingIndex.value = e.detail.value
  drinkingHistory.value = drinkingOptions[drinkingIndex.value].value
  drinkingSelected.value = true
}

// 提交表单
const submitForm = () => {
  const formData = {
    smokingHistory: smokingHistory.value,
    drinkingHistory: drinkingHistory.value,
    diseaseHistory: diseaseHistory.value,
    medicationHistory: medicationHistory.value,
    allergyHistory: hasAllergy.value ? allergyHistory.value : '',
    familyHistory: hasFamilyHistory.value ? familyHistory.value : ''
  }
  console.log('提交的表单数据:', formData)
  // 这里可以添加提交逻辑，比如调用API
  uni.showToast({
    title: '提交成功',
    icon: 'success'
  })
}
</script>

<style>
.complete-container {
  min-height: 100vh;
  /* 为固定在顶部的 CustomNav 留出空间（状态栏 + 导航栏 44px） */
  padding-top: calc(var(--status-bar-height) + 44px + 40rpx);
  /* 保留侧边与内部间距，使用 border-box 避免计算误差 */
  padding-right: 40rpx;
  padding-left: 40rpx;
  /* 底部安全区：使用项目中声明的 --window-bottom 或 fallback */
  padding-bottom: calc(var(--window-bottom, 0px) + 40rpx);
  box-sizing: border-box;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 100%;
  max-width: 600rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 40rpx;
  display: block;
  text-align: center;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 40rpx;
  margin-bottom: 20rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: #333;
}

.disease-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.disease-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
}

.disease-label {
  font-size: 32rpx;
  color: #333;
}

.input {
  width: 100%;
  height: 120rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 32rpx;
  box-sizing: border-box;
  max-width: 100%;
}

.picker {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: #333;
  box-sizing: border-box;
  max-width: 100%;
}

.switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.input-container {
  margin-top: 10rpx;
}

.submit-btn {
  width: 100%;
  background: linear-gradient(135deg, #07C160 0%, #00A854 100%);
  color: #fff;
  border-radius: 12rpx;
  font-size: 32rpx;
  line-height: 80rpx;
  border: none;
}
</style>