cfc/cfc-frontend/pages/guide/packages/create.vue

<template>
  <view class="container" :style="{ '--font-scale': fontScale }">
    <view class="form">
      <view class="form-item">
        <text class="label">任务模板名称</text>
        <input class="input" v-model="form.name" placeholder="如：21天养成学习习惯" />
      </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>
        <input class="input" type="number" v-model="form.cycleDays" placeholder="如：21" />
      </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>
        <input class="input" type="digit" v-model="form.price" placeholder="0 表示免费" />
      </view>

      <view class="form-item">
        <text class="label">封面图</text>
        <view class="cover-upload" @click="chooseImage">
          <image v-if="form.coverImage" :src="form.coverImage" mode="aspectFill" class="cover-image"></image>
          <text v-else class="upload-icon">+</text>
        </view>
      </view>

      <view class="form-item">
        <text class="label">是否公开</text>
        <switch v-model="form.isPublic" :checked="form.isPublic" @change="onPublicChange" />
        <text class="switch-label">{{ form.isPublic ? '公开到市场' : '仅分享链接' }}</text>
      </view>

      <button class="btn-submit" :loading="submitting" :disabled="submitting" @click="submit">保存</button>
    </view>
  </view>
</template>

<script>
import { createPackage } from '@/utils/api.js'
import { pickImage } from '@/utils/image-picker.js'
import fontScaleMixin from '@/mixins/font-scale.js'

export default {
  mixins: [fontScaleMixin],
  data() {
    return {
      form: {
        name: '',
        description: '',
        cycleDays: 21,
        category: '',
        price: 0,
        isPublic: false,
        coverImage: ''
      },
      categories: ['学习', '习惯', '健康', '情绪', '其他'],
      submitting: false
    }
  },
  methods: {
    onCategoryChange(e) {
      this.form.category = this.categories[e.detail.value]
    },
    onPublicChange(e) {
      this.form.isPublic = e.detail.value
    },
    chooseImage() {
      pickImage({
        count: 1,
        success: (res) => {
          this.form.coverImage = res.tempFilePaths[0]
        }
      })
    },
    async submit() {
      if (this.submitting) return
      if (!this.form.name) {
        uni.showToast({ title: '请输入任务模板名称', icon: 'none' })
        return
      }
      if (!this.form.cycleDays) {
        uni.showToast({ title: '请输入周期天数', icon: 'none' })
        return
      }

      this.submitting = true
      uni.showLoading({ title: '保存中...' })
      try {
        await createPackage({
          ...this.form,
          isPublic: this.form.isPublic ? 1 : 0
        })
        uni.showToast({ title: '创建成功' })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (e) {
        uni.showToast({ title: '创建失败', icon: 'none' })
      } finally {
        this.submitting = false
        uni.hideLoading()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background: $facade-fill-2;
  padding: $uni-space-page;
}

.form {
  background: $app-surface;
  border-radius: 16rpx;
  padding: $uni-space-page;
}

.form-item {
  margin-bottom: $uni-space-lg;
}

.label {
  display: block;
  font-size: calc(28rpx * var(--font-scale, 1));
  color: $facade-text-strong;
  margin-bottom: 16rpx;
}

.input, .textarea {
  width: 100%;
  padding: 20rpx;
  background: $facade-fill-2;
  border-radius: 16rpx;
  font-size: calc(28rpx * var(--font-scale, 1));
}

.textarea {
  height: 160rpx;
}

.picker {
  padding: 20rpx;
  background: $facade-fill-2;
  border-radius: 16rpx;
  font-size: calc(28rpx * var(--font-scale, 1));
  color: $facade-text-strong;
}

.cover-upload {
  width: 200rpx;
  height: 200rpx;
  background: $facade-fill-2;
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-icon {
  font-size: calc(64rpx * var(--font-scale, 1));
  color: $facade-text-ghost;
}

.cover-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
}

.switch-label {
  margin-left: 20rpx;
  font-size: calc(26rpx * var(--font-scale, 1));
  color: $facade-text-body;
}

.btn-submit {
  background: $mat-green;
  color: $app-surface;
  border-radius: 24rpx;
  margin-top: 40rpx;
}
</style>