107 lines
4.3 KiB
Plaintext
107 lines
4.3 KiB
Plaintext
<view class="page page-flex">
|
|
<navigation-bar title="穿搭" back="{{false}}" scrolled="{{navScrolled}}" />
|
|
|
|
<scroll-view
|
|
scroll-y
|
|
class="scroll-body pb-float"
|
|
refresher-enabled
|
|
refresher-triggered="{{refreshing}}"
|
|
bindrefresherrefresh="onRefresh"
|
|
bindscrolltolower="onReachBottom"
|
|
bindscroll="onNavScroll"
|
|
>
|
|
<!-- 大标题页头 -->
|
|
<view class="head">
|
|
<view class="eyebrow">Styling</view>
|
|
<view class="display">穿搭</view>
|
|
</view>
|
|
|
|
<!-- 下划线式文字分段 -->
|
|
<view class="segbar">
|
|
<view class="seg">
|
|
<view class="seg-item {{activeTab === 0 ? 'is-on' : ''}}" data-index="0" bindtap="onTabChange">我的穿搭</view>
|
|
<view class="seg-item {{activeTab === 1 ? 'is-on' : ''}}" data-index="1" bindtap="onTabChange">已收藏</view>
|
|
<view class="seg-item {{activeTab === 2 ? 'is-on' : ''}}" data-index="2" bindtap="onTabChange">社区</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 骨架屏 -->
|
|
<view wx:if="{{loading}}" class="of-skel">
|
|
<view class="of-skel-item" wx:for="{{[1, 2]}}" wx:key="*this">
|
|
<view class="sk sk-img sk-cover"></view>
|
|
<view class="sk sk-ln" style="width: 44%;"></view>
|
|
<view class="sk sk-ln" style="width: 72%;"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空态 -->
|
|
<empty-state
|
|
wx:elif="{{!list.length}}"
|
|
icon="icon-shirt"
|
|
title="{{activeTab === 0 ? '还没有穿搭' : activeTab === 1 ? '还没有收藏的穿搭' : '还没有公开的穿搭'}}"
|
|
desc="{{activeTab === 0 ? '从衣橱挑几件，搭一套吧' : activeTab === 1 ? '在社区或 AI 推荐中点亮小星星，喜欢的穿搭会出现在这里' : '把喜欢的穿搭公开到社区，让大家看到你的搭配'}}"
|
|
buttonText="{{activeTab === 0 ? '创建穿搭' : ''}}"
|
|
bind:action="onCreate"
|
|
/>
|
|
|
|
<!-- 卡片流 -->
|
|
<view wx:else class="of-list">
|
|
<view
|
|
class="of-card"
|
|
wx:for="{{list}}"
|
|
wx:key="outfit_uuid"
|
|
data-uuid="{{item.outfit_uuid}}"
|
|
bindtap="onOutfitTap"
|
|
>
|
|
<!-- 作者行：仅社区分段 -->
|
|
<view class="of-author" wx:if="{{activeTab === 2}}">
|
|
<image wx:if="{{item.owner_avatar}}" class="of-av" src="{{item.owner_avatar}}" mode="aspectFill" />
|
|
<view wx:else class="of-av">
|
|
<view class="icon icon-user"></view>
|
|
</view>
|
|
<text class="of-aname">{{item.owner_name || '穿搭达人'}}</text>
|
|
<text class="of-atime">{{item._time}}</text>
|
|
</view>
|
|
|
|
<!-- 无缝拼图封面 -->
|
|
<view class="collage {{item._collageCls}}">
|
|
<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 />
|
|
<view wx:else class="ph icon icon-hanger"></view>
|
|
</view>
|
|
<view wx:if="{{item._moreCount > 0}}" class="cg-more">+{{item._moreCount}}</view>
|
|
<text class="cg-badge num">{{item.items.length}} 件</text>
|
|
</view>
|
|
|
|
<view class="of-trow">
|
|
<text class="of-title">{{item.outfit_name}}</text>
|
|
<text wx:if="{{activeTab !== 2}}" class="pill {{item._status.cls}}">{{item._status.text}}</text>
|
|
</view>
|
|
<view class="of-desc" wx:if="{{item.outfit_desc}}">{{item.outfit_desc}}</view>
|
|
<view class="of-meta">
|
|
<text class="pill pill--line" wx:if="{{item.scene}}">{{item.scene}}</text>
|
|
<text class="of-m">{{item.items.length}} 件衣物</text>
|
|
<view class="spacer"></view>
|
|
<view class="of-m">
|
|
<view class="icon icon-heart"></view>
|
|
<text class="num">{{item._likeCount || 0}}</text>
|
|
</view>
|
|
<view class="of-m" wx:if="{{activeTab === 2}}">
|
|
<view class="icon icon-star"></view>
|
|
<text class="num">{{item._collectCount || 0}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view wx:if="{{list.length && !hasMore}}" class="foot-note">没有更多了</view>
|
|
<view class="gap-64"></view>
|
|
</scroll-view>
|
|
|
|
<!-- 悬浮玻璃双按钮条（社区为浏览场景，不展示管理入口） -->
|
|
<view class="float-duo" wx:if="{{activeTab !== 2}}">
|
|
<view class="btn btn--glass" bindtap="onCreate">创建穿搭</view>
|
|
<view class="btn btn--ink" bindtap="onAiRecommend">AI 推荐</view>
|
|
</view>
|
|
</view>
|