zt-closet-wxmini-frontend/miniprogram/pages/outfit-edit/outfit-edit.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="{{view === 'select' ? '选择衣橱单品' : (isEdit ? '编辑穿搭' : '创建穿搭')}}"
    scrolled="{{navScrolled}}"
  >
    <view wx:if="{{view === 'select'}}" slot="right" class="nav-action" bindtap="backToForm">取消</view>
  </navigation-bar>

  <!-- 表单视图 -->
  <scroll-view wx:if="{{view === 'form'}}" scroll-y class="scroll-body pb-dock" bindscroll="onNavScroll">
    <view class="head">
      <view class="eyebrow">{{isEdit ? 'Edit Look' : 'New Look'}}</view>
      <view class="display">{{isEdit ? '编辑穿搭' : '创建穿搭'}}</view>
    </view>

    <!-- 拼图预览：整块可点 —— 空态点击添加，已选点击调整 -->
    <view class="oe-preview">
      <view
        wx:if="{{selectedItems.length}}"
        class="collage {{cl.cls(selectedItems.length)}}"
        hover-class="oe-preview-press"
        bindtap="openSelect"
      >
        <view class="cg" wx:for="{{selectedItems}}" wx:key="clothes_uuid" wx:if="{{index < 4}}">
          <cached-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="{{selectedItems.length > 4}}" class="cg-more">+{{selectedItems.length - 4}}</view>
        <text class="cg-badge num">{{selectedItems.length}} 件</text>
      </view>
      <view wx:else class="oe-empty" hover-class="oe-empty-press" bindtap="openSelect">
        <view class="icon icon-hanger"></view>
        <text class="oe-empty-t">还没有选择衣物</text>
        <text class="oe-empty-d">点击这里选择衣橱单品</text>
      </view>
    </view>

    <!-- 表单 -->
    <view class="oe-form">
      <view class="oe-field">
        <view class="oe-label">
          <text>穿搭名称 <text class="oe-req">*</text></text>
          <text class="oe-count num">{{outfitName.length}}/32</text>
        </view>
        <input
          class="input"
          value="{{outfitName}}"
          bindinput="onNameInput"
          placeholder="给这套穿搭起个名字"
          placeholder-class="input-ph"
          maxlength="32"
        />
      </view>

      <view class="oe-field">
        <view class="oe-label">
          <text>穿搭描述</text>
          <text class="oe-count num">{{outfitDesc.length}}/500</text>
        </view>
        <textarea
          class="textarea"
          value="{{outfitDesc}}"
          bindinput="onDescInput"
          placeholder="简单描述这套穿搭的灵感或亮点"
          placeholder-class="input-ph"
          maxlength="500"
        />
      </view>

      <view class="oe-field">
        <view class="oe-label">
          <text>适合场景</text>
          <text class="oe-count num">{{scene.length}}/100</text>
        </view>
        <input
          class="input"
          value="{{scene}}"
          bindinput="onSceneInput"
          placeholder="例如：通勤、约会、旅行"
          placeholder-class="input-ph"
          maxlength="100"
        />
      </view>
    </view>

    <!-- 选择衣物入口 -->
    <view class="grp-hd oe-grp"><text class="gh-cn">单品</text><text class="gh-en">Items</text></view>
    <view class="rows">
      <view class="row" bindtap="openSelect">
        <view class="icon row-ic icon-shirt"></view>
        <view class="row-lb">
          <view>选择衣橱单品</view>
          <view class="oe-entry-d">{{selectedUuids.length ? '点击调整当前穿搭包含的衣物' : '选择 1~10 件衣物合成画报'}}</view>
        </view>
        <text class="row-vl">{{selectedUuids.length ? '已选 ' + selectedUuids.length + ' 件' : '未选择'}}</text>
        <view class="icon row-ch icon-chevron-right"></view>
      </view>
    </view>

    <view class="gap-64"></view>
  </scroll-view>

  <!-- 多选视图 -->
  <block wx:else>
    <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>

    <scroll-view scroll-y class="select-body pb-dock" bindscroll="onNavScroll">
      <view wx:if="{{selectLoading}}" class="oe-grid">
        <view class="oe-skel" wx:for="{{[1, 2, 3, 4]}}" wx:key="*this">
          <view class="sk sk-img"></view>
          <view class="sk sk-ln" style="width: 62%;"></view>
        </view>
      </view>
      <view wx:else class="oe-grid">
        <view class="oe-tile" wx:for="{{allClothes}}" wx:key="clothes_uuid">
          <clothes-card item="{{item}}" selectable selected="{{item._selected}}" bind:select="onToggleSelect" />
        </view>
      </view>
      <view class="gap-32"></view>
    </scroll-view>
  </block>

  <!-- 悬浮底部操作条 -->
  <view class="dock">
    <block wx:if="{{view === 'form'}}">
      <view wx:if="{{isEdit}}" class="btn--text oe-del" bindtap="onDelete">删除穿搭</view>
      <view
        class="btn btn--ink btn--block {{(!outfitName || !selectedUuids.length || saving) ? 'is-off' : ''}}"
        bindtap="onSave"
      >{{saving ? '保存中…' : (isEdit ? '保存修改' : '保存')}}</view>
    </block>
    <block wx:else>
      <view class="dock-row">
        <view class="oe-count-wrap">
          <view class="oe-count-t num">已选 {{selectedUuids.length}} 件</view>
          <view class="oe-count-d">最多可选择 10 件单品</view>
        </view>
        <view class="btn btn--ink btn--sm oe-confirm" bindtap="confirmSelect">确定</view>
      </view>
    </block>
  </view>

  <!-- 删除确认 -->
  <v2-overlay
    visible="{{delVisible}}"
    type="modal"
    title="确认删除这套穿搭？"
    content="删除后不可恢复，但不会影响衣橱内的单品。"
    buttons="{{delButtons}}"
    bind:confirm="onDelConfirm"
    bind:cancel="onDelCancel"
  />
</view>