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

<template>
<view class="container">
<view class="form-container">
<view class="form-item">
<text class="label">任务名称</text>
<input class="input" v-model="form.title" placeholder="请输入任务名称" />
</view>

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

<view class="form-item">
<text class="label">选择孩子（可多选）</text>
<checkbox-group @change="onChildrenChange">
<label class="child-checkbox" v-for="child in children" :key="child.id">
<checkbox :value="String(child.id)" :checked="selectedChildIds.includes(String(child.id))" />
<text class="child-name">{{ child.nickname }}</text>
</label>
</checkbox-group>
</view>

<view class="form-item">
<text class="label">积分</text>
<input class="input" type="number" v-model="form.points" placeholder="请输入积分 (1-10)" />
</view>

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

          <!-- 小游戏选择（当选择"小游戏类"时显示） -->
          <view class="form-item" v-if="form.category === '小游戏类'">
            <text class="label">选择小游戏</text>
            <picker :range="miniGames" range-key="gameName" @change="onMinigameChange">
              <view class="picker">
                {{ selectedMinigame ? selectedMinigame.gameName : '请选择小游戏' }}
              </view>
            </picker>
          </view>

          <!-- TASK-003: 截止时间设置 -->
<view class="form-item">
<text class="label">截止时间</text>
<picker mode="multiSelector" :range="dateTimeRange" :value="dateTimeIndex" @change="onDateTimeChange" @columnchange="onColumnChange">
<view class="picker">
{{ deadlineText || '请选择截止时间' }}
</view>
</picker>
</view>

<!-- TASK-004: 重复设置 -->
<view class="form-item">
<text class="label">重复设置</text>
<picker :range="repeatTypes" range-key="label" @change="onRepeatChange">
<view class="picker">
{{ repeatTypeLabel || '不重复' }}
</view>
</picker>
</view>

<view class="form-item">
<text class="label">需要审核</text>
<switch :checked="form.needReview" @change="onNeedReviewChange" />
</view>

<!-- TASK-SYS-248: 联动动作 -->
<view class="form-item">
<text class="label">联动动作（可选）</text>
<picker :range="actionTypes" range-key="label" @change="onActionTypeChange">
<view class="picker">
{{ actionTypeLabel || '无（手动完成）' }}
</view>
</picker>
<text class="form-hint">选择后任务按钮将跳转对应功能页</text>
</view>

<view class="form-item" v-if="form.actionType === 'cart' || form.actionType === 'order'">
<text class="label">商品ID（购物任务）</text>
<input class="input" type="number" v-model="form.actionConfig" placeholder="请输入商品ID，如 123" />
<text class="form-hint">购物任务：点开始自动加购并跳转购物车</text>
</view>

<view class="form-item">
<text class="label">需先开始再完成（两阶段）</text>
<switch :checked="form.startRequired" @change="onStartRequiredChange" />
<text class="form-hint">小游戏/专注/购物等任务建议开启</text>
</view>

<view class="form-item">
<text class="label">需填写内容后完成</text>
<switch :checked="form.requireInput" @change="onRequireInputChange" />
</view>

<view class="form-item">
<text class="label">预计时长（分钟）</text>
<input class="input" type="number" v-model="form.duration" placeholder="请输入预计完成时长" />
</view>

<button class="btn-primary" :loading="submitting" :disabled="submitting" @click="submit">创建任务</button>
</view>
</view>
</template>

<script>
import config from '@/config.js'
import { getChildren, createTask } from '../../utils/api.js'

export default {
data() {
return {
        form: {
          title: '',
          description: '',
          memberIds: [],
          points: 2,
          category: '',
          minigameCode: '',
          deadline: null,
          repeatType: 'none',
          needReview: false,
          duration: null,
          actionType: '',
          actionConfig: '',
          requireInput: false,
          startRequired: false
        },
        children: [],
        selectedChildIds: [],
        categories: ['学习类', '生活类', '运动类', '小游戏类', '其他'],
        miniGames: [],
        selectedMinigame: null,
repeatTypes: [
{ value: 'none', label: '不重复' },
{ value: 'daily', label: '每天' },
{ value: 'weekly', label: '每周' },
{ value: 'every_other_day', label: '隔天' },
{ value: 'monthly', label: '每月' }
],
actionTypes: [
{ value: '', label: '无（手动完成）' },
{ value: 'minigame', label: '小游戏' },
{ value: 'focus', label: '专注训练' },
{ value: 'survey', label: '问卷/测评' },
{ value: 'article', label: '文章阅读' },
{ value: 'activity', label: '活动报名' },
{ value: 'cart', label: '购物（加购）' },
{ value: 'order', label: '购物（支付/收货）' }
],
dateTimeRange: [[], [], [], [], []],
dateTimeIndex: [0, 0, 0, 0, 0],
deadlineText: '',
submitting: false
}
},
computed: {
repeatTypeLabel() {
const found = this.repeatTypes.find(r => r.value === this.form.repeatType)
return found ? found.label : ''
},
actionTypeLabel() {
const found = this.actionTypes.find(a => a.value === this.form.actionType)
return found ? found.label : ''
}
},
  onLoad(options) {
    this.loadChildren(options.memberId)
    this.loadMiniGames()
    this.initDateTimePicker()
  },
methods: {
    async loadChildren(preselectedChildId) {
      try {
        const res = await getChildren()
        this.children = res.data || []
        // 如果有 preselect memberId，自动选中该孩子
        if (preselectedChildId && this.children.length > 0) {
          const matched = this.children.find(c => String(c.id) === String(preselectedChildId))
          if (matched) {
            const idNum = Number(matched.id)
            if (!this.form.memberIds.includes(idNum)) {
              this.form.memberIds.push(idNum)
              this.selectedChildIds.push(String(idNum))
            }
          }
        }
      } catch (e) {
        console.error(e)
      }
    },
    async loadMiniGames() {
      try {
        const res = await uni.request({
          url: config.api('/api/tasks/minigame-options'),
          method: 'POST',
          header: {
            'Authorization': `Bearer ${uni.getStorageSync('token')}`
          }
        })
        if (res.data && res.data.code === 200) {
          this.miniGames = res.data.data || []
        }
      } catch (e) {
        console.error(e)
      }
    },
initDateTimePicker() {
// 初始化日期时间选择器
const now = new Date()
const year = now.getFullYear()
const month = now.getMonth() + 1
const day = now.getDate()
const hour = now.getHours()
const minute = now.getMinutes()

// 年（当前年份+未来2年）
const years = []
for (let i = year; i <= year + 2; i++) {
years.push(i + '年')
}

// 月
const months = []
for (let i = 1; i <= 12; i++) {
months.push(i + '月')
}

// 日
const days = []
const daysInMonth = new Date(year, month, 0).getDate()
for (let i = 1; i <= daysInMonth; i++) {
days.push(i + '日')
}

// 时
const hours = []
for (let i = 0; i < 24; i++) {
hours.push(i.toString().padStart(2, '0') + '时')
}

// 分
const minutes = []
for (let i = 0; i < 60; i += 5) {
minutes.push(i.toString().padStart(2, '0') + '分')
}

this.dateTimeRange = [years, months, days, hours, minutes]
// 默认选中当前日期时间
this.dateTimeIndex = [0, month - 1, day - 1, hour, Math.floor(minute / 5)]
},
onChildrenChange(e) {
this.selectedChildIds = e.detail.value
this.form.memberIds = e.detail.value.map(Number)
},
    onCategoryChange(e) {
      this.form.category = this.categories[e.detail.value]
      // 清空小游戏选择
      if (this.form.category !== '小游戏类') {
        this.form.minigameCode = ''
        this.selectedMinigame = null
      }
    },
    onMinigameChange(e) {
      this.selectedMinigame = this.miniGames[e.detail.value]
      this.form.minigameCode = this.selectedMinigame.gameCode
      // 自动填充任务名称
      if (!this.form.title) {
        this.form.title = this.selectedMinigame.gameName
      }
      // 自动填充积分
      if (this.selectedMinigame.defaultPoints) {
        this.form.points = this.selectedMinigame.defaultPoints
      }
    },
onDateTimeChange(e) {
const vals = e.detail.value
this.dateTimeIndex = vals

const now = new Date()
const year = now.getFullYear() + vals[0]
const month = vals[1] + 1
const day = vals[2] + 1
const hour = vals[3]
const minute = vals[4] * 5

this.deadlineText = `${year}年${month}月${day}日 ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
this.form.deadline = new Date(year, month - 1, day, hour, minute)
},
onColumnChange(e) {
const column = e.detail.column
this.$set(this.dateTimeIndex, column, e.detail.value)
// 年、月变化时更新当月天数（含闰年处理）
if (column === 0 || column === 1) {
const now = new Date()
const year = now.getFullYear() + this.dateTimeIndex[0]
const month = this.dateTimeIndex[1] + 1
const daysInMonth = new Date(year, month, 0).getDate()
const days = []
for (let i = 1; i <= daysInMonth; i++) {
days.push(i + '日')
}
this.$set(this.dateTimeRange, 2, days)
// 若选中的日超出新月天数，回退到最后一天
if (this.dateTimeIndex[2] >= daysInMonth) {
this.$set(this.dateTimeIndex, 2, daysInMonth - 1)
}
}
},
onRepeatChange(e) {
const selected = this.repeatTypes[e.detail.value]
this.form.repeatType = selected.value
},
onNeedReviewChange(e) {
this.form.needReview = e.detail.value
},
onActionTypeChange(e) {
const selected = this.actionTypes[e.detail.value]
this.form.actionType = selected.value
if (selected.value !== 'cart' && selected.value !== 'order') {
this.form.actionConfig = ''
}
},
onStartRequiredChange(e) {
this.form.startRequired = e.detail.value
},
onRequireInputChange(e) {
this.form.requireInput = e.detail.value
},
    async submit() {
      if (this.submitting) return
      if (!this.form.title) {
        uni.showToast({ title: '请输入任务名称', icon: 'none' })
        return
      }
      if (this.form.memberIds.length === 0) {
        uni.showToast({ title: '请选择至少一个孩子', icon: 'none' })
        return
      }
      if (!this.form.deadline) {
        uni.showToast({ title: '请选择截止时间', icon: 'none' })
        return
      }
      // 小游戏类必须选择具体游戏
      if (this.form.category === '小游戏类' && !this.form.minigameCode) {
        uni.showToast({ title: '请选择具体小游戏', icon: 'none' })
        return
      }

      this.submitting = true
      uni.showLoading({ title: '创建任务中...' })
      const taskData = {
        title: this.form.title,
        description: this.form.description,
        points: parseInt(this.form.points) || 2,
        category: this.form.category || '其他',
        minigameCode: this.form.minigameCode,
        deadline: this.form.deadline.toISOString(),
        repeatType: this.form.repeatType,
        frequency: this.form.repeatType,
        needReview: this.form.needReview ? 1 : 0,
        duration: parseInt(this.form.duration) || 0,
        // TASK-SYS-248: 行为调度中心字段
        actionType: this.form.actionType || '',
        actionConfig: this.form.actionConfig || '',
        requireInput: this.form.requireInput ? 1 : 0,
        startRequired: this.form.startRequired ? 1 : 0
      }

      let successCount = 0
      let failCount = 0
      try {
        for (const memberId of this.form.memberIds) {
          try {
            await createTask({ ...taskData, memberId })
            successCount++
          } catch (e) {
            failCount++
          }
        }
      } finally {
        this.submitting = false
        uni.hideLoading()
      }

      if (failCount === 0) {
        uni.showToast({ title: `已为${successCount}个孩子创建任务`, icon: 'success' })
        setTimeout(() => uni.navigateBack(), 1500)
      } else if (successCount > 0) {
        uni.showToast({ title: `${successCount}个成功，${failCount}个失败`, icon: 'none' })
      } else {
        uni.showToast({ title: '创建失败', icon: 'none' })
      }
    }
}
}
</script>

<style scoped>
.container { padding: 30rpx; }
.form-container { background: #fff; border-radius: 20rpx; padding: 30rpx; }
.form-item { margin-bottom: 30rpx; }
.label { display: block; font-size: 28rpx; color: #333; margin-bottom: 10rpx; }
.input, .textarea { border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; font-size: 28rpx; width: 100%; box-sizing: border-box; }
.input { height: 96rpx; }
.textarea { height: 150rpx; }
.picker { border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; font-size: 28rpx; color: #666; }
.form-hint { display: block; font-size: 22rpx; color: #999; margin-top: 8rpx; }
.child-checkbox { display: flex; align-items: center; padding: 16rpx 0; border-bottom: 1rpx solid #f0f0f0; }
.child-checkbox:last-child { border-bottom: none; }
.child-name { font-size: 28rpx; color: #333; margin-left: 10rpx; }
.btn-primary { background: #F97316; color: #fff; border-radius: 20rpx; margin-top: 40rpx; }
</style>