aquagreen_wechat_app/src/components/task/ConstructionTaskCard.vue

<template>
  <view
    class="task-card p-4 clickable"
    hover-class="scale-down"
    :class="{ 'is-emergency': task.type === 'emergency' }"
    @click="$emit('click', String((task as any).id ?? (task as any).taskId ?? ''))"
  >
    <view class="flex justify-between items-start mb-2">
      <view class="flex-1 min-w-0 mr-3">
        <text class="text-sm font-semibold text-gray-800 truncate block">{{ (task as any).taskName || task.projectName || '未命名任务' }}</text>
      </view>
      <StatusTag :status="task.status" />
    </view>

    <view class="flex flex-wrap gap-2 mb-3">
      <view v-if="task.urgent === 'high'" class="px-2 py-1 bg-danger-light text-danger rounded text-xs font-medium">
        加急
      </view>
      <view v-if="task.coopType" class="chip-type px-2 py-1 rounded text-xs font-medium">
        {{ task.coopType }}
      </view>
      <view v-if="task.serviceMode" class="px-2 py-1 bg-success-light text-success rounded text-xs font-medium">
        {{ task.serviceMode }}
      </view>
    </view>

    <view class="gap-y-2 mb-3">
      <view class="flex items-center">
        <text class="uni-icons uniui-tools info-icon text-xs mr-1"></text>
        <text class="text-gray-500 text-xs">{{ task.serviceType || '施工服务' }}</text>
      </view>
      <view class="flex items-center">
        <text class="uni-icons uniui-clock-filled info-icon text-xs mr-1"></text>
        <text class="text-gray-500 text-xs">{{ task.serviceDate || task.scheduleDate || '待定' }} {{ task.serviceTime || task.scheduleTime || '' }}</text>
      </view>
      <view class="flex items-center">
        <text class="uni-icons uniui-location-filled info-icon text-xs mr-1"></text>
        <text class="text-gray-500 text-xs truncate">{{ task.address || '暂无地址' }}</text>
      </view>
    </view>

    <view class="pt-3 border-t border-gray-100">
      <view class="flow-row">
        <view
          v-for="(step, i) in steps"
          :key="step.key"
          class="flow-step"
        >
          <view class="flow-node-wrap">
            <view v-if="i !== 0" class="flow-line" :class="step.active ? 'flow-line-active' : ''" />
            <view class="flow-node" :class="step.active ? 'flow-node-active' : (step.current ? 'flow-node-current' : '')">
              <text v-if="step.active" class="uni-icons uniui-checkmarkempty flow-check"></text>
              <text v-else class="flow-node-text">{{ i + 1 }}</text>
            </view>
          </view>
          <text class="flow-label" :class="step.active ? 'flow-label-active' : ''">{{ step.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import StatusTag from '../common/StatusTag.vue'
import type { Task } from '@/types'

const props = defineProps<{
  task: Task
}>()

defineEmits<{
  click: [taskId: string]
}>()

const steps = computed(() => {
  const status = props.task.status
  const list = [
    { key: 'confirm', label: '确认', active: true },
    { key: 'depart', label: '出车', active: ['departed', 'arrived', 'constructing', 'completed', 'inspecting'].includes(status) },
    { key: 'arrive', label: '到达', active: ['arrived', 'constructing', 'completed', 'inspecting'].includes(status) },
    { key: 'construct', label: '施工', active: ['constructing', 'completed', 'inspecting'].includes(status) },
    { key: 'complete', label: '完成', active: ['completed', 'inspecting'].includes(status) },
    { key: 'clean', label: '清洗', active: props.task.cleanTime != null || status === 'inspecting' || status === 'completed' },
    { key: 'inspect', label: '验收', active: status === 'inspecting' || status === 'completed' },
  ]
  const currentIndex = list.findIndex(s => !s.active)
  return list.map((s, i) => ({ ...s, current: i === currentIndex }))
})
</script>

<style scoped>
.task-card {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(164, 216, 152, 0.35);
  border-radius: 24px;
  box-shadow: 0 18px 50px -12px rgba(54, 143, 111, 0.28);
  overflow: hidden;
}
.task-card.is-emergency {
  border-left: 4px solid #ef4444;
}
.info-icon {
  color: #368f6f;
}
.chip-type {
  background-color: rgba(164, 216, 152, 0.2);
  color: #368f6f;
}
/* 流程条：与任务详情 SOP 流程条一致 */
.flow-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.flow-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.flow-node-wrap {
  width: 100%;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 50%;
  height: 2px;
  background-color: #e5e7eb;
  transform: translateY(-50%);
}
.flow-line-active {
  background-color: #368f6f;
}
.flow-node {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #f3f4f6;
  border: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.flow-node-active {
  background-color: #368f6f;
  border-color: #368f6f;
}
.flow-node-current {
  background-color: #fff;
  border-color: #368f6f;
  box-shadow: 0 0 0 3px rgba(54, 143, 111, 0.2);
}
.flow-check {
  color: #fff;
  font-size: 11px;
}
.flow-node-text {
  font-size: 10px;
  color: #9ca3af;
}
.flow-node-current .flow-node-text {
  color: #368f6f;
  font-weight: 600;
}
.flow-label {
  margin-top: 6px;
  font-size: 10px;
  color: #9ca3af;
  text-align: center;
}
.flow-label-active {
  color: #368f6f;
}
.scale-down {
  transition: transform 0.15s ease;
}
.scale-down:active {
  transform: scale(0.95);
}
</style>