154 lines
5.4 KiB
Plaintext
154 lines
5.4 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="AI 穿搭推荐" scrolled="{{navScrolled}}" />
|
|
|
|
<!-- 生成中：呼吸感细描边圆环 + 衬线文案 -->
|
|
<view wx:if="{{state === 'generating'}}" class="ai-gen">
|
|
<view class="ai-ring">
|
|
<view class="ai-ring-core">
|
|
<view class="icon icon-sparkles"></view>
|
|
</view>
|
|
</view>
|
|
<view class="ai-gen-t">AI 正在为你搭配…</view>
|
|
<view class="ai-gen-d">结合今日运势与你的衣橱</view>
|
|
</view>
|
|
|
|
<!-- 衣橱为空 -->
|
|
<empty-state
|
|
wx:elif="{{state === 'empty'}}"
|
|
icon="icon-hanger"
|
|
title="还没有可用衣物"
|
|
desc="先上传几件处理成功的衣物吧"
|
|
buttonText="去上传"
|
|
bind:action="onGoUpload"
|
|
/>
|
|
|
|
<!-- 结果页 -->
|
|
<scroll-view wx:elif="{{state === 'result'}}" scroll-y class="scroll-body pb-dock" bindscroll="onNavScroll">
|
|
<view class="head">
|
|
<view class="eyebrow">AI Stylist</view>
|
|
<view class="display">今日推荐</view>
|
|
</view>
|
|
|
|
<!-- 无缝拼图封面 -->
|
|
<view class="ai-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="ai-info">
|
|
<view class="t-xl">{{result.outfit_name}}</view>
|
|
<view class="ai-tags">
|
|
<text wx:if="{{result.scene}}" class="pill pill--line">{{result.scene}}</text>
|
|
<text class="pill pill--ink">AI 推荐</text>
|
|
</view>
|
|
<view class="t-bd ai-desc">{{result.outfit_desc}}</view>
|
|
</view>
|
|
|
|
<!-- 推荐单品：横滑 -->
|
|
<view class="ai-items">
|
|
<view class="grp-hd">
|
|
<text class="gh-cn">推荐单品</text>
|
|
<text class="gh-en">Items</text>
|
|
</view>
|
|
<scroll-view scroll-x class="ai-items-scroll" show-scrollbar="{{false}}">
|
|
<view class="ai-items-row">
|
|
<view class="ai-chip" wx:for="{{clothes}}" wx:key="clothes_uuid">
|
|
<view class="ai-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="ai-chip-n">{{item.name || '未命名'}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="gap-64"></view>
|
|
</scroll-view>
|
|
|
|
<!-- 悬浮底部操作条 -->
|
|
<view class="dock" wx:if="{{state === 'result'}}">
|
|
<view class="ai-reroll-tip">换一套将再消耗 1 次推荐额度</view>
|
|
<view class="dock-row">
|
|
<view class="btn btn--ghost" bindtap="onReroll">换一套</view>
|
|
<view class="btn btn--ink" bindtap="onSave">保存到我的穿搭</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 场景选择抽屉 -->
|
|
<view wx:if="{{showSceneSheet}}" class="scrim" bindtap="onSkipScene"></view>
|
|
<view wx:if="{{showSceneSheet}}" class="sheet-wrap">
|
|
<view class="sheet" catchtap="noop">
|
|
<view class="sheet-grab"></view>
|
|
<view class="sheet-hd">
|
|
<text class="sheet-t">选择推荐场景</text>
|
|
<text class="sheet-x" bindtap="onSkipScene">跳过</text>
|
|
</view>
|
|
<view class="sheet-body">
|
|
<view class="scene-card {{sceneType === 1 ? 'is-on' : ''}}" bindtap="selectDaily">
|
|
<view class="scene-name">每日推荐</view>
|
|
<view class="scene-desc">按今日运势与衣橱自动搭配</view>
|
|
<view wx:if="{{sceneType === 1}}" class="icon icon-check scene-check"></view>
|
|
</view>
|
|
|
|
<view class="scene-card {{sceneType === 2 ? 'is-on' : ''}}" bindtap="selectCustom">
|
|
<view class="scene-name">自定义场景</view>
|
|
<view class="scene-desc">描述你想去的场合</view>
|
|
<view wx:if="{{sceneType === 2}}" class="icon icon-check scene-check"></view>
|
|
</view>
|
|
|
|
<input
|
|
wx:if="{{sceneType === 2}}"
|
|
class="input scene-input"
|
|
value="{{scene}}"
|
|
bindinput="onSceneInput"
|
|
placeholder="例如：海边度假、周一例会、初次约会"
|
|
placeholder-class="input-ph"
|
|
/>
|
|
</view>
|
|
<view class="sheet-foot">
|
|
<view class="btn btn--ink btn--block" bindtap="onStartGenerate">开始生成（消耗 1 次推荐额度）</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 生成确认 -->
|
|
<v2-overlay
|
|
visible="{{confirmVisible}}"
|
|
type="modal"
|
|
title="AI 穿搭推荐"
|
|
content="本次将消耗 1 次 AI 推荐额度，生成后可保存到我的穿搭"
|
|
buttons="{{confirmButtons}}"
|
|
bind:confirm="onConfirmGenerate"
|
|
bind:cancel="onConfirmCancel"
|
|
/>
|
|
|
|
<!-- 额度不足 -->
|
|
<v2-overlay
|
|
visible="{{limitVisible}}"
|
|
type="modal"
|
|
title="AI 推荐额度不足"
|
|
content="购买额度包后可继续生成 AI 穿搭推荐"
|
|
buttons="{{limitButtons}}"
|
|
bind:confirm="onLimitConfirm"
|
|
bind:cancel="onLimitCancel"
|
|
/>
|
|
</view>
|