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: '',
|
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(() => {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user