fix(my-plans): 修复计划列表页因 plan-card 漏声明 fc-icon 导致编译失败进不去
- 根因:c4639d0 给 plan-card 换上 <fc-icon> 但 plan-card.json 的 usingComponents 留空, 微信要求组件自行声明所引用的自定义组件,导致任何使用 plan-card 的页面编译报错、无法进入。 - 修复:plan-card/index.json 补上 fc-icon 声明(与 exercise-card/avatar/bottom-nav 一致)。 - 整体优化 my-plans: * 新增 status 四态(loading/list/empty/error),请求失败显示具体错误 + 『重新加载』按钮,杜绝静默进不去 * 加载态用 refresh-cw 旋转图标替代纯文字 * 遗留金色主按钮(新建计划/空态按钮/官方计划链接)统一到 Kinetic Dark 的 Volt 绿强调色,去除旧主题不一致
This commit is contained in:
@@ -1,4 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
"usingComponents": {
|
||||
"fc-icon": "/components/fc-icon/index"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,8 @@ Page({
|
||||
data: {
|
||||
statusBarHeight: 20,
|
||||
plans: [],
|
||||
loading: true
|
||||
status: 'loading', // 'loading' | 'list' | 'empty' | 'error'
|
||||
errorMsg: ''
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
@@ -22,11 +23,19 @@ Page({
|
||||
},
|
||||
|
||||
load() {
|
||||
this.setData({ loading: true });
|
||||
this.setData({ status: 'loading', errorMsg: '' });
|
||||
planSvc.listMine().then((plans) => {
|
||||
this.setData({ plans: plans || [], loading: false });
|
||||
}).catch(() => {
|
||||
this.setData({ plans: [], loading: false });
|
||||
const list = plans || [];
|
||||
this.setData({
|
||||
plans: list,
|
||||
status: list.length ? 'list' : 'empty'
|
||||
});
|
||||
}).catch((err) => {
|
||||
this.setData({
|
||||
plans: [],
|
||||
status: 'error',
|
||||
errorMsg: (err && err.message) ? err.message : '加载失败,请稍后重试'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
</view>
|
||||
|
||||
<view class="section" style="padding-top: 8rpx;">
|
||||
<block wx:if="{{plans.length}}">
|
||||
<block wx:if="{{status === 'list'}}">
|
||||
<view class="grid">
|
||||
<view class="grid__item" wx:for="{{plans}}" wx:key="id">
|
||||
<plan-card
|
||||
@@ -16,13 +16,23 @@
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view wx:elif="{{!loading}}" class="empty-box">
|
||||
<view wx:elif="{{status === 'error'}}" class="empty-box">
|
||||
<view class="empty-box__emoji"><fc-icon name="alert-circle" size="64" color="var(--danger)" /></view>
|
||||
<view class="empty-box__t">{{errorMsg}}</view>
|
||||
<view class="empty-box__btn" bindtap="load">重新加载</view>
|
||||
</view>
|
||||
|
||||
<view wx:elif="{{status === 'empty'}}" class="empty-box">
|
||||
<view class="empty-box__emoji"><fc-icon name="clipboard-list" size="64" color="var(--text-3)" /></view>
|
||||
<view class="empty-box__t">还没有计划,创建一个开始训练吧</view>
|
||||
<view class="empty-box__btn" bindtap="onNew">+ 新建计划</view>
|
||||
<view class="empty-box__link" bindtap="goOfficial">或浏览官方训练计划 ›</view>
|
||||
</view>
|
||||
<view wx:else class="empty">加载中…</view>
|
||||
|
||||
<view wx:else class="empty">
|
||||
<fc-icon name="refresh-cw" size="48" color="var(--text-3)" class="spin" />
|
||||
<view class="empty__t">加载中…</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 160rpx;"></view>
|
||||
|
||||
@@ -2,13 +2,16 @@
|
||||
.newbar { padding: 16rpx 32rpx; }
|
||||
.newbar__btn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
|
||||
background: var(--accent);
|
||||
color: var(--accent-on); font-weight: 700; font-size: 32rpx;
|
||||
border-radius: 999rpx; padding: 26rpx;
|
||||
transition: background 0.15s var(--ease, ease);
|
||||
}
|
||||
.newbar__btn:active { background: var(--accent-hover); }
|
||||
.grid { display: flex; flex-wrap: wrap; gap: 18rpx; }
|
||||
.grid__item { width: calc((100% - 18rpx) / 2); }
|
||||
.empty { color: var(--text-3); font-size: 26rpx; text-align: center; padding: 120rpx 0; }
|
||||
.empty { color: var(--text-3); font-size: 26rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120rpx 0; }
|
||||
.empty__t { margin-top: 24rpx; }
|
||||
|
||||
.empty-box { display: flex; flex-direction: column; align-items: center; padding: 120rpx 40rpx; }
|
||||
.empty-box__emoji {
|
||||
@@ -19,7 +22,12 @@
|
||||
.empty-box__t { font-size: 30rpx; color: var(--text-2); margin-top: 36rpx; text-align: center; }
|
||||
.empty-box__btn {
|
||||
margin-top: 44rpx; padding: 24rpx 88rpx; border-radius: 999rpx;
|
||||
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
|
||||
background: var(--accent);
|
||||
color: var(--accent-on); font-weight: 700; font-size: 30rpx;
|
||||
transition: background 0.15s var(--ease, ease);
|
||||
}
|
||||
.empty-box__link { margin-top: 28rpx; font-size: 26rpx; color: var(--gold); }
|
||||
.empty-box__btn:active { background: var(--accent-hover); }
|
||||
.empty-box__link { margin-top: 28rpx; font-size: 26rpx; color: var(--accent); }
|
||||
|
||||
.spin { animation: mp-spin 0.9s linear infinite; }
|
||||
@keyframes mp-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
|
||||
|
||||
Reference in New Issue
Block a user