cfc/cfc-frontend/pages/assessment/execution.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="execution" class="execution-detail">
      <!-- 状态卡片 -->
      <view class="status-card">
        <view class="status-icon" :class="getStatusClass(execution)">
          <view class="icon-circle"></view>
          <view v-if="getStatusClass(execution) === 'completed'" class="icon-check"></view>
          <view v-else-if="getStatusClass(execution) === 'ready'" class="icon-alert"></view>
          <view v-else class="icon-dots"><view></view><view></view><view></view></view>
        </view>
        <text class="status-text">{{ getStatusText(execution) }}</text>
      </view>

      <!-- 进度时间线 -->
      <view class="timeline">
        <view class="timeline-item" :class="{ active: execution.assessorStatus === 'completed' }">
          <view class="timeline-dot"><view v-if="execution.assessorStatus === 'completed'" class="dot-check"></view></view>
          <view class="timeline-content">
            <view class="timeline-header">
              <view class="timeline-icon assessor-icon"></view>
              <text class="timeline-title">评估师服务</text>
            </view>
            <text class="timeline-desc">{{ execution.assessorStatus === 'completed' ? '已完成' : '进行中' }}</text>
            <text v-if="execution.assessorCompletedAt" class="timeline-time">
              {{ formatTime(execution.assessorCompletedAt) }}
            </text>
          </view>
        </view>

        <view v-if="execution.plannerId" class="timeline-item" :class="{ active: execution.plannerStatus === 'completed' }">
          <view class="timeline-dot"><view v-if="execution.plannerStatus === 'completed'" class="dot-check"></view></view>
          <view class="timeline-content">
            <view class="timeline-header">
              <view class="timeline-icon planner-icon"></view>
              <text class="timeline-title">规划师服务</text>
            </view>
            <text class="timeline-desc">{{ execution.plannerStatus === 'completed' ? '已完成' : '进行中' }}</text>
            <text v-if="execution.plannerCompletedAt" class="timeline-time">
              {{ formatTime(execution.plannerCompletedAt) }}
            </text>
          </view>
        </view>

        <view class="timeline-item" :class="{ active: execution.userConfirmed === 1 }">
          <view class="timeline-dot"><view v-if="execution.userConfirmed === 1" class="dot-check"></view></view>
          <view class="timeline-content">
            <view class="timeline-header">
              <view class="timeline-icon confirm-icon"></view>
              <text class="timeline-title">用户确认</text>
            </view>
            <text class="timeline-desc">{{ execution.userConfirmed === 1 ? '已确认' : '待确认' }}</text>
            <text v-if="execution.userConfirmedAt" class="timeline-time">
              {{ formatTime(execution.userConfirmedAt) }}
            </text>
          </view>
        </view>
      </view>

      <!-- 服务备注 -->
      <view v-if="execution.assessorNotes || execution.plannerNotes" class="notes-section">
        <text class="section-title">服务备注</text>
        <view v-if="execution.assessorNotes" class="note-item">
          <text class="note-label">评估师：</text>
          <text class="note-content">{{ execution.assessorNotes }}</text>
        </view>
        <view v-if="execution.plannerNotes" class="note-item">
          <text class="note-label">规划师：</text>
          <text class="note-content">{{ execution.plannerNotes }}</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="actions">
        <button v-if="canConfirm" class="btn-primary" @click="confirmService">
          确认服务完成
        </button>
        <button v-if="canRate" class="btn-secondary" @click="goToRating">
          评价服务
        </button>
        <button class="btn-outline" @click="goBack">
          返回
        </button>
      </view>
    </view>

    <!-- 无数据 -->
    <view v-else class="empty">
      <text>暂无执行记录</text>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      executionId: null,
      execution: null,
      loading: true
    }
  },
  computed: {
    canConfirm() {
      if (!this.execution) return false
      // 评估师和规划师（如果有）都完成后才能确认
      const assessorDone = this.execution.assessorStatus === 'completed'
      const plannerDone = !this.execution.plannerId || this.execution.plannerStatus === 'completed'
      return assessorDone && plannerDone && this.execution.userConfirmed === 0
    },
    canRate() {
      if (!this.execution) return false
      return this.execution.userConfirmed === 1
    }
  },
  onLoad(options) {
    if (options.executionId) {
      this.executionId = options.executionId
      this.loadExecution()
    }
  },
  methods: {
    async loadExecution() {
      this.loading = true
      try {
        const res = await uni.request({
          url: `${config.API_BASE_URL}/api/dan-execution/detail/${this.executionId}`,
          method: 'GET',
          header: {
            'Authorization': `Bearer ${uni.getStorageSync('token')}`
          }
        })
        if (res.data.code === 200) {
          this.execution = 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
      }
    },
    async confirmService() {
      uni.showModal({
        title: '确认服务',
        content: '确认服务已完成？确认后可以进行评价。',
        success: async (res) => {
          if (res.confirm) {
            try {
              const response = await uni.request({
                url: `${config.API_BASE_URL}/api/dan-execution/confirm`,
                method: 'POST',
                header: {
                  'Authorization': `Bearer ${uni.getStorageSync('token')}`,
                  'Content-Type': 'application/json'
                },
                data: { executionId: this.executionId }
              })
              if (response.data.code === 200) {
                uni.showToast({ title: '确认成功', icon: 'success' })
                this.loadExecution()
              } else {
                uni.showToast({ title: response.data.message || '确认失败', icon: 'none' })
              }
            } catch (e) {
              console.error('确认服务失败', e)
              uni.showToast({ title: '网络错误', icon: 'none' })
            }
          }
        }
      })
    },
    goToRating() {
      uni.navigateTo({
        url: `/pages/assessment/rating?executionId=${this.executionId}`
      })
    },
    goBack() {
      uni.navigateBack()
    },
    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(exec) {
      if (exec.userConfirmed === 1) return 'completed'
      if (exec.assessorStatus === 'completed' && (!exec.plannerId || exec.plannerStatus === 'completed')) return 'ready'
      return 'pending'
    },
    getStatusIcon(exec) {
      if (exec.userConfirmed === 1) return '✓'
      if (exec.assessorStatus === 'completed' && (!exec.plannerId || exec.plannerStatus === 'completed')) return '!'
      return '⋯'
    },
    getStatusText(exec) {
      if (exec.userConfirmed === 1) return '服务已完成'
      if (exec.assessorStatus === 'completed' && (!exec.plannerId || exec.plannerStatus === 'completed')) return '待您确认'
      if (exec.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;
}

.status-card {
  background: white;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.status-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 30rpx;
  position: relative;
}

.icon-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

/* CSS 对勾图标 */
.icon-check {
  width: 40rpx;
  height: 24rpx;
  border-left: 6rpx solid #fff;
  border-bottom: 6rpx solid #fff;
  transform: rotate(-45deg);
  margin-top: -6rpx;
  z-index: 1;
}

/* CSS 感叹号图标 */
.icon-alert {
  width: 6rpx;
  height: 36rpx;
  background: #fff;
  border-radius: 3rpx;
  position: relative;
  z-index: 1;
}
.icon-alert::after {
  content: '';
  position: absolute;
  bottom: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 10rpx;
  height: 10rpx;
  background: #fff;
  border-radius: 50%;
}

/* CSS 加载中三个点图标 */
.icon-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  z-index: 1;
}
.icon-dots view {
  width: 12rpx;
  height: 12rpx;
  background: #fff;
  border-radius: 50%;
}

.status-icon.pending {
  background: linear-gradient(135deg, #ffe0b2, #ffcc80);
}

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

.status-icon.ready {
  background: linear-gradient(135deg, #bbdefb, #90caf9);
}

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

.status-icon.completed {
  background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
}

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

.status-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.timeline {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
}

.timeline-item {
  display: flex;
  margin-bottom: 40rpx;
  position: relative;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 15rpx;
  top: 30rpx;
  bottom: -40rpx;
  width: 2rpx;
  background: #e0e0e0;
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-dot {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background: #e0e0e0;
  margin-right: 30rpx;
  flex-shrink: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot-check {
  width: 12rpx;
  height: 8rpx;
  border-left: 3rpx solid #fff;
  border-bottom: 3rpx solid #fff;
  transform: rotate(-45deg);
  margin-top: -2rpx;
}

.timeline-item.active .timeline-dot {
  background: #4caf50;
}

/* 时间线头部（图标+标题） */
.timeline-header {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.timeline-icon {
  width: 36rpx;
  height: 36rpx;
  border-radius: 8rpx;
  margin-right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 评估师图标 */
.assessor-icon {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
}
.assessor-icon::after {
  content: '';
  width: 16rpx;
  height: 16rpx;
  border: 3rpx solid #2196f3;
  border-radius: 50%;
  position: absolute;
  top: 8rpx;
  left: 8rpx;
}
.assessor-icon::before {
  content: '';
  width: 20rpx;
  height: 3rpx;
  background: #2196f3;
  position: absolute;
  bottom: 10rpx;
  left: 8rpx;
  border-radius: 2rpx;
}

/* 规划师图标 */
.planner-icon {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}
.planner-icon::after {
  content: '';
  width: 16rpx;
  height: 16rpx;
  border: 3rpx solid #4caf50;
  border-radius: 50%;
  position: absolute;
  top: 8rpx;
  left: 8rpx;
}
.planner-icon::before {
  content: '';
  width: 20rpx;
  height: 3rpx;
  background: #4caf50;
  position: absolute;
  bottom: 10rpx;
  left: 8rpx;
  border-radius: 2rpx;
}

/* 确认图标 */
.confirm-icon {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
}
.confirm-icon::after {
  content: '';
  width: 16rpx;
  height: 16rpx;
  border: 3rpx solid #ff9800;
  border-radius: 50%;
  position: absolute;
  top: 8rpx;
  left: 8rpx;
}
.confirm-icon::before {
  content: '';
  width: 20rpx;
  height: 3rpx;
  background: #ff9800;
  position: absolute;
  bottom: 10rpx;
  left: 8rpx;
  border-radius: 2rpx;
}

.timeline-content {
  flex: 1;
}

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

.timeline-desc {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 5rpx;
}

.timeline-time {
  font-size: 24rpx;
  color: #999;
}

.notes-section {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.note-item {
  margin-bottom: 20rpx;
}

.note-label {
  font-size: 28rpx;
  color: #666;
  font-weight: bold;
}

.note-content {
  font-size: 28rpx;
  color: #333;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.btn-primary, .btn-secondary, .btn-outline {
  border-radius: 20rpx;
  font-size: 32rpx;
  padding: 30rpx;
  text-align: center;
}

.btn-primary {
  background: #1E3A5F;
  color: white;
  border: none;
}

.btn-secondary {
  background: #ff9800;
  color: white;
  border: none;
}

.btn-outline {
  background: white;
  color: #666;
  border: 2rpx solid #ddd;
}
</style>