tuanfeng-pc-admin/src/views/rm-bank/activity/components/ActivityModal.vue

<template>
  <el-dialog :close-on-click-modal="false" title="提示" :visible.sync="activityVisible" width="50%">
    <el-steps align-center :active="currentStep" finish-status="success" style="margin-bottom: 10px">
      <el-step title="基本信息"></el-step>
      <el-step title="其他信息"></el-step>
    </el-steps>

    <el-carousel :height="heightInfo.swiperHeight + 'px'" ref="elCarouselRef" :autoplay="false" indicator-position="none" arrow="never">
      <el-carousel-item name="step-one">
        <el-form ref="activityModalFormRef" :model="activityForm" :rules="activityRules.oneRules" label-width="auto">
          <el-form-item label="请选择俱乐部" prop="club.id" v-if="!activityForm.activities.id">
            <el-select style="width: 100%" v-model="activityForm.club.id" placeholder="请选择">
              <el-option v-for="item in clubList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动类型" prop="activities.typeEnum">
            <el-select style="width: 100%" v-model="activityForm.activities.typeEnum" placeholder="请选择活动类型" @change="handleChangeTypeState">
              <el-option v-for="item in ACTIVITY_TYPE_INFO" :key="item.typeId" :label="item.name" :value="item.enumKey"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="参与人数" v-if="!NOT_LUAN_QI_BA_ZAO.includes(activityForm.activities.typeEnum)" prop="activities.peopleNumber">
            <el-input :min="1" placeholder="请输入参与人数" type="number" v-model.number="activityForm.activities.peopleNumber"></el-input>
          </el-form-item>
          <el-form-item label="参与用户范围" prop="activities.registrationScope" v-if="!NOT_LUAN_QI_BA_ZAO.includes(activityForm.activities.typeEnum)">
            <el-select style="width: 100%" v-model="activityForm.activities.registrationScope" placeholder="请选择参与用户范围">
              <el-option label="所有用户" :value="1"></el-option>
              <el-option label="仅限俱乐部会员" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动标题" prop="activities.title">
            <el-input placeholder="请输入活动标题" v-model="activityForm.activities.title"></el-input>
          </el-form-item>

          <el-form-item :label="startTimeLabel" prop="activities.startTime">
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
              v-model="activityForm.activities.startTime"
              type="datetime"
              :placeholder="`请选择${startTimeLabel}`"
              align="right"
            ></el-date-picker>
          </el-form-item>

          <el-form-item v-if="!NOT_LUAN_QI_BA_ZAO.includes(activityForm.activities.typeEnum)" label="结束时间" prop="activities.endTime">
            <el-date-picker
              @change="handleSelectEndTime"
              :disabled="!activityForm.activities.startTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
              v-model="activityForm.activities.endTime"
              type="datetime"
              placeholder="请选择结束时间"
              align="right"
            ></el-date-picker>
          </el-form-item>

          <el-form-item
            v-if="!NOT_LUAN_QI_BA_ZAO.includes(activityForm.activities.typeEnum)"
            label="地址"
            prop="activities.activitiesAddress"
            :rules="[{ required: true, message: '请选择地址', trigger: 'change' }]"
          >
            <el-cascader
              v-show="isEditAdddress || !activityForm.activities.id"
              v-model="activityForm.activities.activitiesAddress"
              style="width: 100%"
              :props="areaData"
              ref="cascaderRef"
              @change="handleCascaderChange"
            ></el-cascader>
            <div :style="{ display: isEditAdddress ? 'none' : 'flex' }" v-if="activityForm.activities.id">
              <el-input readonly :value="activityForm.activities.activitiesAddress"></el-input>
              <el-button style="margin-left: 20px" type="primary" size="mini" @click="isEditAdddress = true">修改区域</el-button>
            </div>
          </el-form-item>

          <el-form-item
            v-if="!NOT_LUAN_QI_BA_ZAO.includes(activityForm.activities.typeEnum)"
            label="详细地址"
            prop="activities.activitiesDetailAddress"
            :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur' }]"
          >
            <el-input type="textarea" placeholder="请输入详细地址" v-model="activityForm.activities.activitiesDetailAddress"></el-input>
          </el-form-item>

          <el-form-item label="发布人昵称" prop="activities.publishMemberName">
            <el-input placeholder="请输入发布人昵称" v-model="activityForm.activities.publishMemberName"></el-input>
          </el-form-item>

          <el-form-item label="发布人头像" prop="activities.publishMemberAvatar">
            <ImageUpload v-model="activityForm.activities.publishMemberAvatar" :limit="1"></ImageUpload>
          </el-form-item>

          <el-form-item
            :rules="[{ required: true, message: '请选择商机类型', trigger: 'change' }]"
            label="商机类型"
            prop="activities.opportunityType"
            v-if="activityForm.activities.typeEnum === BUSINESS_ACTIVITY_TYPE"
          >
            <el-select style="width: 100%" v-model="activityForm.activities.opportunityType" placeholder="请选择商机类型">
              <el-option label="寻求合作" :value="1"></el-option>
              <el-option label="寻求采购" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-carousel-item>

      <el-carousel-item name="step-two">
        <el-form ref="activityNextModalFormRef" label-width="auto" :model="activityForm" :rules="activityRules.twoRules">
          <el-form-item v-if="NOTICE_ACTIVITY_TYPE !== activityForm.activities.typeEnum" label="封面" prop="activities.cover">
            <ImageUpload v-model="activityForm.activities.cover" :limit="1"></ImageUpload>
          </el-form-item>

          <el-form-item v-if="NOTICE_ACTIVITY_TYPE !== activityForm.activities.typeEnum" label="宣传视频" prop="activities.promotionalVideo">
            <el-upload
              style="width: 200px; height: 100px; border-radius: 5px; background-color: #fbfdff; border: 1px dashed #c0ccda; display: flex; align-items: center; justify-content: center"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleUplaodVideoSuccess"
              :before-upload="hanldeBeforeUploadVideo"
              class="upload-video"
            >
              <video style="width: 200px; height: 100px" controls v-if="activityForm.activities.promotionalVideo" :src="activityForm.activities.promotionalVideo"></video>
            </el-upload>
          </el-form-item>

          <el-form-item label="内容" prop="activities.content">
            <div class="editor-wrapper" v-loading.lock="editorCustomOptions.showLoading">
              <quillEditor ref="quillEditorRef" v-model="activityForm.activities.content"></quillEditor>
            </div>
          </el-form-item>

          <el-form-item v-if="BUSINESS_ACTIVITY_TYPE !== activityForm.activities.typeEnum" label="联系方式" prop="activities.opportunityContactNumber">
            <el-input placeholder="请填写商机联系方式" v-model="activityForm.activities.opportunityContactNumber"></el-input>
          </el-form-item>

          <el-form-item v-if="BUSINESS_ACTIVITY_TYPE !== activityForm.activities.typeEnum" label="邮箱" prop="activities.opportunityContactEmail">
            <el-input placeholder="请填写商机联系邮箱" v-model="activityForm.activities.opportunityContactEmail"></el-input>
          </el-form-item>

          <el-form-item v-if="BUSINESS_ACTIVITY_TYPE !== activityForm.activities.typeEnum" label="公司广网链接" prop="activities.participationMethod">
            <el-input placeholder="请填写公司官网链接" v-model="activityForm.activities.participationMethod"></el-input>
          </el-form-item>

          <el-form-item v-if="NOTICE_ACTIVITY_TYPE !== activityForm.activities.typeEnum" label="参与方式" prop="activities.opportunityAuthorityUrl">
            <el-input :rows="3" type="textarea" placeholder="请填写参与方式" v-model="activityForm.activities.opportunityAuthorityUrl"></el-input>
          </el-form-item>

          <el-form-item v-if="NOTICE_ACTIVITY_TYPE !== activityForm.activities.typeEnum" label="注意事项" prop="activities.precautions">
            <el-input :rows="3" type="textarea" placeholder="请填写参与方式" v-model="activityForm.activities.precautions"></el-input>
          </el-form-item>
        </el-form>
      </el-carousel-item>
    </el-carousel>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="info" v-if="currentStep === 0" @click="handleNextStep">下一步</el-button>
        <el-button type="info" v-if="currentStep === 1" @click="handlePrev">上一步</el-button>
        <el-button @click="handleOpActivity(ACTIVITY_STATUS_INFO[0].enumKey)" v-if="currentStep === 1" :loading="isLoading === ACTIVITY_STATUS_INFO[0].enumKey">存为草稿</el-button>
        <el-button @click="handleOpActivity(ACTIVITY_STATUS_INFO[1].enumKey)" v-if="currentStep === 1" :loading="isLoading === ACTIVITY_STATUS_INFO[1].enumKey">
          {{ activityForm.activities.id ? '确认编辑' : '创建并发布' }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import ImageUpload from '@/components/ImageUpload'
import { uploadUrl } from '@/utils/request'
import { getClubListApi, createActivityApi, patchPeopleBankActivitiesByIdApi } from '@/api/rm-bank'
import { getProvinceList, getChildAreaList } from '@/api/address'
import {
  ACTIVITY_STATUS_INFO,
  listenEditorContentHeightChange,
  getCurrentActivityRules,
  getDefaultActivityForm,
  ACTIVITY_TYPE_INFO,
  NOTICE_ACTIVITY_TYPE,
  BUSINESS_ACTIVITY_TYPE,
  interceptQuillImageUpload,
  NOT_LUAN_QI_BA_ZAO,
  DEFAULT_ACTIVITY_ADDRESS,
  getTypeEnumByValue,
  getStateEnumByValue
} from './utils'

// 引入 editor 样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  components: {
    quillEditor,
    ImageUpload
  },
  data() {
    return {
      NOTICE_ACTIVITY_TYPE,
      ACTIVITY_TYPE_INFO,
      BUSINESS_ACTIVITY_TYPE,
      ACTIVITY_STATUS_INFO,
      activityVisible: false,
      activityForm: getDefaultActivityForm(),
      clubList: [],
      editorCustomOptions: {
        showLoading: false
      },
      isLoading: false,
      currentStep: 0,
      heightInfo: {
        swiperHeight: 0
      },
      NOT_LUAN_QI_BA_ZAO,
      isEditAdddress: false,
      selectAddressLabel: '',
      areaData: {
        lazy: true,
        label: 'name',
        value: 'id',
        lazyLoad(node, resolve) {
          const { level, value } = node
          if (level === 0) {
            getProvinceList().then((res) => {
              resolve(res.data)
            })
          } else if (level != 0) {
            getChildAreaList(value).then((res) => {
              resolve(
                res.data.map((item) => {
                  item.leaf = level === 3
                  return item
                })
              )
            })
          }
        }
      },
      uploadUrl,
      uploadVideoLoading: false,
      stopObserver: null
    }
  },
  mounted() {
    // 获取俱乐部列表
    this.getClubList()
  },
  methods: {
    show(row) {
      this.activityVisible = true
      setTimeout(this.calcSwiperHeight)
      // 拦截editor的图片上传 转码 -> 服务器上传
      // 监听输入框的高度变化，然后动态修改轮播图的高度
      this.$nextTick(() => {
        interceptQuillImageUpload(this, this.editorCustomOptions)
        this.stopObserver = listenEditorContentHeightChange(this, this.calcSwiperHeight)
        this.resetDialog()
        if (row) {
          const activitiesAddress = row.activitiesAddress !== DEFAULT_ACTIVITY_ADDRESS ? row.activitiesAddress : ''
          let activitiesAddressTemp = ''
          let activitiesDetailAddressTemp = ''
          if (activitiesAddress) {
            activitiesAddressTemp = (activitiesAddress.split(' ')[0] || '').replace('undefined', '')
            activitiesDetailAddressTemp = (activitiesAddress.split(' ')[1] || '').replace('undefined', '')
            this.selectAddressLabel = (activitiesAddress.split(' ')[0] || '').replace('undefined', '')
          }
          Object.assign(this.activityForm.activities, row, {
            activitiesAddress: activitiesAddressTemp,
            activitiesDetailAddress: activitiesDetailAddressTemp,
            id: row.id,
            typeEnum: getTypeEnumByValue(Number(row.type)),
            stateEnum: getStateEnumByValue(Number(row.state))
          })
          this.handleChangeTypeState()
        }
      })
    },

    // 获取俱乐部列表
    async getClubList() {
      const res = await getClubListApi({ page: 1, pageSize: 100 })
      this.clubList = res.data.list
    },

    // 点击下一步
    async handleNextStep() {
      await this.$refs.activityModalFormRef.validate()
      this.$refs.elCarouselRef.next()
      this.currentStep = 1
      this.calcSwiperHeight()
    },

    // 点击上一步
    handlePrev() {
      this.$refs.elCarouselRef.prev()
      this.currentStep = 0
      this.calcSwiperHeight()
    },

    // 点击完成
    async handleOpActivity(status) {
      try {
        this.isLoading = status
        await this.$refs.activityNextModalFormRef.validate()
        const data = this.transformData(status)
        data.activities.id && delete data.club
        const api = data.activities.id ? patchPeopleBankActivitiesByIdApi : createActivityApi
        await api(data)
        this.$message.success(data.activities.id ? '编辑成功' : '操作成功')
        this.close()
        this.$emit('refresh')
      } catch (error) {
      } finally {
        this.isLoading = ''
      }
    },

    close() {
      this.resetDialog()
      this.$nextTick(() => {
        this.activityVisible = false
      })
    },

    resetDialog() {
      this.activityForm = getDefaultActivityForm()
      this.currentStep = 0
      this.$refs.elCarouselRef && this.$refs.elCarouselRef.setActiveItem('step-one')
      this.$refs.activityModalFormRef.clearValidate()
      this.$refs.activityNextModalFormRef.clearValidate()
      this.$refs.activityModalFormRef.resetFields()
      this.$refs.activityNextModalFormRef.resetFields()
      this.selectAddressLabel = ''
      typeof this.stopObserver === 'function' && this.stopObserver()
    },

    // 计算swiper的高度
    calcSwiperHeight() {
      this.$nextTick(() => {
        const refName = this.currentStep === 0 ? 'activityModalFormRef' : 'activityNextModalFormRef'
        const containerRef = this.$refs[refName]
        if (!containerRef) return
        const { height } = containerRef.$el.getBoundingClientRect()
        this.heightInfo.swiperHeight = height
      })
    },

    // 活动类型发生了变化
    handleChangeTypeState() {
      this.activityForm = getDefaultActivityForm(true, { ...this.activityForm })
      // 拦截editor的图片上传 转码 -> 服务器上传
      // 监听输入框的高度变化，然后动态修改轮播图的高度
      this.calcSwiperHeight()
    },

    handleCascaderChange() {
      const checkedNode = this.$refs.cascaderRef.getCheckedNodes()
      const { pathLabels } = checkedNode[0]
      this.selectAddressLabel = pathLabels.join('')
    },

    // 选择了结束时间
    handleSelectEndTime() {
      const startTime = new Date(this.activityForm.activities.startTime)
      const endTime = new Date(this.activityForm.activities.endTime)
      if (endTime - startTime <= 0) {
        this.$message.warning('结束时间不能早于开始时间')
        this.activityForm.activities.endTime = ''
      }
    },

    // 转化数据
    transformData(activityStatus) {
      if (!activityStatus) {
        throw new Error('请填写活动发布状态')
      }
      const data = JSON.parse(JSON.stringify(this.activityForm))
      data.activities.stateEnum = activityStatus

      if (NOT_LUAN_QI_BA_ZAO.includes(data.activities.typeEnum)) {
        data.activities.activitiesAddress = DEFAULT_ACTIVITY_ADDRESS
      } else {
        data.activities.activitiesAddress = this.selectAddressLabel
        if (data.activities.activitiesDetailAddress) {
          data.activities.activitiesAddress = data.activities.activitiesAddress + ' ' + data.activities.activitiesDetailAddress
        }
      }

      delete data.activities.activitiesDetailAddress
      return data
    },

    // 上传视频之前
    hanldeBeforeUploadVideo(file) {
      const isVideo = file.type.startsWith('video/')
      const isLimitSize = file.size / 1024 / 1024 < 50 // 转换为MB
      if (!isVideo) {
        this.$message.error('上传文件必须是视频文件!')
      }
      if (!isLimitSize) {
        this.$message.error('上传的视频大小不能超过 50MB!')
      }
      return isVideo && isLimitSize
    },

    // 上传视频完成之后
    handleUplaodVideoSuccess(e) {
      if (!e.code) {
        this.activityForm.activities.promotionalVideo = e.data.url
      }
    }
  },

  computed: {
    startTimeLabel() {
      const DEFAULT_LABEL = '开始时间'
      const publishTimeType = [NOTICE_ACTIVITY_TYPE, BUSINESS_ACTIVITY_TYPE]
      const { typeEnum } = this.activityForm.activities
      return typeEnum ? (publishTimeType.includes(typeEnum) ? '发布时间' : DEFAULT_LABEL) : DEFAULT_LABEL
    },

    activityRules() {
      return getCurrentActivityRules()
    }
  }
}
</script>

<style lang="scss" scoped></style>