zt-closet-wxmini-frontend/miniprogram/pages/closet-share-create/closet-share-create.wxml

<view class="page page-flex">
  <navigation-bar title="创建分享" scrolled="{{navScrolled}}" />

  <!-- 配置视图 -->
  <scroll-view wx:if="{{view === 'config'}}" scroll-y class="scroll-body pb-dock" bindscroll="onNavScroll">
    <view class="head">
      <view class="eyebrow">New Share</view>
      <view class="display">创建分享</view>
    </view>

    <view class="grp-hd csc-grp"><text class="gh-cn">分享方式</text><text class="gh-en">Type</text></view>
    <view class="csc-types">
      <view class="csc-type {{shareType === 1 ? 'is-on' : ''}}" bindtap="selectPartial">
        <view class="csc-type-n">部分衣物</view>
        <view class="csc-type-d">挑选几件衣物分享给好友</view>
        <view wx:if="{{shareType === 1}}" class="icon icon-check csc-check"></view>
      </view>
      <view class="csc-type {{shareType === 2 ? 'is-on' : ''}}" bindtap="selectFull">
        <view class="csc-type-n">全量快照</view>
        <view class="csc-type-d">分享当前衣橱的全部衣物</view>
        <view wx:if="{{shareType === 2}}" class="icon icon-check csc-check"></view>
      </view>
    </view>

    <!-- 选择衣物入口（部分衣物） -->
    <view wx:if="{{shareType === 1}}" class="rows csc-entry">
      <view class="row" bindtap="openSelect">
        <view class="icon row-ic icon-shirt"></view>
        <text class="row-lb">选择衣物</text>
        <text class="row-vl">{{selectedCount ? '已选 ' + selectedCount + ' 件' : '未选择'}}</text>
        <view class="icon row-ch icon-chevron-right"></view>
      </view>
    </view>

    <view class="grp-hd csc-grp"><text class="gh-cn">有效期</text><text class="gh-en">Expire</text></view>
    <view class="rows">
      <view
        class="row"
        wx:for="{{expireOptions}}"
        wx:key="days"
        data-days="{{item.days}}"
        bindtap="selectExpire"
      >
        <text class="row-lb">{{item.label}}</text>
        <view wx:if="{{expireDays === item.days}}" class="icon csc-tick icon-check"></view>
      </view>
    </view>

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

  <!-- 选择衣物视图 -->
  <block wx:elif="{{view === 'select'}}">
    <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="csc-grid">
        <view class="csc-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="csc-grid">
        <view class="csc-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>

  <!-- 成功预览 -->
  <scroll-view wx:else scroll-y class="scroll-body pb-dock" bindscroll="onNavScroll">
    <view class="head">
      <view class="eyebrow">Ready</view>
      <view class="display">分享已创建</view>
    </view>

    <view class="csc-done-ic">
      <view class="icon icon-check"></view>
    </view>

    <view class="csc-preview">
      <view class="csc-preview-hd">
        <view class="csc-av">
          <cached-image wx:if="{{avatar}}" class="pic" src="{{avatar}}" mode="aspectFill" />
          <view wx:else class="icon icon-user"></view>
        </view>
        <text class="csc-preview-n">{{nickname}} 向你分享了 {{selectedCount || '全部'}} 件衣物</text>
      </view>
      <view class="csc-preview-body">
        <view class="icon icon-hanger"></view>
      </view>
    </view>

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

  <!-- 悬浮底部操作条 -->
  <view class="dock">
    <block wx:if="{{view === 'config'}}">
      <view class="btn btn--ink btn--block" bindtap="onConfirm">确认分享（消耗 1 次衣柜分享额度）</view>
    </block>
    <block wx:elif="{{view === 'select'}}">
      <view class="dock-row">
        <view class="csc-count-wrap">
          <view class="csc-count-t num">已选 {{selectedUuids.length}} 件</view>
          <view class="csc-count-d">最多可选择 10 件单品</view>
        </view>
        <view class="btn btn--ink btn--sm csc-confirm" bindtap="confirmSelect">确定</view>
      </view>
    </block>
    <block wx:else>
      <view class="dock-row">
        <view class="btn btn--ghost" bindtap="onDone">完成</view>
        <view class="btn btn--ink" bindtap="onViewShare">查看分享</view>
      </view>
    </block>
  </view>

  <!-- 额度不足 -->
  <v2-overlay
    visible="{{quotaVisible}}"
    type="modal"
    title="{{quotaTitle}}"
    content="{{quotaText}}"
    buttons="{{quotaButtons}}"
    bind:confirm="onQuotaConfirm"
    bind:cancel="onQuotaCancel"
  />
</view>