|
|
@@ -0,0 +1,61 @@
|
|
|
+# 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
|
|
|
+<!-- 模板修改 -->
|
|
|
+<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 状态管理需要仔细区分不同场景（如加载中、成功无数据、失败），避免单一状态导致的用户体验问题。建议：
|
|
|
+- 使用多个状态变量来精确控制显示逻辑。
|
|
|
+- 失败时提供明确的错误提示和恢复操作（如重试按钮）。
|
|
|
+- 参考现有代码模式，确保一致性。
|
mcbaiyun