SxsnPC/src/views/modules/activity/add.vue

<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="mod-home">
            <div class="top adfac">
                <div class="back adfac" @click="handleBack">
                    <img src="@/assets/img/back.png">
                    <span>返回</span>
                </div>
                <div class="line"></div>
                <div class="text">{{ basicForm.id?'编辑':'新增' }}活动</div>
            </div>
            <div class="tab adfac">
                <div class="tab-pre" :class="{'active':tidx==1}" @click="changeTab(1)">基础资料</div>
                <div class="tab-pre" :class="{'active':tidx==2}" @click="changeTab(2)">活动参与</div>
            </div>
            <div class="form" v-if="tidx===1">
                <el-form ref="basicRef" :model="basicForm" :rules="basicRules" label-width="125px">
                    <el-form-item label="活动类型" prop="typeId">
                        <el-select v-model="basicForm.typeId" placeholder="请选择活动类型" class="select-box" style="width: 440px;">
                            <el-option v-for="item in typeOptions" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动分类" prop="categoryId">
                        <el-select v-model="basicForm.categoryId" placeholder="请选择活动分类" class="select-box" style="width: 440px;">
                            <el-option v-for="item in categoryOptions" :key="item.id" :label="item.categoryName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动名称" prop="activityName">
                        <el-input v-model="basicForm.activityName" placeholder="请输入活动名称"></el-input>
                    </el-form-item>
                    <el-form-item label="报名时间" prop="">
                      <div class="adfac">
                        <el-date-picker v-model="basicForm.signupStartTime" @change="e=>handleSignupDateChange(e,'signupStartTime')" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="年/月/日 - -:- -" style="width: 205px;"></el-date-picker>
                        <span style="margin: 0 10px;">至</span>
                        <el-date-picker v-model="basicForm.signupEndTime" @change="e=>handleSignupDateChange(e,'signupEndTime')" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="年/月/日 - -:- -" style="width: 205px;"></el-date-picker>
                      </div>
                    </el-form-item>
                    <el-form-item label="活动时间" prop="">
                      <div class="adfac">
                        <el-date-picker v-model="basicForm.activityStartTime" @change="e=>handleActivityDateChange(e,'activityStartTime')" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="年/月/日 - -:- -" style="width: 205px;"></el-date-picker>
                        <span style="margin: 0 10px;">至</span>
                        <el-date-picker v-model="basicForm.activityEndTime" @change="e=>handleActivityDateChange(e,'activityEndTime')" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="年/月/日 - -:- -" style="width: 205px;"></el-date-picker>
                      </div>
                    </el-form-item>
                    <el-form-item label="活动地点" prop="">
                        <el-select v-model="basicForm.provinceId" placeholder="省" clearable  style="width: 14.5%" @change="val=>regionChange(val, 'province')">
                            <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                        <el-select v-model="basicForm.cityId" placeholder="市" clearable  style="width: 14.5%; margin: 0 1%" @change="val=>regionChange(val, 'city')">
                            <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                        <el-select v-model="basicForm.districtId" placeholder="区" clearable  style="width: 14.5%; margin: 0 1% 0 0" @change="val=>regionChange(val, 'area')">
                            <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                        <el-input v-model="basicForm.address" placeholder="详细地址" style="width: 53.5%"></el-input>
                    </el-form-item>
                    <el-form-item label="渠道方" prop="channelId">
                        <el-select v-model="basicForm.channelId" placeholder="请选择渠道方" class="select-box" style="width: 440px;">
                            <el-option v-for="item in channelOptions" :key="item.id" :label="item.channelName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="举办方" prop="organizerId">
                        <el-select v-model="basicForm.organizerId" placeholder="请选择举办方" class="select-box" style="width: 440px;">
                            <el-option v-for="item in organizerOptions" :key="item.id" :label="item.channelName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="举办方" prop="organizerName">
                        <el-input v-model="basicForm.organizerName" placeholder="请输入举办方名称"></el-input>
                    </el-form-item>
                    <el-form-item label="活动封面图片" prop="coverFile" class="redLabel">
                        <el-upload
                            ref="coverUploadRef"
                            :action="url"
                            :file-list="fileListCover"
                            :before-upload="file => beforeUploadHandle(file, 1, [158, 214], 'coverFile')"
                            list-type="picture-card"
                            :on-success="successHandleCover"
                            :on-remove="handleRemoveCover"
                            class="upload-demo"
                            >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <div class="upload_tip">尺寸：158*214px,上传1张,支持图片格式：jpg、png、jpeg</div>
                    </el-form-item>
                    <el-form-item label="活动详情banner" prop="imageFiles" class="redLabel">
                        <el-upload
                            ref="bannerUploadRef"
                            :action="url"
                            :file-list="fileListBanner"
                            :limit="6"
                            :before-upload="file => beforeUploadHandle(file, 2, [702, 440], 'banner')"
                            list-type="picture-card"
                            :on-success="successHandleBanner"
                            :on-remove="handleRemoveBanner"
                            class="upload-demo"
                            >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <div class="upload_tip">尺寸：702*440px,最多上传6张,图片格式：jpg、png、jpeg（可拖动调整顺序）</div>
                    </el-form-item>
                    <el-form-item label="活动详情" prop="activityDetails" class="redLabel">
                        <editor-vue style="margin-top: -30px;" :content="basicForm.activityDetails"  @EditorChange="getEditor" ref="infoIntroduceRef"></editor-vue>
                    </el-form-item>
                </el-form>
                <div class="btns adfac">
                    <el-button type="primary" @click="handleNext">下一步</el-button>
                    <el-button type="default" @click="handleTempSave" style="margin-left: 16px;">暂存<span v-if="autoSaving" style="margin-left: 4px; color: #909399;">保存中...</span></el-button>
                    <!-- <el-button type="default" @click="handleBack" style="margin-left: 16px;">返回</el-button> -->
                </div>
            </div>
            <div class="form" v-else-if="tidx===2">
                <el-form ref="moreRef" :model="moreForm" :rules="moreRules" label-width="125px">
                  <el-form-item label="参与方式" prop="joinMode">
                    <ren-select
                      v-model="moreForm.joinMode"
                      dict-type="join_mode"
                      placeholder="请选择参与方式"
                      style="width: 820px"
                    ></ren-select>
                  </el-form-item>
                  <el-form-item label="报名人数" class="redLabel">
                    <div class="adfac">
                      <el-radio-group v-model="moreForm.recruitmentFlag" @change="recruitmentChange">
                        <el-radio :label="1" :value="1">限制</el-radio>
                        <el-radio :label="2" :value="2">不限</el-radio>
                      </el-radio-group>
                      <div class="f-text">最多报名人数</div>
                      <el-input type="number" min="0" v-model="moreForm.recruitmentMax" style="width: 157px;" :disabled="moreForm.recruitmentFlag==2" placeholder="请输入"></el-input>
                      <div class="f-text">最少报名人数</div>
                      <el-input type="number" min="0" v-model="moreForm.recruitmentMin" style="width: 157px;" :disabled="moreForm.recruitmentFlag==2" placeholder="请输入"></el-input>
                      <div class="f-tip">活动报名人数超出报名人数后，将不能继续报名。活动报名人数低于最少报名人数时，将会取消活动</div>
                    </div>
                  </el-form-item>
                  <el-form-item label="会员等级" class="redLabel">
                    <div class="adfac">
                      <el-radio-group v-model="moreForm.userLevelFlag" @change="userLevelChange">
                        <el-radio :label="1" :value="1">限制</el-radio>
                        <el-radio :label="0" :value="0">不限</el-radio>
                      </el-radio-group>
                      <el-select v-model="moreForm.userLevel" style="width: 157px;margin-left: 30px;" :disabled="moreForm.userLevelFlag==0">
                        <el-option v-for="item in 6" :key="item" :label="item" :value="item"></el-option>
                      </el-select>
                      <div class="f-text2">级</div>
                    </div>
                  </el-form-item>
                  <el-form-item label="会员年龄" class="redLabel">
                    <div class="adfac">
                      <el-radio-group v-model="moreForm.userAgeFlag" @change="userAgeChange">
                        <el-radio :label="1" :value="1">限制</el-radio>
                        <el-radio :label="2" :value="2">不限</el-radio>
                      </el-radio-group>
                      <div class="f-text">最小参加年龄</div>
                      <el-input min="0" type="number" v-model="moreForm.userAgeMin" style="width: 157px;" :disabled="moreForm.userAgeFlag==2" placeholder="请输入"></el-input>
                      <div class="f-text">最大参加年龄</div>
                      <el-input min="0" type="number" v-model="moreForm.userAgeMax" style="width: 157px;" :disabled="moreForm.userAgeFlag==2" placeholder="请输入"></el-input>
                    </div>
                  </el-form-item>
                  <el-form-item label="公益支持" class="redLabel">
                    <div class="adfac">
                      <el-select v-model="moreForm.activityLimit" placeholder="请选择" style="width: 123px;" class="select-box">
                        <el-option label="专享券" :value="2" v-if="basicForm.typeId=='1977564813261750273'"></el-option>
                        <template v-else>
                          <el-option label="需要爱心值" :value="1"></el-option>
                          <el-option label="免费" :value="3"></el-option>
                        </template>
                      </el-select>
                      <div v-if="moreForm.activityLimit==1" class="adfac">
                        <el-input min="1" type="number" v-model="moreForm.valueLimit" style="width: 252px;margin-left: 17px;" placeholder="请输入"></el-input>
                        <div class="f-text2">爱心值</div>
                      </div>
                      <!-- <div v-if="moreForm.activityLimit==2" class="adfac">
                        <el-input type="number" v-model="moreForm.valueLimit" style="width: 252px;margin-left: 17px;" placeholder="请输入"></el-input>
                        <div class="f-text2">专享券</div>
                      </div> -->
                    </div>
                  </el-form-item>
                  <el-form-item label="爱心值对应内容" v-if="moreForm.activityLimit==1">
                    <el-input v-model="moreForm.loveValueContent" style="width: 820px;" placeholder="请输入"></el-input>
                  </el-form-item>
                  <el-form-item label="可获得义工时长"  prop="volunteerHours">
                    <div class="adfac">
                      <el-input min="1" type="number" v-model="moreForm.volunteerHours" style="width: 391px;" placeholder="请输入"></el-input>
                      <div class="f-text2">小时</div>
                    </div>
                  </el-form-item>
                  <el-form-item label="报名次数限制">
                    <div class="adfac">
                      <el-input min="1" type="number" v-model="moreForm.timesLimit" style="width: 391px;" placeholder="请输入"></el-input>
                      <div class="f-tip">不填默认不限制</div>
                    </div>
                  </el-form-item>
                  <el-form-item label="负责人" prop="contact">
                    <el-input v-model="moreForm.contact" style="width: 820px;" placeholder="请输入"></el-input>
                  </el-form-item>
                  <el-form-item label="负责人电话" prop="contactPhone">
                    <el-input v-model="moreForm.contactPhone" style="width: 820px;" placeholder="请输入"></el-input>
                  </el-form-item>
                  <el-form-item label="上架活动" prop="state">
                    <el-switch v-model="moreForm.state" active-color="#13ce66" inactive-color="#a4a4a4"></el-switch>
                  </el-form-item>
                </el-form>
                <div class="btns adfac">
                    <el-button type="default" @click="handlePrevious">上一步</el-button>
                    <el-button type="default" @click="handleTempSave" style="margin-left: 16px;">暂存<span v-if="autoSaving" style="margin-left: 4px; color: #909399;">保存中...</span></el-button>
                    <el-button type="primary" @click="handleSave" style="margin-left: 16px;">发布</el-button>
                </div>
            </div>
        </div>
        <!-- 裁剪框 -->
        <cropper-dlg
          v-if="showCropper"
          :dialogVisible.sync="showCropper"
          :img-file="currentFile"
          ref="vueCropper"
          @upload="cropperUpload"
        ></cropper-dlg>
        <cropper-dlg2
          v-if="showCropper2"
          :dialogVisible.sync="showCropper2"
          :img-file="currentFile2"
          ref="vueCropper2"
          @upload="cropperUpload2"
        ></cropper-dlg2>
    </el-card>
</template>

<script>
import moment from 'moment'
import Cookies from 'js-cookie'
import Sortable from 'sortablejs'
import editorVue from '@/components/editor'
import mixinRegionModule from '@/mixins/region-module.js'
const getInitialBasicForm = () => ({
  id: '',
  typeId: '',
  categoryId: '',
  activityName: '',
  signupStartEnd: [],
  signupStartTime: '',
  signupEndTime: '',
  activityStartEnd: [],
  activityStartTime: '',
  activityEndTime: '',
  provinceId: '',
  cityId: '',
  districtId: '',
  address: '',
  channelId: '',
  organizerId: '',
  organizerName: '',
  coverFile: '',
  imageFiles: '',
  activityDetails: ''
})
const getInitialMoreForm = () => ({
  joinMode: '',
  recruitmentFlag: 1,
  recruitmentMax: '',
  recruitmentMin: '',
  userLevelFlag: 1,
  userLevel: 1,
  userAgeFlag: 1,
  userAgeMin: '',
  userAgeMax: '',
  activityLimit: 1,
  valueLimit: '',
  loveValueContent: '',
  volunteerHours: 0,
  timesLimit: '',
  contact: '',
  contactPhone: '',
  state: false
})

export default {
  components: { editorVue },
  mixins: [mixinRegionModule],
  data () {
    return {
      autoSaveTimer: null,
      autoSaving: false,
      currentFile: '',
      cropperIndex: null,
      showCropper: false,
      isCropper: true,
      currentFile2: '',
      cropperIndex2: null,
      showCropper2: false,
      isCropper2: true,
      updType: 1,
      typeOptions: [],
      categoryOptions: [],
      channelOptions: [],
      organizerOptions: [],
      tidx: 1,
      basicForm: getInitialBasicForm(),
      activityDetailsTemp: '',
      basicRules: {
        typeId: [
          { required: true, message: '请选择活动类型', trigger: 'change' }
        ],
        categoryId: [
          { required: true, message: '请选择活动分类', trigger: 'change' }
        ],
        activityName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        signupEndTime: [
          { required: true, message: '请选择报名时间', trigger: 'change' }
        ],
        activityEndTime: [
          { required: true, message: '请选择活动时间', trigger: 'change' }
        ],
        provinceId: [
          { required: true, message: '请选择省市区', trigger: 'change' }
        ],
        cityId: [
          { required: true, message: '请选择省市区', trigger: 'change' }
        ],
        districtId: [
          { required: true, message: '请选择省市区', trigger: 'change' }
        ],
        channelId: [
          { required: true, message: '请选择渠道方', trigger: 'change' }
        ],
        // organizerId: [
        //   { required: true, message: '请选择举办方', trigger: 'change' }
        // ],
        organizerName: [
          { required: true, message: '请输入举办方名称', trigger: 'blur' }
        ]
      },
      url: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token')}`,
      fileListCover: [],
      fileListBanner: [],
      moreForm: getInitialMoreForm(),
      moreForm2: {
        joinMode: ''
      },
      moreRules: {
        joinMode: [
          { required: true, message: '请选择参与方式', trigger: 'change' }
        ],
        volunteerHours: [
          { required: true, message: '请输入可获得的义工时长', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入负责人电话', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getTypeOptions()
    this.getCategoryOptions()
  },
  mounted () {
    this.provincAreaDetailInfoList()
    this.getSupplierOptions()

    this.$nextTick(() => {
      setTimeout(() => {
        this.$refs.infoIntroduceRef.init()
      }, 500)
      if (this.$route.query.id) {
        this.getDetail(this.$route.query.id)
      }
    })

    this.$nextTick(() => {
      this.initUploadSortable()
    })

    // 自动暂存：每分钟保存一次（仅编辑模式）
    this.autoSaveTimer = setInterval(() => {
      this.autoSave()
    }, 60000)
  },
  beforeDestroy () {
    if (this.autoSaveTimer) {
      clearInterval(this.autoSaveTimer)
      this.autoSaveTimer = null
    }
  },
  methods: {
    recruitmentChange (e) {
      if (e === 1) {
        this.moreForm.recruitmentMax = 1
        this.moreForm.recruitmentMin = 1
      } else {
        this.moreForm.recruitmentMax = 0
        this.moreForm.recruitmentMin = 0
      }
    },
    userLevelChange (e) {
      if (e === 1) this.moreForm.userLevel = 1
      else this.moreForm.userLevel = 0
    },
    userAgeChange (e) {
      if (e === 1) {
        this.moreForm.userAgeMax = 1
        this.moreForm.userAgeMin = 1
      } else {
        this.moreForm.userAgeMax = 0
        this.moreForm.userAgeMin = 0
      }
    },
    regionChange (val, type) {
      if (type === 'province') {
        this.basicForm.cityId = ''
        this.basicForm.districtId = ''
        this.cityAreaDetailInfoList(val)
      } else if (type === 'city') {
        this.basicForm.districtId = ''
        this.countyAreaDetailInfoList(val)
      }
    },
    getDetail (id) {
      this.$http.get('/core/activity/' + id).then(({ data: res }) => {
        if (res.code !== 0) return this.$message.error(res.msg)
        // this.basicForm = { ...this.basicForm, ...res.data }
        this.updateObjectFromSource(this.basicForm, res.data)
        this.activityDetailsTemp = res.data.activityDetails
        this.basicForm.signupStartEnd = [this.basicForm.signupStartTime, this.basicForm.signupEndTime]
        this.basicForm.activityStartEnd = [this.basicForm.activityStartTime, this.basicForm.activityEndTime]
        this.basicForm.channelId = this.basicForm.channelId
        this.basicForm.organizerId = this.basicForm.organizerId
        this.basicForm.organizerName = this.basicForm.organizerName
        if (res.data.coverFile) this.fileListCover = [{ name: '', url: res.data.coverFile }]
        if (res.data.imageFiles) this.fileListBanner = res.data.imageFiles.split(',').map(item => ({ name: '', url: item }))
        if (this.basicForm.cityId) {
          this.cityAreaDetailInfoList(this.basicForm.provinceId)
        }
        if (this.basicForm.districtId) {
          this.countyAreaDetailInfoList(this.basicForm.cityId)
        }
        this.updateObjectFromSource(this.moreForm, res.data)
        this.moreForm.recruitmentFlag = +this.moreForm.recruitmentMax === 0 ? 2 : 1
        this.moreForm.userLevelFlag = +this.moreForm.userLevel === 0 ? 0 : 1
        this.moreForm.userAgeFlag = +this.moreForm.userAgeMax === 0 ? 2 : 1
        this.moreForm.state = !!res.data.state

        this.$nextTick(() => {
          if (this.$refs.basicRef) {
            this.$refs.basicRef.clearValidate()
          }
          if (this.$refs.moreRef) {
            this.$refs.moreRef.clearValidate()
          }
        })
      })
    },
    updateObjectFromSource (target, source) {
      for (const key of Object.keys(target)) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key]
        }
      }
    },
    getEditor (val) {
      this.basicForm.activityDetails = val
    },
    getTypeOptions () {
      this.$http.get('/core/activity/type/page', { params: { page: 1, limit: -1 } }).then(res => {
        this.typeOptions = res.data.data.list.filter(l => l.enable === 1) || []
      })
    },
    getCategoryOptions () {
      this.$http.get('/core/activity/category/page', { params: { page: 1, limit: -1 } }).then(res => {
        this.categoryOptions = res.data.data.list.filter(l => l.enable === 1) || []
      })
    },
    getSupplierOptions () {
      this.$http.get('/core/channel/page', { params: { page: 1, limit: -1 } }).then(res => {
        this.channelOptions = res.data.data.list.filter(item => item.type === 1) || []
        this.organizerOptions = res.data.data.list.filter(item => item.type === 2) || []
      })
    },
    handleSignupDateChange (val, key) {
      this.basicForm[key] = moment(val).format('YYYY-MM-DD HH:mm')
    },
    handleActivityDateChange (val, key) {
      this.basicForm[key] = moment(val).format('YYYY-MM-DD HH:mm')
    },
    beforeUploadHandle (file, index, fixedNumber, name) {
      this.updType = index
      if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$message.error(
          this.$t('upload.tip', { format: 'jpg、png、gif' })
        )
        return false
      }
      if (this.updType === 1) {
        if (this.isCropper) {
          this.currentFile = file
          this.cropperIndex = name
          this.showCropper = true
          this.$nextTick(() => {
            this.$refs.vueCropper.init()
          })
          return false
        }
      } else if (this.updType === 2) {
        if (this.isCropper2) {
          this.currentFile2 = file
          this.cropperIndex2 = name
          this.showCropper2 = true
          this.$nextTick(() => {
            this.$refs.vueCropper2.init()
          })
          return false
        }
      }
    },
    cropperUpload (data) {
      this.showCropper = false
      if (data !== 'close') {
        this.$http.post('/sys/oss/upload', data).then((res) => {
          if (res.data.code === 0) {
            this.successHandleCover(res.data)
          }
        })
      }
    },
    cropperUpload2 (data) {
      this.showCropper2 = false
      if (data !== 'close') {
        this.$http.post('/sys/oss/upload', data).then((res) => {
          if (res.data.code === 0) {
            this.successHandleBanner(res.data)
          }
        })
      }
    },
    handleRemoveCover (file, fileList) {
      this.fileListCover = fileList.map((item) => item) || []
      this.basicForm.coverFile = ''
    },
    // 初始化上传列表的拖拽排序
    initUploadSortable () {
      const setup = (ref, listKey, onChange) => {
        const listEl = this.$refs[ref] && this.$refs[ref].$el && this.$refs[ref].$el.querySelector('.el-upload-list--picture-card')
        if (!listEl) return
        // 如果之前绑定过，先销毁旧的，避免 element-ui 重渲染后引用陈旧
        if (listEl.__sortable) {
          listEl.__sortable.destroy()
          listEl.__sortable = null
        }
        listEl.__sortable = Sortable.create(listEl, {
          animation: 150,
          onEnd: (evt) => {
            const arr = this[listKey]
            if (!arr || arr.length < 2) return
            const { oldIndex, newIndex } = evt
            if (oldIndex === newIndex) return
            const moved = arr.splice(oldIndex, 1)[0]
            arr.splice(newIndex, 0, moved)
            this[listKey] = [...arr]
            onChange && onChange()
          }
        })
      }
      setup('coverUploadRef', 'fileListCover', () => {
        this.basicForm.coverFile = this.fileListCover[0] ? this.fileListCover[0].url : ''
      })
      setup('bannerUploadRef', 'fileListBanner', () => {
        this.basicForm.imageFiles = this.fileListBanner.map(item => item.url).join(',')
      })
    },
    successHandleCover (res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      // 活动封面图片只保留一张：直接替换而不是 unshift，避免与 el-upload 内部列表不一致导致第二次上传静默失败
      this.fileListCover = [{ name: '', url: res.data }]
      this.basicForm.coverFile = res.data
    },
    handleRemoveBanner (file, fileList) {
      this.fileListBanner = fileList.map((item) => item)
      this.basicForm.imageFiles = this.fileListBanner.map(item => item.url).join(',')
    },
    successHandleBanner (res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      this.fileListBanner.unshift({
        name: '',
        url: res.data
      })
      this.basicForm.imageFiles = this.fileListBanner.map(item => item.url).join(',')
    },
    handleBack () {
      this.basicForm = getInitialBasicForm()
      this.moreForm = getInitialMoreForm()
      this.tidx = 1
      this.$router.push('/activity-list')
    },
    changeTab (idx) {
      this.tidx = idx
    },
    handleNext () {
      this.$refs.basicRef.validate(valid => {
        if (valid) {
          if (this.basicForm.signupStartTime && this.basicForm.signupEndTime && (Date.parse(this.basicForm.signupStartTime) > Date.parse(this.basicForm.signupEndTime))) return this.$message.error('报名结束时间不能小于报名开始时间')
          if (this.basicForm.signupEndTime && (Date.parse(this.basicForm.signupEndTime) < Date.parse(new Date()))) return this.$message.error('报名结束时间不能小于当前时间')
          if (this.basicForm.signupEndTime && this.basicForm.activityStartTime && (Date.parse(this.basicForm.signupEndTime) > Date.parse(this.basicForm.activityStartTime))) return this.$message.error('活动开始时间不能小于报名结束时间')
          if (this.basicForm.activityStartTime && this.basicForm.activityEndTime && (Date.parse(this.basicForm.activityStartTime) > Date.parse(this.basicForm.activityEndTime))) return this.$message.error('活动结束时间不能小于活动开始时间')
          if (!this.basicForm.coverFile) return this.$message.error('请上传活动封面图片')
          if (!this.basicForm.imageFiles) return this.$message.error('请上传活动详情Banner')
          if (!this.basicForm.activityDetails) return this.$message.error('请输入活动详情')
          this.tidx = 2
          if (this.basicForm.typeId === '1977564813261750273') {
            this.moreForm.activityLimit = 2
            this.moreForm.valueLimit = 1
          }
        } else {
          return false
        }
      })
    },
    handleTempSave () {
      if (this.basicForm.signupStartTime && this.basicForm.signupEndTime && (Date.parse(this.basicForm.signupStartTime) > Date.parse(this.basicForm.signupEndTime))) return this.$message.error('报名结束时间不能小于报名开始时间')
      if (this.basicForm.signupEndTime && (Date.parse(this.basicForm.signupEndTime) < Date.parse(new Date()))) return this.$message.error('报名结束时间不能小于当前时间')
      if (this.basicForm.signupEndTime && this.basicForm.activityStartTime && (Date.parse(this.basicForm.signupEndTime) > Date.parse(this.basicForm.activityStartTime))) return this.$message.error('活动开始时间不能小于报名结束时间')
      if (this.basicForm.activityStartTime && this.basicForm.activityEndTime && (Date.parse(this.basicForm.activityStartTime) > Date.parse(this.basicForm.activityEndTime))) return this.$message.error('活动结束时间不能小于活动开始时间')

      let { signupStartEnd, activityStartEnd, ...newBasic } = JSON.parse(JSON.stringify(this.basicForm))
      let { recruitmentFlag, userAgeFlag, userLevelFlag, ...newMore } = JSON.parse(JSON.stringify(this.moreForm))
      let dto = { ...newBasic, ...newMore }
      dto.activeState = -2
      dto.state = 0

      this.$http[dto.id ? 'put' : 'post']('/core/activity', dto).then(res => {
        if (res.data.code !== 0) return this.$message.error(res.data.msg)
        this.$message.success(dto.id ? '编辑' : '新增' + '草稿成功')
        this.$router.push('/activity-list')
      })
    },
    handlePrevious () {
      this.tidx = 1
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.infoIntroduceRef.init()
          this.basicForm.activityDetails = this.activityDetails
        }, 500)
      })
    },
    autoSave () {
      // 只在编辑模式（有id）时自动保存
      if (!this.basicForm.id) return
      let { signupStartEnd, activityStartEnd, ...newBasic } = JSON.parse(JSON.stringify(this.basicForm))
      let { recruitmentFlag, userAgeFlag, userLevelFlag, ...newMore } = JSON.parse(JSON.stringify(this.moreForm))
      let dto = { ...newBasic, ...newMore }
      dto.state = dto.state ? 1 : 0
      this.autoSaving = true
      this.$http.put('/core/activity', dto).then(res => {
        if (res.data.code === 0) {
          this.autoSaving = false
        }
      }).catch(() => { this.autoSaving = false })
    },
    handleSave () {
      this.$refs.moreRef.validate(valid => {
        if (valid) {
          if (this.moreForm.recruitmentFlag === 1) {
            if (!this.moreForm.recruitmentMax) return this.$message.error('请输入最多报名人数')
            if (!this.moreForm.recruitmentMin) return this.$message.error('请输入最少报名人数')
            if (+this.moreForm.recruitmentMin > +this.moreForm.recruitmentMax) return this.$message.error('最少报名人数不能大于最多报名人数')
          } else {
            this.moreForm.recruitmentMax = 0
            this.moreForm.recruitmentMin = 0
          }
          if (this.moreForm.userLevelFlag === 1) {
            if (!this.moreForm.userLevel) return this.$message.error('请输入会员最小限制等级')
          } else {
            this.moreForm.userLevel = 0
          }
          if (this.moreForm.userAgeFlag === 1) {
            if (!this.moreForm.userAgeMin) return this.$message.error('请输入最小参加年龄')
            if (!this.moreForm.userAgeMax) return this.$message.error('请输入最大参加年龄')
            if (+this.moreForm.userAgeMin > +this.moreForm.userAgeMax) return this.$message.error('最小参加年龄不能大于最大参加年龄')
          } else {
            this.moreForm.userAgeMin = 0
            this.moreForm.userAgeMax = 0
          }
          if (this.moreForm.activityLimit === 1) {
            if (!this.moreForm.valueLimit) return this.$message.error('请输入爱心值数量')
          } else if (this.moreForm.activityLimit === 2) {
            if (!this.moreForm.valueLimit) return this.$message.error('请输入专享券数量')
          }

          let { signupStartEnd, activityStartEnd, ...newBasic } = JSON.parse(JSON.stringify(this.basicForm))
          let { recruitmentFlag, userAgeFlag, userLevelFlag, ...newMore } = JSON.parse(JSON.stringify(this.moreForm))
          let dto = { ...newBasic, ...newMore }
          dto.state = dto.state ? 1 : 0

          this.$http[dto.id ? 'put' : 'post']('/core/activity', dto).then(res => {
            if (res.data.code !== 0) return this.$message.error(res.data.msg)
            this.$message.success('发布成功')
            this.$router.push('/activity-list')
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .top {
    padding-bottom: 13px;
    box-shadow: inset 0px -1px 0px 0px #F0F1F7;
    .back {
        cursor: pointer;
        img {
          width: 22px;
          height: 22px;
        }
        span {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 14px;
            color: #00AE57;
            line-height: 20px;
            margin-left: 6px;
        }
    }
    .line {
        width: 1px;
        height: 16px;
        background: #F0F1F7;
        margin-left: 14px;
    }
    .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #657588;
        line-height: 20px;
        margin-left: 10px;
    }
  }

  .tab{
    height: 48px;
    box-shadow: inset 0px -1px 0px 0px #F0F1F7;
    &-pre{
        width: 120px;
        height: 48px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #393939;
        line-height: 20px;
        // cursor: pointer;
        position: relative;
        padding-left: 7px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &.active{
            font-weight: bold;
            &::after{
                content: '';
                position: absolute;
                left: 7px;
                bottom: 2px;
                width: 55px;
                height: 2px;
                background: #00AE57;
            }
        }
    }
  }

  .form{
    padding: 20px 0 1px;
  }

  .btns{
    border-top: 1px solid #F0F1F7;
    padding: 24px 0 0 126px;
  }

  .f-text{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #393939;
    line-height: 20px;
    margin: 0 10px 0 56px;
  }
  .f-text2{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #393939;
    line-height: 20px;
    margin-left: 6px;
  }
  .f-tip{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #F4657A;
    line-height: 17px;
    margin-left: 20px;
  }

  ::v-deep .el-radio__label{
    line-height: 20px;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 84px;
    height: 84px;
    line-height: 84px;
    text-align: center;
  }
  ::v-deep .el-upload--picture-card{
    width: 84px !important;
    height: 84px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .avatar {
    width: 84px;
    height: 84px;
    display: block;
  }
  .upload-demo{
    display: flex !important;
    flex-wrap: wrap;
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item{
    width: 84px !important;
    height: 84px !important;
  }
  .upload_tip{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #A4A4A4;
    line-height: 17px;
    margin-top: 2px;
  }

  ::v-deep .redLabel>.el-form-item__label{
    &::before{
        content: "*";
        color: #F56C6C;
        margin-right: 4px;
    }
  }
</style>