# uni-app 患者动态加载失败显示问题与修复
## 问题现象
在医生首页的患者动态模块中，当接口调用失败时，页面显示“暂无患者动态”，这会误导用户认为没有患者动态数据，而不是加载失败。用户无法区分是成功获取但无数据，还是网络错误或其他原因导致的加载失败。
## 原因分析
代码中 `fetchPatientActivities` 函数在 catch 块中设置 `patientActivities.value = []`，与成功但无数据时的处理相同。模板只检查 `patientActivities.length === 0` 来显示“暂无患者动态”，没有区分失败状态。
## 解决办法
1. **添加错误状态变量**：
- 新增 `patientActivitiesError` ref，用于标记加载是否失败。
2. **更新加载逻辑**：
- 在 `fetchPatientActivities` 中，成功时设置 `patientActivitiesError.value = false`。
- 失败时设置 `patientActivitiesError.value = true`。
3. **修改模板显示**：
- 成功但无数据：`v-if="patientActivities.length === 0 && !patientActivitiesError"` 显示“暂无患者动态”。
- 加载失败：`v-if="patientActivitiesError"` 显示“加载失败，请重试”并提供重试按钮。
4. **添加样式**：
- 为错误提示和重试按钮定义 CSS 样式。
## 代码示例
```javascript
// 添加状态变量
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
}
}
```
```vue
暂无患者动态
加载失败，请重试
重试
```
## 经验总结
在开发中，UI 状态管理需要仔细区分不同场景（如加载中、成功无数据、失败），避免单一状态导致的用户体验问题。建议：
- 使用多个状态变量来精确控制显示逻辑。
- 失败时提供明确的错误提示和恢复操作（如重试按钮）。
- 参考现有代码模式，确保一致性。