SxsnPC/src/views/modules/activity/detail.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">活动详情</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" label-width="125px">
                    <el-form-item label="活动类型" prop="typeId">
                        <div class="form-text">{{ typeOptions.find(t=>t.id===basicForm.typeId)?(typeOptions.find(t=>t.id===basicForm.typeId).typeName||''):'' }}</div>
                    </el-form-item>
                    <el-form-item label="活动分类" prop="categoryId">
                        <div class="form-text">{{ categoryOptions.find(t=>t.id===basicForm.categoryId)?(categoryOptions.find(t=>t.id===basicForm.categoryId).categoryName||''):'' }}</div>
                    </el-form-item>
                    <el-form-item label="活动名称" prop="activityName">
                        <div class="form-text">{{ basicForm.activityName||'' }}</div>
                    </el-form-item>
                    <el-form-item label="报名时间" prop="signupEndTime">
                      <div class="adfac">
                        <div class="form-text">{{ basicForm.signupStartTime||'' }}</div>
                        <span style="margin: 0 10px;">至</span>
                        <div class="form-text">{{ basicForm.signupEndTime||'' }}</div>
                      </div>
                    </el-form-item>
                    <el-form-item label="活动时间" prop="activityEndTime">
                      <div class="adfac">
                        <div class="form-text">{{ basicForm.activityStartTime||'' }}</div>
                        <span style="margin: 0 10px;">至</span>
                        <div class="form-text">{{ basicForm.activityEndTime||'' }}</div>
                      </div>
                    </el-form-item>
                    <el-form-item label="活动地点" prop="districtId">
                      <div class="adfac">
                        <div class="form-text">{{ provinceOptions.find(t=>t.id===basicForm.provinceId)?(provinceOptions.find(t=>t.id===basicForm.provinceId).name||''):'' }}</div>
                        <div class="form-text">{{ cityOptions.find(t=>t.id===basicForm.cityId)?(cityOptions.find(t=>t.id===basicForm.cityId).name||''):'' }}</div>
                        <div class="form-text">{{ areaOptions.find(t=>t.id===basicForm.districtId)?(areaOptions.find(t=>t.id===basicForm.districtId).name||''):'' }}</div>
                        <div class="form-text">{{ basicForm.address||'' }}</div>
                      </div>
                    </el-form-item>
                    <el-form-item label="渠道方" prop="channelId">
                      <div class="form-text">{{ channelOptions.find(t=>t.id===basicForm.channelId)?(channelOptions.find(t=>t.id===basicForm.channelId).channelName||''):'' }}</div>
                    </el-form-item>
                    <el-form-item label="举办方" prop="organizerId">
                      <div class="form-text">{{ organizerOptions.find(t=>t.id===basicForm.organizerId)?(organizerOptions.find(t=>t.id===basicForm.organizerId).channelName||''):'' }}</div>
                    </el-form-item>
                    <el-form-item label="活动封面图片" prop="coverFile">
                      <div class="adfac">
                        <img :src="img.url" v-for="img in fileListCover" :key="img.url" style="width: 158px;height: 214px;">
                      </div>
                    </el-form-item>
                    <el-form-item label="活动详情banner" prop="imageFiles">
                      <div class="adfac">
                        <img :src="img.url" v-for="img in fileListBanner" :key="img.url" style="width: 306px;height: 220px;margin-right: 20px;">
                      </div>
                    </el-form-item>
                    <el-form-item label="活动详情" prop="activityDetails" class="formdetail">
                      <div v-html="basicForm.activityDetails||''"></div>
                        <!-- <editor-vue style="margin-top: -30px;" :content="basicForm.activityDetails"  @EditorChange="getEditor" ref="infoIntroduceRef"></editor-vue> -->
                    </el-form-item>
                </el-form>
            </div>
            <div class="form" v-else-if="tidx===2">
                <el-form ref="moreRef" :model="moreForm" label-width="125px">
                  <el-form-item label="参与方式" prop="joinMode">
                    <div class="form-text">{{ dataList.find(t=>t.dictValue===moreForm.joinMode)?(dataList.find(t=>t.dictValue===moreForm.joinMode).dictLabel||''):'' }}</div>
                  </el-form-item>
                  <el-form-item label="报名人数">
                    <div class="f-text adfac" v-if="moreForm.recruitmentFlag===1" style="height: 40px; margin-left: 0;">最多报名人数{{ moreForm.recruitmentMax||0 }}人，最少报名人数{{ moreForm.recruitmentMin||0 }}人</div>
                    <div class="form-text" v-else>不限制</div>
                  </el-form-item>
                  <el-form-item label="会员等级">
                    <div class="f-text adfac" v-if="moreForm.userLevelFlag===1" style="height: 40px; margin-left: 0;">限制{{ moreForm.userLevel||0 }}级</div>
                    <div class="form-text" v-else>不限制</div>
                  </el-form-item>
                  <el-form-item label="会员年龄">
                    <div class="f-text adfac" v-if="moreForm.userAgeFlag===1" style="height: 40px; margin-left: 0;">最小参加年龄{{ moreForm.userAgeMin||0 }}岁，最大参加年龄{{ moreForm.userAgeMax||0 }}岁</div>
                    <div class="form-text" v-else>不限制</div>
                  </el-form-item>
                  <el-form-item label="公益支持">
                    <div class="f-text adfac" v-if="moreForm.activityLimit===2" style="height: 40px; margin-left: 0;">需要专享券</div>
                    <div class="f-text adfac" v-else-if="moreForm.activityLimit===1" style="height: 40px; margin-left: 0;">需要{{moreForm.valueLimit||0}}爱心值</div>
                    <div class="form-text" v-else>免费</div>
                  </el-form-item>
                  <el-form-item label="爱心值对应内容" v-if="moreForm.activityLimit==1">
                    <div class="f-text adfac" style="height: 40px; margin-left: 0;">{{ moreForm.loveValueContent||'' }}</div>
                  </el-form-item>
                  <el-form-item label="可获得义工时长"  prop="volunteerHours">
                    <div class="f-text adfac" style="height: 40px; margin-left: 0;">{{ moreForm.volunteerHours||0 }}小时</div>
                  </el-form-item>
                  <el-form-item label="报名次数限制">
                    <div class="f-text adfac" style="height: 40px; margin-left: 0;">{{ moreForm.timesLimit?(moreForm.timesLimit+'次'):'不限制' }}</div>
                  </el-form-item>
                  <el-form-item label="负责人" prop="contact">
                    <div class="f-text adfac" style="height: 40px; margin-left: 0;">{{ moreForm.contact||'' }}</div>
                  </el-form-item>
                  <el-form-item label="负责人电话" prop="contactPhone">
                    <div class="f-text adfac" style="height: 40px; margin-left: 0;">{{ moreForm.contactPhone||'' }}</div>
                  </el-form-item>
                  <el-form-item label="上架状态" prop="state">
                    <div class="form-text">{{ moreForm.state?'已上架':'已下架' }}</div>
                  </el-form-item>
                </el-form>
            </div>
        </div>
    </el-card>
</template>

<script>
import moment from 'moment'
import Cookies from 'js-cookie'
import editorVue from '@/components/editor'
import mixinRegionModule from '@/mixins/region-module.js'
import { getDictDataList } from '@/utils'
export default {
  components: { editorVue },
  mixins: [mixinRegionModule],
  data () {
    return {
      dataList: getDictDataList('join_mode'),
      currentFile: '',
      cropperIndex: null,
      showCropper: false,
      isCropper: true,
      currentFile2: '',
      cropperIndex2: null,
      showCropper2: false,
      isCropper2: true,
      updType: 1,
      typeOptions: [],
      categoryOptions: [],
      channelOptions: [],
      organizerOptions: [],
      tidx: 1,
      basicForm: {
        id: '',
        typeId: '',
        categoryId: '',
        activityName: '',
        signupStartEnd: [],
        signupStartTime: '',
        signupEndTime: '',
        activityStartEnd: [],
        activityStartTime: '',
        activityEndTime: '',
        provinceId: '',
        cityId: '',
        districtId: '',
        address: '',
        channelId: '',
        organizerId: '',
        coverFile: '',
        imageFiles: '',
        activityDetails: ''
      },
      activityDetailsTemp: '',
      url: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token')}`,
      fileListCover: [],
      fileListBanner: [],
      moreForm: {
        joinMode: '',
        recruitmentFlag: 1,
        recruitmentMax: '',
        recruitmentMin: '',
        userLevelFlag: 1,
        userLevel: 1,
        userAgeFlag: 1,
        userAgeMin: '',
        userAgeMax: '',
        activityLimit: 1,
        valueLimit: '',
        loveValueContent: '',
        volunteerHours: 0,
        timesLimit: '',
        contact: '',
        contactPhone: '',
        state: false
      },
      moreForm2: {
        joinMode: ''
      }
    }
  },
  created () {
    this.getTypeOptions()
    this.getCategoryOptions()
  },
  mounted () {
    this.provincAreaDetailInfoList()
    this.getSupplierOptions()

    this.$nextTick(() => {
      if (this.$route.query.id) {
        this.getDetail(this.$route.query.id)
      }
    })
  },
  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.fileListCover = [{ name: '', url: res.data.coverFile }]
        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
      })
    },
    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 = ''
    },
    successHandleCover (res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      this.fileListCover.unshift({
        name: '',
        url: res.data
      })
      this.basicForm.coverFile = this.fileListCover[0].url
    },
    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.$router.push('/activity-list')
    },
    changeTab (idx) {
      this.tidx = idx
    },
    handleNext () {
      this.$refs.basicRef.validate(valid => {
        if (valid) {
          if (Date.parse(this.basicForm.signupStartTime) > Date.parse(this.basicForm.signupEndTime)) return this.$message.error('报名结束时间不能小于报名开始时间')
          if (Date.parse(this.basicForm.signupEndTime) < Date.parse(new Date())) return this.$message.error('报名结束时间不能小于当前时间')
          if (Date.parse(this.basicForm.signupEndTime) > Date.parse(this.basicForm.activityStartTime)) return this.$message.error('活动开始时间不能小于报名结束时间')
          if (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
        }
      })
    },
    handlePrevious () {
      this.tidx = 1
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.infoIntroduceRef.init()
          this.basicForm.activityDetails = this.activityDetails
        }, 500)
      })
    },
    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">
  ::v-deep .formdetail .el-form-item__content{
    line-height: inherit !important;
  }

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