cfc/cfc-frontend/pages/tasks/daily-tasks.vue

<template>
  <view class="container">
    <!-- 分段控制 -->
    <view class="segmented-control">
      <view
        class="segment-item"
        :class="{ active: tabIndex === 0 }"
        @click="switchTab(0)"
      >
        <text class="segment-text">每日任务</text>
        <view class="segment-underline" v-if="tabIndex === 0"></view>
      </view>
      <view
        class="segment-item"
        :class="{ active: tabIndex === 1 }"
        @click="switchTab(1)"
      >
        <text class="segment-text">新手任务</text>
        <view class="segment-underline" v-if="tabIndex === 1"></view>
      </view>
    </view>

    <!-- 进度统计 -->
    <view class="progress-card">
      <view class="progress-bar-wrap">
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
        </view>
        <text class="progress-text">{{ completedCount }}/{{ taskList.length }} 已完成</text>
      </view>
    </view>

    <!-- 任务列表 -->
    <view class="task-list" v-if="taskList.length > 0">
      <view class="task-item" v-for="item in taskList" :key="item.taskLogId">
        <view class="task-left">
          <view class="task-icon">{{ item.icon }}</view>
          <view class="task-info">
            <text class="task-name">{{ item.name }}</text>
            <text class="task-progress">{{ item.currentProgress }}/{{ item.targetProgress }}</text>
            <text class="task-reward">获得 {{ item.rewardPoints }} 积分 + {{ item.rewardEnergy }} 能量</text>
          </view>
        </view>
        <view class="task-right">
          <text class="task-status" v-if="item.status === 'CLAIMED'" :class="'status-claimed'">已领取</text>
          <text class="task-status" v-else-if="item.status === 'COMPLETED'" :class="'status-completed'">已完成</text>
          <text class="task-status" v-else :class="'status-pending'">待完成</text>
          <button
            v-if="item.status === 'COMPLETED'"
            class="claim-btn"
            @click="claimReward(item)"
            :disabled="claimingMap[item.taskLogId]"
          >领取</button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="!loading && taskList.length === 0">
      <text class="empty-text">暂无任务</text>
    </view>

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

<script>
import { getGrowthTaskList, claimGrowthTaskReward } from '../../utils/api.js'

var TAB_TYPES = ['DAILY', 'NEWBIE']

export default {
  data() {
    return {
      tabIndex: 0,
      taskList: [],
      loading: false,
      claimingMap: {}
    }
  },
  computed: {
    completedCount() {
      var count = 0
      for (var i = 0; i < this.taskList.length; i++) {
        if (this.taskList[i].status === 'COMPLETED' || this.taskList[i].status === 'CLAIMED') {
          count++
        }
      }
      return count
    },
    progressPercent() {
      if (this.taskList.length === 0) return 0
      return Math.round((this.completedCount / this.taskList.length) * 100)
    }
  },
  onLoad() {
    this.loadTasks()
    this._onLoadFired = true
  },
  onShow() {
    if (this._onLoadFired) {
      this._onLoadFired = false
    } else {
      this.loadTasks()
    }
  },
  methods: {
    switchTab(index) {
      if (this.tabIndex === index) return
      this.tabIndex = index
      this.loadTasks()
    },
    async loadTasks() {
      this.loading = true
      try {
        var type = TAB_TYPES[this.tabIndex]
        var res = await getGrowthTaskList(type)
        var records = (res.data && res.data.records) || res.data || []
        if (!Array.isArray(records)) {
          records = []
        }
        this.taskList = records.map(function(item) {
          var status = 'PENDING'
          if (item.claimed === 1) {
            status = 'CLAIMED'
          } else if (item.completed === 1) {
            status = 'COMPLETED'
          }
          return {
            taskLogId: item.taskLogId || 0,
            icon: '📋',
            name: item.title || '',
            currentProgress: item.progress || 0,
            targetProgress: item.targetValue || 1,
            rewardPoints: item.rewardPoints || 0,
            rewardEnergy: item.rewardEnergy || 0,
            status: status
          }
        })
      } catch (e) {
        console.error('获取任务列表失败', e)
        uni.showToast({ title: '获取任务失败', icon: 'none' })
      }
      this.loading = false
    },
    async claimReward(item) {
      if (this.claimingMap[item.taskLogId]) return
      this.$set(this.claimingMap, item.taskLogId, true)
      try {
        await claimGrowthTaskReward(item.taskLogId)
        item.status = 'CLAIMED'
        uni.showToast({
          title: '获得' + item.rewardPoints + '积分+' + item.rewardEnergy + '能量',
          icon: 'none',
          duration: 2000
        })
      } catch (e) {
        uni.showToast({ title: '领取失败', icon: 'none' })
      }
      this.$set(this.claimingMap, item.taskLogId, false)
    }
  }
}
</script>

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

/* ===== 分段控制 ===== */
.segmented-control {
  display: flex;
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.segment-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 0 16rpx;
  position: relative;
}
.segment-item.active .segment-text {
  color: #F97316;
  font-weight: 600;
}
.segment-text {
  font-size: 30rpx;
  color: #94A3B8;
}
.segment-underline {
  width: 48rpx;
  height: 6rpx;
  background: #F97316;
  border-radius: 3rpx;
  margin-top: 12rpx;
}

/* ===== 进度卡片 ===== */
.progress-card {
  background: linear-gradient(135deg, #F97316, #EA580C);
  border-radius: 20rpx;
  padding: 30rpx 40rpx;
  color: #fff;
  margin-bottom: 24rpx;
}
.progress-bar-wrap {
  display: flex;
  align-items: center;
}
.progress-bar {
  flex: 1;
  height: 16rpx;
  background: rgba(255,255,255,0.3);
  border-radius: 8rpx;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 8rpx;
  transition: width 0.3s ease;
}
.progress-text {
  font-size: 24rpx;
  margin-left: 16rpx;
  white-space: nowrap;
}

/* ===== 任务列表 ===== */
.task-list {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 30rpx;
  border-bottom: 1rpx solid #FED7AA;
}
.task-item:last-child {
  border-bottom: none;
}
.task-left {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 20rpx;
}
.task-icon {
  width: 72rpx;
  height: 72rpx;
  border-radius: 16rpx;
  background: #FEF3C7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.task-info {
  flex: 1;
}
.task-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  display: block;
  margin-bottom: 6rpx;
}
.task-progress {
  font-size: 22rpx;
  color: #64748B;
  display: block;
  margin-bottom: 4rpx;
}
.task-reward {
  font-size: 22rpx;
  color: #F97316;
  display: block;
}
.task-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.task-status {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  margin-right: 12rpx;
}
.status-pending {
  background: #F1F5F9;
  color: #94A3B8;
}
.status-completed {
  background: #DCFCE7;
  color: #16A34A;
}
.status-claimed {
  background: #FEF3C7;
  color: #D97706;
}
.claim-btn {
  background: #F97316;
  color: #fff;
  font-size: 24rpx;
  border-radius: 30rpx;
  height: 56rpx;
  line-height: 56rpx;
  padding: 0 28rpx;
  font-weight: 500;
}
.claim-btn::after {
  border: none;
}
.claim-btn:active {
  opacity: 0.8;
}
.claim-btn[disabled] {
  opacity: 0.5;
}

/* ===== 空状态 ===== */
.empty-state {
  text-align: center;
  padding: 120rpx 0;
}
.empty-text {
  color: #94A3B8;
  font-size: 28rpx;
}

/* ===== 加载状态 ===== */
.loading-state {
  text-align: center;
  padding: 60rpx;
  color: #94A3B8;
  font-size: 28rpx;
}
</style>