feat: ui update
This commit is contained in:
@@ -1,79 +1,179 @@
|
||||
<view class="page detail-page">
|
||||
<navigation-bar title="{{outfit.outfit_name || '穿搭详情'}}">
|
||||
<view wx:if="{{isOwner}}" slot="right" class="nav-more" bindtap="onMore">
|
||||
<wxs module="cl">
|
||||
function cls(n) {
|
||||
if (n >= 4) return ''
|
||||
if (n === 3) return 'collage--3'
|
||||
if (n === 2) return 'collage--2'
|
||||
return 'collage--1'
|
||||
}
|
||||
module.exports = { cls: cls }
|
||||
</wxs>
|
||||
|
||||
<view class="page page-flex">
|
||||
<navigation-bar title="{{outfit.outfit_name || '穿搭详情'}}" scrolled="{{navScrolled}}">
|
||||
<view
|
||||
wx:if="{{isOwner && pageState === 'normal' && !loading}}"
|
||||
slot="right"
|
||||
class="nav-more"
|
||||
bindtap="onMore"
|
||||
>
|
||||
<view class="icon icon-ellipsis"></view>
|
||||
</view>
|
||||
</navigation-bar>
|
||||
|
||||
<scroll-view scroll-y class="scroll-body">
|
||||
<!-- 拼图封面 -->
|
||||
<view class="cover">
|
||||
<view
|
||||
class="cover-item cover-{{index}}"
|
||||
wx:for="{{clothes}}"
|
||||
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-placeholder"></view>
|
||||
</view>
|
||||
<view wx:if="{{!clothes.length}}" class="cover-empty">
|
||||
<view class="icon icon-hanger"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 接收者：分享者额度不足（不请求后端，倒计时后返回「我的」） -->
|
||||
<empty-state
|
||||
wx:if="{{pageState === 'quota'}}"
|
||||
icon="icon-user"
|
||||
title="好友分享额度不足"
|
||||
desc="给您分享的好友额度不足哦，{{countdown}} 秒后自动返回"
|
||||
buttonText="立即返回"
|
||||
bind:action="onBackProfile"
|
||||
/>
|
||||
|
||||
<!-- 信息卡片 -->
|
||||
<view class="card info-card">
|
||||
<view class="title-row">
|
||||
<text class="title">{{outfit.outfit_name}}</text>
|
||||
</view>
|
||||
<view class="tag-row">
|
||||
<text wx:if="{{outfit.scene}}" class="tag tag-gray">{{outfit.scene}}</text>
|
||||
<text class="tag {{outfit.source === 2 ? 'tag-indigo' : 'tag-gray'}}">{{outfit.source === 2 ? 'AI 推荐' : '自建'}}</text>
|
||||
<text class="tag {{outfit.is_public === 2 ? 'tag-blue' : 'tag-gray'}}">{{outfit.is_public === 2 ? '已公开' : '仅自己可见'}}</text>
|
||||
</view>
|
||||
<view class="desc" wx:if="{{outfit.outfit_desc}}">{{outfit.outfit_desc}}</view>
|
||||
<!-- 未登录：去登录后回本页 -->
|
||||
<empty-state
|
||||
wx:elif="{{pageState === 'invalid' && needLogin}}"
|
||||
icon="icon-user"
|
||||
title="{{invalidTitle}}"
|
||||
desc="{{invalidDesc}}"
|
||||
buttonText="去登录"
|
||||
bind:action="onGoLogin"
|
||||
/>
|
||||
|
||||
<!-- 包含衣物 -->
|
||||
<view class="items-title">包含衣物</view>
|
||||
<scroll-view scroll-x class="items-scroll" show-scrollbar="{{false}}">
|
||||
<view class="items-row">
|
||||
<view
|
||||
class="item-chip"
|
||||
wx:for="{{clothes}}"
|
||||
wx:key="clothes_uuid"
|
||||
data-uuid="{{item.clothes_uuid}}"
|
||||
bindtap="onItemTap"
|
||||
>
|
||||
<image wx:if="{{item.processed_image}}" class="item-img" src="{{item.processed_image}}" mode="aspectFill" />
|
||||
<view wx:else class="item-img item-img-empty"><view class="icon icon-hanger"></view></view>
|
||||
<text class="item-name">{{item.name || '未命名'}}</text>
|
||||
<!-- 其他加载失败：内容不可见 / 加载失败 -->
|
||||
<empty-state
|
||||
wx:elif="{{pageState === 'invalid'}}"
|
||||
icon="icon-shirt"
|
||||
title="{{invalidTitle}}"
|
||||
desc="{{invalidDesc}}"
|
||||
buttonText="返回首页"
|
||||
bind:action="onBackHome"
|
||||
/>
|
||||
|
||||
<block wx:else>
|
||||
<scroll-view scroll-y class="scroll-body pb-dock" bindscroll="onNavScroll">
|
||||
<!-- 无缝拼图封面 -->
|
||||
<view class="od-cover">
|
||||
<view class="collage {{cl.cls(clothes.length)}}">
|
||||
<view class="cg" wx:for="{{clothes}}" wx:key="clothes_uuid" wx:if="{{index < 4}}">
|
||||
<image wx:if="{{item.processed_image}}" class="pic" src="{{item.processed_image}}" mode="aspectFill" />
|
||||
<view wx:else class="ph icon icon-hanger"></view>
|
||||
</view>
|
||||
<view wx:if="{{clothes.length > 4}}" class="cg-more">+{{clothes.length - 4}}</view>
|
||||
<text class="cg-badge num">{{clothes.length}} 件</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer-placeholder"></view>
|
||||
</scroll-view>
|
||||
<!-- 信息区 -->
|
||||
<view class="od-info">
|
||||
<view class="eyebrow">{{outfit.source === 2 ? 'AI Stylist' : 'My Look'}}</view>
|
||||
<view class="t-xl od-title">{{outfit.outfit_name}}</view>
|
||||
<view class="od-tags">
|
||||
<text wx:if="{{outfit.scene}}" class="pill pill--line">{{outfit.scene}}</text>
|
||||
<text class="pill {{outfit.source === 2 ? 'pill--ink' : ''}}">{{outfit.source === 2 ? 'AI 推荐' : '自建'}}</text>
|
||||
<text class="pill {{outfit.is_public === 2 ? 'pill--line' : ''}}">{{outfit.is_public === 2 ? '已公开' : '仅自己可见'}}</text>
|
||||
</view>
|
||||
<view class="t-bd od-desc" wx:if="{{outfit.outfit_desc}}">{{outfit.outfit_desc}}</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="footer">
|
||||
<view class="footer-left">
|
||||
<view class="fb-btn" bindtap="onLike">
|
||||
<view class="icon icon-heart {{isLiked ? 'liked' : ''}}"></view>
|
||||
<text class="{{isLiked ? 'liked' : ''}}">{{likeCount}}</text>
|
||||
<!-- 包含衣物：横滑单品 -->
|
||||
<view class="od-items">
|
||||
<view class="grp-hd">
|
||||
<text class="gh-cn">包含衣物</text>
|
||||
<text class="gh-en">Items</text>
|
||||
</view>
|
||||
<scroll-view scroll-x class="od-items-scroll" show-scrollbar="{{false}}">
|
||||
<view class="od-items-row">
|
||||
<view
|
||||
class="od-chip"
|
||||
wx:for="{{clothes}}"
|
||||
wx:key="clothes_uuid"
|
||||
data-uuid="{{item.clothes_uuid}}"
|
||||
bindtap="onItemTap"
|
||||
>
|
||||
<view class="od-thumb">
|
||||
<image wx:if="{{item.processed_image}}" class="pic" src="{{item.processed_image}}" mode="aspectFill" />
|
||||
<view wx:else class="ph icon icon-hanger"></view>
|
||||
</view>
|
||||
<text class="od-chip-n">{{item.name || '未命名'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="fb-btn" wx:if="{{!isOwner}}" bindtap="onCollect">
|
||||
<view class="icon {{isCollected ? 'icon-star-fill collected' : 'icon-star'}}"></view>
|
||||
|
||||
<view class="gap-64"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 悬浮玻璃操作条 -->
|
||||
<view class="dock">
|
||||
<view class="dock-row">
|
||||
<view class="dock-ic {{isLiked ? 'is-on' : ''}}" bindtap="onLike">
|
||||
<view class="icon icon-heart"></view>
|
||||
<text class="num">{{likeCount}}</text>
|
||||
</view>
|
||||
<view class="dock-ic" wx:if="{{!isOwner}}" bindtap="onCollect">
|
||||
<view class="icon {{isCollected ? 'icon-star-fill' : 'icon-star'}}"></view>
|
||||
</view>
|
||||
<view class="spacer"></view>
|
||||
<block wx:if="{{isOwner}}">
|
||||
<view class="btn btn--ghost btn--sm" bindtap="onTogglePublic">{{outfit.is_public === 2 ? '取消公开' : '公开到社区'}}</view>
|
||||
<button class="od-share" open-type="share">
|
||||
<view class="icon icon-share"></view>
|
||||
</button>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-right" wx:if="{{isOwner}}">
|
||||
<view class="fb-public {{outfit.is_public === 2 ? 'public' : ''}}" bindtap="onTogglePublic">
|
||||
{{outfit.is_public === 2 ? '取消公开' : '公开到社区'}}
|
||||
</view>
|
||||
<button class="fb-share" open-type="share">
|
||||
<view class="icon icon-share"></view>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 提示（分享者额度不足） -->
|
||||
<v2-overlay
|
||||
visible="{{tipVisible}}"
|
||||
type="modal"
|
||||
title="{{tipTitle}}"
|
||||
content="{{tipText}}"
|
||||
buttons="{{tipButtons}}"
|
||||
bind:confirm="onTipConfirm"
|
||||
/>
|
||||
|
||||
<!-- 公开到社区确认 -->
|
||||
<v2-overlay
|
||||
visible="{{pubVisible}}"
|
||||
type="modal"
|
||||
title="公开到社区"
|
||||
content="公开后将展示在社区供他人点赞收藏，并消耗 1 次社区分享额度"
|
||||
buttons="{{pubButtons}}"
|
||||
bind:confirm="onPubConfirm"
|
||||
bind:cancel="onPubCancel"
|
||||
/>
|
||||
|
||||
<!-- 删除确认 -->
|
||||
<v2-overlay
|
||||
visible="{{delVisible}}"
|
||||
type="modal"
|
||||
title="确认删除这套穿搭？"
|
||||
content="删除后不可恢复，但不会影响衣橱内的单品。"
|
||||
buttons="{{delButtons}}"
|
||||
bind:confirm="onDelConfirm"
|
||||
bind:cancel="onDelCancel"
|
||||
/>
|
||||
|
||||
<!-- 更多操作 -->
|
||||
<v2-overlay
|
||||
visible="{{moreVisible}}"
|
||||
type="actionsheet"
|
||||
items="{{moreItems}}"
|
||||
bind:select="onMoreSelect"
|
||||
bind:cancel="onMoreCancel"
|
||||
/>
|
||||
|
||||
<!-- 额度不足 -->
|
||||
<v2-overlay
|
||||
visible="{{quotaVisible}}"
|
||||
type="modal"
|
||||
title="{{quotaTitle}}"
|
||||
content="{{quotaText}}"
|
||||
buttons="{{quotaButtons}}"
|
||||
bind:confirm="onQuotaConfirm"
|
||||
bind:cancel="onQuotaCancel"
|
||||
/>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user