93 lines
3.7 KiB
Plaintext
93 lines
3.7 KiB
Plaintext
<view class="page page-flex">
|
|
<navigation-bar title="分享" back="{{false}}" scrolled="{{navScrolled}}">
|
|
<view slot="right" class="nav-action nav-action--ink" bindtap="onCreate">新建</view>
|
|
</navigation-bar>
|
|
|
|
<scroll-view scroll-y class="scroll-body pb-tab" bindscrolltolower="onReachBottom" bindscroll="onNavScroll">
|
|
<!-- 大标题页头 -->
|
|
<view class="head">
|
|
<view class="eyebrow">Sharing</view>
|
|
<view class="display">分享</view>
|
|
</view>
|
|
|
|
<!-- 游客态提示条：未登录也可先浏览，登录由用户自行选择 -->
|
|
<view wx:if="{{guest}}" class="guest-bar" bindtap="onGuestLogin">
|
|
<view class="icon icon-lock"></view>
|
|
<text class="gb-t">浏览模式 · 以下为示例分享</text>
|
|
<text class="gb-a">登录</text>
|
|
<view class="icon icon-chevron-right"></view>
|
|
</view>
|
|
|
|
<!-- 下划线式文字分段 -->
|
|
<view class="segbar">
|
|
<view class="seg">
|
|
<view
|
|
wx:for="{{tabs}}"
|
|
wx:key="name"
|
|
class="seg-item {{activeTab === index ? 'is-on' : ''}}"
|
|
data-index="{{index}}"
|
|
bindtap="onTabTap"
|
|
>{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<empty-state
|
|
wx:if="{{!guest && !loading && !list.length}}"
|
|
icon="icon-share"
|
|
title="{{activeTab === 0 ? '还没有分享' : '还没有收到分享'}}"
|
|
desc="{{activeTab === 0 ? '把衣橱、精选衣物或穿搭分享给好友' : '好友分享给你的衣橱或穿搭会出现在这里'}}"
|
|
buttonText="{{activeTab === 0 ? '新建分享' : ''}}"
|
|
bind:action="onCreate"
|
|
/>
|
|
|
|
<!-- 横向条目卡：左缩略图 + 右标题/有效期 -->
|
|
<view class="cs-list">
|
|
<view
|
|
class="cs-card {{item._invalid ? 'is-dead' : ''}}"
|
|
wx:for="{{list}}"
|
|
wx:key="share_uuid"
|
|
data-uuid="{{item.share_uuid}}"
|
|
data-kind="{{item.kind}}"
|
|
bindtap="onItemTap"
|
|
>
|
|
<!-- 衣柜分享：无缝四宫格 -->
|
|
<view class="cs-thumb" wx:if="{{item.kind === 'closet'}}">
|
|
<view class="c"><view class="icon icon-hanger"></view></view>
|
|
<view class="c"><view class="icon icon-hanger"></view></view>
|
|
<view class="c"><view class="icon icon-hanger"></view></view>
|
|
<view class="c"><view class="icon icon-hanger"></view></view>
|
|
</view>
|
|
<!-- 穿搭分享：封面 -->
|
|
<view class="cs-thumb is-photo" wx:else>
|
|
<image wx:if="{{item.cover}}" class="pic" src="{{item.cover}}" mode="aspectFill" />
|
|
<view wx:else class="ph icon icon-hanger"></view>
|
|
</view>
|
|
|
|
<view class="cs-body">
|
|
<view class="cs-owner" wx:if="{{activeTab === 1}}">
|
|
<image wx:if="{{item.owner_avatar}}" class="oav" src="{{item.owner_avatar}}" mode="aspectFill" />
|
|
<view wx:else class="oav">
|
|
<view class="icon icon-user"></view>
|
|
</view>
|
|
<text class="onm">{{item.owner_name || '好友'}}</text>
|
|
</view>
|
|
<view class="cs-t">{{item.title}}</view>
|
|
<view class="cs-tags">
|
|
<text wx:if="{{guest}}" class="pill">示例</text>
|
|
<text class="pill">{{item.typeText}}</text>
|
|
<text wx:if="{{item._invalid}}" class="pill pill--line">{{item.expireText}}</text>
|
|
<text wx:else class="cs-exp">{{item.expireText}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view wx:if="{{!guest && list.length && !hasMore}}" class="foot-note">没有更多了</view>
|
|
<view wx:if="{{guest}}" class="guest-foot" bindtap="onGuestLogin">
|
|
<text>登录后可创建分享，并查看好友分享给你的内容</text>
|
|
<text class="gf-a">去登录</text>
|
|
</view>
|
|
<view class="gap-64"></view>
|
|
</scroll-view>
|
|
</view>
|