aquagreen_wechat_app/src/pages/common/taskList.vue

<template>
  <view class="app-container pb-20">
    <TopBar title="任务列表" />
    
    <!-- 筛选标签 - 使用 uni-segmented-control -->
    <uni-segmented-control 
      :current="currentFilterIndex" 
      :values="filterLabels"
      style-type="text"
      active-color="#4f8ef7"
      @clickItem="onFilterChange"
    />

    <!-- 任务列表 -->
    <view class="mt-2">
      <view v-if="taskStore.loading" class="py-10 text-center">
        <text class="text-gray-400">加载中...</text>
      </view>
      
      <view v-else-if="filteredTasks.length === 0">
        <EmptyState message="暂无任务" />
      </view>
      
      <uni-list v-else border>
        <uni-swipe-action 
          v-for="task in filteredTasks" 
          :key="task.id"
          :actions="getSwipeActions(task)"
          @click="(action: any) => onSwipeAction(task, action)"
        >
          <uni-list-item 
            :title="task.name"
            :note="task.address"
            :right-text="formatStatus(task.status)"
            show-arrow
            @click="goToDetail(task.id)"
          >
            <template #header>
              <view class="w-10 h-10 rounded-xl flex items-center justify-center mr-3" :class="getStatusBgClass(task.status)">
                <text class="uni-icons text-lg" :class="getStatusIconClass(task.status)"></text>
              </view>
            </template>
          </uni-list-item>
        </uni-swipe-action>
      </uni-list>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useTaskStore } from '../../stores/task'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'
import UniList from '../../components/uni-list/uni-list.vue'
import UniListItem from '../../components/uni-list/uni-list-item.vue'
import UniSwipeAction from '../../components/uni-swipe-action/uni-swipe-action.vue'
import UniSegmentedControl from '../../components/uni-segmented-control/uni-segmented-control.vue'

const taskStore = useTaskStore()
const currentFilterIndex = ref(0)

const filterStatuses = [
  { value: 'all', label: '全部' },
  { value: 'pending', label: '待确认' },
  { value: 'confirmed', label: '待排班' },
  { value: 'scheduled', label: '待出车' },
  { value: 'constructing', label: '施工中' },
  { value: 'completed', label: '已完成' },
]

const filterLabels = filterStatuses.map(s => s.label)

const filteredTasks = computed(() => {
  const filterValue = filterStatuses[currentFilterIndex.value].value
  if (filterValue === 'all') return taskStore.tasks
  return taskStore.tasks.filter(t => t.status === filterValue)
})

function formatStatus(status: string) {
  const map: Record<string, string> = {
    pending: '待确认',
    confirmed: '待排班',
    scheduled: '待出车',
    constructing: '施工中',
    completed: '已完成',
    cancelled: '已取消',
  }
  return map[status] || status
}

function getStatusBgClass(status: string) {
  const map: Record<string, string> = {
    pending: 'bg-yellow-50',
    confirmed: 'bg-blue-50',
    scheduled: 'bg-purple-50',
    constructing: 'bg-orange-50',
    completed: 'bg-green-50',
    cancelled: 'bg-gray-50',
  }
  return map[status] || 'bg-gray-50'
}

function getStatusIconClass(status: string) {
  const map: Record<string, string> = {
    pending: 'uniui-compose text-yellow-500',
    confirmed: 'uniui-flag text-blue-500',
    scheduled: 'uniui-cart-filled text-purple-500',
    constructing: 'uniui-gear-filled text-orange-500',
    completed: 'uniui-checkmarkempty text-green-500',
    cancelled: 'uniui-close text-gray-400',
  }
  return map[status] || 'uniui-flag text-gray-400'
}

function getSwipeActions(task: any) {
  const actions = []
  if (task.status === 'pending') {
    actions.push({ text: '催办', color: '#ff9500', key: 'urge' })
  }
  if (task.status !== 'completed' && task.status !== 'cancelled') {
    actions.push({ text: '取消', color: '#ff3b30', key: 'cancel' })
  }
  return actions
}

function onFilterChange(index: number) {
  currentFilterIndex.value = index
}

function onSwipeAction(task: any, action: { key: string; text: string }) {
  if (action.key === 'cancel') {
    uni.showModal({
      title: '确认取消',
      content: '取消后无法恢复，是否继续？',
      success: (res) => {
        if (res.confirm) {
          taskStore.cancelTask(task.id)
          uni.showToast({ title: '已取消', icon: 'success' })
        }
      }
    })
  } else if (action.key === 'urge') {
    taskStore.urgeTask(task.id)
    uni.showToast({ title: '已催办', icon: 'success' })
  }
}

function goToDetail(taskId: string) {
  taskStore.setCurrentTask(taskId)
  uni.navigateTo({ url: '/pages/common/taskDetail' })
}

onMounted(() => {
  taskStore.fetchTasks()
})

// 下拉刷新
onPullDownRefresh(async () => {
  await taskStore.fetchTasks()
  uni.stopPullDownRefresh()
})
</script>