115 lines
4.7 KiB
Plaintext
115 lines
4.7 KiB
Plaintext
<view class="page edit-page">
|
|
<navigation-bar title="{{view === 'select' ? '选择衣橱单品' : (isEdit ? '编辑穿搭' : '创建穿搭')}}">
|
|
<view wx:if="{{view === 'select'}}" slot="right" class="nav-cancel" bindtap="backToForm">取消</view>
|
|
</navigation-bar>
|
|
|
|
<!-- 表单视图 -->
|
|
<scroll-view wx:if="{{view === 'form'}}" scroll-y class="scroll-body">
|
|
<!-- 拼图预览 -->
|
|
<view class="card preview">
|
|
<view wx:if="{{selectedItems.length}}" class="preview-items">
|
|
<view
|
|
class="preview-item preview-{{index}}"
|
|
wx:for="{{selectedItems}}"
|
|
wx:key="clothes_uuid"
|
|
wx:if="{{index < 5}}"
|
|
>
|
|
<image wx:if="{{item.processed_image}}" class="preview-img" src="{{item.processed_image}}" mode="aspectFit" />
|
|
<view wx:else class="icon icon-hanger preview-placeholder"></view>
|
|
</view>
|
|
<view wx:if="{{selectedItems.length > 5}}" class="preview-more">+{{selectedItems.length - 5}}</view>
|
|
</view>
|
|
<view wx:else class="preview-empty">
|
|
<view class="icon icon-hanger"></view>
|
|
<text class="pe-title">还没有选择衣物</text>
|
|
<text class="pe-desc">点击下方「选择衣物」添加你的单品</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 表单 -->
|
|
<view class="card form-card">
|
|
<view class="field">
|
|
<view class="field-label">
|
|
<text>穿搭名称 <text class="req">*</text></text>
|
|
<text class="count">{{outfitName.length}}/32</text>
|
|
</view>
|
|
<input class="input" value="{{outfitName}}" bindinput="onNameInput" placeholder="给这套穿搭起个名字" maxlength="32" />
|
|
</view>
|
|
<view class="field">
|
|
<view class="field-label">
|
|
<text>穿搭描述</text>
|
|
<text class="count">{{outfitDesc.length}}/500</text>
|
|
</view>
|
|
<textarea class="textarea" value="{{outfitDesc}}" bindinput="onDescInput" placeholder="简单描述这套穿搭的灵感或亮点" maxlength="500" />
|
|
</view>
|
|
<view class="field">
|
|
<view class="field-label">
|
|
<text>适合场景</text>
|
|
<text class="count">{{scene.length}}/100</text>
|
|
</view>
|
|
<input class="input" value="{{scene}}" bindinput="onSceneInput" placeholder="例如：通勤、约会、旅行" maxlength="100" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 选择衣物入口 -->
|
|
<view class="card select-entry" bindtap="openSelect">
|
|
<view class="entry-left">
|
|
<view class="entry-icon"><view class="icon icon-shirt"></view></view>
|
|
<view>
|
|
<view class="entry-title">选择衣橱单品</view>
|
|
<view class="entry-desc">{{selectedUuids.length ? '点击调整当前穿搭包含的衣物' : '选择 1~10 件衣物合成画报'}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="entry-right">
|
|
<text class="entry-count {{selectedUuids.length ? 'on' : ''}}">{{selectedUuids.length ? '已选 ' + selectedUuids.length + ' 件' : '未选择'}}</text>
|
|
<view class="icon icon-chevron-right"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<view class="footer">
|
|
<view wx:if="{{isEdit}}" class="btn-danger-text delete-link" bindtap="onDelete">删除穿搭</view>
|
|
<view
|
|
class="btn btn-primary {{(!outfitName || !selectedUuids.length) ? 'disabled' : ''}}"
|
|
bindtap="onSave"
|
|
>{{isEdit ? '保存修改' : '保存'}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 多选视图 -->
|
|
<view wx:else class="select-view">
|
|
<scroll-view scroll-x class="cat-scroll" show-scrollbar="{{false}}">
|
|
<view class="cat-row">
|
|
<view
|
|
wx:for="{{categories}}"
|
|
wx:key="name"
|
|
class="cat-item {{activeCategory === index ? 'active' : ''}}"
|
|
data-index="{{index}}"
|
|
bindtap="onCategoryTap"
|
|
>{{item.name}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<scroll-view scroll-y class="select-body">
|
|
<view wx:if="{{selectLoading}}" class="grid">
|
|
<view class="grid-item" wx:for="{{[1, 2, 3, 4]}}" wx:key="*this">
|
|
<view class="skeleton sk-card"></view>
|
|
</view>
|
|
</view>
|
|
<view wx:else class="grid">
|
|
<view class="grid-item" wx:for="{{allClothes}}" wx:key="clothes_uuid">
|
|
<clothes-card item="{{item}}" selectable selected="{{item._selected}}" bind:select="onToggleSelect" />
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="select-footer">
|
|
<view>
|
|
<view class="sf-count">已选 <text class="t-primary">{{selectedUuids.length}}</text> 件</view>
|
|
<view class="sf-desc">最多可选择 10 件单品</view>
|
|
</view>
|
|
<view class="sf-confirm btn btn-primary" bindtap="confirmSelect">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|