cfc/zxyj-frontend/pages/child/tasks.vue

<template>
  <PlayfulCard elevation="1">
    <view class="container">
      <!-- 退出切换按钮 -->
      <view class="exit-switch" v-if="isSwitchedChild" @click="exitSwitch">
        <text>🔄 退出切换</text>
      </view>
      
      <view class="task-list" v-if="tasks.length > 0">
        <view v-for="task in tasks" :key="task.id" class="task-item" :class="{ completed: task.status === 'completed' }">
            <view class="task-left">
              <view class="task-title">
                {{ task.title }}
                <text v-if="task.category === '小游戏类'" class="minigame-badge">🎮</text>
              </view>
              <view class="task-meta">
                <text class="points">+{{ task.points }}分</text>
                <text class="deadline">截止 {{ formatTime(task.deadline) }}</text>
              </view>
            </view>
            <view class="task-right">
              <button 
                v-if="task.status === 'pending'" 
                class="btn-complete" 
                @click="handleTaskClick(task)"
              >
                {{ task.category === '小游戏类' ? '开始游戏' : '完成' }}
              </button>
            <view v-else class="completed-badge">已完成</view>
          </view>
        </view>
      </view>

      <view class="empty" v-else>
        <text>暂无今日任务</text>
      </view>
    </view>
  </PlayfulCard>
</template>

<script>
import PlayfulCard from '@/components/PlayfulCard.vue'
import { getTodayTasks, completeTask as completeTaskApi, getChildren, switchBackToParent, verifyPassword } from '../../utils/api.js'

export default {
  components: { PlayfulCard },
  data() {
    return {
      tasks: [],
      currentChildId: '',
      isSwitchedChild: false // 家长切换到孩子状态的标记
    }
  },
  onShow() {
    this.isSwitchedChild = uni.getStorageSync('isSwitchedChild') || false
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        const childrenRes = await getChildren()
        const children = childrenRes.data || []
        const storedChildId = uni.getStorageSync('currentChildId')
        const currentChild = children.find(c => c.id == storedChildId) || children[0]
        if (!currentChild) {
          this.tasks = []
          this.currentChildId = ''
          return
        }
        this.currentChildId = currentChild.id
        const res = await getTodayTasks(currentChild.id)
        this.tasks = res.data || []
      } catch (e) {
        console.error('加载孩子任务失败', e)
      }
    },
    async completeChildTask(taskId) {
      try {
        const res = await completeTaskApi(taskId, this.currentChildId, '')
        uni.showToast({ title: `获得 ${res.data.pointsEarned} 积分`, icon: 'success' })
        this.loadData()
      } catch (e) {
        console.error('完成任务失败', e)
      }
    },
    handleTaskClick(task) {
      // 如果是小游戏任务，跳转到对应的小游戏页面
      if (task.category === '小游戏类' && task.minigameCode) {
        const gamePages = {
          'schulte': '/pages/games/schulte',
          '1a2b': '/pages/games/1a2b',
          'sudoku': '/pages/games/sudoku'
        }
        const gamePage = gamePages[task.minigameCode]
        if (gamePage) {
          uni.navigateTo({
            url: `${gamePage}?taskId=${task.id}&childId=${this.currentChildId}`
          })
        }
      } else {
        // 普通任务，直接完成
        this.completeChildTask(task.id)
      }
    },
    formatTime(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      return `${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`
    },
    exitSwitch() {
      // 只有家长切换到孩子状态时才显示退出切换功能
      if (!this.isSwitchedChild) return
      
      uni.showModal({
        title: '退出切换',
        content: '请输入家长密码以确认退出',
        editable: true,
        success: async (res) => {
          if (res.confirm && res.content) {
            try {
              const verifyResult = await verifyPassword(res.content)
              if (verifyResult.code === 200) {
                await this.switchBackToParentMode()
              } else {
                uni.showToast({ title: '密码错误', icon: 'none' })
              }
            } catch (e) {
              uni.showToast({ title: '密码验证失败', icon: 'none' })
            }
          }
        }
      })
    },
    async switchBackToParentMode() {
      try {
        const result = await switchBackToParent()
        if (result.data) {
          this.$store.commit('switchBackToParent')
          uni.showToast({ title: '已切换回家长模式', icon: 'success' })
          uni.reLaunch({ url: '/pages/index/parent-index' })
        }
      } catch (e) { 
        uni.showToast({ title: '切换失败', icon: 'none' }) 
      }
    }
  }
}
</script>

<style scoped>
.container { padding: 30rpx; }
.exit-switch { background: #f5f5f5; padding: 20rpx; border-radius: 10rpx; margin-bottom: 20rpx; text-align: center; color: #666; font-size: 28rpx; }
.task-item { background: #fff; border-radius: 16rpx; padding: 30rpx; margin-bottom: 20rpx; display: flex; justify-content: space-between; align-items: center; }
.task-item.completed { opacity: 0.6; }
.task-title { font-size: 30rpx; color: #333; margin-bottom: 10rpx; }
.task-meta { display: flex; gap: 20rpx; }
.points { color: #FF6B6B; font-size: 24rpx; }
.deadline { color: #999; font-size: 24rpx; }
.btn-complete { background: #FF6B6B; color: #fff; font-size: 26rpx; padding: 10rpx 30rpx; border-radius: 30rpx; }
.completed-badge { color: #52C41A; font-size: 26rpx; }
.minigame-badge { font-size: 28rpx; margin-left: 10rpx; }
.empty { text-align: center; color: #999; padding: 100rpx; }
</style>