171 lines
6.0 KiB
Plaintext
171 lines
6.0 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="{{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)}}">
|
|
<view class="cg" wx:for="{{selectedItems}}" 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="{{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">
|
|
<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>
|