cfc/zxyj-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>
        <picker :range="children" range-key="nickname" @change="onChildChange">
          <view class="picker">
            {{ selectedChild ? selectedChild.nickname : '请选择孩子' }}
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="label">积分</text>
        <input class="input" type="number" v-model="form.points" placeholder="请输入积分" />
      </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">
        <text class="label">需要审核</text>
        <switch :checked="form.needReview" @change="form.needReview = !form.needReview" />
      </view>
      
      <button class="btn-primary" @click="submit">创建任务</button>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      form: {
        title: '',
        description: '',
        childId: '',
        points: 2,
        category: '',
        needReview: false
      },
      children: [],
      selectedChild: null,
      categories: ['学习', '生活', '运动', '其他']
    }
  },
  onLoad() {
    this.loadChildren()
  },
  methods: {
    async loadChildren() {
      try {
        const res = await getChildren()
        this.children = res.data || []
      } catch (e) {
        console.error(e)
      }
    },
    onChildChange(e) {
      this.selectedChild = this.children[e.detail.value]
      this.form.childId = this.selectedChild.id
    },
    onCategoryChange(e) {
      this.form.category = this.categories[e.detail.value]
    },
    async submit() {
      if (!this.form.title) {
        uni.showToast({ title: '请输入任务名称', icon: 'none' })
        return
      }
      if (!this.form.childId) {
        uni.showToast({ title: '请选择孩子', icon: 'none' })
        return
      }
      
      try {
        await createTask({
          title: this.form.title,
          description: this.form.description,
          childId: this.form.childId,
          points: parseInt(this.form.points) || 2,
          category: this.form.category || '其他',
          needReview: this.form.needReview ? 1 : 0
        })
        uni.showToast({ title: '创建成功', icon: 'success' })
        setTimeout(() => uni.navigateBack(), 1500)
      } catch (e) {
        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; }
.textarea { height: 150rpx; }
.picker { border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; font-size: 28rpx; color: #666; }
.btn-primary { background: #FF6B6B; color: #fff; border-radius: 20rpx; margin-top: 40rpx; }
</style>