290 lines
9.8 KiB
Plaintext
290 lines
9.8 KiB
Plaintext
<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
|
||
wx:if="{{!readonly && imageStatus !== 1 && imageStatus !== 2 && imageStatus !== 3}}"
|
||
slot="right"
|
||
class="nav-action"
|
||
bindtap="onToggleEdit"
|
||
>{{editMode ? '取消' : '编辑'}}</view>
|
||
</navigation-bar>
|
||
|
||
<scroll-view scroll-y class="scroll-body">
|
||
<!-- 缺少衣物标识 -->
|
||
<empty-state
|
||
wx:if="{{notFound}}"
|
||
icon="icon-hanger"
|
||
title="衣物不存在"
|
||
desc="缺少衣物标识，无法查看详情"
|
||
buttonText="返回衣橱"
|
||
bind:action="onBackWardrobe"
|
||
/>
|
||
|
||
<!-- 处理中：显示步骤进度 -->
|
||
<block wx:elif="{{imageStatus === 1 || imageStatus === 2 || imageStatus === 3}}">
|
||
<view class="card processing-card">
|
||
<view class="proc-icon"><view class="icon icon-hanger"></view></view>
|
||
<view class="steps">
|
||
<view class="step">
|
||
<view class="step-dot {{step >= 0 ? 'active' : ''}}"></view>
|
||
<text class="step-text {{step >= 0 ? 'active-text' : ''}}">排队中</text>
|
||
</view>
|
||
<view class="step-line {{step >= 1 ? 'active' : ''}}"></view>
|
||
<view class="step">
|
||
<view class="step-dot {{step >= 1 ? 'active' : ''}}"></view>
|
||
<text class="step-text {{step >= 1 ? 'active-text' : ''}}">AI 抠图</text>
|
||
</view>
|
||
<view class="step-line {{step >= 2 ? 'active' : ''}}"></view>
|
||
<view class="step">
|
||
<view class="step-dot {{step >= 2 ? 'active' : ''}}"></view>
|
||
<text class="step-text {{step >= 2 ? 'active-text' : ''}}">智能分类</text>
|
||
</view>
|
||
</view>
|
||
<view class="proc-text">AI 正在识别你的衣物…</view>
|
||
<view class="proc-desc">通常需要 10 秒左右，请稍候</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 识别失败 -->
|
||
<block wx:elif="{{imageStatus === 5}}">
|
||
<view class="img-box failed-box">
|
||
<view class="fail-big-icon">!</view>
|
||
</view>
|
||
<view class="card name-card">
|
||
<view class="name-text">{{detail.name || '未命名衣物'}}</view>
|
||
</view>
|
||
<view class="card fail-card">
|
||
<view class="fail-title">识别失败：{{failReason || '未知原因'}}</view>
|
||
<view class="fail-desc">本次上传额度已自动退回，你可以删除或重新上传</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 正常详情 -->
|
||
<block wx:else>
|
||
<!-- 大图区 -->
|
||
<view class="img-box">
|
||
<image
|
||
wx:if="{{detail.processed_image}}"
|
||
class="img"
|
||
src="{{detail.processed_image}}"
|
||
mode="aspectFit"
|
||
/>
|
||
<view wx:else class="img-placeholder"><view class="icon icon-hanger"></view></view>
|
||
</view>
|
||
|
||
<!-- 名称 -->
|
||
<view class="card name-card">
|
||
<input
|
||
wx:if="{{editMode}}"
|
||
class="input"
|
||
value="{{formData.name}}"
|
||
bindinput="onNameInput"
|
||
placeholder="衣物名称"
|
||
/>
|
||
<view wx:else class="name-text">{{detail.name || '未命名衣物'}}</view>
|
||
</view>
|
||
|
||
<!-- 属性分组（基础属性 / 版型与材质 / 智能量化评估） -->
|
||
<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 {{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-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">{{(editMode ? formData[item.key] : detail[item.key]) || 0}}/5</text>
|
||
</block>
|
||
<!-- 适用场合：胶囊标签 -->
|
||
<block wx:elif="{{item.type === 'multi'}}">
|
||
<view
|
||
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: {{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="card remark-card">
|
||
<view class="group-title">备注信息</view>
|
||
<view class="remark-body">
|
||
<textarea
|
||
wx:if="{{editMode}}"
|
||
class="textarea"
|
||
value="{{formData.remark}}"
|
||
bindinput="onRemarkInput"
|
||
placeholder="添加备注…"
|
||
/>
|
||
<view wx:elif="{{detail.remark}}" class="remark-text">{{detail.remark}}</view>
|
||
<view wx:else class="remark-text weak">暂无备注</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 底部操作：处理中隐藏，其他显示 -->
|
||
<view
|
||
wx:if="{{!readonly && !notFound && imageStatus !== 1 && imageStatus !== 2 && imageStatus !== 3}}"
|
||
class="footer"
|
||
>
|
||
<block wx:if="{{editMode}}">
|
||
<view class="btn btn-primary" bindtap="onSave">保存</view>
|
||
</block>
|
||
<block wx:else>
|
||
<view class="btn-danger-text delete-btn" bindtap="onDelete">删除这件衣物</view>
|
||
</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>
|