180 lines
5.8 KiB
Plaintext
180 lines
5.8 KiB
Plaintext
<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>
|
|
|
|
<!-- 接收者：分享者额度不足（不请求后端，倒计时后返回「我的」） -->
|
|
<empty-state
|
|
wx:if="{{pageState === 'quota'}}"
|
|
icon="icon-user"
|
|
title="好友分享额度不足"
|
|
desc="给您分享的好友额度不足哦，{{countdown}} 秒后自动返回"
|
|
buttonText="立即返回"
|
|
bind:action="onBackProfile"
|
|
/>
|
|
|
|
<!-- 未登录：去登录后回本页 -->
|
|
<empty-state
|
|
wx:elif="{{pageState === 'invalid' && needLogin}}"
|
|
icon="icon-user"
|
|
title="{{invalidTitle}}"
|
|
desc="{{invalidDesc}}"
|
|
buttonText="去登录"
|
|
bind:action="onGoLogin"
|
|
/>
|
|
|
|
<!-- 其他加载失败：内容不可见 / 加载失败 -->
|
|
<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>
|
|
</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="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="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>
|
|
</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>
|