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

<template>
  <view class="sub-page">
    <TopBar title="任务详情" show-back />

    <view class="px-4 pt-3">
      <!-- 任务状态卡片 -->
      <view class="glass-card p-4">
        <view class="flex justify-between items-start mb-3">
          <view class="flex-1 min-w-0 mr-2">
            <text class="notice-title">{{ task.projectName }}</text>
            <view class="mt-2 flex items-center">
              <StatusTag :status="task.status" />
              <text v-if="task.isEmergency" class="emergency-tag ml-2">应急</text>
            </view>
          </view>
          <text class="meta-text flex-shrink-0">{{ task.taskNo }}</text>
        </view>
        <view class="meta-line mb-2">
          <text class="uni-icons uniui-location-filled meta-icon mr-2"></text>
          <text class="meta-value flex-1">{{ task.address }}</text>
        </view>
        <view class="meta-line">
          <text class="uni-icons uniui-clock-filled meta-icon mr-2"></text>
          <text class="meta-value">{{ task.scheduleDate }} {{ task.scheduleTime }}</text>
        </view>
      </view>

      <!-- 基本信息 -->
      <view class="glass-card">
        <view class="section-head">
          <view class="section-bar mr-2"></view>
          <text class="section-title flex-1">基本信息</text>
        </view>
        <view class="info-row">
          <text class="info-label">服务类型</text>
          <text class="info-value">{{ task.serviceType }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">客户名称</text>
          <text class="info-value">{{ task.customerName }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">联系电话</text>
          <text class="info-value">{{ task.customerPhone }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">项目地址</text>
          <text class="info-value info-value-left">{{ task.address }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">预约时间</text>
          <text class="info-value">{{ task.scheduleDate }} {{ task.scheduleTime }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">紧急程度</text>
          <text class="info-value" :class="task.isEmergency ? 'urgent-text' : 'normal-text'">
            {{ task.isEmergency ? '紧急' : '普通' }}
          </text>
        </view>
      </view>

      <!-- 服务点信息 -->
      <view v-if="task.servicePoints && task.servicePoints.length > 0" class="glass-card">
        <view class="section-head">
          <view class="section-bar mr-2"></view>
          <text class="section-title flex-1">服务点信息</text>
        </view>
        <view
          v-for="(point, index) in task.servicePoints"
          :key="index"
          class="point-row"
        >
          <view class="flex justify-between items-center mb-2">
            <text class="point-name">{{ point.name }}</text>
            <text class="type-tag">{{ point.serviceType }}</text>
          </view>
          <view class="flex items-center">
            <text class="uni-icons uniui-location-filled meta-icon mr-1"></text>
            <text class="meta-text">{{ point.address }}</text>
          </view>
        </view>
      </view>

      <!-- 处理记录 -->
      <view class="glass-card">
        <view class="section-head">
          <view class="section-bar mr-2"></view>
          <text class="section-title flex-1">处理记录</text>
        </view>
        <view class="pb-3 px-2">
          <Timeline :records="timelineRecords" />
        </view>
      </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>
.sub-page {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f6fbf9;
  padding-bottom: 24px;
}

.glass-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;
  margin-bottom: 12px;
}

.notice-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
}

.emergency-tag {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.meta-line {
  display: flex;
  align-items: center;
}

.meta-icon {
  font-size: 14px;
  color: #9ca3af;
}

.meta-text {
  font-size: 12px;
  color: #9ca3af;
}

.meta-value {
  font-size: 13px;
  color: #4b5563;
}

.section-head {
  display: flex;
  align-items: center;
  padding: 16px 16px 12px;
}

.section-bar {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #368f6f 0%, #5ab8d0 100%);
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid rgba(164, 216, 152, 0.18);
}

.info-label {
  font-size: 13px;
  color: #9ca3af;
  flex-shrink: 0;
  margin-right: 12px;
}

.info-value {
  font-size: 13px;
  color: #1f2937;
  text-align: right;
}

.info-value-left {
  flex: 1;
}

.urgent-text {
  color: #ef4444;
  font-weight: 600;
}

.normal-text {
  color: #368f6f;
}

.point-row {
  padding: 13px 16px;
  border-top: 1px solid rgba(164, 216, 152, 0.18);
}

.point-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.type-tag {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #368f6f;
  background-color: rgba(164, 216, 152, 0.24);
}
</style>