feat(health): 新增慢性疾病档案小程序模块

- 新增慢性疾病档案API接口
- 新增慢性疾病档案列表页
- 新增慢性疾病档案新增/编辑页
- 支持成员选择、疾病状态管理
- 参考现有模块样式开发

src/api/health/chronicDisease.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询慢性疾病档案列表
+export function listChronicDisease(query) {
+  return request({
+    url: '/health/chronicDisease/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询慢性疾病档案详细
+export function getChronicDisease(id) {
+  return request({
+    url: '/health/chronicDisease/' + id,
+    method: 'get'
+  })
+}
+
+// 新增慢性疾病档案
+export function addChronicDisease(data) {
+  return request({
+    url: '/health/chronicDisease',
+    method: 'post',
+    data
+  })
+}
+
+// 修改慢性疾病档案
+export function updateChronicDisease(data) {
+  return request({
+    url: '/health/chronicDisease',
+    method: 'put',
+    data
+  })
+}
+
+// 删除慢性疾病档案
+export function delChronicDisease(id) {
+  return request({
+    url: '/health/chronicDisease/' + id,
+    method: 'delete'
+  })
+}

src/pages.json

@@ -224,7 +224,19 @@
       "style": {
         "navigationBarTitleText": "活动记录"
       }
-    } ,
+    },
+    {
+      "path": "pages/health/chronicDisease/list",
+      "style": {
+        "navigationBarTitleText": "慢性疾病档案"
+      }
+    },
+    {
+      "path": "pages/health/chronicDisease/addEdit",
+      "style": {
+        "navigationBarTitleText": "慢性疾病档案"
+      }
+    },
     {
       "path": "pages/health/statistic/doctorStatistic/index",
       "style": {

src/pages/health/chronicDisease/addEdit.vue

@@ -0,0 +1,387 @@
+<template>
+  <view class="container" style="paddingBottom:1rpx;">
+    <view class="section">
+      <view class="section-title">{{ title }}</view>
+      <view class="form-view">
+        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
+          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
+          <u-form-item label="成员" prop="memberName" required @click="handleMember">
+            <view class="input-with-arrow">
+              <u--input v-model="form.memberName" disabled disabledColor="#ffffff" placeholder="请选择成员"
+                inputAlign="left" :customStyle="getInputStyle('memberName')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
+          </u-form-item>
+          <u-form-item label="疾病名称" prop="diseaseName" required>
+            <u--input v-model="form.diseaseName" placeholder="请输入疾病名称"
+              inputAlign="left" :customStyle="getInputStyle('diseaseName')"></u--input>
+          </u-form-item>
+          <u-form-item label="疾病编码" prop="diseaseCode">
+            <u--input v-model="form.diseaseCode" placeholder="ICD-10编码（可选）"
+              inputAlign="left" :customStyle="getInputStyle('diseaseCode')"></u--input>
+          </u-form-item>
+          <u-form-item label="确诊日期" prop="diagnosisDate" @click="selectDate">
+            <view class="input-with-arrow">
+              <u--input v-model="form.diagnosisDate" disabled disabledColor="#ffffff" placeholder="请选择确诊日期"
+                inputAlign="left" :customStyle="getInputStyle('diagnosisDate')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
+          </u-form-item>
+          <u-form-item label="疾病状态" prop="diseaseStatusName" required @click="handleStatus">
+            <view class="input-with-arrow">
+              <u--input v-model="form.diseaseStatusName" disabled disabledColor="#ffffff" placeholder="请选择疾病状态"
+                inputAlign="left" :customStyle="getInputStyle('diseaseStatusName')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
+          </u-form-item>
+          <u-form-item label="主治医生" prop="mainDoctor">
+            <u--input v-model="form.mainDoctor" placeholder="请输入主治医生"
+              inputAlign="left" :customStyle="getInputStyle('mainDoctor')"></u--input>
+          </u-form-item>
+          <u-form-item label="就诊医院" prop="hospital">
+            <u--input v-model="form.hospital" placeholder="请输入就诊医院"
+              inputAlign="left" :customStyle="getInputStyle('hospital')"></u--input>
+          </u-form-item>
+          <u-form-item label="科室" prop="department">
+            <u--input v-model="form.department" placeholder="请输入科室"
+              inputAlign="left" :customStyle="getInputStyle('department')"></u--input>
+          </u-form-item>
+          <u-form-item label="是否启用" prop="isActive">
+            <u-switch v-model="isActiveSwitch" activeColor="#667eea" @change="handleActiveChange"></u-switch>
+          </u-form-item>
+          <u-form-item label="备注说明" prop="notes" labelPosition="top">
+            <u--textarea v-model="form.notes" height="60rpx" placeholder="请输入备注说明" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"
+              :customStyle="getTextareaStyle('notes')"></u--textarea>
+          </u-form-item>
+          <u-form-item label="备注" prop="remark" labelPosition="top">
+            <u--textarea v-model="form.remark" height="40rpx" placeholder="请输入备注" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"
+              :customStyle="getTextareaStyle('remark')"></u--textarea>
+          </u-form-item>
+        </u--form>
+        <view class="form-btn">
+          <u-button type="primary" text="提交" @click="submit"></u-button>
+        </view>
+      </view>
+    </view>
+    <u-toast ref="uToast"></u-toast>
+    <u-picker itemHeight="88" :show="showMember" :columns="memberList" keyName="name"
+      @cancel="handleMemberCancel" @confirm="handleMemberConfirm"></u-picker>
+    <u-picker itemHeight="88" :show="showStatus" :columns="statusList" keyName="label"
+      @cancel="handleStatusCancel" @confirm="handleStatusConfirm"></u-picker>
+    <u-datetime-picker
+      :show="datePickShow"
+      mode="date"
+      ref="diagnosisDateRef"
+      @cancel="datePickShow=false"
+      @confirm="datePickConfirm"
+      itemHeight="88"
+      :maxDate="maxDate"
+    ></u-datetime-picker>
+  </view>
+</template>
+
+<script setup>
+import { getChronicDisease, addChronicDisease, updateChronicDisease } from '@/api/health/chronicDisease'
+import { listPerson } from '@/api/health/person'
+import { onLoad, onReady } from "@dcloudio/uni-app"
+import dayjs from 'dayjs'
+import { reactive, toRefs, ref, computed, getCurrentInstance } from "vue"
+
+const { proxy } = getCurrentInstance()
+const datePickShow = ref(false)
+const showMember = ref(false)
+const showStatus = ref(false)
+const title = ref("慢性疾病档案")
+const memberList = ref([])
+const maxDate = ref(Date.now())
+
+const statusList = ref([
+  [
+    { value: 1, label: '稳定' },
+    { value: 2, label: '需关注' },
+    { value: 3, label: '急性期' }
+  ]
+])
+
+const data = reactive({
+  form: {
+    id: null,
+    memberId: null,
+    memberName: null,
+    diseaseName: null,
+    diseaseCode: null,
+    diagnosisDate: null,
+    diseaseStatus: 1,
+    diseaseStatusName: '稳定',
+    mainDoctor: null,
+    hospital: null,
+    department: null,
+    isActive: 1,
+    notes: null,
+    remark: null
+  },
+  queryPersonParams: {
+    pageNum: 1,
+    pageSize: 1000
+  },
+  rules: {
+    memberName: [{ required: true, message: '成员不能为空', trigger: ['change', 'blur'] }],
+    diseaseName: [{ required: true, message: '疾病名称不能为空', trigger: ['change', 'blur'] }],
+    diseaseStatusName: [{ required: true, message: '疾病状态不能为空', trigger: ['change', 'blur'] }]
+  }
+})
+
+const { form, queryPersonParams, rules } = toRefs(data)
+
+// 错误字段
+const errorFields = ref([])
+
+// 输入框基础样式
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 输入框错误样式
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 根据字段名获取输入框样式
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+
+// 文本域基础样式
+const textareaBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+}
+
+// 文本域错误样式
+const textareaErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c'
+}
+
+// 根据字段名获取文本域样式
+const getTextareaStyle = (field) => {
+  return errorFields.value.includes(field) ? textareaErrorStyle : textareaBaseStyle
+}
+
+// 是否启用开关
+const isActiveSwitch = computed({
+  get: () => form.value.isActive === 1,
+  set: (val) => { form.value.isActive = val ? 1 : 0 }
+})
+
+onLoad((option) => {
+  form.value.id = option.id
+  if (form.value.id != null) {
+    title.value = "慢性疾病档案-修改"
+  } else {
+    title.value = "慢性疾病档案-新增"
+  }
+  getData()
+})
+
+function getData() {
+  listPerson(queryPersonParams.value).then((response) => {
+    memberList.value = [response.rows]
+    if (form.value.id != null) {
+      getChronicDisease(form.value.id).then(res => {
+        form.value = res.data
+        // 设置状态名称
+        const statusItem = statusList.value[0].find(s => s.value === form.value.diseaseStatus)
+        if (statusItem) {
+          form.value.diseaseStatusName = statusItem.label
+        }
+      })
+    } else {
+      // 默认选择第一个成员
+      if (response.rows.length > 0) {
+        form.value.memberName = response.rows[0].name
+        form.value.memberId = response.rows[0].id
+      }
+    }
+  })
+}
+
+function handleMember() {
+  if (memberList.value[0].length === 0) {
+    proxy.$refs['uToast'].show({
+      message: '成员为空', type: 'warning'
+    })
+  } else {
+    showMember.value = true
+  }
+}
+
+function handleMemberConfirm(e) {
+  form.value.memberName = e.value[0].name
+  form.value.memberId = e.value[0].id
+  showMember.value = false
+}
+
+function handleMemberCancel() {
+  showMember.value = false
+}
+
+function handleStatus() {
+  showStatus.value = true
+}
+
+function handleStatusConfirm(e) {
+  form.value.diseaseStatusName = e.value[0].label
+  form.value.diseaseStatus = e.value[0].value
+  showStatus.value = false
+}
+
+function handleStatusCancel() {
+  showStatus.value = false
+}
+
+function selectDate() {
+  datePickShow.value = true
+  proxy.$refs['diagnosisDateRef'].innerValue = new Date().getTime()
+}
+
+function datePickConfirm(e) {
+  form.value.diagnosisDate = dayjs(e.value).format("YYYY-MM-DD")
+  datePickShow.value = false
+}
+
+function handleActiveChange(val) {
+  form.value.isActive = val ? 1 : 0
+}
+
+function submit() {
+  proxy.$refs['uForm'].validate().then(() => {
+    if (form.value.id != null) {
+      updateChronicDisease(form.value).then(res => {
+        proxy.$refs['uToast'].show({
+          message: '修改成功', complete() {
+            uni.navigateTo({ url: `/pages/health/chronicDisease/list` })
+          }
+        })
+      })
+    } else {
+      addChronicDisease(form.value).then(res => {
+        proxy.$refs['uToast'].show({
+          message: '新增成功', complete() {
+            uni.navigateTo({ url: `/pages/health/chronicDisease/list` })
+          }
+        })
+      })
+    }
+  }).catch(errors => {
+    if (errors && errors.length > 0) {
+      errorFields.value = errors.map(err => err.field)
+    }
+    proxy.$modal.msgError('请填写完整信息')
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
+
+.section {
+  margin: 24rpx;
+  padding: 0;
+  background-color: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+
+  .section-title {
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+  }
+
+  .form-view {
+    padding: 24rpx;
+
+    .form-btn {
+      padding-top: 16rpx;
+    }
+
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
+
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+</style>

src/pages/health/chronicDisease/list.vue

@@ -0,0 +1,684 @@
+<template>
+  <view class="container">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="search-container">
+        <view class="search-row">
+          <view class="search-input-wrapper">
+            <u--input 
+              v-model="queryParams.diseaseName" 
+              border="surround"
+              placeholder="请输入疾病名称" 
+              placeholderStyle="color: #909399"
+              color="#333333"
+              customStyle="background: rgba(102, 126, 234, 0.08); border: 2rpx solid rgba(102, 126, 234, 0.3); border-radius: 24rpx; height: 66rpx"
+              class="search-input"
+              @blur="searchBlur">
+            </u--input>
+          </view>
+          <view class="add-btn" @click="handleAdd()">
+            <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+            <text>新增</text>
+          </view>
+        </view>
+        <view class="search-row">
+          <view class="search-input-wrapper">
+            <u--input 
+              v-model="queryParams.memberName" 
+              border="surround"
+              readonly
+              placeholder="请选择成员" 
+              placeholderStyle="color: #909399"
+              color="#333333"
+              customStyle="background: rgba(102, 126, 234, 0.08); border: 2rpx solid rgba(102, 126, 234, 0.3); border-radius: 24rpx; height: 66rpx"
+              class="search-input">
+            </u--input>
+            <uni-icons 
+              type="search" 
+              size="18" 
+              color="#667eea" 
+              class="search-icon"
+              @click="handleMember">
+            </uni-icons>
+          </view>
+          <view class="filter-btn" @click="filterPanel = !filterPanel">
+            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+            <text>筛选</text>
+          </view>
+        </view>
+      </view>
+      
+      <u-transition :show="filterPanel" mode="fade">
+        <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
+          <view class="filter-panel-content">
+            <view class="filter-title">疾病状态</view>
+            <view class="state-list">
+              <view v-for="item in diseaseStatusList" :key="item.value" class="state-item"
+                :class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.label }}</view>
+            </view>
+            <view class="filter-title">是否启用</view>
+            <view class="state-list">
+              <view v-for="item in isActiveList" :key="item.value" class="state-item"
+                :class="item.selected ? 'active' : ''" @click="selectActive(item)">{{ item.label }}</view>
+            </view>
+          </view>
+          <view class="btn-box">
+            <view class="btn-reset" @click="resetQuery()">
+              <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+              <text>重置</text>
+            </view>
+            <view class="btn-confirm" @click="searchSubmit()">
+              <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+              <text>确定</text>
+            </view>
+          </view>
+        </view>
+      </u-transition>
+    </u-sticky>
+    
+    <u-list @scrolltolower="loadmore" :spaceHeight="170" lowerThreshold="100">
+      <u-list-item v-for="(item, index) in listData" :key="index">
+        <view class="list-item">
+          <view class="item-header">
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.diseaseName }}</text>
+                <text class="card-code" v-if="item.diseaseCode">{{ item.diseaseCode }}</text>
+              </view>
+            </view>
+          </view>
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">成员</text>
+                <text class="info-value">{{ item.memberName || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">确诊日期</text>
+                <text class="info-value">{{ item.diagnosisDate || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">疾病状态</text>
+                <text class="info-value" :class="getStatusClass(item.diseaseStatus)">{{ getStatusText(item.diseaseStatus) }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">是否启用</text>
+                <text class="info-value" :class="item.isActive === 1 ? 'active' : 'inactive'">{{ item.isActive === 1 ? '启用' : '停用' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">主治医生</text>
+                <text class="info-value">{{ item.mainDoctor || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">就诊医院</text>
+                <text class="info-value">{{ item.hospital || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">科室</text>
+                <text class="info-value">{{ item.department || '--' }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.notes">
+                <text class="info-label">备注说明</text>
+                <text class="info-value">{{ item.notes }}</text>
+              </view>
+            </view>
+          </view>
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
+          </view>
+        </view>
+      </u-list-item>
+      <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
+    </u-list>
+    
+    <u-picker itemHeight="88" :show="showMember" :columns="memberList" keyName="name" @cancel="handleMemberCancel"
+      @confirm="handleMemberConfirm"></u-picker>
+  </view>
+  <suspend></suspend>
+</template>
+
+<script setup>
+import { listChronicDisease, delChronicDisease } from '@/api/health/chronicDisease'
+import { listPerson } from '@/api/health/person'
+import { onLoad, onShow } from "@dcloudio/uni-app"
+import { reactive, toRefs, ref, computed } from "vue"
+
+const pageNum = ref(1)
+const listData = ref([])
+const isShow = ref(false)
+const status = ref('loadmore')
+const showMember = ref(false)
+const memberList = ref([])
+const filterPanel = ref(false)
+
+const diseaseStatusList = ref([
+  { value: 1, label: '稳定', selected: false },
+  { value: 2, label: '需关注', selected: false },
+  { value: 3, label: '急性期', selected: false }
+])
+
+const isActiveList = ref([
+  { value: 1, label: '启用', selected: false },
+  { value: 0, label: '停用', selected: false }
+])
+
+const data = reactive({
+  queryPersonParams: {
+    pageNum: 1,
+    pageSize: 100
+  },
+  queryParams: {
+    diseaseName: null,
+    memberId: null,
+    memberName: null,
+    diseaseStatus: null,
+    isActive: null
+  }
+})
+
+const { queryPersonParams, queryParams } = toRefs(data)
+
+const windowHeight = computed(() => {
+  return uni.getSystemInfoSync().windowHeight - 50
+})
+
+onLoad(() => {
+  getData()
+})
+
+onShow(() => {
+  if (isShow.value) {
+    listData.value = []
+    pageNum.value = 1
+    getList()
+    isShow.value = false
+  }
+})
+
+function loadmore() {
+  pageNum.value += 1
+  if (status.value == 'loadmore') {
+    getList()
+  }
+}
+
+function getData() {
+  listPerson(queryPersonParams.value).then((response) => {
+    memberList.value = [response.rows]
+    getList()
+  })
+}
+
+function getList() {
+  status.value = 'loading'
+  listChronicDisease({ pageSize: 10, pageNum: pageNum.value, ...queryParams.value }).then(res => {
+    listData.value = listData.value.concat(res.rows)
+    if (listData.value.length < res.total) {
+      status.value = 'loadmore'
+    } else {
+      status.value = 'nomore'
+    }
+  }).catch(() => {
+    status.value = 'nomore'
+  })
+}
+
+function handleMember() {
+  if (memberList.value[0].length === 0) {
+    uni.showToast({ title: '成员为空', icon: 'none' })
+  } else {
+    showMember.value = true
+  }
+}
+
+function handleMemberConfirm(e) {
+  queryParams.value.memberName = e.value[0].name
+  queryParams.value.memberId = e.value[0].id
+  showMember.value = false
+  pageNum.value = 1
+  listData.value = []
+  getList()
+}
+
+function handleMemberCancel() {
+  queryParams.value.memberName = ''
+  queryParams.value.memberId = ''
+  showMember.value = false
+  pageNum.value = 1
+  listData.value = []
+  getList()
+}
+
+function selectStatus(item) {
+  queryParams.value.diseaseStatus = item.selected ? null : item.value
+  diseaseStatusList.value.forEach(ele => {
+    ele.selected = ele.value === item.value && !item.selected
+  })
+}
+
+function selectActive(item) {
+  queryParams.value.isActive = item.selected ? null : item.value
+  isActiveList.value.forEach(ele => {
+    ele.selected = ele.value === item.value && !item.selected
+  })
+}
+
+function searchBlur() {
+  pageNum.value = 1
+  listData.value = []
+  getList()
+}
+
+function searchSubmit() {
+  pageNum.value = 1
+  listData.value = []
+  getList()
+  filterPanel.value = false
+}
+
+function resetQuery() {
+  queryParams.value.diseaseName = null
+  queryParams.value.memberId = null
+  queryParams.value.memberName = null
+  queryParams.value.diseaseStatus = null
+  queryParams.value.isActive = null
+  diseaseStatusList.value.forEach(ele => ele.selected = false)
+  isActiveList.value.forEach(ele => ele.selected = false)
+}
+
+function handleAdd() {
+  uni.navigateTo({ url: `/pages/health/chronicDisease/addEdit` })
+  isShow.value = true
+}
+
+function handleEdit(item) {
+  uni.navigateTo({ url: `/pages/health/chronicDisease/addEdit?id=${item.id}` })
+  isShow.value = true
+}
+
+function handleDelete(item) {
+  uni.showModal({
+    title: '确认删除',
+    content: '确定要删除该慢性疾病档案吗？',
+    confirmText: '删除',
+    cancelText: '取消',
+    confirmColor: '#f5576c',
+    cancelColor: '#909399',
+    success: function (res) {
+      if (res.confirm) {
+        delChronicDisease(item.id).then(() => {
+          uni.showToast({ title: '删除成功', icon: 'success' })
+          pageNum.value = 1
+          listData.value = []
+          getList()
+        })
+      }
+    }
+  })
+}
+
+function getStatusClass(status) {
+  const classes = { 1: 'status-normal', 2: 'status-warning', 3: 'status-danger' }
+  return classes[status] || 'status-default'
+}
+
+function getStatusText(status) {
+  const texts = { 1: '稳定', 2: '需关注', 3: '急性期' }
+  return texts[status] || '未知'
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
+
+.search-container {
+  background-color: #ffffff;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 100;
+
+  .search-row {
+    padding: 12rpx 32rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10rpx;
+    
+    &:first-child {
+      padding-bottom: 8rpx;
+    }
+    
+    &:last-child {
+      padding-top: 8rpx;
+    }
+
+    .search-input-wrapper {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      position: relative;
+      
+      .search-icon {
+        position: absolute;
+        right: 20rpx;
+        z-index: 10;
+        cursor: pointer;
+      }
+    }
+
+    .search-input {
+      background: rgba(102, 126, 234, 0.08);
+      color: #333333;
+      width: 100%;
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      height: 66rpx !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .filter-btn,
+    .add-btn {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 24rpx;
+      border: 2rpx solid rgba(102, 126, 234, 0.3);
+      flex-shrink: 0;
+      
+      &:active {
+        transform: scale(0.95);
+        background: rgba(102, 126, 234, 0.12);
+      }
+      
+      text {
+        color: #667eea;
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.filter-panel {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 180rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+
+  .filter-panel-content {
+    background-color: #ffffff;
+    padding: 0 30rpx 30rpx;
+    border-radius: 16rpx 16rpx 0 0;
+
+    .filter-title {
+      color: #2c3e50;
+      font-size: 32rpx;
+      font-weight: 600;
+      padding: 32rpx 0 24rpx 20rpx;
+      position: relative;
+      display: flex;
+      align-items: center;
+      
+      &::before {
+        content: '';
+        width: 6rpx;
+        height: 32rpx;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 3rpx;
+        margin-right: 12rpx;
+        flex-shrink: 0;
+      }
+    }
+
+    .state-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16rpx;
+
+      .state-item {
+        padding: 0 32rpx;
+        height: 68rpx;
+        border: 2rpx solid #e8edf3;
+        border-radius: 34rpx;
+        text-align: center;
+        line-height: 68rpx;
+        font-size: 28rpx;
+        color: #666666;
+        background: #ffffff;
+      }
+
+      .active {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: 2rpx solid transparent;
+        color: #ffffff;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .btn-box {
+    display: flex;
+    gap: 20rpx;
+    padding: 24rpx 30rpx;
+    background-color: #fff;
+    box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    .btn-reset,
+    .btn-confirm {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8rpx;
+      height: 88rpx;
+      border-radius: 12rpx;
+      font-size: 30rpx;
+      font-weight: 600;
+      flex: 1;
+      
+      text {
+        line-height: 1;
+      }
+    }
+    
+    .btn-reset {
+      background: #f5f7fa;
+      border: 2rpx solid #dcdfe6;
+      
+      text {
+        color: #606266;
+      }
+    }
+    
+    .btn-confirm {
+      background: #667eea;
+      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+      border: none;
+      
+      text {
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+.list-item {
+  margin: 10rpx 24rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.2s ease;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
+
+  .item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .card-icon {
+      width: 40rpx;
+      height: 40rpx;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 12rpx;
+      flex-shrink: 0;
+    }
+    
+    .card-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 12rpx;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex-shrink: 0;
+        letter-spacing: 0.5rpx;
+      }
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 24rpx;
+        font-weight: 500;
+        line-height: 1.3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
+
+  .card-body {
+    padding: 24rpx;
+    background: #fafbfc;
+    border: 2rpx solid #f0f2f5;
+    margin: 15rpx 16rpx 2rpx;
+    border-radius: 12rpx;
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -12rpx;
+
+    .info-item {
+      width: 50%;
+      padding: 0 12rpx;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 20rpx;
+      
+      &.info-item-full {
+        width: 100%;
+      }
+
+      .info-label {
+        font-size: 24rpx;
+        color: #667eea;
+        font-weight: 500;
+        background: rgba(102, 126, 234, 0.08);
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        align-self: flex-start;
+        margin-bottom: 8rpx;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+        
+        &.active { color: #52c41a; }
+        &.inactive { color: #ff4d4f; }
+        &.status-normal { color: #52c41a; }
+        &.status-warning { color: #faad14; }
+        &.status-danger { color: #ff4d4f; }
+      }
+    }
+  }
+
+  .operate {
+    display: flex;
+    justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
+
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
+    }
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
+    }
+  }
+}
+</style>