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

<template>
<view class="container" :style="{ '--font-scale': fontScale }">
<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>

<!-- TASK-SYS-248: 前置/后置任务（流程任务） -->
<view class="form-item form-item--flow">
  <text class="label label--pre">前置任务（可选，多选）</text>
  <text class="form-hint form-hint--tight">选择本任务执行前必须完成的任务</text>
  <view class="task-picker-scroll">
    <view v-for="task in prerequisiteTasks" :key="task.id" class="task-checkbox-row" @click="togglePrerequisite(task.id)">
      <view class="task-checkbox" :class="{ checked: form.prerequisiteTaskIds.indexOf(task.id) > -1 }">
        <text v-if="form.prerequisiteTaskIds.indexOf(task.id) > -1" class="check-icon">✓</text>
      </view>
      <text class="task-checkbox-label">{{ task.title }}</text>
    </view>
    <text v-if="prerequisiteTaskList.length === 0" class="form-hint">暂无可用任务</text>
  </view>
</view>

<view class="form-item">
  <text class="label label--post">后置任务（可选，多选）</text>
  <text class="form-hint form-hint--tight">选择本任务完成后自动解锁的任务（任意一个完成即可）</text>
  <view class="task-picker-scroll">
    <view v-for="task in successorTasks" :key="task.id" class="task-checkbox-row" @click="toggleSuccessor(task.id)">
      <view class="task-checkbox" :class="{ checked: form.successorTaskIds.indexOf(task.id) > -1 }">
        <text v-if="form.successorTaskIds.indexOf(task.id) > -1" class="check-icon">✓</text>
      </view>
      <text class="task-checkbox-label">{{ task.title }}</text>
    </view>
    <text v-if="successorTaskList.length === 0" class="form-hint">暂无可用任务</text>
  </view>
</view>

<view class="form-item" v-if="form.prerequisiteTaskIds.length > 0 || form.successorTaskIds.length > 0">
  <text class="label">流程任务</text>
  <text class="flow-hint">自动标记为流程任务</text>
  <text class="form-hint">有前置或后置任务时，本任务将自动保存为流程任务</text>
</view>
</view>
</view>
</template>

<script>
import config from '@/config.js'
import { getChildren, createTask, getTaskListForPicker } from '../../utils/api.js'
import fontScaleMixin from '@/mixins/font-scale.js'

export default {
  mixins: [fontScaleMixin],
data() {
return {
        form: {
          title: '',
          description: '',
          memberIds: [],
          points: 2,
          category: '',
          minigameCode: '',
          deadline: null,
          repeatType: 'none',
          needReview: false,
          duration: null,
          actionType: '',
          actionConfig: '',
          requireInput: false,
          startRequired: false,
          prerequisiteTaskIds: [],
          successorTaskIds: []
        },
        children: [],
        selectedChildIds: [],
        categories: ['学习类', '生活类', '运动类', '小游戏类', '其他'],
        miniGames: [],
        selectedMinigame: null,
        prerequisiteTaskList: [],
        successorTaskList: [],
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: '购物（支付/收货）' },
  { value: 'diet', label: '饮食打卡' },
  { value: 'sleep', label: '睡眠打卡' },
  { value: 'exercise', 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 loadRelatedTasks() {
    try {
      var res = await getTaskListForPicker({
        memberId: this.form.memberIds.length > 0 ? this.form.memberIds[0] : null,
        titleKeyword: this.form.category
      })
      if (res && res.code === 200) {
        // 过滤掉已经在表单中选择的任务 ID（排除当前正在创建的任务本身）
        const allTasks = res.data || []
        this.prerequisiteTaskList = allTasks.filter(t => !this.form.prerequisiteTaskIds.includes(t.id))
        this.successorTaskList = allTasks.filter(t => !this.form.successorTaskIds.includes(t.id))
      }
    } catch (e) {
      console.error('加载关联任务列表失败:', e)
    }
  },
  togglePrerequisite(taskId) {
    if (this.form.prerequisiteTaskIds.includes(taskId)) {
      this.form.prerequisiteTaskIds = this.form.prerequisiteTaskIds.filter(id => id !== taskId)
    } else {
      this.form.prerequisiteTaskIds.push(taskId)
    }
  },
  toggleSuccessor(taskId) {
    if (this.form.successorTaskIds.includes(taskId)) {
      this.form.successorTaskIds = this.form.successorTaskIds.filter(id => id !== taskId)
    } else {
      this.form.successorTaskIds.push(taskId)
    }
  },
    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,
        prerequisiteTaskId: this.form.prerequisiteTaskIds.length > 0 ? this.form.prerequisiteTaskIds[0] : null,
        successorTaskIds: this.form.successorTaskIds.length > 0 ? this.form.successorTaskIds : null
      }

      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 lang="scss">
.container { padding: $uni-space-lg; }
.form-container { background: $app-surface; border-radius: 24rpx; padding: $uni-space-lg; }
.form-item { margin-bottom: $uni-space-lg; }
.form-item--flow { margin-top: 20rpx; padding-top: 20rpx; border-top: 1rpx solid $facade-hairline-2; }
.label { display: block; font-size: calc(28rpx * var(--font-scale, 1)); color: $facade-text-strong; margin-bottom: 10rpx; }
.label--pre { color: $brand-primary; }
.label--post { color: $dim-wisdom; }
.task-picker-scroll { max-height: 200rpx; overflow-y: auto; }
.flow-hint { font-size: calc(24rpx * var(--font-scale, 1)); color: $brand-primary; }
.input, .textarea { border: 1rpx solid $facade-border-soft; border-radius: 8rpx; font-size: calc(28rpx * var(--font-scale, 1)); width: 100%; box-sizing: border-box; }
/* 输入框高度统一 108rpx；line-height 与高度一致，保证微信 input 文字垂直居中 */
.input { height: 108rpx; line-height: 108rpx; padding: 0 24rpx; }
.textarea { height: 150rpx; line-height: 1.5; padding: 20rpx 24rpx; }
.picker { border: 1rpx solid $facade-border-soft; border-radius: 8rpx; font-size: calc(28rpx * var(--font-scale, 1)); color: $facade-text-body; box-sizing: border-box; height: 108rpx; display: flex; align-items: center; padding: 0 24rpx; }
.form-hint { display: block; font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-muted; margin-top: 8rpx; }
.form-hint--tight { margin-bottom: 10rpx; }
.child-checkbox { display: flex; align-items: center; padding: 16rpx 0; border-bottom: 1rpx solid $facade-fill; }
.child-checkbox:last-child { border-bottom: none; }
.child-name { font-size: calc(28rpx * var(--font-scale, 1)); color: $facade-text-strong; margin-left: 10rpx; }
/* 创建按钮：显式 height + line-height 同高，微信 button 文字才能上下居中 */
.btn-primary { background: $brand-primary; color: $app-surface; border-radius: 24rpx; margin-top: 40rpx; width: 100%; height: 96rpx; line-height: 96rpx; font-size: calc(32rpx * var(--font-scale, 1)); border: none; padding: 0; }
/* 清除微信 button 组件默认的 ::after 1px 边框（否则按钮文字与边框视觉不居中） */
.btn-primary::after { border: none; }
</style>