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:
@@ -8,18 +8,30 @@ Page({
|
||||
id: '',
|
||||
plan: null,
|
||||
exercises: [],
|
||||
loading: true
|
||||
loading: true,
|
||||
error: false,
|
||||
errorMsg: ''
|
||||
},
|
||||
|
||||
onLoad(query) {
|
||||
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();
|
||||
},
|
||||
|
||||
load() {
|
||||
this.setData({ loading: true });
|
||||
planSvc.get(this.data.id).then((plan) => {
|
||||
const id = this.data.id;
|
||||
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 updatedAtText = typeof raw === 'string'
|
||||
? raw.slice(0, 10)
|
||||
@@ -27,13 +39,22 @@ Page({
|
||||
this.setData({
|
||||
plan: { ...plan, updatedAtText, icon: iconName(plan.emoji) },
|
||||
exercises: (plan && plan.exercises) || [],
|
||||
loading: false
|
||||
loading: false,
|
||||
error: false
|
||||
});
|
||||
}).catch(() => {
|
||||
this.setData({ loading: false });
|
||||
}).catch((err) => {
|
||||
const status = err && err.statusCode;
|
||||
const msg = status === 404
|
||||
? '未找到该计划'
|
||||
: (status === 401 ? '登录已失效,请重新登录' : '加载失败,请检查网络后重试');
|
||||
this.setData({ loading: false, error: true, errorMsg: msg });
|
||||
});
|
||||
},
|
||||
|
||||
onRetry() {
|
||||
this.load();
|
||||
},
|
||||
|
||||
onRemoveExercise(e) {
|
||||
const exerciseId = e.currentTarget.dataset.id;
|
||||
planSvc.removeExercise(this.data.id, exerciseId).then(() => {
|
||||
|
||||
@@ -35,5 +35,11 @@
|
||||
</view>
|
||||
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user