hookehuyr

fix(message): 优化消息详情页计划书信息布局和状态显示

- 修复计划书信息列表布局,长文本自动换行不再挤压标签
- 添加 pending(橙色) 和 processing(蓝色) 状态样式
- 状态标记颜色与计划书列表页保持一致

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
......@@ -46,6 +46,8 @@
<view
:class="[
'status-badge',
proposalStatus === 'pending' ? 'status-pending' : '',
proposalStatus === 'processing' ? 'status-processing' : '',
proposalStatus === 'generated' ? 'status-generated' : '',
proposalStatus === 'viewed' ? 'status-viewed' : ''
]"
......@@ -56,17 +58,17 @@
<!-- 计划书信息 -->
<view class="bg-gray-50 rounded-lg p-4 mb-4">
<view class="flex justify-between text-sm mb-2">
<text class="text-gray-500">申请人</text>
<text class="text-gray-900 font-medium">{{ detail.proposal.customer_name || '-' }}</text>
<view class="proposal-info-item mb-3">
<text class="label text-sm">申请人</text>
<text class="value text-sm">{{ detail.proposal.customer_name || '-' }}</text>
</view>
<view class="flex justify-between text-sm mb-2">
<text class="text-gray-500">产品</text>
<text class="text-gray-900 font-medium">{{ detail.proposal.product_name || '-' }}</text>
<view class="proposal-info-item mb-3">
<text class="label text-sm">产品</text>
<text class="value text-sm">{{ detail.proposal.product_name || '-' }}</text>
</view>
<view class="flex justify-between text-sm">
<text class="text-gray-500">创建时间</text>
<text class="text-gray-900 font-medium">{{ detail.proposal.created_time || '-' }}</text>
<view class="proposal-info-item">
<text class="label text-sm">创建时间</text>
<text class="value text-sm">{{ detail.proposal.created_time || '-' }}</text>
</view>
</view>
......@@ -268,11 +270,47 @@ useLoad((options) => {
white-space: nowrap;
}
/* 计划书信息列表项样式 */
.proposal-info-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
.label {
flex-shrink: 0;
color: #6B7280;
}
.value {
flex: 1;
margin-left: 24rpx;
text-align: right;
color: #111827;
font-weight: 500;
word-break: break-all;
word-wrap: break-word;
}
}
/* 待处理 - 橙色 */
.status-pending {
background-color: #FEF3C7;
color: #D97706;
}
/* 处理中 - 蓝色 */
.status-processing {
background-color: #DBEAFE;
color: #2563EB;
}
/* 已生成 - 绿色 */
.status-generated {
background-color: #D1FAE5;
color: #059669;
}
/* 已查看 - 灰色 */
.status-viewed {
background-color: #E5E7EB;
color: #6B7280;
......