110 lines
3.7 KiB
Plaintext
110 lines
3.7 KiB
Plaintext
<view class="page page-flex">
|
|
<navigation-bar title="我的衣橱" back="{{false}}" scrolled="{{navScrolled}}" />
|
|
|
|
<scroll-view
|
|
scroll-y
|
|
class="scroll-body pb-tab"
|
|
refresher-enabled
|
|
refresher-triggered="{{refreshing}}"
|
|
bindrefresherrefresh="onRefresh"
|
|
bindscrolltolower="onReachBottom"
|
|
bindscroll="onNavScroll"
|
|
>
|
|
<!-- 大标题页头 -->
|
|
<view class="head">
|
|
<view class="eyebrow">Wardrobe</view>
|
|
<view class="display">我的衣橱</view>
|
|
<view wx:if="{{guest}}" class="wd-stat">浏览模式 · 以下为功能示例，登录后同步你的衣物</view>
|
|
<view wx:else class="wd-stat num">共 {{total}} 件 · 上传额度剩余 {{uploadRemain}} 次</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">
|
|
<scroll-view scroll-x class="seg-scroll" show-scrollbar="{{false}}">
|
|
<view class="seg">
|
|
<view
|
|
wx:for="{{categories}}"
|
|
wx:key="name"
|
|
class="seg-item {{activeCategory === index ? 'is-on' : ''}}"
|
|
data-index="{{index}}"
|
|
bindtap="onCategoryTap"
|
|
>{{item.name}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 骨架屏 -->
|
|
<view wx:if="{{!guest && loading}}" class="wd-grid">
|
|
<view class="wd-skel" wx:for="{{[1, 2, 3, 4, 5, 6]}}" wx:key="*this">
|
|
<view class="sk sk-img"></view>
|
|
<view class="sk sk-ln" style="width: 70%;"></view>
|
|
<view class="sk sk-ln" style="width: 46%;"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空态 -->
|
|
<empty-state
|
|
wx:elif="{{!guest && !list.length}}"
|
|
icon="icon-hanger"
|
|
title="衣橱还空着"
|
|
desc="拍照上传第一件衣物，AI 自动抠图并识别属性"
|
|
buttonText="上传衣物"
|
|
bind:action="onUpload"
|
|
/>
|
|
|
|
<!-- 游客态：本地示例衣物网格（可切换分类筛选，点卡片可看示例详情，不要求登录） -->
|
|
<view wx:elif="{{guest}}" class="wd-grid">
|
|
<view class="wd-tile" wx:for="{{guestList}}" wx:key="clothes_uuid">
|
|
<clothes-card
|
|
item="{{item}}"
|
|
statusText="示例"
|
|
bind:select="onClothesTap"
|
|
/>
|
|
</view>
|
|
<view wx:if="{{!guestList.length}}" class="gd-none">该分类暂无示例内容</view>
|
|
</view>
|
|
|
|
<!-- 衣物网格 -->
|
|
<view wx:else class="wd-grid">
|
|
<view class="wd-tile" wx:for="{{list}}" wx:key="clothes_uuid">
|
|
<clothes-card
|
|
item="{{item}}"
|
|
statusText="{{item._statusText}}"
|
|
statusType="{{item._statusType}}"
|
|
bind:select="onClothesTap"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view wx:if="{{!guest && list.length && !hasMore}}" class="foot-note">没有更多了</view>
|
|
<view wx:if="{{guest}}" class="guest-foot" bindtap="onGuestLogin">
|
|
<text>登录后上传你的衣物，AI 自动抠图与识别</text>
|
|
<text class="gf-a">去登录</text>
|
|
</view>
|
|
<view class="gap-64"></view>
|
|
</scroll-view>
|
|
|
|
<view class="fab" bindtap="onUpload">
|
|
<view class="icon icon-plus"></view>
|
|
</view>
|
|
|
|
<!-- 处理失败提示：「上传后退出小程序」的失败结果回归告知 -->
|
|
<v2-overlay
|
|
visible="{{failVisible}}"
|
|
type="modal"
|
|
title="AI 识别失败"
|
|
content="{{failText}}"
|
|
buttons="{{failButtons}}"
|
|
bind:confirm="onFailConfirm"
|
|
bind:cancel="onFailCancel"
|
|
/>
|
|
</view>
|