fix(plan-card): 计划卡片图标改用 fc-icon 渲染
- plan-card 仍用 {{plan.emoji}} 文本渲染,导致创建计划后显示 person-standing 等字面量
- 改为 require iconName 计算 icon,wxml 使用 <fc-icon> 渲染
- 同步清理 badge/emoji 的字体样式
This commit is contained in:
@@ -2,6 +2,8 @@
|
|||||||
// props:
|
// props:
|
||||||
// plan: { id|slug, emoji, color, name, description, count|exerciseCount, cover? }
|
// plan: { id|slug, emoji, color, name, description, count|exerciseCount, cover? }
|
||||||
// target: 点击跳转的完整 url
|
// target: 点击跳转的完整 url
|
||||||
|
const { iconName } = require('../../utils/icon-name.js');
|
||||||
|
|
||||||
Component({
|
Component({
|
||||||
properties: {
|
properties: {
|
||||||
plan: { type: Object, value: {} },
|
plan: { type: Object, value: {} },
|
||||||
@@ -11,7 +13,8 @@ Component({
|
|||||||
count: 0,
|
count: 0,
|
||||||
cover: '',
|
cover: '',
|
||||||
hasCover: false,
|
hasCover: false,
|
||||||
color: '#D9B36C'
|
color: '#D9B36C',
|
||||||
|
icon: 'folder-open'
|
||||||
},
|
},
|
||||||
observers: {
|
observers: {
|
||||||
plan: function (plan) {
|
plan: function (plan) {
|
||||||
@@ -20,7 +23,8 @@ Component({
|
|||||||
count: plan.count || plan.exerciseCount || 0,
|
count: plan.count || plan.exerciseCount || 0,
|
||||||
cover: plan.cover || '',
|
cover: plan.cover || '',
|
||||||
hasCover: !!(plan.cover),
|
hasCover: !!(plan.cover),
|
||||||
color: plan.color || '#D9B36C'
|
color: plan.color || '#D9B36C',
|
||||||
|
icon: iconName(plan.emoji, 'folder-open')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -4,10 +4,14 @@
|
|||||||
class="pc__cover"
|
class="pc__cover"
|
||||||
style="background: {{color}}22;">
|
style="background: {{color}}22;">
|
||||||
<image class="pc__img" src="{{cover}}" mode="aspectFill" lazy-load="true" />
|
<image class="pc__img" src="{{cover}}" mode="aspectFill" lazy-load="true" />
|
||||||
<view class="pc__badge" style="background: {{color}}22; color: {{color}};">{{plan.emoji}}</view>
|
<view class="pc__badge" style="background: {{color}}22;">
|
||||||
|
<fc-icon name="{{icon}}" size="38" color="{{color}}" />
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view wx:else class="pc__top" style="background: linear-gradient(135deg, {{color}}26, var(--surface));">
|
<view wx:else class="pc__top" style="background: linear-gradient(135deg, {{color}}26, var(--surface));">
|
||||||
<view class="pc__emoji" style="background: {{color}}22; color: {{color}};">{{plan.emoji}}</view>
|
<view class="pc__emoji" style="background: {{color}}22;">
|
||||||
|
<fc-icon name="{{icon}}" size="52" color="{{color}}" />
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="pc__body">
|
<view class="pc__body">
|
||||||
|
|||||||
@@ -12,13 +12,11 @@
|
|||||||
position: absolute; left: 16rpx; top: 16rpx;
|
position: absolute; left: 16rpx; top: 16rpx;
|
||||||
width: 64rpx; height: 64rpx; border-radius: 18rpx;
|
width: 64rpx; height: 64rpx; border-radius: 18rpx;
|
||||||
display: flex; align-items: center; justify-content: center;
|
display: flex; align-items: center; justify-content: center;
|
||||||
font-size: 38rpx; line-height: 1;
|
|
||||||
}
|
}
|
||||||
.pc__top { padding: 28rpx; display: flex; }
|
.pc__top { padding: 28rpx; display: flex; }
|
||||||
.pc__emoji {
|
.pc__emoji {
|
||||||
width: 96rpx; height: 96rpx; border-radius: 24rpx;
|
width: 96rpx; height: 96rpx; border-radius: 24rpx;
|
||||||
display: flex; align-items: center; justify-content: center;
|
display: flex; align-items: center; justify-content: center;
|
||||||
font-size: 52rpx; line-height: 1;
|
|
||||||
}
|
}
|
||||||
.pc__body { padding: 18rpx 22rpx 8rpx; }
|
.pc__body { padding: 18rpx 22rpx 8rpx; }
|
||||||
.pc__name { font-size: 30rpx; font-weight: 700; }
|
.pc__name { font-size: 30rpx; font-weight: 700; }
|
||||||
|
|||||||
Reference in New Issue
Block a user