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

<template>
  <view class="container">
    <view class="form-card">
      <!-- 活动标题 -->
      <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="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="regDatePart" @change="onRegDateChange">
          <text class="picker-text">{{ regDatePart || '选择日期（不填=活动开始前）' }}</text>
        </picker>
        <picker class="form-picker" mode="time" :value="regTimePart" @change="onRegTimeChange" style="margin-top: 16rpx;">
          <text class="picker-text">{{ regTimePart || '选择时间' }}</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="childFeeYuan" placeholder="0=免费" />
        </view>
      </view>

      <view class="form-item-row">
        <view class="form-item half">
          <text class="form-label">孩子会员费（元）</text>
          <input class="form-input" type="digit" v-model="childMemberFeeYuan" placeholder="0=免费" />
        </view>
        <view class="form-item half">
          <text class="form-label">家长费用（元）</text>
          <input class="form-input" type="digit" v-model="parentFeeYuan" placeholder="0=免费" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">家长会员费（元）</text>
        <input class="form-input" type="digit" v-model="parentMemberFeeYuan" placeholder="0=免费" />
      </view>

      <!-- 封面图片 -->
      <view class="form-item">
        <text class="form-label">封面图片</text>
        <view class="cover-upload" @click="chooseImage">
          <image v-if="form.coverImage" class="preview-img" :src="getCoverUrl(form.coverImage)" mode="aspectFill" @click.stop />
          <view v-else class="upload-placeholder">
            <text class="upload-icon">📷</text>
            <text class="upload-text">点击上传封面图</text>
          </view>
        </view>
        <view class="cover-actions" v-if="form.coverImage">
          <text class="cover-action" @click="chooseImage">重新选择</text>
          <text class="cover-action-danger" @click="removeCover">移除</text>
        </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>{{ isAdmin ? '保存并发布' : '保存并提交审核' }}</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, submitActivityForReview, getActivityDetail } from '../../utils/api.js'
import config from '../../config.js'
import { parseDate } from '../../utils/format.js'
import { hasActivityManageRole } from '../../utils/activity-role.js'
import { pickImage } from '../../utils/image-picker.js'

var BASE_URL = config.api('')

export default {
  computed: {
    // 后台活动管理员可直接发布；服务商账号只能保存后提交审核
    isAdmin: function() {
      return hasActivityManageRole()
    }
  },
  data() {
    return {
      isNew: true,
      activityId: null,
      loading: false,
      memberId: '',
      form: {
        title: '',
        description: '',
        coverImage: '',
        dimensionCode: '',
        activityType: '',
        status: 'draft',
        startTime: null,
        endTime: null,
        registrationDeadline: null,
        location: '',
        maxParticipants: 0,
        childFee: 0,
        childMemberFee: 0,
        parentFee: 0,
        parentMemberFee: 0,
        visibility: 'public',
        requireRegistration: 1,
        requireCheckinReview: 0,
        checkinPoints: 0
      },
      childFeeYuan: '0',
      childMemberFeeYuan: '0',
      parentFeeYuan: '0',
      parentMemberFeeYuan: '0',
      maxParticipantsStr: '0',
      datePart: '',
      timePart: '',
      endDatePart: '',
      endTimePart: '',
      regDatePart: '',
      regTimePart: '',
      typeIdx: 0,
      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.childFee = d.childFee || 0
          self.form.childMemberFee = d.childMemberFee || 0
          self.form.parentFee = d.parentFee || 0
          self.form.parentMemberFee = d.parentMemberFee || 0
          self.form.status = d.status || 'draft'
          self.form.visibility = d.visibility || 'public'
          self.maxParticipantsStr = String(self.form.maxParticipants)
          self.childFeeYuan = self.form.childFee ? (self.form.childFee / 100).toString() : '0'
          self.childMemberFeeYuan = self.form.childMemberFee ? (self.form.childMemberFee / 100).toString() : '0'
          self.parentFeeYuan = self.form.parentFee ? (self.form.parentFee / 100).toString() : '0'
          self.parentMemberFeeYuan = self.form.parentMemberFee ? (self.form.parentMemberFee / 100).toString() : '0'
          if (d.startTime) {
            var sd = parseDate(d.startTime)
            if (sd) {
              self.datePart = self.fmtDate(sd)
              self.timePart = self.fmtTime(sd)
              self.form.startTime = sd.toISOString()
            }
          }
          if (d.endTime) {
            var ed = parseDate(d.endTime)
            if (ed) {
              self.endDatePart = self.fmtDate(ed)
              self.endTimePart = self.fmtTime(ed)
              self.form.endTime = ed.toISOString()
            }
          }
          if (d.registrationDeadline) {
            var rd = parseDate(d.registrationDeadline)
            if (rd) {
              self.regDatePart = self.fmtDate(rd)
              self.regTimePart = self.fmtTime(rd)
              self.form.registrationDeadline = rd.toISOString()
            }
          }
          // sync type picker
          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 })
    },
    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()
    },
    onRegDateChange(e) {
      this.regDatePart = e.detail.value
      this.syncRegDeadline()
    },
    onRegTimeChange(e) {
      this.regTimePart = e.detail.value
      this.syncRegDeadline()
    },
    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
      }
    },
    syncRegDeadline() {
      if (this.regDatePart && this.regTimePart) {
        this.form.registrationDeadline = this.regDatePart + 'T' + this.regTimePart + ':00'
      } else {
        this.form.registrationDeadline = null
      }
    },
    chooseImage() {
      var self = this
      pickImage({
        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 = ''
    },
    getCoverUrl(path) {
      if (!path) return ''
      var s = String(path).trim()
      if (!s || s === 'null' || s === '/null') return ''
      if (s.indexOf('http://') === 0 || s.indexOf('https://') === 0) return s
      return BASE_URL + (s.charAt(0) === '/' ? s : '/' + s)
    },
    removeCover() {
      this.form.coverImage = ''
    },
    validate() {
      if (!this.form.title) {
        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.childFee = Math.round((parseFloat(this.childFeeYuan) || 0) * 100)
      payload.childMemberFee = Math.round((parseFloat(this.childMemberFeeYuan) || 0) * 100)
      payload.parentFee = Math.round((parseFloat(this.parentFeeYuan) || 0) * 100)
      payload.parentMemberFee = Math.round((parseFloat(this.parentMemberFeeYuan) || 0) * 100)
      if (this.activityId) payload.id = this.activityId
      // 维度由审核时设置，创建/编辑不提交空维度，避免误清空已有维度
      if (!payload.dimensionCode) delete payload.dimensionCode
      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 isAdmin = self.isAdmin

      var doPublish = function(id) {
        if (isAdmin) {
          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' })
          })
        } else {
          submitActivityForReview(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' || self.form.status === 'rejected')) {
              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' })
        })
      }
    },
    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;
}

.cover-actions {
  display: flex;
  flex-direction: row;
  gap: 24rpx;
  margin-top: 12rpx;
}

.cover-action {
  font-size: 24rpx;
  color: #475569;
  text-decoration: underline;
}

.cover-action-danger {
  font-size: 24rpx;
  color: #ef4444;
  text-decoration: underline;
}

.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>