cfc/cfc-frontend/pages/teacher/service-tasks.vue

<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header">
      <text class="title">待办服务任务</text>
      <text class="subtitle">查看需要您处理的服务执行任务</text>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>

    <!-- 任务列表 -->
    <view v-else-if="tasks.length > 0" class="task-list">
      <view 
        v-for="task in tasks" 
        :key="task.id" 
        class="task-card"
        @click="viewTaskDetail(task)">
        <view class="task-header">
          <view class="task-title-row">
            <view class="task-icon" :class="getStatusClass(task)">
              <view v-if="getStatusClass(task) === 'completed'" class="icon-check"></view>
              <view v-else-if="getStatusClass(task) === 'ready'" class="icon-alert"></view>
              <view v-else class="icon-clock"></view>
            </view>
            <text class="task-title">服务执行 #{{ task.id }}</text>
          </view>
          <text class="task-status" :class="getStatusClass(task)">
            {{ getStatusText(task) }}
          </text>
        </view>
        <view class="task-info">
          <view class="info-row">
            <view class="info-icon order-icon"></view>
            <text class="info-label">订单号</text>
            <text class="info-value">{{ task.assessmentOrderId }}</text>
          </view>
          <view class="info-row">
            <view class="info-icon time-icon"></view>
            <text class="info-label">创建时间</text>
            <text class="info-value">{{ formatTime(task.createdAt) }}</text>
          </view>
          <view class="info-row">
            <view class="info-icon assessor-info-icon"></view>
            <text class="info-label">评估师</text>
            <text class="info-value">{{ task.assessorStatus === 'completed' ? '已完成' : '进行中' }}</text>
          </view>
          <view v-if="task.plannerId" class="info-row">
            <view class="info-icon planner-info-icon"></view>
            <text class="info-label">您的状态</text>
            <text class="info-value">{{ task.plannerStatus === 'completed' ? '已完成' : '待处理' }}</text>
          </view>
        </view>
        <view v-if="task.plannerStatus !== 'completed'" class="task-action">
          <button class="btn-complete" @click.stop="completeTask(task)">
            标记完成
          </button>
        </view>
      </view>
    </view>

    <!-- 无任务 -->
    <view v-else class="empty">
      <text>暂无待办任务</text>
    </view>
  </view>
</template>

<script>
import config from '@/config.js'

export default {
  data() {
    return {
      tasks: [],
      loading: true
    }
  },
  onLoad() {
    this.loadTasks()
  },
  onShow() {
    this.loadTasks()
  },
  methods: {
    async loadTasks() {
      this.loading = true
      try {
        // 获取当前用户的 plannerId（这里假设当前用户就是规划师）
        const userInfo = uni.getStorageSync('userInfo')
        const plannerId = userInfo && userInfo.id
        
        if (!plannerId) {
          uni.showToast({ title: '未登录', icon: 'none' })
          return
        }

        const res = await uni.request({
          url: `${config.API_BASE_URL}/api/dan-execution/guide/my-tasks`,
          method: 'GET',
          data: { plannerId: plannerId },
          header: {
            'Authorization': `Bearer ${uni.getStorageSync('token')}`
          }
        })

        if (res.data.code === 200) {
          this.tasks = res.data.data || []
        } else {
          uni.showToast({ title: res.data.message || '加载失败', icon: 'none' })
        }
      } catch (e) {
        console.error('加载任务列表失败', e)
        uni.showToast({ title: '网络错误', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    viewTaskDetail(task) {
      uni.navigateTo({
        url: `/pages/assessment/execution?executionId=${task.id}`
      })
    },
    completeTask(task) {
      uni.showModal({
        title: '标记完成',
        content: '确认标记此服务为已完成？',
        editable: true,
        placeholderText: '请填写服务备注（选填）',
        success: async (res) => {
          if (res.confirm) {
            try {
              const response = await uni.request({
                url: `${config.API_BASE_URL}/api/dan-execution/complete`,
                method: 'POST',
                header: {
                  'Authorization': `Bearer ${uni.getStorageSync('token')}`,
                  'Content-Type': 'application/json'
                },
                data: {
                  executionId: task.id,
                  notes: res.content || ''
                }
              })

              if (response.data.code === 200) {
                uni.showToast({ title: '标记成功', icon: 'success' })
                this.loadTasks()
              } else {
                uni.showToast({ title: response.data.message || '操作失败', icon: 'none' })
              }
            } catch (e) {
              console.error('标记完成失败', e)
              uni.showToast({ title: '网络错误', icon: 'none' })
            }
          }
        }
      })
    },
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    },
    getStatusClass(task) {
      if (task.plannerStatus === 'completed') return 'completed'
      if (task.assessorStatus === 'completed') return 'ready'
      return 'pending'
    },
    getStatusText(task) {
      if (task.plannerStatus === 'completed') return '已完成'
      if (task.assessorStatus === 'completed') return '待您处理'
      return '进行中'
    }
  }
}
</script>

<style scoped>
.container {
  padding: 40rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 40rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #999;
}

.loading, .empty {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.task-card {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.task-title-row {
  display: flex;
  align-items: center;
}

.task-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.task-icon.completed {
  background: linear-gradient(135deg, #4caf50, #388e3c);
}

.task-icon.ready {
  background: linear-gradient(135deg, #2196f3, #1976d2);
}

.task-icon.pending {
  background: linear-gradient(135deg, #ff9800, #f57c00);
}

/* 对勾 */
.task-icon .icon-check {
  width: 16rpx;
  height: 10rpx;
  border-left: 4rpx solid #fff;
  border-bottom: 4rpx solid #fff;
  transform: rotate(-45deg);
  margin-top: -2rpx;
}

/* 感叹号 */
.task-icon .icon-alert {
  width: 4rpx;
  height: 16rpx;
  background: #fff;
  border-radius: 2rpx;
}

/* 时钟 */
.task-icon .icon-clock {
  width: 18rpx;
  height: 18rpx;
  border: 3rpx solid #fff;
  border-radius: 50%;
  position: relative;
}
.task-icon .icon-clock::before {
  content: '';
  position: absolute;
  width: 3rpx;
  height: 8rpx;
  background: #fff;
  top: 2rpx;
  left: 50%;
  transform: translateX(-50%);
}
.task-icon .icon-clock::after {
  content: '';
  position: absolute;
  width: 6rpx;
  height: 3rpx;
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
}

.task-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.task-status {
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
}

.task-status.pending {
  background: #fff3e0;
  color: #ff9800;
}

.task-status.ready {
  background: #e3f2fd;
  color: #2196f3;
}

.task-status.completed {
  background: #e8f5e9;
  color: #4caf50;
}

.task-info {
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 18rpx;
}

.info-icon {
  width: 28rpx;
  height: 28rpx;
  border-radius: 6rpx;
  margin-right: 12rpx;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 订单图标 */
.order-icon {
  background: #e3f2fd;
}
.order-icon::after {
  content: '';
  width: 12rpx;
  height: 14rpx;
  border: 2rpx solid #2196f3;
  border-radius: 2rpx;
}

/* 时间图标 */
.time-icon {
  background: #fff3e0;
}
.time-icon::after {
  content: '';
  width: 12rpx;
  height: 12rpx;
  border: 2rpx solid #ff9800;
  border-radius: 50%;
}

/* 评估师图标 */
.assessor-info-icon {
  background: #e8f5e9;
}
.assessor-info-icon::after {
  content: '';
  width: 8rpx;
  height: 8rpx;
  background: #4caf50;
  border-radius: 50%;
}

/* 规划师图标 */
.planner-info-icon {
  background: #fce4ec;
}
.planner-info-icon::after {
  content: '';
  width: 8rpx;
  height: 8rpx;
  background: #e91e63;
  border-radius: 50%;
}

.info-label {
  font-size: 26rpx;
  color: #666;
  width: 140rpx;
}

.info-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}

.task-action {
  margin-top: 20rpx;
}

.btn-complete {
  background: linear-gradient(135deg, #4caf50, #388e3c);
  color: white;
  border: none;
  border-radius: 16rpx;
  font-size: 28rpx;
  padding: 24rpx;
  width: 100%;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
}
</style>