引入 cached-image 组件与 image-cache 工具,实现签名 URL 稳定 key 剥离、downloadFile 落盘及 TTL/LRU 清理,替换 11 个页面与 clothes-card 共 22 处网络图片渲染点,减少 CDN 重复流量。
112 lines
4.3 KiB
Plaintext
112 lines
4.3 KiB
Plaintext
<view class="page page-flex">
|
|
<navigation-bar title="AI 穿搭" scrolled="{{navScrolled}}" />
|
|
|
|
<scroll-view
|
|
scroll-y
|
|
class="scroll-body"
|
|
refresher-enabled
|
|
refresher-triggered="{{refreshing}}"
|
|
bindrefresherrefresh="onRefresh"
|
|
bindscrolltolower="onReachBottom"
|
|
bindscroll="onNavScroll"
|
|
>
|
|
<!-- 大标题页头 -->
|
|
<view class="head">
|
|
<view class="eyebrow">AI Styling</view>
|
|
<view class="display">AI 穿搭</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>
|
|
</view>
|
|
|
|
<!-- 待保存说明:把保存语义与 7 天清理规则前置说清 -->
|
|
<view wx:if="{{activeTab === 0}}" class="ap-note">
|
|
保存后归入「已保存」。超过 7 天未保存的推荐会被自动清理。
|
|
</view>
|
|
|
|
<!-- 骨架屏 -->
|
|
<view wx:if="{{loading}}" class="ap-skel">
|
|
<view class="ap-skel-item" wx:for="{{[1, 2]}}" wx:key="*this">
|
|
<view class="sk sk-img sk-cover"></view>
|
|
<view class="sk sk-ln" style="width: 46%;"></view>
|
|
<view class="sk sk-ln" style="width: 68%;"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 该分段在本页数据里为空但还有下一页:给显式加载入口,避免误以为真的没有 -->
|
|
<view wx:elif="{{!list.length && hasMore}}" class="ap-more" bindtap="onReachBottom">继续加载更多</view>
|
|
|
|
<!-- 空态 -->
|
|
<empty-state
|
|
wx:elif="{{!list.length}}"
|
|
icon="icon-sparkles"
|
|
title="{{activeTab === 0 ? '没有待保存的推荐' : '还没有保存的 AI 穿搭'}}"
|
|
desc="{{activeTab === 0 ? '让 AI 结合今日运势与你的衣橱搭一套' : '把满意的推荐保存下来,就会出现在这里'}}"
|
|
buttonText="{{activeTab === 0 ? '去 AI 推荐' : ''}}"
|
|
bind:action="onGoGenerate"
|
|
/>
|
|
|
|
<!-- 卡片流 -->
|
|
<view wx:else class="ap-list">
|
|
<view
|
|
class="ap-card"
|
|
wx:for="{{list}}"
|
|
wx:key="outfit_uuid"
|
|
data-uuid="{{item.outfit_uuid}}"
|
|
bindtap="onDetail"
|
|
>
|
|
<!-- 无缝拼图封面 -->
|
|
<view class="collage {{item._collageCls}}">
|
|
<view class="cg" wx:for="{{item._covers}}" wx:for-item="c" wx:key="k">
|
|
<cached-image wx:if="{{c.img}}" class="pic" src="{{c.img}}" mode="aspectFill" lazy-load="{{true}}" />
|
|
<view wx:else class="ph icon icon-hanger"></view>
|
|
</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="ap-trow">
|
|
<text class="ap-title">{{item.outfit_name || 'AI 推荐搭配'}}</text>
|
|
<text class="pill {{item._status.cls}}">{{item._status.text}}</text>
|
|
</view>
|
|
<view class="ap-desc" wx:if="{{item.outfit_desc}}">{{item.outfit_desc}}</view>
|
|
<view class="ap-meta">
|
|
<text class="pill pill--line" wx:if="{{item.scene}}">{{item.scene}}</text>
|
|
<text class="ap-m">{{item.items.length}} 件衣物</text>
|
|
</view>
|
|
|
|
<!-- 待保存才给内联操作;已保存保持只读,点击进详情 -->
|
|
<view class="ap-acts" wx:if="{{activeTab === 0}}" catchtap="noop">
|
|
<view class="btn btn--ink btn--sm ap-save" data-uuid="{{item.outfit_uuid}}" catchtap="onSave">
|
|
{{busyUuid === item.outfit_uuid ? '保存中…' : '保存'}}
|
|
</view>
|
|
<view class="btn btn--text" catchtap="onRegen">重新生成</view>
|
|
<view class="btn btn--text" data-uuid="{{item.outfit_uuid}}" catchtap="onDelete">删除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view wx:if="{{list.length && !hasMore}}" class="foot-note">没有更多了</view>
|
|
<view class="gap-64"></view>
|
|
</scroll-view>
|
|
|
|
<!-- 删除确认 -->
|
|
<v2-overlay
|
|
visible="{{delVisible}}"
|
|
type="modal"
|
|
title="删除这套搭配"
|
|
content="{{delText}}"
|
|
buttons="{{delButtons}}"
|
|
bind:confirm="onDelConfirm"
|
|
bind:cancel="onDelCancel"
|
|
/>
|
|
|
|
<!-- 轻量反馈 -->
|
|
<v2-overlay visible="{{toastVisible}}" type="toast" content="{{toastText}}" bind:close="onToastClose" />
|
|
</view>
|