zhengchiliu/zt-closet-wxmini-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ui update

Browse Source
This commit is contained in:
zhengchiliu
2026-09-15 16:01:59 +08:00
parent 1a11816839
commit 26c392d612
89 changed files with 10377 additions and 4861 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/outfit/outfit.wxml
+66 -44
View File
@@ -1,84 +1,106 @@
<view class="page page-flex">
<navigation-bar title="穿搭" back="{{false}}" />
<navigation-bar title="穿搭" back="{{false}}" scrolled="{{navScrolled}}" />
<scroll-view
scroll-y
class="scroll-body"
class="scroll-body pb-float"
refresher-enabled
refresher-triggered="{{refreshing}}"
bindrefresherrefresh="onRefresh"
bindscrolltolower="onReachBottom"
bindscroll="onNavScroll"
>
<!-- 分段控件 -->
<view class="topbar">
<view class="segment">
<view class="segment-item {{activeTab === 0 ? 'active' : ''}}" data-index="0" bindtap="onTabChange">我的穿搭</view>
<view class="segment-item {{activeTab === 1 ? 'active' : ''}}" data-index="1" bindtap="onTabChange">已收藏</view>
<!-- 大标题页头 -->
<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 class="entry-row">
<view class="entry-btn entry-outline" bindtap="onCreate">+ 创建穿搭</view>
<view class="entry-btn entry-primary" bindtap="onAiRecommend">AI 推荐</view>
</view>
<!-- 骨架屏 -->
<view wx:if="{{loading}}" class="list">
<view class="skeleton sk-card" wx:for="{{[1, 2, 3]}}" wx:key="*this"></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 ? '还没有穿搭' : '还没有收藏的穿搭'}}"
desc="{{activeTab === 0 ? '从衣橱挑几件，搭一套吧' : ''}}"
title="{{activeTab === 0 ? '还没有穿搭' : activeTab === 1 ? '还没有收藏的穿搭' : '还没有公开的穿搭'}}"
desc="{{activeTab === 0 ? '从衣橱挑几件，搭一套吧' : activeTab === 1 ? '在社区或 AI 推荐中点亮小星星，喜欢的穿搭会出现在这里' : '把喜欢的穿搭公开到社区，让大家看到你的搭配'}}"
buttonText="{{activeTab === 0 ? '创建穿搭' : ''}}"
bind:action="onCreate"
/>
<!-- 卡片流 -->
<view wx:else class="list">
<view wx:else class="of-list">
<view
class="outfit-card card"
class="of-card"
wx:for="{{list}}"
wx:key="outfit_uuid"
data-uuid="{{item.outfit_uuid}}"
bindtap="onOutfitTap"
>
<view class="cover">
<view
class="cover-item cover-{{index}}"
wx:for="{{item.items}}"
wx:key="clothes_uuid"
wx:if="{{index < 5}}"
>
<image wx:if="{{item.processed_image}}" class="cover-img" src="{{item.processed_image}}" mode="aspectFit" />
<view wx:else class="icon icon-hanger cover-ph"></view>
<!-- 作者行：仅社区分段 -->
<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>
<view wx:if="{{!item.items.length}}" class="icon icon-hanger"></view>
<text class="cover-count">{{item.items.length}} 件</text>
<text class="of-aname">{{item.owner_name || '穿搭达人'}}</text>
<text class="of-atime">{{item._time}}</text>
</view>
<view class="card-body">
<view class="title-row">
<text class="title">{{item.outfit_name}}</text>
<text class="tag tag-{{item._status.type}}">{{item._status.text}}</text>
<!-- 无缝拼图封面 -->
<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 class="desc" wx:if="{{item.outfit_desc}}">{{item.outfit_desc}}</view>
<view class="meta-row">
<text class="tag tag-gray" wx:if="{{item.scene}}">{{item.scene}}</text>
<text class="meta">{{item.items.length}} 件衣物</text>
<view class="spacer"></view>
<view class="meta-icon">
<view class="icon icon-heart heart"></view>
<text>{{item._likeCount || 0}}</text>
</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="no-more">没有更多了</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>