cfc/cfc-frontend/pages/ai/components/AITaskCard.vue

<template>
  <view class="ai-task-card">
    <view class="card-header">
      <text class="card-title">{{ task.title }}</text>
      <view class="dimension-badge" :style="{ backgroundColor: dimensionColor }">
        <text class="dimension-text">{{ task.dimension }}</text>
      </view>
    </view>

    <view class="card-body">
      <text class="card-description">{{ task.description }}</text>
    </view>

    <view class="card-footer">
      <view class="reward-info">
        <text class="reward-label">奖励能量</text>
        <text class="reward-points">+{{ task.rewardPoints }}</text>
      </view>

      <button
        class="accept-btn"
        :loading="loading"
        :disabled="loading"
        @click="handleAccept"
      >
        <text class="btn-text">{{ loading ? '接受中...' : '接受任务' }}</text>
      </button>
    </view>
  </view>
</template>

<script>
import { BrandColors } from '../../../utils/brand-colors.js'
export default {
  name: 'TaskCard',

  props: {
    task: {
      type: Object,
      default: function() {
        return {
          title: '',
          description: '',
          dimension: '',
          rewardPoints: 0,
          id: null
        }
      }
    },
    conversationId: {
      type: String,
      default: ''
    }
  },

  data: function() {
    return {
      loading: false
    }
  },

  computed: {
    dimensionColor: function() {
      var colorMap = {
        '身': BrandColors.success,
        '心': BrandColors.wealth,
        '智': BrandColors.infoBlue,
        '行': BrandColors.violet,
        '富': BrandColors.primary
      }
      return colorMap[this.task.dimension] || BrandColors.primary
    }
  },

  methods: {
    handleAccept: function() {
      var self = this
      if (self.loading) {
        return
      }

      var token = uni.getStorageSync('token')
      if (!token) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        return
      }

      self.loading = true

      uni.request({
        url: self.$apiBase + '/api/growth-task/accept-dynamic',
        method: 'POST',
        header: {
          'Authorization': 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        data: {
          taskId: self.task.id,
          conversationId: self.conversationId
        },
        success: function(res) {
          if (res.statusCode === 200 && res.data && res.data.code === 200) {
            uni.showToast({
              title: '任务已接受',
              icon: 'success'
            })
            self.$emit('accepted', self.task)
          } else {
            var message = (res.data && res.data.message) || '接受失败'
            uni.showToast({
              title: message,
              icon: 'none'
            })
          }
        },
        fail: function() {
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          })
        },
        complete: function() {
          self.loading = false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.ai-task-card {
  background-color: $app-surface;
  border-radius: 16rpx;
  padding: 32rpx;
  margin: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: $facade-text-gray-800;
  flex: 1;
  margin-right: 16rpx;
}

.dimension-badge {
  padding: 8rpx 20rpx;
  border-radius: 24rpx;
  flex-shrink: 0;
}

.dimension-text {
  font-size: 24rpx;
  font-weight: 500;
  color: $app-surface;
}

.card-body {
  margin-bottom: 32rpx;
}

.card-description {
  font-size: 28rpx;
  color: $facade-text-slate;
  line-height: 44rpx;
}

.card-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 24rpx;
  border-top: 1rpx solid $facade-fill-gray-100;
}

.reward-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.reward-label {
  font-size: 26rpx;
  color: $facade-text-gray-400;
  margin-right: 12rpx;
}

.reward-points {
  font-size: 32rpx;
  font-weight: 700;
  color: $brand-primary;
}

.accept-btn {
  background-color: $brand-primary;
  color: $app-surface;
  border: none;
  border-radius: 12rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 1.2;
}

.accept-btn:active {
  background-color: $brand-primary-dark;
}

.accept-btn:disabled {
  background-color: $mat-orange-300;
}

.btn-text {
  color: $app-surface;
}
</style>