aquagreen_wechat_app/src/subPackages/pages-common/taskDetail.vue

<template>
  <view class="app-container">
    <TopBar title="任务详情" show-back />
    <view class="px-4 py-4 pb-8">
      <!-- 任务状态卡片 -->
      <view class="card p-4">
        <view class="flex justify-between items-start mb-3">
          <view>
            <text class="text-base font-bold text-gray-800">{{ task.projectName }}</text>
            <view class="mt-2">
              <StatusTag :status="task.status" />
              <text v-if="task.isEmergency" class="tag-danger ml-2 px-2 py-1 rounded text-xs">应急</text>
            </view>
          </view>
          <text class="text-xs text-gray-400">{{ task.taskNo }}</text>
        </view>
        <view class="flex items-center text-sm text-gray-600 mb-2">
          <text class="uni-icons uniui-location-filled text-gray-400 mr-2"></text>
          <text>{{ task.address }}</text>
        </view>
        <view class="flex items-center text-sm text-gray-600">
          <text class="uni-icons uniui-clock-filled text-gray-400 mr-2"></text>
          <text>{{ task.scheduleDate }} {{ task.scheduleTime }}</text>
        </view>
      </view>

      <!-- 基本信息 -->
      <view class="card">
        <view class="detail-section-title">
          <text class="uni-icons uniui-info-filled text-primary mr-2"></text>
          <text>基本信息</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">服务类型</text>
          <text class="detail-value">{{ task.serviceType }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">客户名称</text>
          <text class="detail-value">{{ task.customerName }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">联系电话</text>
          <text class="detail-value">{{ task.customerPhone }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">项目地址</text>
          <text class="detail-value">{{ task.address }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">预约时间</text>
          <text class="detail-value">{{ task.scheduleDate }} {{ task.scheduleTime }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">紧急程度</text>
          <view class="detail-value">
            <text :class="task.isEmergency ? 'text-danger' : 'text-success'">
              {{ task.isEmergency ? '紧急' : '普通' }}
            </text>
          </view>
        </view>
      </view>

      <!-- 服务点信息 -->
      <view v-if="task.servicePoints && task.servicePoints.length > 0" class="card">
        <view class="detail-section-title">
          <text class="uni-icons uniui-location-filled text-primary mr-2"></text>
          <text>服务点信息</text>
        </view>
        <view
          v-for="(point, index) in task.servicePoints"
          :key="index"
          class="service-point-card"
        >
          <view class="flex justify-between items-center mb-2">
            <text class="text-sm font-semibold text-gray-800">{{ point.name }}</text>
            <text class="tag-blue px-2 py-1 rounded text-xs">{{ point.serviceType }}</text>
          </view>
          <view class="flex items-center text-xs text-gray-500">
            <text class="uni-icons uniui-location-filled text-gray-400 mr-1"></text>
            <text>{{ point.address }}</text>
          </view>
        </view>
      </view>

      <!-- 处理记录 -->
      <view class="card">
        <view class="detail-section-title">
          <text class="uni-icons uniui-compose-filled text-primary mr-2"></text>
          <text>处理记录</text>
        </view>
        <Timeline :records="timelineRecords" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useTaskStore } from '@/stores/task'
import TopBar from '@/components/common/TopBar.vue'
import StatusTag from '@/components/common/StatusTag.vue'
import Timeline from '@/components/common/Timeline.vue'
import type { TimelineRecord } from '@/components/common/Timeline.vue'

const taskStore = useTaskStore()
const task = computed(() => taskStore.currentTask || {})

const timelineRecords = ref<TimelineRecord[]>([
  {
    action: '任务已创建，等待调度',
    time: '2026-04-20 09:00',
    operator: '销售-李明',
    role: 'sales',
    isCurrent: false
  },
  {
    action: '任务已排班，分配工程一班',
    time: '2026-04-20 10:30',
    operator: '调度-王调度',
    role: 'dispatch',
    isCurrent: false
  },
  {
    action: '工程人员已出发',
    time: '2026-04-20 11:00',
    operator: '施工-张师傅',
    role: 'worker',
    isCurrent: true
  }
])
</script>

<style scoped>
/* 仅保留组件特有样式 */
.service-point-card {
  background: #f9fafb;
  border-radius: 8px;
  padding: 12px;
  margin: 8px 16px;
}

.tag-blue {
  background: #e6f0ff;
  color: #2563eb;
}
</style>