Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(diy-article): replace iconfont with uni-icons component

Browse Source 
1. 替换阅读数、点赞数和查看更多按钮的自定义图标为uni-icons组件，统一图标使用方式
2. 新增metaColor计算属性同步阅读区文字色，确保图标颜色与文本保持一致
3. 修复全局样式干扰导致的阅读数/点赞数字号和颜色不一致问题
4. 调整查看更多默认配置与后端对齐，修正control默认值为true
This commit is contained in:
ZF Sun
2026-06-15 10:52:58 +08:00
parent f7f1b1191e
commit c1d4a68e26
1 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components-diy/diy-article.vue
View File

@@ -36,11 +36,11 @@
<text class="category-name">{{ item.category_name }}</text>
</block>
<view class="num" v-if="readNumStyle.support && readNumStyle.control">
<text class="iconfont iconchakan"></text>
<uni-icons type="eye" size="12" :color="metaColor" />
<text>{{ item.read_num || 0 }}</text>
</view>
<view class="num" v-if="dianzanStyle.support && dianzanStyle.control">
<text class="iconfont icondianzan"></text>
<uni-icons type="star" size="12" :color="metaColor" />
<text>{{ item.dianzan_num || 0 }}</text>
</view>
<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
@@ -74,11 +74,11 @@
<text class="category-name">{{ item.category_name }}</text>
</block>
<view class="num" v-if="readNumStyle.support && readNumStyle.control">
<text class="iconfont iconchakan"></text>
<uni-icons type="eye" size="12" :color="metaColor" />
<text>{{ item.read_num || 0 }}</text>
</view>
<view class="num" v-if="dianzanStyle.support && dianzanStyle.control">
<text class="iconfont icondianzan"></text>
<uni-icons type="star" size="12" :color="metaColor" />
<text>{{ item.dianzan_num || 0 }}</text>
</view>
<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
@@ -89,7 +89,7 @@
<view class="view-more" v-if="viewMore.support && viewMore.control && list.length > 0"
:style="viewMoreStyle" @tap.stop="toListPage">
<text>{{ viewMore.text || '查看更多' }}</text>
<text class="iconfont icondiy-right-arrow"></text>
<uni-icons type="arrowright" size="12" :color="viewMore.color" />
</view>
</template>
<view v-if="list.length === 0 && !loading" class="empty-placeholder">
@@ -225,6 +225,10 @@ export default {
color: (this.viewMore && this.viewMore.color) || '#999999'
});
},
// 阅读区文字色(供 <uni-icons> 复用,确保 icon 颜色随 readWrapStyle.color 联动)
metaColor() {
return (this.value && this.value.readWrapStyle && this.value.readWrapStyle.color) || '#999ca7';
},
// ========== 字段显示配置(带默认值,避免老数据缺字段时报错) ==========
abstractStyle() {
return Object.assign({ support: true, control: true, fontSize: 24 }, this.value.abstractStyle || {});
@@ -239,7 +243,8 @@ export default {
return Object.assign({ support: true, control: true, fontSize: 22 }, this.value.tagStyle || {});
},
viewMore() {
return Object.assign({ support: true, control: false, text: '查看更多', color: '#999999', iconSize: 24 },
// control 默认 true 与后端 design.js + diy_view.php 对齐(老数据没 viewMore 时也走显示)
return Object.assign({ support: true, control: true, text: '查看更多', color: '#999999', iconSize: 24 },
this.value.viewMore || {});
},
// 阅读区样式(文字色 + 图标大小 + 文字大小)
@@ -474,6 +479,12 @@ export default {
}
.num {
/* 显式继承 .read-wrap 的 color / font-size:避免 main.scss 里
view { color: $color-title; font-size: $font-size-base; } 的全局规则截胡
(.num 是 <view> 但不是 .read-wrap,特异性 view < .read-wrap 不再生效),
导致阅读数 / 点赞数 与 category-name / date 颜色和字号不一致 */
color: inherit;
font-size: inherit;
display: inline-flex;
align-items: center;
margin-left: 16rpx;
@@ -496,7 +507,7 @@ export default {
/* 字号由 CSS 变量驱动;颜色由 viewMoreStyle 注入(支持点击重置) */
font-size: var(--article-view-more-font-size, 26rpx);
.iconfont {
.uni-icons {
/* 图标大小由 CSS 变量驱动 */
font-size: var(--article-view-more-icon-size, 24rpx);
margin-left: 8rpx;