fix(outfit): 修复社区穿搭封面空白并支持预览区点击调整
This commit is contained in:
@@ -23,9 +23,14 @@ module.exports = { cls: cls }
|
|||||||
<view class="display">{{isEdit ? '编辑穿搭' : '创建穿搭'}}</view>
|
<view class="display">{{isEdit ? '编辑穿搭' : '创建穿搭'}}</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 拼图预览 -->
|
<!-- 拼图预览:整块可点 —— 空态点击添加,已选点击调整 -->
|
||||||
<view class="oe-preview">
|
<view class="oe-preview">
|
||||||
<view wx:if="{{selectedItems.length}}" class="collage {{cl.cls(selectedItems.length)}}">
|
<view
|
||||||
|
wx:if="{{selectedItems.length}}"
|
||||||
|
class="collage {{cl.cls(selectedItems.length)}}"
|
||||||
|
hover-class="oe-preview-press"
|
||||||
|
bindtap="openSelect"
|
||||||
|
>
|
||||||
<view class="cg" wx:for="{{selectedItems}}" wx:key="clothes_uuid" wx:if="{{index < 4}}">
|
<view class="cg" wx:for="{{selectedItems}}" wx:key="clothes_uuid" wx:if="{{index < 4}}">
|
||||||
<image wx:if="{{item.processed_image}}" class="pic" src="{{item.processed_image}}" mode="aspectFill" />
|
<image wx:if="{{item.processed_image}}" class="pic" src="{{item.processed_image}}" mode="aspectFill" />
|
||||||
<view wx:else class="ph icon icon-hanger"></view>
|
<view wx:else class="ph icon icon-hanger"></view>
|
||||||
@@ -33,10 +38,10 @@ module.exports = { cls: cls }
|
|||||||
<view wx:if="{{selectedItems.length > 4}}" class="cg-more">+{{selectedItems.length - 4}}</view>
|
<view wx:if="{{selectedItems.length > 4}}" class="cg-more">+{{selectedItems.length - 4}}</view>
|
||||||
<text class="cg-badge num">{{selectedItems.length}} 件</text>
|
<text class="cg-badge num">{{selectedItems.length}} 件</text>
|
||||||
</view>
|
</view>
|
||||||
<view wx:else class="oe-empty">
|
<view wx:else class="oe-empty" hover-class="oe-empty-press" bindtap="openSelect">
|
||||||
<view class="icon icon-hanger"></view>
|
<view class="icon icon-hanger"></view>
|
||||||
<text class="oe-empty-t">还没有选择衣物</text>
|
<text class="oe-empty-t">还没有选择衣物</text>
|
||||||
<text class="oe-empty-d">点击下方「选择衣橱单品」添加你的单品</text>
|
<text class="oe-empty-d">点击这里选择衣橱单品</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|||||||
@@ -16,6 +16,15 @@
|
|||||||
margin: 40rpx var(--pad) 0;
|
margin: 40rpx var(--pad) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 预览区整块可点(添加 / 调整单品):与 upload 投放框同族的按压反馈 */
|
||||||
|
.oe-preview .collage {
|
||||||
|
transition: opacity .2s var(--ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
.oe-preview-press {
|
||||||
|
opacity: .85;
|
||||||
|
}
|
||||||
|
|
||||||
.oe-empty {
|
.oe-empty {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -25,6 +34,11 @@
|
|||||||
background: var(--paper-2);
|
background: var(--paper-2);
|
||||||
border-radius: var(--r-img);
|
border-radius: var(--r-img);
|
||||||
color: var(--ink-4);
|
color: var(--ink-4);
|
||||||
|
transition: background .2s var(--ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
.oe-empty-press {
|
||||||
|
background: var(--fill);
|
||||||
}
|
}
|
||||||
|
|
||||||
.oe-empty .icon {
|
.oe-empty .icon {
|
||||||
|
|||||||
@@ -161,11 +161,13 @@ Page({
|
|||||||
},
|
},
|
||||||
|
|
||||||
decorateList(list: OutfitRow[]): Promise<OutfitRow[]> {
|
decorateList(list: OutfitRow[]): Promise<OutfitRow[]> {
|
||||||
// 社区分段:作者与互动计数由后端一次性下发,本地仅补相对时间,避免逐条请求点赞接口
|
// 社区分段:作者与互动计数由后端一次性下发,本地仅补相对时间与拼图封面,
|
||||||
|
// 避免逐条请求点赞接口;封面必须与其它分段一致地组装,否则 collage 会渲染成空白方块
|
||||||
if (this.data.activeTab === 2) {
|
if (this.data.activeTab === 2) {
|
||||||
return Promise.resolve(
|
return Promise.resolve(
|
||||||
list.map((it) => ({
|
list.map((it) => ({
|
||||||
...it,
|
...it,
|
||||||
|
...outfitCover(it.items),
|
||||||
_likeCount: it.like_count || 0,
|
_likeCount: it.like_count || 0,
|
||||||
_collectCount: it.collect_count || 0,
|
_collectCount: it.collect_count || 0,
|
||||||
_time: formatRelativeTime(it.created_at),
|
_time: formatRelativeTime(it.created_at),
|
||||||
|
|||||||
@@ -74,8 +74,8 @@
|
|||||||
<text class="of-atime">{{item._time}}</text>
|
<text class="of-atime">{{item._time}}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 无缝拼图封面 -->
|
<!-- 无缝拼图封面(_covers 由 outfitCover 组装,缺失时整体不渲染,避免 1:1 空白方块撑满屏幕) -->
|
||||||
<view class="collage {{item._collageCls}}">
|
<view wx:if="{{item._covers}}" class="collage {{item._collageCls}}">
|
||||||
<view class="cg" wx:for="{{item._covers}}" wx:for-item="c" wx:key="k">
|
<view class="cg" wx:for="{{item._covers}}" wx:for-item="c" wx:key="k">
|
||||||
<image wx:if="{{c.img}}" class="pic" src="{{c.img}}" mode="aspectFill" lazy-load />
|
<image wx:if="{{c.img}}" class="pic" src="{{c.img}}" mode="aspectFill" lazy-load />
|
||||||
<view wx:else class="ph icon icon-hanger"></view>
|
<view wx:else class="ph icon icon-hanger"></view>
|
||||||
|
|||||||
Reference in New Issue
Block a user