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

feat：ui add

Browse Source
This commit is contained in:
zhengchiliu
2026-09-13 03:09:01 +08:00
parent fe3cd08229
commit 323f520d7b
5 changed files with 560 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/clothes-detail/clothes-detail.wxml
+162 -15
View File
@@ -1,3 +1,45 @@
<wxs module="fmt">
var COLOR_MAP = {
'白色': '#FFFFFF',
'黑色': '#1C1C1E',
'灰色': '#8E8E93',
'红色': '#FF3B30',
'粉色': '#FF2D55',
'橙色': '#FF9500',
'黄色': '#FFCC00',
'绿色': '#34C759',
'蓝色': '#007AFF',
'紫色': '#5856D6',
'棕色': '#A2845E',
'米色': '#F5EFE0'
}
function hex(v) {
if (!v) return ''
if (v.charAt(0) === '#') return v
return COLOR_MAP[v] || ''
}
function tags(v) {
if (!v) return []
var sep = '、,，/|;； \t\n\r'
var out = []
var cur = ''
for (var i = 0; i < v.length; i++) {
var ch = v.charAt(i)
if (sep.indexOf(ch) >= 0) {
if (cur) {
out.push(cur)
cur = ''
}
} else {
cur += ch
}
}
if (cur) out.push(cur)
return out
}
module.exports = { hex: hex, tags: tags }
</wxs>
<view class="page detail-page">
<navigation-bar title="衣物详情">
<view
@@ -83,45 +125,73 @@
<view wx:else class="name-text">{{detail.name || '未命名衣物'}}</view>
</view>
<!-- 属性列表 -->
<view class="card attr-card">
<!-- 属性分组（基础属性 / 版型与材质 / 智能量化评估） -->
<view class="card attr-card" wx:for="{{attrGroups}}" wx:key="title" wx:for-item="group">
<view class="group-title">{{group.title}}</view>
<view
class="attr-row hairline"
wx:for="{{attrs}}"
class="attr-row hairline {{editMode ? 'edit' : ''}}"
wx:for="{{group.attrs}}"
wx:key="key"
data-key="{{item.key}}"
bindtap="onAttrTap"
>
<view class="attr-label">{{item.label}}</view>
<view class="attr-value">
<!-- 评分：5 段圆条 + 分值 -->
<block wx:if="{{item.type === 'score'}}">
<view class="score-bar">
<view class="score-fill" style="width: {{(detail[item.key] || 0) * 20}}%"></view>
<view class="score-dots">
<view
class="score-dot {{dotIdx < ((editMode ? formData[item.key] : detail[item.key]) || 0) ? 'on' : ''}} {{item.key === 'visual_impact' ? 'violet' : ''}}"
wx:for="{{[1, 2, 3, 4, 5]}}"
wx:for-item="dot"
wx:for-index="dotIdx"
wx:key="*this"
></view>
</view>
<text class="score-num">{{detail[item.key] || 0}}/5</text>
<text class="score-num">{{(editMode ? formData[item.key] : detail[item.key]) || 0}}/5</text>
</block>
<block wx:else>
<text class="attr-text">{{detail[item.key] || '—'}}</text>
<!-- 适用场合：胶囊标签 -->
<block wx:elif="{{item.type === 'multi'}}">
<view
wx:if="{{item.key === 'color_main' && detail.color_main}}"
class="scene-list"
wx:if="{{fmt.tags(editMode ? formData.occasions : detail.occasions).length}}"
>
<text
class="tag tag-blue scene-tag"
wx:for="{{fmt.tags(editMode ? formData.occasions : detail.occasions)}}"
wx:for-item="scene"
wx:key="*this"
>{{scene}}</text>
</view>
<text wx:else class="attr-text weak">—</text>
</block>
<!-- 普通文本 / 主色 -->
<block wx:else>
<text class="attr-text">{{(editMode ? formData[item.key] : detail[item.key]) || '—'}}</text>
<view
wx:if="{{item.key === 'color_main' && fmt.hex(editMode ? formData.color_main : detail.color_main)}}"
class="color-dot"
style="background: {{detail.color_main}}"
style="background: {{fmt.hex(editMode ? formData.color_main : detail.color_main)}}"
></view>
</block>
</view>
<view wx:if="{{editMode}}" class="icon icon-chevron-right edit-arrow"></view>
</view>
</view>
<!-- 备注 -->
<view class="remark-row">
<!-- 备注 -->
<view class="card remark-card">
<view class="group-title">备注信息</view>
<view class="remark-body">
<textarea
wx:if="{{editMode}}"
class="textarea"
value="{{formData.remark}}"
bindinput="onRemarkInput"
placeholder="备注"
placeholder="添加备注…"
/>
<view wx:elif="{{detail.remark}}" class="remark-text">备注：{{detail.remark}}</view>
<view wx:elif="{{detail.remark}}" class="remark-text">{{detail.remark}}</view>
<view wx:else class="remark-text weak">暂无备注</view>
</view>
</view>
</block>
@@ -139,4 +209,81 @@
</block>
</view>
</scroll-view>
<!-- 底部属性选择面板 -->
<view class="sheet-mask" wx:if="{{sheetVisible}}" bindtap="onSheetClose"></view>
<view class="sheet" wx:if="{{sheetVisible}}">
<view class="sheet-head">
<text class="sheet-title">{{sheetLabel}}</text>
<view class="sheet-done" bindtap="onSheetConfirm">完成</view>
</view>
<scroll-view scroll-y class="sheet-body">
<!-- 评分：大号点选圆点 -->
<block wx:if="{{sheetType === 'score'}}">
<view class="sheet-score">
<view
class="sheet-score-dot {{index < (sheetValue * 1) ? 'on' : ''}}"
wx:for="{{[1, 2, 3, 4, 5]}}"
wx:key="*this"
data-value="{{item}}"
bindtap="onSheetScoreTap"
>{{item}}</view>
</view>
</block>
<!-- 多选（适用场合） -->
<block wx:elif="{{sheetType === 'multi'}}">
<view class="sheet-tags">
<view
class="sheet-tag {{sheetValues.indexOf(item) >= 0 ? 'on' : ''}}"
wx:for="{{sheetOptions}}"
wx:key="*this"
data-value="{{item}}"
bindtap="onSheetValueTap"
>{{item}}</view>
</view>
</block>
<!-- 主色：色板 + 自定义 -->
<block wx:elif="{{sheetType === 'color'}}">
<view class="sheet-colors">
<view
class="sheet-color {{sheetValue === item.name || sheetValue === item.value ? 'on' : ''}}"
wx:for="{{colorPresets}}"
wx:key="name"
data-name="{{item.name}}"
bindtap="onSheetColorTap"
>
<view class="sheet-color-dot" style="background: {{item.value}}"></view>
</view>
</view>
<input
class="input sheet-input"
value="{{sheetValue}}"
bindinput="onSheetInput"
placeholder="也可输入色值，如 #FFFFFF"
/>
</block>
<!-- 文本：快捷选项 + 自定义输入 -->
<block wx:else>
<view class="sheet-tags" wx:if="{{sheetOptions.length}}">
<view
class="sheet-tag {{sheetValue === item ? 'on' : ''}}"
wx:for="{{sheetOptions}}"
wx:key="*this"
data-value="{{item}}"
bindtap="onSheetOptionTap"
>{{item}}</view>
</view>
<input
class="input sheet-input"
value="{{sheetValue}}"
bindinput="onSheetInput"
placeholder="请输入{{sheetLabel}}"
/>
</block>
</scroll-view>
<view class="safe-bottom"></view>
</view>
</view>