浏览代码

feat(profile): 优化患者档案表单交互

- 为过敏史和家族史字段添加开关控制
- 根据开关状态动态显示或隐藏输入框
- 提交时仅发送已启用字段的数据
- 新增 hasAllergy 和 hasFamilyHistory 状态管理
- 调整样式以支持新开关布局
- 更新表单提交逻辑以兼容新结构
mcbaiyun 2 月之前
父节点
当前提交
3c1073e841
共有 1 个文件被更改,包括 35 次插入16 次删除
  1. 35 16
      src/pages/profile/infos/patient-filing.vue

+ 35 - 16
src/pages/profile/infos/patient-filing.vue

@@ -44,22 +44,32 @@
 
       <!-- 过敏史 -->
       <view class="form-item">
-        <text class="label">过敏史</text>
-        <textarea
-          v-model="allergyHistory"
-          placeholder="请输入过敏史"
-          class="input"
-        />
+        <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">
-        <text class="label">家族史</text>
-        <textarea
-          v-model="familyHistory"
-          placeholder="请输入家族史"
-          class="input"
-        />
+        <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>
 
       <!-- 提交按钮 -->
@@ -112,6 +122,8 @@ const diseaseHistory = ref<Record<string, boolean>>({
 const medicationHistory = ref('')
 const allergyHistory = ref('')
 const familyHistory = ref('')
+const hasAllergy = ref(false)
+const hasFamilyHistory = ref(false)
 
 // 切换疾病状态
 const toggleDisease = (key: string, value: boolean) => {
@@ -125,8 +137,8 @@ const submitForm = () => {
     drinkingHistory: drinkingHistory.value,
     diseaseHistory: diseaseHistory.value,
     medicationHistory: medicationHistory.value,
-    allergyHistory: allergyHistory.value,
-    familyHistory: familyHistory.value
+    allergyHistory: hasAllergy.value ? allergyHistory.value : '',
+    familyHistory: hasFamilyHistory.value ? familyHistory.value : ''
   }
   console.log('提交的表单数据:', formData)
   // 这里可以添加提交逻辑,比如调用API
@@ -229,8 +241,15 @@ const submitForm = () => {
   max-width: 100%;
 }
 
-.submit-section {
-  margin-top: 60rpx;
+.switch-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10rpx;
+}
+
+.input-container {
+  margin-top: 10rpx;
 }
 
 .submit-btn {