fix(plan-detail): 增加加载/错误/重试/未找到四态,杜绝静默空白

- 此前详情页请求失败时仅 setData(loading:false),plan 仍为 null,
  整页只显示一行小字,用户感知为「空白」且无法定位原因。
- 现明确区分 loading / error(带重试按钮) / not-found 三种空态;
  request 失败时按 statusCode 给具体提示(401 登录失效 / 404 未找到 / 其他网络错误)。
- onLoad 对 getApp().globalData 取值加防御;缺失 id 直接报错不发起请求。
This commit is contained in:
2026-07-22 23:58:48 +08:00
parent c4639d0703
commit 54a5ae858d
2 changed files with 35 additions and 8 deletions

View File

@@ -8,18 +8,30 @@ Page({
id: '', id: '',
plan: null, plan: null,
exercises: [], exercises: [],
loading: true loading: true,
error: false,
errorMsg: ''
}, },
onLoad(query) { onLoad(query) {
const id = query.id || ''; const id = query.id || '';
this.setData({ statusBarHeight: app.globalData.statusBarHeight || 20, id }); const h = (app && app.globalData && app.globalData.statusBarHeight) || 20;
this.setData({ statusBarHeight: h, id });
this.load(); this.load();
}, },
load() { load() {
this.setData({ loading: true }); const id = this.data.id;
planSvc.get(this.data.id).then((plan) => { if (!id) {
this.setData({ loading: false, error: true, errorMsg: '缺少计划标识,无法打开' });
return;
}
this.setData({ loading: true, error: false });
planSvc.get(id).then((plan) => {
if (!plan || !plan.id) {
this.setData({ loading: false, error: true, errorMsg: '未找到该计划' });
return;
}
const raw = plan && plan.updatedAt; const raw = plan && plan.updatedAt;
const updatedAtText = typeof raw === 'string' const updatedAtText = typeof raw === 'string'
? raw.slice(0, 10) ? raw.slice(0, 10)
@@ -27,13 +39,22 @@ Page({
this.setData({ this.setData({
plan: { ...plan, updatedAtText, icon: iconName(plan.emoji) }, plan: { ...plan, updatedAtText, icon: iconName(plan.emoji) },
exercises: (plan && plan.exercises) || [], exercises: (plan && plan.exercises) || [],
loading: false loading: false,
error: false
}); });
}).catch(() => { }).catch((err) => {
this.setData({ loading: false }); const status = err && err.statusCode;
const msg = status === 404
? '未找到该计划'
: (status === 401 ? '登录已失效,请重新登录' : '加载失败,请检查网络后重试');
this.setData({ loading: false, error: true, errorMsg: msg });
}); });
}, },
onRetry() {
this.load();
},
onRemoveExercise(e) { onRemoveExercise(e) {
const exerciseId = e.currentTarget.dataset.id; const exerciseId = e.currentTarget.dataset.id;
planSvc.removeExercise(this.data.id, exerciseId).then(() => { planSvc.removeExercise(this.data.id, exerciseId).then(() => {

View File

@@ -35,5 +35,11 @@
</view> </view>
<view wx:else class="empty-page"> <view wx:else class="empty-page">
<view class="empty">{{ loading ? '加载中…' : '未找到该计划' }}</view> <view wx:if="{{loading}}" class="empty">加载中…</view>
<view wx:elif="{{error}}" class="empty-box">
<view class="empty-box__emoji"><fc-icon name="alert-circle" size="64" color="var(--text-3)" /></view>
<view class="empty-box__t">{{errorMsg || '加载失败'}}</view>
<view class="empty-box__btn" bindtap="onRetry">重试</view>
</view>
<view wx:else class="empty">未找到该计划</view>
</view> </view>