Răsfoiți Sursa

feat(profile): 新增患者建档信息设定功能

- 在 pages.json 中添加 patient-filing 页面路径及导航标题
- 在个人资料首页增加建档信息设定菜单项及点击跳转逻辑
- 创建患者建档信息页面,包含吸烟饮酒史、疾病诊断、用药情况等表单
- 实现表单数据收集与提交功能,支持多种输入类型(单选、开关、文本域)
- 添加相应的样式设计,确保界面美观且用户体验良好
mcbaiyun 2 luni în urmă
părinte
comite
6b04e7ed7d
3 a modificat fișierele cu 262 adăugiri și 2 ștergeri
  1. 7 1
      src/pages.json
  2. 10 1
      src/pages/profile/index.vue
  3. 245 0
      src/pages/profile/infos/patient-filing.vue

+ 7 - 1
src/pages.json

@@ -51,7 +51,13 @@
 		{
 			"path": "pages/profile/infos/base-info",
 			"style": {
-				"navigationBarTitleText": "完善信息"
+				"navigationBarTitleText": "基本信息设定"
+			}
+		},
+		{
+			"path": "pages/profile/infos/patient-filing",
+			"style": {
+				"navigationBarTitleText": "建档信息设定"
 			}
 		}
 	],

+ 10 - 1
src/pages/profile/index.vue

@@ -19,7 +19,11 @@
 
     <view class="menu-list">
       <view class="menu-item" @click="onMenuClick('base-info')">
-        <text class="menu-text">修改信息</text>
+        <text class="menu-text">基本信息设定</text>
+        <text class="menu-arrow"></text>
+      </view>
+            <view class="menu-item" @click="onMenuClick('patient-filing')">
+        <text class="menu-text">建档信息设定</text>
         <text class="menu-arrow"></text>
       </view>
       <view class="menu-item" @click="onMenuClick('settings')">
@@ -140,6 +144,11 @@ const onMenuClick = (type: string) => {
     uni.navigateTo({ url: '/pages/profile/infos/base-info' })
     return
   }
+  if (type === 'patient-filing') {
+    // 跳转到建档信息设定页面
+    uni.navigateTo({ url: '/pages/profile/infos/patient-filing' })
+    return
+  }
   uni.showToast({
     title: `${type} 功能开发中`,
     icon: 'none'

+ 245 - 0
src/pages/profile/infos/patient-filing.vue

@@ -0,0 +1,245 @@
+<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>
+        <view class="radio-group">
+          <label class="radio-item" v-for="option in smokingOptions" :key="option.value">
+            <radio :value="option.value" :checked="smokingHistory === option.value" @change="smokingHistory = $event.detail.value" />
+            <text>{{ option.label }}</text>
+          </label>
+        </view>
+        <view class="radio-group">
+          <label class="radio-item" v-for="option in drinkingOptions" :key="option.value">
+            <radio :value="option.value" :checked="drinkingHistory === option.value" @change="drinkingHistory = $event.detail.value" />
+            <text>{{ option.label }}</text>
+          </label>
+        </view>
+      </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">
+        <text class="label">过敏史</text>
+        <textarea
+          v-model="allergyHistory"
+          placeholder="请输入过敏史"
+          class="input"
+        />
+      </view>
+
+      <!-- 家族史 -->
+      <view class="form-item">
+        <text class="label">家族史</text>
+        <textarea
+          v-model="familyHistory"
+          placeholder="请输入家族史"
+          class="input"
+        />
+      </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/CustomNav.vue'
+
+// 吸烟选项
+const smokingOptions = [
+  { label: '从不吸烟', value: 'never' },
+  { label: '已戒烟', value: 'quit' },
+  { label: '偶尔吸烟', value: 'occasional' },
+  { label: '经常吸烟', value: 'frequent' }
+]
+
+// 饮酒选项
+const drinkingOptions = [
+  { label: '从不饮酒', value: 'never' },
+  { label: '已戒酒', value: 'quit' },
+  { label: '偶尔饮酒', 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 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 toggleDisease = (key: string, value: boolean) => {
+  diseaseHistory.value[key] = value
+}
+
+// 提交表单
+const submitForm = () => {
+  const formData = {
+    smokingHistory: smokingHistory.value,
+    drinkingHistory: drinkingHistory.value,
+    diseaseHistory: diseaseHistory.value,
+    medicationHistory: medicationHistory.value,
+    allergyHistory: allergyHistory.value,
+    familyHistory: 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%;
+}
+
+.submit-section {
+  margin-top: 60rpx;
+}
+
+.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>