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

<template>
  <view class="container">
    <!-- 顶部 Tab 切换 -->
    <view class="tab-bar">
      <view class="tab-item" :class="{ active: activeTab === 'pending' }" @click="switchTab('pending')">
        <text class="tab-text">待接受</text>
        <text class="tab-badge" v-if="pendingTasks.length > 0">{{ pendingTasks.length }}</text>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'today' }" @click="switchTab('today')">
        <text class="tab-text">今日任务</text>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'created' }" @click="switchTab('created')">
        <text class="tab-text">我创建的</text>
      </view>
    </view>

    <!-- 待接受任务 -->
    <view class="task-list" v-if="activeTab === 'pending'">
      <view class="task-item assigned" v-for="task in pendingTasks" :key="task.id">
        <view class="task-left">
          <view class="task-title">{{ task.title }}</view>
          <view class="task-meta">
            <text class="points">+{{ task.points }}分</text>
            <text class="creator">创建人：{{ task.creatorName || '家人' }}</text>
            <text class="deadline">截止 {{ formatTime(task.deadline) }}</text>
          </view>
        </view>
        <view class="task-actions">
          <button class="btn-accept" @click="acceptTask(task.id)">接受</button>
          <button class="btn-reject" @click="showRejectModal(task)">拒绝</button>
        </view>
      </view>
      <view class="empty" v-if="!loading && pendingTasks.length === 0">
        <text>暂无待接受任务</text>
      </view>
    </view>

    <!-- 今日任务 -->
    <view class="task-list" v-if="activeTab === 'today'">
      <view class="task-item" v-for="task in todayTasks" :key="task.id" :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" v-if="task.status === 'pending'">
          <button class="btn-complete" @click="completeTask(task.id)">完成</button>
        </view>
        <view class="completed-badge" v-else>已完成</view>
      </view>
      <view class="empty" v-if="!loading && todayTasks.length === 0">
        <text>暂无今日任务</text>
      </view>
    </view>

    <!-- 我创建的任务 -->
    <view class="task-list" v-if="activeTab === 'created'">
      <view class="task-item" v-for="task in createdTasks" :key="task.id">
        <view class="task-left">
          <view class="task-title">{{ task.title }}</view>
          <view class="task-meta">
            <text class="points">+{{ task.points }}分</text>
            <text class="assignee">{{ task.executorName || '未分配' }}</text>
            <text class="status-tag" :class="'status-' + task.status">{{ statusLabel(task.status) }}</text>
          </view>
        </view>
      </view>
      <view class="empty" v-if="!loading && createdTasks.length === 0">
        <text>暂无创建的任务</text>
      </view>
    </view>

    <!-- 添加任务按钮 -->
    <button v-if="activeTab === 'today' && isParent" class="add-btn" @click="showAddModal = true">
      + 添加任务
    </button>

    <!-- 拒绝确认弹窗 -->
    <view class="modal-mask" v-if="showRejectModalFlag" @click="showRejectModalFlag = false">
      <view class="modal" @click.stop>
        <view class="modal-title">确认拒绝</view>
        <view class="modal-content">
          <text>拒绝后，创建人对你的信任度和亲密度将各减1分，沟通质量各加1分。</text>
        </view>
        <view class="modal-btns">
          <button @click="showRejectModalFlag = false">取消</button>
          <button class="btn-primary" @click="confirmReject">确认拒绝</button>
        </view>
      </view>
    </view>

    <!-- 创建任务弹窗 -->
    <view class="modal-mask" v-if="showAddModal" @click="showAddModal = false">
      <view class="modal modal-large" @click.stop>
        <view class="modal-title">创建任务</view>

        <view class="form-item">
          <view class="form-label">任务标题 <text class="required">*</text></view>
          <input v-model="newTask.title" placeholder="请输入任务标题" />
        </view>

        <view class="form-item">
          <view class="form-label">任务内容</view>
          <textarea v-model="newTask.description" placeholder="请输入任务描述" class="textarea" />
        </view>

        <view class="form-item">
          <view class="form-label">类型 <text class="required">*</text></view>
          <picker mode="selector" :range="categories" @change="onCategoryChange">
            <view class="picker">{{ newTask.category || '请选择类型' }}</view>
          </picker>
        </view>

        <view class="form-item">
          <view class="form-label">积分 <text class="required">*</text></view>
          <input v-model="newTask.points" type="number" placeholder="1-10" />
        </view>

        <view class="form-item">
          <view class="form-label">截止时间 <text class="required">*</text></view>
          <picker mode="datetime" :value="newTask.deadline" @change="onDeadlineChange">
            <view class="picker">{{ newTask.deadline || '选择截止时间' }}</view>
          </picker>
        </view>

        <view class="form-item">
          <view class="form-label">分配给 <text class="required">*</text></view>
          <view class="assignee-tabs">
            <view class="assignee-tab" :class="{ active: newTask.executorType === 'child' }" @click="newTask.executorType = 'child'">
              <text>孩子</text>
            </view>
            <view class="assignee-tab" :class="{ active: newTask.executorType === 'member' }" @click="newTask.executorType = 'member'">
              <text>家庭成员</text>
            </view>
          </view>
        </view>

        <view class="form-item" v-if="newTask.executorType === 'child'">
          <view class="form-label">选择孩子 <text class="required">*</text></view>
          <checkbox-group @change="onChildSelectChange">
            <label v-for="child in children" :key="child.id">
              <checkbox :value="String(child.id)" :checked="newTask.memberIds.includes(String(child.id))" />
              <text>{{ child.nickname }}</text>
            </label>
          </checkbox-group>
        </view>

        <view class="form-item" v-if="newTask.executorType === 'member'">
          <view class="form-label">选择家庭成员 <text class="required">*</text></view>
          <checkbox-group @change="onMemberSelectChange">
            <label v-for="member in familyMembers" :key="member.id">
              <checkbox :value="String(member.id)" :checked="newTask.memberIds.includes(String(member.id))" />
              <text>{{ member.nickname }}</text>
            </label>
          </checkbox-group>
        </view>

        <view class="modal-btns">
          <button @click="showAddModal = false">取消</button>
          <button class="btn-primary" @click="createTask">创建</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getMyPendingTasks, acceptTask as acceptTaskApi, rejectTask as rejectTaskApi, getTodayTasks, completeTask as completeTaskApi, createTask as createTaskApi, getChildren, getVisibleFamilyMembers } from '../../utils/api.js'
import { parseDate } from '../../utils/format.js'

export default {
  data() {
    return {
      activeTab: 'today',
      loading: false,
      pendingTasks: [],
      todayTasks: [],
      createdTasks: [],
      isParent: false,
      currentMemberId: null,
      currentUserId: null,
      children: [],
      familyMembers: [],
      showAddModal: false,
      showRejectModalFlag: false,
      rejectTaskId: null,
      newTask: {
        title: '',
        description: '',
        category: '',
        points: 2,
        deadline: '',
        executorType: 'child',
        memberIds: []
      },
      categories: ['学习类', '生活类', '运动类', '其他']
    }
  },
  onShow() {
    const role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    this.isParent = role === 'parent'
    this.currentUserId = uni.getStorageSync('userId')
    this.currentMemberId = uni.getStorageSync('currentChildId') || this.currentUserId
    this.loadInitialData()
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab
      if (tab === 'pending') this.loadPendingTasks()
      else if (tab === 'today') this.loadTodayTasks()
      else if (tab === 'created') this.loadCreatedTasks()
    },
    async loadInitialData() {
      this.loading = true
      try {
        const [childrenRes, membersRes] = await Promise.all([
          getChildren(),
          getVisibleFamilyMembers()
        ])
        this.children = childrenRes.data || []
        this.familyMembers = membersRes.data || []
        this.loadTodayTasks()
        this.loadPendingTasks()
        this.loadCreatedTasks()
      } catch (e) {
        console.error('加载数据失败', e)
      } finally {
        this.loading = false
      }
    },
    async loadPendingTasks() {
      try {
        const res = await getMyPendingTasks(this.currentMemberId)
        this.pendingTasks = res.data || []
      } catch (e) {
        console.error('加载待接受任务失败', e)
      }
    },
    async loadTodayTasks() {
      try {
        const res = await getTodayTasks(this.currentMemberId)
        this.todayTasks = res.data || []
      } catch (e) {
        console.error('加载今日任务失败', e)
      }
    },
    async loadCreatedTasks() {
      try {
        const res = await getTodayTasks(this.currentUserId)
        this.createdTasks = res.data || []
      } catch (e) {
        console.error('加载创建的任务失败', e)
      }
    },
    async completeTask(taskId) {
      try {
        const res = await completeTaskApi(taskId, this.currentMemberId, '')
        uni.showToast({ title: `获得 ${res.data.pointsEarned} 积分`, icon: 'success' })
        this.loadTodayTasks()
      } catch (e) {
        console.error('完成任务失败', e)
      }
    },
    acceptTask(taskId) {
      uni.showLoading({ title: '接受中...' })
      acceptTaskApi(taskId, this.currentMemberId).then(res => {
        uni.hideLoading()
        if (res.data) {
          uni.showToast({ title: '已接受任务', icon: 'success' })
          this.loadPendingTasks()
          this.loadTodayTasks()
        } else {
          uni.showToast({ title: '接受失败', icon: 'none' })
        }
      }).catch(e => {
        uni.hideLoading()
        uni.showToast({ title: '接受失败', icon: 'none' })
      })
    },
    showRejectModal(task) {
      this.rejectTaskId = task.id
      this.showRejectModalFlag = true
    },
    confirmReject() {
      uni.showLoading({ title: '处理中...' })
      rejectTaskApi(this.rejectTaskId, this.currentMemberId).then(res => {
        uni.hideLoading()
        if (res.data) {
          uni.showToast({ title: '已拒绝', icon: 'success' })
          this.loadPendingTasks()
        } else {
          uni.showToast({ title: '操作失败', icon: 'none' })
        }
      }).catch(e => {
        uni.hideLoading()
        uni.showToast({ title: '操作失败', icon: 'none' })
      })
      this.showRejectModalFlag = false
    },
    async createTask() {
      if (!this.newTask.title) {
        uni.showToast({ title: '请输入任务标题', icon: 'none' })
        return
      }
      if (!this.newTask.category) {
        uni.showToast({ title: '请选择类型', icon: 'none' })
        return
      }
      if (this.newTask.memberIds.length === 0) {
        uni.showToast({ title: '请选择分配对象', icon: 'none' })
        return
      }
      try {
        await createTaskApi({
          title: this.newTask.title,
          description: this.newTask.description,
          category: this.newTask.category,
          points: parseInt(this.newTask.points) || 2,
          deadline: this.newTask.deadline ? new Date(this.newTask.deadline).getTime() : null,
          executorType: this.newTask.executorType,
          executorId: this.newTask.executorType === 'member' ? Number(this.newTask.memberIds[0]) : null,
          memberId: this.newTask.executorType === 'child' ? Number(this.newTask.memberIds[0]) : null,
          memberIds: this.newTask.executorType === 'child' ? this.newTask.memberIds.map(id => Number(id)) : []
        })
        uni.showToast({ title: '创建成功', icon: 'success' })
        this.showAddModal = false
        this.resetNewTask()
        this.loadCreatedTasks()
        this.loadPendingTasks()
      } catch (e) {
        console.error('创建任务失败', e)
        uni.showToast({ title: '创建失败', icon: 'none' })
      }
    },
    resetNewTask() {
      this.newTask = {
        title: '',
        description: '',
        category: '',
        points: 2,
        deadline: '',
        executorType: 'child',
        memberIds: []
      }
    },
    onCategoryChange(e) {
      this.newTask.category = this.categories[e.detail.value]
    },
    onDeadlineChange(e) {
      this.newTask.deadline = e.detail.value
    },
    onChildSelectChange(e) {
      this.newTask.memberIds = e.detail.value
    },
    onMemberSelectChange(e) {
      this.newTask.memberIds = e.detail.value
    },
    formatTime(dateStr) {
      if (!dateStr) return ''
      const date = parseDate(dateStr)
      if (!date) return ''
      return `${date.getMonth()+1}月${date.getDate()}日 ${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}`
    },
    statusLabel(status) {
      const map = {
        'pending': '待审核',
        'assigned': '待接受',
        'in_progress': '进行中',
        'completed': '已完成',
        'rejected': '已拒绝',
        'overdue': '已过期',
        'cancelled': '已取消'
      }
      return map[status] || status
    }
  }
}
</script>

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

.tab-bar {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  border-radius: 12rpx;
  position: relative;
}

.tab-item.active {
  background: linear-gradient(135deg, #F97316, #FB923C);
}

.tab-text {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

.tab-item.active .tab-text {
  color: #fff;
}

.tab-badge {
  position: absolute;
  top: 8rpx;
  right: 30rpx;
  background: #FF4D4F;
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 20rpx;
  min-width: 32rpx;
  text-align: center;
}

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

.task-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-item.assigned {
  border: 2rpx solid #F97316;
}

.task-item.completed {
  opacity: 0.6;
}

.task-left {
  flex: 1;
}

.task-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.task-meta {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
}

.points {
  color: #F97316;
  font-size: 24rpx;
  font-weight: 500;
}

.creator, .assignee {
  color: #999;
  font-size: 24rpx;
}

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

.status-tag {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  background: #f0f0f0;
  color: #666;
}

.status-assigned {
  background: #FFF7ED;
  color: #F97316;
}

.status-in_progress {
  background: #ECFDF5;
  color: #10B981;
}

.status-rejected {
  background: #FEF2F2;
  color: #EF4444;
}

.task-right {
  margin-left: 20rpx;
}

.btn-complete, .btn-accept {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 26rpx;
  padding: 12rpx 30rpx;
  border-radius: 30rpx;
  border: none;
}

.btn-reject {
  background: #fff;
  color: #EF4444;
  font-size: 26rpx;
  padding: 12rpx 30rpx;
  border-radius: 30rpx;
  border: 2rpx solid #EF4444;
  margin-left: 16rpx;
}

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

.completed-badge {
  color: #52C41A;
  font-size: 26rpx;
}

.minigame-badge {
  font-size: 28rpx;
  margin-left: 10rpx;
}

.empty {
  text-align: center;
  color: #999;
  padding: 100rpx 0;
  font-size: 28rpx;
}

.add-btn {
  position: fixed;
  bottom: 40rpx;
  left: 30rpx;
  right: 30rpx;
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  padding: 24rpx 0;
  border-radius: 40rpx;
  border: none;
  box-shadow: 0 8rpx 24rpx rgba(249,115,22,0.3);
}

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 85%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-large {
  width: 90%;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
  color: #333;
}

.modal-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 30rpx;
  text-align: center;
}

.modal-btns {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
}

.modal-btns button {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}

.modal-btns button:first-child {
  background: #f5f5f5;
  color: #666;
}

.form-item {
  margin-bottom: 24rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.form-label .required {
  color: #F97316;
}

.form-item input, .form-item .picker {
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  width: 100%;
  box-sizing: border-box;
  background: #fafafa;
}

.form-item .picker {
  color: #333;
}

.textarea {
  min-height: 120rpx;
  width: 100%;
  box-sizing: border-box;
  font-size: 28rpx;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  background: #fafafa;
}

.assignee-tabs {
  display: flex;
  gap: 20rpx;
}

.assignee-tab {
  flex: 1;
  padding: 20rpx;
  text-align: center;
  border-radius: 10rpx;
  border: 2rpx solid #ddd;
  font-size: 28rpx;
  color: #666;
  background: #fafafa;
}

.assignee-tab.active {
  border-color: #F97316;
  background: #FFF7ED;
  color: #F97316;
  font-weight: bold;
}

.form-item checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.form-item label {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 28rpx;
  color: #333;
  padding: 16rpx 24rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  background: #fafafa;
}
</style>