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

<template>
  <view class="container">
    <view class="form-card">
      <view class="form-title">{{ isNew ? '创建活动' : '编辑活动' }}</view>

      <!-- 活动标题 -->
      <view class="form-item">
        <text class="form-label">活动标题 *</text>
        <input class="form-input" v-model="form.title" placeholder="请输入活动标题" maxlength="50" />
      </view>

      <!-- 活动维度 -->
      <view class="form-item">
        <text class="form-label">所属维度 *</text>
        <picker class="form-picker" :value="dimIdx" :range="dimensionOptions" range-key="label" @change="onDimChange">
          <text class="picker-text">{{ form.dimensionCode ? dimLabel(form.dimensionCode) : '请选择维度' }}</text>
        </picker>
      </view>

      <!-- 活动类型 -->
      <view class="form-item">
        <text class="form-label">活动类型 *</text>
        <picker class="form-picker" :value="typeIdx" :range="typeOptions" range-key="label" @change="onTypeChange">
          <text class="picker-text">{{ form.activityType ? typeLabel(form.activityType) : '请选择类型' }}</text>
        </picker>
      </view>

      <!-- 开始时间 -->
      <view class="form-item">
        <text class="form-label">开始时间 *</text>
        <picker class="form-picker" mode="date" :value="datePart" @change="onStartDateChange">
          <text class="picker-text">{{ datePart || '选择日期' }}</text>
        </picker>
        <picker class="form-picker" mode="time" :value="timePart" @change="onStartTimeChange" style="margin-top: 16rpx;">
          <text class="picker-text">{{ timePart || '选择时间' }}</text>
        </picker>
      </view>

      <!-- 结束时间 -->
      <view class="form-item">
        <text class="form-label">结束时间</text>
        <picker class="form-picker" mode="date" :value="endDatePart" @change="onEndDateChange">
          <text class="picker-text">{{ endDatePart || '选择日期（可选）' }}</text>
        </picker>
        <picker class="form-picker" mode="time" :value="endTimePart" @change="onEndTimeChange" style="margin-top: 16rpx;">
          <text class="picker-text">{{ endTimePart || '选择时间（可选）' }}</text>
        </picker>
      </view>

      <!-- 报名截止时间 -->
      <view class="form-item">
        <text class="form-label">报名截止时间</text>
        <picker class="form-picker" mode="date" :value="deadlineDatePart" @change="onDeadlineDateChange">
          <text class="picker-text">{{ deadlineDatePart || '选择日期（可选）' }}</text>
        </picker>
        <picker class="form-picker" mode="time" :value="deadlineTimePart" @change="onDeadlineTimeChange" style="margin-top: 16rpx;">
          <text class="picker-text">{{ deadlineTimePart || '选择时间（可选）' }}</text>
        </picker>
      </view>

      <!-- 活动地点 -->
      <view class="form-item">
        <text class="form-label">活动地点</text>
        <input class="form-input" v-model="form.location" placeholder="请输入活动地点" maxlength="100" />
      </view>

      <!-- 人数 + 价格 -->
      <view class="form-item-row">
        <view class="form-item half">
          <text class="form-label">最大人数</text>
          <input class="form-input" type="number" v-model="maxParticipantsStr" placeholder="0=不限" />
        </view>
        <view class="form-item half">
          <text class="form-label">价格（元）</text>
          <input class="form-input" type="digit" v-model="priceYuan" placeholder="0=免费" />
        </view>
      </view>

      <!-- 会员价 -->
      <view class="form-item">
        <text class="form-label">会员价（元）</text>
        <input class="form-input" type="digit" v-model="memberPriceYuan" placeholder="留空等于普通价" />
      </view>

      <!-- 封面图片 -->
      <view class="form-item">
        <text class="form-label">封面图片</text>
        <input class="form-input" v-model="form.coverImage" placeholder="输入图片URL（可选）" />
        <view class="cover-preview" v-if="form.coverImage">
          <image class="preview-img" :src="form.coverImage" mode="aspectFill" @error="onImgError" />
        </view>
      </view>

      <!-- 活动描述 -->
      <view class="form-item">
        <text class="form-label">活动描述</text>
        <textarea class="form-textarea" v-model="form.description" placeholder="请输入活动详细介绍" maxlength="500"
          auto-height />
      </view>

      <!-- 操作按钮 -->
      <view class="form-actions">
        <view class="btn-save" @click="handleSave">
          <text>保存为草稿</text>
        </view>
        <view class="btn-publish" @click="handlePublish">
          <text>保存并发布</text>
        </view>
      </view>
    </view>

    <view class="loading" v-if="loading">
      <view class="loading-spinner"></view>
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
import { adminCreateActivity, adminUpdateActivity, adminPublishActivity, getActivityDetail } from '../../utils/api.js'
import config from '../../config.js'

var BASE_URL = config.api('')

export default {
  data() {
    return {
      isNew: true,
      activityId: null,
      loading: false,
      childId: '',
      form: {
        title: '',
        description: '',
        coverImage: '',
        dimensionCode: '',
        activityType: '',
        status: 'draft',
        startTime: null,
        endTime: null,
        registrationDeadline: null,
        location: '',
        maxParticipants: 0,
        price: 0,
        memberPrice: 0,
        visibility: 'public',
        requireRegistration: 1,
        requireCheckinReview: 0,
        checkinPoints: 0
      },
      priceYuan: '0',
      memberPriceYuan: '',
      maxParticipantsStr: '0',
      datePart: '',
      timePart: '',
      endDatePart: '',
      endTimePart: '',
      deadlineDatePart: '',
      deadlineTimePart: '',
      dimIdx: 0,
      typeIdx: 0,
      dimensionOptions: [
        { key: 'body', label: '身 · 主动健康' },
        { key: 'mind', label: '心 · 情感丰盈' },
        { key: 'wisdom', label: '智 · 赋能未来' },
        { key: 'action', label: '行 · 知行合一' },
        { key: 'wealth', label: '富 · 物质精神' }
      ],
      typeOptions: [
        { key: 'offline', label: '线下活动' },
        { key: 'online', label: '线上活动' },
        { key: 'campaign', label: '营销活动' }
      ]
    }
  },
  onLoad(options) {
    if (options.id) {
      this.activityId = parseInt(options.id)
      this.isNew = false
      uni.setNavigationBarTitle({ title: '编辑活动' })
      this.loadDetail()
    } else {
      uni.setNavigationBarTitle({ title: '创建活动' })
    }
  },
  methods: {
    loadDetail() {
      var self = this
      self.loading = true
      getActivityDetail(self.activityId).then(function(res) {
        self.loading = false
        if (res && res.code === 200 && res.data) {
          var d = res.data
          self.form.title = d.title || ''
          self.form.description = d.description || ''
          self.form.coverImage = d.coverImage || ''
          self.form.dimensionCode = d.dimensionCode || ''
          self.form.activityType = d.activityType || ''
          self.form.location = d.location || ''
          self.form.maxParticipants = d.maxParticipants || 0
          self.form.price = d.price || 0
          self.form.memberPrice = d.memberPrice || 0
          self.form.status = d.status || 'draft'
          self.form.visibility = d.visibility || 'public'
          self.maxParticipantsStr = String(self.form.maxParticipants)
          self.priceYuan = self.form.price ? (self.form.price / 100).toString() : '0'
          self.memberPriceYuan = self.form.memberPrice && self.form.memberPrice > 0 ? (self.form.memberPrice / 100).toString() : ''
          if (d.startTime) {
            var sd = new Date(d.startTime.replace ? d.startTime.replace(/-/g, '/') : d.startTime)
            self.datePart = self.fmtDate(sd)
            self.timePart = self.fmtTime(sd)
            self.form.startTime = sd.toISOString()
          }
          if (d.endTime) {
            var ed = new Date(d.endTime.replace ? d.endTime.replace(/-/g, '/') : d.endTime)
            self.endDatePart = self.fmtDate(ed)
            self.endTimePart = self.fmtTime(ed)
            self.form.endTime = ed.toISOString()
          }
          if (d.registrationDeadline) {
            var dl = new Date(d.registrationDeadline.replace ? d.registrationDeadline.replace(/-/g, '/') : d.registrationDeadline)
            self.deadlineDatePart = self.fmtDate(dl)
            self.deadlineTimePart = self.fmtTime(dl)
            self.form.registrationDeadline = dl.toISOString()
          }
          // sync pickers
          for (var i = 0; i < self.dimensionOptions.length; i++) {
            if (self.dimensionOptions[i].key === self.form.dimensionCode) self.dimIdx = i
          }
          for (var j = 0; j < self.typeOptions.length; j++) {
            if (self.typeOptions[j].key === self.form.activityType) self.typeIdx = j
          }
        }
      }).catch(function() { self.loading = false })
    },
    onDimChange(e) {
      this.dimIdx = e.detail.value
      this.form.dimensionCode = this.dimensionOptions[this.dimIdx].key
    },
    onTypeChange(e) {
      this.typeIdx = e.detail.value
      this.form.activityType = this.typeOptions[this.typeIdx].key
    },
    onStartDateChange(e) {
      this.datePart = e.detail.value
      this.syncStartTime()
    },
    onStartTimeChange(e) {
      this.timePart = e.detail.value
      this.syncStartTime()
    },
    onEndDateChange(e) {
      this.endDatePart = e.detail.value
      this.syncEndTime()
    },
    onEndTimeChange(e) {
      this.endTimePart = e.detail.value
      this.syncEndTime()
    },
    onDeadlineDateChange(e) {
      this.deadlineDatePart = e.detail.value
      this.syncDeadline()
    },
    onDeadlineTimeChange(e) {
      this.deadlineTimePart = e.detail.value
      this.syncDeadline()
    },
    syncStartTime() {
      if (this.datePart && this.timePart) {
        this.form.startTime = this.datePart + 'T' + this.timePart + ':00'
      }
    },
    syncEndTime() {
      if (this.endDatePart && this.endTimePart) {
        this.form.endTime = this.endDatePart + 'T' + this.endTimePart + ':00'
      } else {
        this.form.endTime = null
      }
    },
    syncDeadline() {
      if (this.deadlineDatePart && this.deadlineTimePart) {
        this.form.registrationDeadline = this.deadlineDatePart + 'T' + this.deadlineTimePart + ':00'
      } else {
        this.form.registrationDeadline = null
      }
    },
    chooseImage() {
      var self = this
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        success: function(res) {
          self.uploadCover(res.tempFilePaths[0])
        }
      })
    },
    uploadCover(filePath) {
      var self = this
      uni.uploadFile({
        url: BASE_URL + '/api/admin/articles/upload/image',
        filePath: filePath,
        name: 'file',
        header: { 'Authorization': 'Bearer ' + (uni.getStorageSync('token') || '') },
        success: function(res) {
          try {
            var data = JSON.parse(res.data)
            if (data.code === 200 && data.data) {
              self.form.coverImage = data.data
            } else {
              uni.showToast({ title: '上传失败', icon: 'none' })
            }
          } catch (e) {
            uni.showToast({ title: '上传失败', icon: 'none' })
          }
        },
        fail: function() {
          uni.showToast({ title: '上传失败', icon: 'none' })
        }
      })
    },
    onImgError() {
      this.form.coverImage = ''
    },
    validate() {
      if (!this.form.title) {
        uni.showToast({ title: '请输入活动标题', icon: 'none' })
        return false
      }
      if (!this.form.dimensionCode) {
        uni.showToast({ title: '请选择所属维度', icon: 'none' })
        return false
      }
      if (!this.form.activityType) {
        uni.showToast({ title: '请选择活动类型', icon: 'none' })
        return false
      }
      if (!this.datePart || !this.timePart) {
        uni.showToast({ title: '请选择开始时间', icon: 'none' })
        return false
      }
      return true
    },
    buildPayload() {
      var payload = Object.assign({}, this.form)
      payload.maxParticipants = parseInt(this.maxParticipantsStr) || 0
      payload.price = Math.round((parseFloat(this.priceYuan) || 0) * 100)
      payload.memberPrice = this.memberPriceYuan ? Math.round(parseFloat(this.memberPriceYuan) * 100) : payload.price
      if (this.activityId) payload.id = this.activityId
      return payload
    },
    handleSave() {
      if (!this.validate()) return
      this.submit(false)
    },
    handlePublish() {
      if (!this.validate()) return
      this.submit(true)
    },
    submit(publishAfter) {
      var self = this
      self.loading = true
      var payload = self.buildPayload()

      var doPublish = function(id) {
        adminPublishActivity(id).then(function(r) {
          self.loading = false
          if (r && r.code === 200) {
            uni.showToast({ title: '已发布', icon: 'success' })
            setTimeout(function() {
              uni.navigateBack()
            }, 1200)
          } else {
            uni.showToast({ title: (r && r.message) || '发布失败', icon: 'none' })
          }
        }).catch(function() {
          self.loading = false
          uni.showToast({ title: '发布失败', icon: 'none' })
        })
      }

      if (self.isNew) {
        adminCreateActivity(payload).then(function(res) {
          if (res && res.code === 200) {
            var newId = res.data.id || res.data
            if (publishAfter) {
              doPublish(newId)
            } else {
              self.loading = false
              uni.showToast({ title: '已保存草稿', icon: 'success' })
              setTimeout(function() { uni.navigateBack() }, 1200)
            }
          } else {
            self.loading = false
            uni.showToast({ title: (res && res.message) || '保存失败', icon: 'none' })
          }
        }).catch(function() {
          self.loading = false
          uni.showToast({ title: '网络异常', icon: 'none' })
        })
      } else {
        adminUpdateActivity(payload).then(function(res) {
          if (res && res.code === 200) {
            if (publishAfter && self.form.status === 'draft') {
              doPublish(self.activityId)
            } else {
              self.loading = false
              uni.showToast({ title: '已保存', icon: 'success' })
              setTimeout(function() { uni.navigateBack() }, 1200)
            }
          } else {
            self.loading = false
            uni.showToast({ title: (res && res.message) || '保存失败', icon: 'none' })
          }
        }).catch(function() {
          self.loading = false
          uni.showToast({ title: '网络异常', icon: 'none' })
        })
      }
    },
    dimLabel(key) {
      for (var i = 0; i < this.dimensionOptions.length; i++) {
        if (this.dimensionOptions[i].key === key) return this.dimensionOptions[i].label
      }
      return '请选择维度'
    },
    typeLabel(key) {
      for (var i = 0; i < this.typeOptions.length; i++) {
        if (this.typeOptions[i].key === key) return this.typeOptions[i].label
      }
      return '请选择类型'
    },
    fmtDate(d) {
      var y = d.getFullYear()
      var m = ('0' + (d.getMonth() + 1)).slice(-2)
      var day = ('0' + d.getDate()).slice(-2)
      return y + '-' + m + '-' + day
    },
    fmtTime(d) {
      var h = ('0' + d.getHours()).slice(-2)
      var mi = ('0' + d.getMinutes()).slice(-2)
      return h + ':' + mi
    }
  }
}
</script>

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

.form-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx 28rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.form-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1E293B;
  margin-bottom: 24rpx;
}

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

.form-item-row {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
  margin-bottom: 28rpx;
}

.form-item.half {
  flex: 1;
}

.form-label {
  font-size: 26rpx;
  color: #475569;
  font-weight: 600;
  margin-bottom: 12rpx;
  display: block;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #E2E8F0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #1E293B;
  box-sizing: border-box;
}

.form-picker {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #E2E8F0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #1E293B;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.picker-text {
  font-size: 28rpx;
  color: #1E293B;
}

.form-textarea {
  width: 100%;
  min-height: 160rpx;
  border: 1rpx solid #E2E8F0;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  font-size: 28rpx;
  color: #1E293B;
  box-sizing: border-box;
}

.cover-upload {
  width: 100%;
  height: 320rpx;
  border: 2rpx dashed #CBD5E1;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview-img {
  width: 100%;
  height: 100%;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-icon {
  font-size: 64rpx;
  color: #94A3B8;
}

.upload-text {
  font-size: 24rpx;
  color: #94A3B8;
  margin-top: 8rpx;
}

.form-actions {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
  margin-top: 40rpx;
}

.btn-save,
.btn-publish {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: 600;
}

.btn-save {
  background: #fff;
  color: #F97316;
  border: 2rpx solid #F97316;
}

.btn-publish {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #FED7AA;
  border-top: 4rpx solid #F97316;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16rpx;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>