fix: 任务大厅卡片显示任务子类型和预览图
This commit is contained in:
Your Name
parent
2193a9dd77
commit
c2f6aef463
@ -200,154 +200,95 @@
|
||||
class="task-card chart-card"
|
||||
@click="handleTaskClick(task)"
|
||||
>
|
||||
<!-- 带预览图的卡片布局 -->
|
||||
<div class="card-with-preview">
|
||||
<!-- 预览图 -->
|
||||
<div v-if="task.previewImage" class="task-preview">
|
||||
<img :src="task.previewImage" alt="预览图" />
|
||||
<!-- 新版卡片布局 -->
|
||||
<div class="card-new-layout">
|
||||
<!-- 预览图区域 -->
|
||||
<div v-if="task.previewImage" class="preview-cover">
|
||||
<img :src="task.previewImage" alt="预览图" loading="lazy" />
|
||||
<div class="preview-overlay"></div>
|
||||
<!-- 悬浮标签 -->
|
||||
<div class="floating-badges">
|
||||
<span v-if="task.isSubTask" class="badge-mini subtask">子任务</span>
|
||||
<span v-if="isNewTask(task)" class="badge-mini new">新发布</span>
|
||||
<span v-if="task.isUrgent" class="badge-mini urgent">紧急</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片内容 -->
|
||||
<div class="card-content" :class="{ 'has-preview': task.previewImage }">
|
||||
<!-- 任务标题 -->
|
||||
<div class="task-header">
|
||||
<h3 class="task-title">{{ task.title }}</h3>
|
||||
<div class="task-badges">
|
||||
<span v-if="task.isSubTask" class="badge badge-subtask">
|
||||
<Icon name="layers" size="sm" color="#1890ff" style="margin-right: 4px; vertical-align: middle;" />
|
||||
子任务
|
||||
</span>
|
||||
<span v-if="isNewTask(task)" class="badge badge-new">
|
||||
<Icon name="sparkles" size="sm" color="#31f08b" style="margin-right: 4px; vertical-align: middle;" />
|
||||
新发布
|
||||
</span>
|
||||
<span v-if="isHighScoreTask(task)" class="badge badge-high-score">
|
||||
<Icon name="star" size="sm" color="#31f08b" style="margin-right: 4px; vertical-align: middle;" />
|
||||
高分
|
||||
</span>
|
||||
<span v-if="task.isUrgent" class="badge badge-urgent">
|
||||
<Icon name="fire" size="sm" color="#31f08b" style="margin-right: 4px; vertical-align: middle;" />
|
||||
紧急
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- 头部标签（无预览图时显示） -->
|
||||
<div v-if="!task.previewImage" class="header-badges">
|
||||
<span v-if="task.isSubTask" class="badge-tag subtask">子任务</span>
|
||||
<span v-if="isNewTask(task)" class="badge-tag new">新发布</span>
|
||||
<span v-if="task.isUrgent" class="badge-tag urgent">紧急</span>
|
||||
<span v-if="isHighScoreTask(task)" class="badge-tag high-score">高分</span>
|
||||
</div>
|
||||
|
||||
<!-- 流程阶段 -->
|
||||
<div v-if="getProcessStage(task)" class="process-stage">
|
||||
<span class="stage-icon">
|
||||
<Icon name="clock" size="sm" color="#31f08b" />
|
||||
<!-- 标题 -->
|
||||
<h3 class="card-title" :title="task.title">{{ task.title }}</h3>
|
||||
|
||||
<!-- 核心指标 -->
|
||||
<div class="metrics-row">
|
||||
<div class="metric">
|
||||
<span class="label">类型</span>
|
||||
<span class="value type" :title="getTaskTypeName(task.taskTypeId, task.taskTypeName, task.taskSubType)">
|
||||
{{ getTaskTypeName(task.taskTypeId, task.taskTypeName, task.taskSubType) }}
|
||||
</span>
|
||||
<span class="stage-text">{{ getProcessStage(task) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 任务信息 -->
|
||||
<div class="task-info">
|
||||
<div class="info-item">
|
||||
<span class="label">任务类型</span>
|
||||
<span class="value">{{ getTaskTypeName(task.taskTypeId, task.taskTypeName) }}</span>
|
||||
<div class="metric divider"></div>
|
||||
<div class="metric">
|
||||
<span class="label">积分</span>
|
||||
<span class="value score">{{ task.score || '--' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">预估积分</span>
|
||||
<span class="value text-brand">{{ task.score || '--' }} 分</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="metric divider"></div>
|
||||
<div class="metric">
|
||||
<span class="label">数量</span>
|
||||
<span class="value">{{ task.quantity || 1 }} 个</span>
|
||||
<span class="value">{{ task.quantity || 1 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务详情 -->
|
||||
<div class="task-details">
|
||||
<div v-if="task.brandName" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="tag" size="sm" color="#31f08b" />
|
||||
<!-- 详细信息 -->
|
||||
<div class="details-grid">
|
||||
<div class="detail-item" v-if="task.brandName || task.categoryName">
|
||||
<Icon name="tag" size="xs" class="icon" />
|
||||
<span class="text text-ellipsis">
|
||||
{{ task.brandName }} <span v-if="task.brandName && task.categoryName">·</span> {{ task.categoryName }}
|
||||
</span>
|
||||
<span>品牌: {{ task.brandName }}</span>
|
||||
</div>
|
||||
<div v-if="task.categoryName" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="folder" size="sm" color="#31f08b" />
|
||||
|
||||
<div class="detail-item" v-if="task.platformName || task.spuInfo">
|
||||
<Icon name="monitor" size="xs" class="icon" />
|
||||
<span class="text text-ellipsis">
|
||||
{{ task.platformName || '--' }} <span v-if="task.spuInfo">· {{ task.spuInfo }}</span>
|
||||
</span>
|
||||
<span>类目: {{ task.categoryName }}</span>
|
||||
</div>
|
||||
<div v-if="task.platformName" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="monitor" size="sm" color="#31f08b" />
|
||||
</span>
|
||||
<span>平台: {{ task.platformName }}</span>
|
||||
</div>
|
||||
<div v-if="task.spuInfo" class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="tag" size="sm" color="#31f08b" />
|
||||
</span>
|
||||
<span>SPU: {{ task.spuInfo }}</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="user" size="sm" color="#31f08b" />
|
||||
</span>
|
||||
<span>发布人: {{ task.publisherName || '未知' }}</span>
|
||||
</div>
|
||||
<div v-if="task.attachmentUrl" class="detail-item detail-item-attachment">
|
||||
<span class="icon">
|
||||
<Icon name="paperclip" size="sm" color="#31f08b" />
|
||||
</span>
|
||||
<span>附件:
|
||||
<a
|
||||
v-for="(url, index) in (task.attachmentUrl || '').split(',').filter(u => u.trim())"
|
||||
:key="index"
|
||||
:href="url.trim()"
|
||||
target="_blank"
|
||||
class="attachment-link"
|
||||
@click.stop
|
||||
>
|
||||
附件{{ index + 1 }}
|
||||
</a>
|
||||
</span>
|
||||
<Icon name="user" size="xs" class="icon" />
|
||||
<span class="text text-ellipsis">{{ task.publisherName || '未知' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="clock" size="sm" color="#31f08b" />
|
||||
</span>
|
||||
<span>时效要求: {{ formatEstimatedTime(task.estimatedHours) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="icon">
|
||||
<Icon name="calendar" size="sm" color="#31f08b" />
|
||||
</span>
|
||||
<span>发布时间: {{ formatTime(task.createTime) }}</span>
|
||||
<Icon name="clock" size="xs" class="icon" />
|
||||
<span class="text">时效: {{ formatEstimatedTime(task.estimatedHours) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="task-actions">
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
style="flex: 1"
|
||||
@click.stop="handleTaskClick(task)"
|
||||
>
|
||||
查看详情
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="card-actions">
|
||||
<button class="action-btn secondary" @click.stop="handleTaskClick(task)">
|
||||
详情
|
||||
</button>
|
||||
<button
|
||||
:class="[
|
||||
'btn',
|
||||
canGrabTask(task).canGrab ? 'btn-primary' : 'btn-disabled'
|
||||
]"
|
||||
:style="{
|
||||
flex: 1,
|
||||
backgroundColor: canGrabTask(task).canGrab ? '#31f08b' : '#666',
|
||||
cursor: canGrabTask(task).canGrab ? 'pointer' : 'not-allowed',
|
||||
opacity: canGrabTask(task).canGrab ? 1 : 0.6
|
||||
}"
|
||||
class="action-btn primary"
|
||||
:class="{ disabled: !canGrabTask(task).canGrab }"
|
||||
:disabled="!canGrabTask(task).canGrab"
|
||||
:title="canGrabTask(task).canGrab ? '点击抢单' : canGrabTask(task).reason"
|
||||
@click.stop="handleGrab(task)"
|
||||
>
|
||||
{{ canGrabTask(task).canGrab ? '抢单' : '不可接单' }}
|
||||
{{ canGrabTask(task).canGrab ? '立即抢单' : '不可抢' }}
|
||||
</button>
|
||||
</div>
|
||||
</div> <!-- 结束 card-content -->
|
||||
</div> <!-- 结束 card-with-preview -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2452,7 +2393,10 @@ const completedPagination = reactive({
|
||||
})
|
||||
|
||||
// 获取任务类型名称
|
||||
const getTaskTypeName = (typeId: number, taskTypeName?: string) => {
|
||||
const getTaskTypeName = (typeId: number, taskTypeName?: string, taskSubType?: string) => {
|
||||
// 如果有任务子类型（如：新品、优化），优先显示
|
||||
if (taskSubType) return taskSubType
|
||||
|
||||
// 如果有直接传入的类型名称，优先使用
|
||||
if (taskTypeName) return taskTypeName
|
||||
|
||||
@ -2672,6 +2616,7 @@ const loadTasks = async () => {
|
||||
groupNo: item.groupNo,
|
||||
taskTypeId: item.taskTypeId,
|
||||
taskTypeName: item.taskTypeName, // 任务类型名称
|
||||
taskSubType: item.taskSubType, // 任务子类型
|
||||
score: item.totalScore || item.score, // 预估积分
|
||||
estimatedHours: item.estimatedHours,
|
||||
quantity: item.quantity || 1, // 数量
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user