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:
2026-07-23 00:20:01 +08:00
parent 54a5ae858d
commit 956ad3c3bc
4 changed files with 42 additions and 13 deletions

View File

@@ -1,4 +1,6 @@
{
"component": true,
"usingComponents": {}
"usingComponents": {
"fc-icon": "/components/fc-icon/index"
}
}

View File

@@ -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 : '加载失败,请稍后重试'
});
});
},

View File

@@ -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>

View File

@@ -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); } }