cfc/cfc-frontend/pages/wishes/create.vue

<template>
  <view class="container">
    <view class="form-card">
      <view class="form-title">添加心愿</view>
      
      <!-- 心愿名称 -->
      <view class="form-item">
        <view class="form-label">心愿名称 <text class="required">*</text></view>
        <input 
          v-model="form.title" 
          placeholder="请输入心愿名称"
          maxlength="50"
        />
      </view>
      
      <!-- 分类 -->
      <view class="form-item">
        <view class="form-label">分类</view>
        <view class="category-list">
          <view 
            v-for="cat in categories" 
            :key="cat.value"
            class="category-item"
            :class="{ active: form.category === cat.value }"
            @click="form.category = cat.value"
          >
            {{ cat.label }}
          </view>
        </view>
      </view>
      
      <!-- 详细描述 -->
      <view class="form-item">
        <view class="form-label">详细描述</view>
        <textarea 
          v-model="form.description" 
          placeholder="描述一下这个心愿（可选）"
          maxlength="200"
        />
      </view>
      
      <!-- 提示 -->
      <view class="form-tip">
        <text class="tip-icon">💡</text>
        <text class="tip-text">创建心愿后，家长会为它设定所需积分</text>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <button class="btn-submit" @click="submitForm" :loading="submitting">
      提交心愿
    </button>
  </view>
</template>

<script>
import { createWish } from '../../utils/api.js'

export default {
  data() {
    return {
      form: {
        title: '',
        description: '',
        category: ''
      },
      categories: [
        { label: '玩具', value: '玩具' },
        { label: '图书', value: '图书' },
        { label: '美食', value: '美食' },
        { label: '娱乐', value: '娱乐' },
        { label: '活动', value: '活动' },
        { label: '其他', value: '其他' }
      ],
      submitting: false
    }
  },
  methods: {
    async submitForm() {
      // 验证
      if (!this.form.title || !this.form.title.trim()) {
        uni.showToast({ title: '请输入心愿名称', icon: 'none' })
        return
      }
      
      this.submitting = true
      try {
        await createWish({
          title: this.form.title.trim(),
          description: this.form.description,
          category: this.form.category
        })
        
        uni.showToast({ title: '提交成功', icon: 'success' })
        
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (e) {
        uni.showToast({ title: e.message || '提交失败', icon: 'none' })
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

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

.form-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
}

.form-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 40rpx;
  text-align: center;
}

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

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

.required {
  color: #F97316;
}

.form-item input,
.form-item textarea {
  width: 100%;
  background: #f5f5f5;
  border-radius: 15rpx;
  padding: 20rpx;
  font-size: 28rpx;
  border: none;
}

.form-item textarea {
  min-height: 150rpx;
}

/* 分类选择 */
.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.category-item {
  padding: 15rpx 30rpx;
  background: #f5f5f5;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
}

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

/* 提示 */
.form-tip {
  display: flex;
  align-items: center;
  background: #FFF5F5;
  padding: 20rpx;
  border-radius: 15rpx;
  margin-top: 20rpx;
}

.tip-icon {
  font-size: 32rpx;
  margin-right: 15rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #666;
  flex: 1;
}

/* 提交按钮 */
.btn-submit {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 32rpx;
  padding: 24rpx;
  border-radius: 50rpx;
  margin-top: 40rpx;
}
</style>