uni-app 患者动态加载失败显示问题与修复

问题现象

在医生首页的患者动态模块中，当接口调用失败时，页面显示“暂无患者动态”，这会误导用户认为没有患者动态数据，而不是加载失败。用户无法区分是成功获取但无数据，还是网络错误或其他原因导致的加载失败。

原因分析

代码中 fetchPatientActivities 函数在 catch 块中设置 patientActivities.value = []，与成功但无数据时的处理相同。模板只检查 patientActivities.length === 0 来显示“暂无患者动态”，没有区分失败状态。

解决办法

添加错误状态变量：
- 新增 patientActivitiesError ref，用于标记加载是否失败。
更新加载逻辑：
- 在 fetchPatientActivities 中，成功时设置 patientActivitiesError.value = false。
- 失败时设置 patientActivitiesError.value = true。
修改模板显示：
- 成功但无数据：v-if="patientActivities.length === 0 && !patientActivitiesError" 显示“暂无患者动态”。
- 加载失败：v-if="patientActivitiesError" 显示“加载失败，请重试”并提供重试按钮。
添加样式：
- 为错误提示和重试按钮定义 CSS 样式。

代码示例

// 添加状态变量
const patientActivitiesError = ref(false)

// 更新获取函数
const fetchPatientActivities = async () => {
  try {
    patientActivitiesLoading.value = true
    patientActivitiesError.value = false
    // ... 接口调用
  } catch (err) {
    patientActivitiesError.value = true
    patientActivities.value = []
  } finally {
    patientActivitiesLoading.value = false
  }
}

<!-- 模板修改 -->
<view v-if="patientActivities.length === 0 && !patientActivitiesError" class="no-activity">
  <text>暂无患者动态</text>
</view>
<view v-if="patientActivitiesError" class="error-activity">
  <text class="error-text">加载失败，请重试</text>
  <view class="retry-button" @click="fetchPatientActivities">
    <text class="retry-text">重试</text>
  </view>
</view>

经验总结

在开发中，UI 状态管理需要仔细区分不同场景（如加载中、成功无数据、失败），避免单一状态导致的用户体验问题。建议：

使用多个状态变量来精确控制显示逻辑。
失败时提供明确的错误提示和恢复操作（如重试按钮）。
参考现有代码模式，确保一致性。