cfc/cfc-web/src/views/admin/ActivityEdit.vue

<template>
  <div class="activity-edit">
    <el-card>
      <div slot="header">
        <span>{{ readonly ? '活动详情' : (isEdit ? '编辑活动' : '创建活动') }}</span>
        <div style="float: right;">
          <el-button @click="$router.push('/activities')">返回列表</el-button>
          <template v-if="!readonly">
            <el-button type="primary" @click="saveActivity(false)" :loading="saving">保存</el-button>
            <el-button type="success" @click="saveActivity(true)" :loading="publishing" v-if="isEdit && activityStatus === 'draft'">发布</el-button>
          </template>
          <template v-if="readonly && activityStatus === 'draft'">
            <el-button type="primary" size="mini" @click="editFromReadonly">编辑</el-button>
          </template>
        </div>
      </div>

      <el-form label-width="120px" v-loading="loading" :model="form" :rules="formRules" ref="form">
        <el-form-item label="活动标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入活动标题" :disabled="readonly" />
        </el-form-item>

        <el-form-item label="活动类型" prop="activityType">
          <el-select v-model="form.activityType" placeholder="请选择活动类型" style="width:100%" :disabled="readonly">
            <el-option label="线下活动" value="offline" />
            <el-option label="线上活动" value="online" />
            <el-option label="主题活动" value="campaign" />
          </el-select>
        </el-form-item>

        <el-form-item label="活动描述" prop="description">
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入活动描述" :disabled="readonly" />
        </el-form-item>

        <el-form-item label="封面图片">
          <template v-if="!readonly">
            <el-upload
              :action="uploadActionUrl"
              :headers="uploadHeaders"
              :on-success="handleUploadSuccess"
              :on-error="handleUploadError"
              :before-upload="beforeUpload"
              :show-file-list="false"
              accept="image/jpeg,image/png,image/gif,image/webp"
            >
              <img v-if="form.coverImage" :src="form.coverImage" class="cover-preview" />
              <el-button v-else type="primary" plain>+ 上传封面</el-button>
            </el-upload>
            <el-button v-if="form.coverImage" size="mini" type="text" style="margin-left:10px;" @click="form.coverImage = ''">清除</el-button>
          </template>
          <img v-else-if="form.coverImage" :src="form.coverImage" class="cover-preview" />
          <span v-else style="color:#999">无封面</span>
        </el-form-item>

        <el-form-item label="五维权重">
          <dimension-weight-picker v-model="form.dimensionWeights" :show-presets="true" :readonly="readonly" />
        </el-form-item>

        <el-form-item label="活动地点">
          <el-input v-model="form.location" placeholder="请输入活动地点" :disabled="readonly" />
        </el-form-item>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="最大人数">
              <el-input-number v-model="form.maxParticipants" :min="0" :max="99999" placeholder="0表示不限" style="width:100%" :disabled="readonly" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="价格(元)">
              <el-input-number v-model="form.priceYuan" :min="0" :precision="2" :step="0.01" placeholder="0表示免费" style="width:100%" :disabled="readonly" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker v-model="form.startTime" type="datetime" placeholder="选择开始时间" style="width:100%" :disabled="readonly" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择结束时间" style="width:100%" :disabled="readonly" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="可见范围">
              <el-select v-model="form.visibility" placeholder="请选择可见范围" style="width:100%" :disabled="readonly">
                <el-option label="公开" value="public" />
                <el-option label="受限" value="restricted" />
                <el-option label="全体" value="all" />
                <el-option label="会员" value="member" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="可见对象">
              <el-select v-model="form.visibleScope" placeholder="请选择可见对象类型" style="width:100%" :disabled="readonly">
                <el-option label="不限" value="" />
                <el-option label="家庭" value="family" />
                <el-option label="角色" value="role" />
                <el-option label="用户" value="user" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="可见对象ID" v-if="form.visibleScope">
          <el-input v-model="form.visibleTo" placeholder="多个用逗号分隔，如: family_1,family_2" :disabled="readonly" />
        </el-form-item>

        <el-form-item label="签到积分">
          <el-input-number v-model="form.checkinPoints" :min="0" :max="9999" placeholder="0使用系统默认" style="width:200px" :disabled="readonly" />
          <span style="margin-left:8px;color:#999;font-size:12px;">0表示使用系统默认积分</span>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 创建成功弹窗 -->
    <el-dialog title="创建成功" :visible.sync="successDialogVisible" width="420px" :close-on-click-modal="false" :show-close="false">
      <div style="text-align:center;padding:10px 0;">
        <i class="el-icon-circle-check" style="font-size:48px;color:#67C23A;"></i>
        <p style="font-size:16px;margin-top:12px;">活动「{{ form.title }}」已创建成功</p>
      </div>
      <div slot="footer" style="text-align:center;">
        <el-button @click="handleContinueAdd">继续添加</el-button>
        <el-button @click="$router.push('/activities')">返回列表</el-button>
        <el-button type="primary" @click="handlePublishAndBack" :loading="publishing">直接发布</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DimensionWeightPicker from '@/components/DimensionWeightPicker.vue'
import { getActivityDetail, createActivity, updateActivity, publishActivity } from '@/api/activity'
import { saveDimensionWeights, getDimensionWeights } from '@/api/dimension-weight.js'

export default {
  name: 'ActivityEdit',
  components: { DimensionWeightPicker },
  data() {
    return {
      isEdit: false,
      loading: false,
      saving: false,
      publishing: false,
      readonly: false,
      activityStatus: '',
      successDialogVisible: false,
      form: {
        title: '',
        coverImage: '',
        activityType: '',
        description: '',
        dimensionCode: '',
        dimensionWeights: [],
        location: '',
        maxParticipants: null,
        priceYuan: null,
        startTime: null,
        endTime: null,
        visibility: 'public',
        visibleScope: '',
        visibleTo: '',
        checkinPoints: 0
      },
      formRules: {
        title: [
          { required: true, message: '请填写活动标题', trigger: 'blur' }
        ],
        activityType: [
          { required: true, message: '请选择活动类型', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请填写活动描述', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    uploadActionUrl() {
      const baseURL = process.env.VUE_APP_BASE_API || ''
      return baseURL + '/api/admin/articles/upload/image'
    },
    uploadHeaders() {
      const token = localStorage.getItem('token')
      return token ? { Authorization: 'Bearer ' + token } : {}
    }
  },
  created() {
    const id = this.$route.query.id
    this.readonly = this.$route.query.readonly === '1'
    if (id) {
      this.isEdit = true
      this.loadDetail(id)
    }
  },
  methods: {
    async loadDetail(id) {
      this.loading = true
      try {
        const res = await getActivityDetail({ id })
        if (res.data) {
          const d = res.data
          this.activityStatus = d.status || ''
          if (this.readonly || d.status !== 'draft') {
            this.readonly = true
          }
          this.form = {
            title: d.title || '',
            coverImage: d.coverImage || '',
            activityType: d.activityType || '',
            description: d.description || '',
            dimensionCode: d.dimensionCode || '',
            dimensionWeights: [],
            location: d.location || '',
            maxParticipants: d.maxParticipants || null,
            priceYuan: d.price ? d.price / 100 : null,
            startTime: d.startTime || null,
            endTime: d.endTime || null,
            visibility: d.visibility || 'public',
            visibleScope: d.visibleScope || '',
            visibleTo: d.visibleTo || '',
            checkinPoints: d.checkinPoints || 0
          }
          try {
            const dwRes = await getDimensionWeights('activity', d.id)
            if (dwRes.data) {
              this.form.dimensionWeights = dwRes.data
            }
          } catch (e) {
          }
        }
      } catch (e) {
        this.$message.error('加载活动详情失败')
      } finally {
        this.loading = false
      }
    },
    beforeUpload(file) {
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png' ||
        file.type === 'image/gif' || file.type === 'image/webp'
      if (!isImage) {
        this.$message.error('只能上传 JPG/PNG/GIF/WebP 格式图片')
        return false
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('图片大小不能超过 5MB')
        return false
      }
      return true
    },
    handleUploadSuccess(resp) {
      if (resp.code === 0 || resp.code === 200) {
        this.form.coverImage = resp.data || resp
        this.$message.success('封面上传成功')
      } else {
        this.$message.error((resp && resp.message) || '封面上传失败')
      }
    },
    handleUploadError() {
      this.$message.error('封面上传失败，请重试')
    },
    async saveActivity(publishNow) {
      // 表单验证
      try {
        await this.$refs.form.validate()
      } catch (e) {
        return
      }
      if (publishNow) {
        this.publishing = true
      } else {
        this.saving = true
      }
      try {
        const payload = {
          title: this.form.title,
          coverImage: this.form.coverImage,
          activityType: this.form.activityType,
          description: this.form.description,
          dimensionCode: this.form.dimensionCode,
          location: this.form.location,
          maxParticipants: this.form.maxParticipants,
          price: this.form.priceYuan != null ? Math.round(this.form.priceYuan * 100) : 0,
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          visibility: this.form.visibility,
          visibleScope: this.form.visibleScope,
          visibleTo: this.form.visibleTo,
          checkinPoints: this.form.checkinPoints || 0
        }
        if (this.isEdit) {
          // 编辑模式：保存后直接返回列表
          payload.id = this.form._activityId || this.$route.query.id
          await updateActivity(payload)
          if (this.form.dimensionWeights && this.form.dimensionWeights.length) {
            try {
              await saveDimensionWeights('activity', payload.id, this.form.dimensionWeights)
            } catch (e) {
              console.error('保存维度权重失败', e)
            }
          }
          this.$message.success('更新成功')
          this.$router.push('/activities')
        } else {
          // 创建模式：保存后弹窗
          const res = await createActivity(payload)
          if (res.data && res.data.id) {
            this.createdActivityId = res.data.id
          }
          this.isEdit = true
          this.saving = false
          this.successDialogVisible = true
        }
      } catch (e) {
        this.$message.error('保存失败')
      } finally {
        this.saving = false
        this.publishing = false
      }
    },
    handleContinueAdd() {
      this.successDialogVisible = false
      this.form = {
        title: '',
        coverImage: '',
        activityType: '',
        description: '',
        dimensionCode: '',
        dimensionWeights: [],
        location: '',
        maxParticipants: null,
        priceYuan: null,
        startTime: null,
        endTime: null,
        visibility: 'public',
        visibleScope: '',
        visibleTo: '',
        checkinPoints: 0
      }
      this.isEdit = false
      this.createdActivityId = null
      this.$refs.form && this.$refs.form.clearValidate()
    },
    async handlePublishAndBack() {
      this.successDialogVisible = false
      const activityId = this.createdActivityId
      if (!activityId) {
        this.$router.push('/activities')
        return
      }
      // 先保存维度权重
      if (this.form.dimensionWeights && this.form.dimensionWeights.length) {
        try {
          await saveDimensionWeights('activity', activityId, this.form.dimensionWeights)
        } catch (e) {
          console.error('保存维度权重失败', e)
        }
      }
      // 发布
      try {
        this.publishing = true
        await publishActivity(activityId)
        this.$message.success('发布成功')
      } catch (e) {
        this.$message.error('发布失败')
      } finally {
        this.publishing = false
      }
      this.$router.push('/activities')
    },
    editFromReadonly() {
      this.readonly = false
    }
  }
}
</script>

<style scoped>
.activity-edit { padding: 20px; }
.cover-preview {
  width: 200px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd;
}
</style>