zt-closet-wxmini-frontend/miniprogram/pages/ai-recommend/ai-recommend.wxml

<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">结合今日运势与你的衣橱，生成通常需要 10~30 秒</view>
    <view class="ai-gen-elapsed num">已等待 {{genElapsed}} 秒</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="ai-reroll-tip ai-reroll-sub">未保存的推荐会留在「AI 穿搭」里，可随时找回</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="onCancelScene"></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="onCancelScene">取消</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 class="sheet-more" bindtap="onAiPending">
          <text>查看我的 AI 穿搭</text>
          <view class="icon icon-chevron-right"></view>
        </view>
      </view>
    </view>
  </view>

  <!-- 生成确认 -->
  <v2-overlay
    visible="{{confirmVisible}}"
    type="modal"
    title="AI 穿搭推荐"
    content="本次将消耗 1 次 AI 推荐额度，生成结果可在「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"
  />

  <!-- 错误提示（提交/生成/保存失败、超时、结果过期） -->
  <v2-overlay
    visible="{{errVisible}}"
    type="modal"
    title="{{errTitle}}"
    content="{{errText}}"
    buttons="{{errButtons}}"
    bind:confirm="onErrConfirm"
  />
</view>