zhengchiliu/zt-closet-wxmini-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ui update

Browse Source
This commit is contained in:
zhengchiliu
2026-09-15 16:01:59 +08:00
parent 1a11816839
commit 26c392d612
89 changed files with 10377 additions and 4861 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/outfit-edit/outfit-edit.wxml
+130 -74
View File
@@ -1,114 +1,170 @@
<view class="page edit-page">
<navigation-bar title="{{view === 'select' ? '选择衣橱单品' : (isEdit ? '编辑穿搭' : '创建穿搭')}}">
<view wx:if="{{view === 'select'}}" slot="right" class="nav-cancel" bindtap="backToForm">取消</view>
<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">
<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="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 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 > 5}}" class="preview-more">+{{selectedItems.length - 5}}</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="preview-empty">
<view wx:else class="oe-empty">
<view class="icon icon-hanger"></view>
<text class="pe-title">还没有选择衣物</text>
<text class="pe-desc">点击下方「选择衣物」添加你的单品</text>
<text class="oe-empty-t">还没有选择衣物</text>
<text class="oe-empty-d">点击下方「选择衣橱单品」添加你的单品</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 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="给这套穿搭起个名字" maxlength="32" />
<input
class="input"
value="{{outfitName}}"
bindinput="onNameInput"
placeholder="给这套穿搭起个名字"
placeholder-class="input-ph"
maxlength="32"
/>
</view>
<view class="field">
<view class="field-label">
<view class="oe-field">
<view class="oe-label">
<text>穿搭描述</text>
<text class="count">{{outfitDesc.length}}/500</text>
<text class="oe-count num">{{outfitDesc.length}}/500</text>
</view>
<textarea class="textarea" value="{{outfitDesc}}" bindinput="onDescInput" placeholder="简单描述这套穿搭的灵感或亮点" maxlength="500" />
<textarea
class="textarea"
value="{{outfitDesc}}"
bindinput="onDescInput"
placeholder="简单描述这套穿搭的灵感或亮点"
placeholder-class="input-ph"
maxlength="500"
/>
</view>
<view class="field">
<view class="field-label">
<view class="oe-field">
<view class="oe-label">
<text>适合场景</text>
<text class="count">{{scene.length}}/100</text>
<text class="oe-count num">{{scene.length}}/100</text>
</view>
<input class="input" value="{{scene}}" bindinput="onSceneInput" placeholder="例如：通勤、约会、旅行" maxlength="100" />
<input
class="input"
value="{{scene}}"
bindinput="onSceneInput"
placeholder="例如：通勤、约会、旅行"
placeholder-class="input-ph"
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 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>
</view>
<view class="entry-right">
<text class="entry-count {{selectedUuids.length ? 'on' : ''}}">{{selectedUuids.length ? '已选 ' + selectedUuids.length + ' 件' : '未选择'}}</text>
<view class="icon icon-chevron-right"></view>
<text class="row-vl">{{selectedUuids.length ? '已选 ' + selectedUuids.length + ' 件' : '未选择'}}</text>
<view class="icon row-ch 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>
<view class="gap-64"></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>
<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">
<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>
<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="grid">
<view class="grid-item" wx:for="{{allClothes}}" wx:key="clothes_uuid">
<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="select-footer">
<view>
<view class="sf-count">已选 <text class="t-primary">{{selectedUuids.length}}</text> 件</view>
<view class="sf-desc">最多可选择 10 件单品</view>
<!-- 悬浮底部操作条 -->
<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>
<view class="sf-confirm btn btn-primary" bindtap="confirmSelect">确定</view>
</view>
</block>
</view>
<!-- 删除确认 -->
<v2-overlay
visible="{{delVisible}}"
type="modal"
title="确认删除这套穿搭？"
content="删除后不可恢复，但不会影响衣橱内的单品。"
buttons="{{delButtons}}"
bind:confirm="onDelConfirm"
bind:cancel="onDelCancel"
/>
</view>