133 lines
4.7 KiB
Plaintext
133 lines
4.7 KiB
Plaintext
<view class="page detail-page">
|
|
<navigation-bar title="衣物详情">
|
|
<view
|
|
wx:if="{{imageStatus !== 1 && imageStatus !== 2 && imageStatus !== 3}}"
|
|
slot="right"
|
|
class="nav-action"
|
|
bindtap="onToggleEdit"
|
|
>{{editMode ? '取消' : '编辑'}}</view>
|
|
</navigation-bar>
|
|
|
|
<scroll-view scroll-y class="scroll-body">
|
|
<!-- 处理中：显示步骤进度 -->
|
|
<block wx:if="{{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">
|
|
<view
|
|
class="attr-row hairline"
|
|
wx:for="{{attrs}}"
|
|
wx:key="key"
|
|
data-key="{{item.key}}"
|
|
bindtap="onAttrTap"
|
|
>
|
|
<view class="attr-label">{{item.label}}</view>
|
|
<view class="attr-value">
|
|
<block wx:if="{{item.type === 'score'}}">
|
|
<view class="score-bar">
|
|
<view class="score-fill" style="width: {{(detail[item.key] || 0) * 20}}%"></view>
|
|
</view>
|
|
<text class="score-num">{{detail[item.key] || 0}}/5</text>
|
|
</block>
|
|
<block wx:else>
|
|
<text class="attr-text">{{detail[item.key] || '—'}}</text>
|
|
<view
|
|
wx:if="{{item.key === 'color_main' && detail.color_main}}"
|
|
class="color-dot"
|
|
style="background: {{detail.color_main}}"
|
|
></view>
|
|
</block>
|
|
</view>
|
|
<view wx:if="{{editMode}}" class="icon icon-chevron-right edit-arrow"></view>
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="remark-row">
|
|
<textarea
|
|
wx:if="{{editMode}}"
|
|
class="textarea"
|
|
value="{{formData.remark}}"
|
|
bindinput="onRemarkInput"
|
|
placeholder="备注"
|
|
/>
|
|
<view wx:elif="{{detail.remark}}" class="remark-text">备注：{{detail.remark}}</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- 底部操作：处理中隐藏，其他显示 -->
|
|
<view
|
|
wx:if="{{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>
|