webapp / GreenwayWeb

<template>
  <el-dialog :close-on-click-modal="false" :title="isAdd?'新建弹窗广告':'编辑弹窗广告'" width="800px" top="5vh" :visible.sync="visible">
    <el-form ref="form" class="dialog-form" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="广告名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="上线时间" prop="onlineTime">
        <el-date-picker
          v-model="form.onlineTime"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="弹窗图片" prop="popupImg">
        <el-upload
          class="avatar-uploader"
          :action="action"
          :headers="myHeaders"
          :show-file-list="false"
          :on-success="(res)=>{handleAvatarSuccess(res,'popupImg')}"
        >
          <img v-if="form.popupImg" :src="form.popupImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <span class="tips">建议尺寸：500*700px</span>
      </el-form-item>
      <el-form-item label="关闭按钮" prop="closeImg">
        <el-upload
          class="avatar-uploader"
          :action="action"
          :headers="myHeaders"
          :show-file-list="false"
          :on-success="(res)=>{handleAvatarSuccess(res,'closeImg')}"
        >
          <img v-if="form.closeImg" :src="form.closeImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <span class="tips">建议尺寸：60*60px</span>
      </el-form-item>
      <el-form-item label="跳转类型" prop="jumpType">
        <el-radio-group v-model="form.jumpType" class="radio-link-type" @change="jumpTypeChange">
          <el-radio class="radio" :label="0">不跳转</el-radio>
          <el-radio class="radio" :label="1">商品</el-radio>
          <el-radio class="radio" :label="2">分类</el-radio>
          <el-radio class="radio" :label="3">平台券</el-radio>
          <el-radio class="radio" :label="4">小程序</el-radio>
          <!--<el-radio class="radio" :label="5">公众号文章</el-radio>-->
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.jumpType!==0" label="链接配置" prop="jumpContent">
        <link-config v-model="jumpContent" :link-type="form.jumpType" />
      </el-form-item>
      <el-form-item label="触发条件" prop="triggerCondition">
        <el-radio-group v-model="form.triggerCondition">
          <el-radio :label="1">每天进入商城首页</el-radio>
          <el-radio :label="2">支付成功后</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="针对会员" prop="applyGroup">
        <el-radio-group v-model="form.applyGroup">
          <el-radio :label="1">全体成员</el-radio>
          <el-radio :label="2">会员</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--      <el-form-item label="权重" prop="weight">-->
      <!--        <el-input v-model="form.weight" class="input-num" type="number" placeholder="输入数字" />-->
      <!--      </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="doCancel">取消</el-button>
      <el-button type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import LinkConfig from '@/components/adCoverConfig/linkConfig'
import { uploadUrl,token } from '@/utils/request'
import {
  add,
  update
} from '@/api/advert'
import {
  getCoupons
} from '@/api/public'
export default {
  name: 'AdForm',
  components: { LinkConfig },
  data () {
    return {
      visible: false,
      action: uploadUrl,
      myHeaders: {
        'Authorization-admin': token
      },
      form: {
        popupImg: '',
        name: '',
        closeImg: '',
        customerType: 1,
        triggerCondition: 1,
        jumpContent: '',
        jumpType: 0,
        status: 1,
        weight: 0
      },
      rules: {
        name: [
          { required: true, message: '广告名称不能为空', trigger: 'blur' }
        ],
        onlineTime: [
          { required: true, message: '上线时间不能为空', trigger: 'change' }
        ],
        jumpType: [
          { required: true, message: '跳转类型不能为空', trigger: 'change' }
        ],
        popupImg: [
          { required: true, message: '弹窗图片不能为空', trigger: 'none' }
        ],
        closeImg: [
          { required: true, message: '关闭按钮不能为空', trigger: 'none' }
        ],
        jumpContent: [
          { required: true, message: '链接配置不能为空', trigger: 'none' }
        ],
        triggerCondition: [
          { required: true, message: '触发条件不能为空', trigger: 'change' }
        ],
        applyGroup: [
          { required: true, message: '针对会员不能为空', trigger: 'change' }
        ],
        weight: [
          { required: true, message: '权重不能为空', trigger: 'blur' }
        ]
      },
      isAdd: false,
      jumpContent: {}
    }
  },
  methods: {
    // 图片上传回调
    handleAvatarSuccess (response, key) {
      const { url } = response.data
      this.form[key] = url
      console.log(this.form, 'urls')
      this.$forceUpdate()
    },
    // 打开弹出窗
    show (row) {
      this.isAdd = !row
      this.visible = true
      if (this.isAdd) {
        this.form = {
          popupImg: '',
          name: '',
          closeImg: '',
          applyGroup: 1,
          triggerCondition: 1,
          jumpContent: '',
          jumpType: 0,
          status: 1,
          weight: 0
        }
        this.jumpContent = {}
        this.onlineTime = []
        this.$nextTick(function () {
          this.$refs.form.clearValidate();
        })
      } else {
        this.form = JSON.parse(JSON.stringify(row))
        this.jumpContent = row.jumpContent ? JSON.parse(row.jumpContent) : {}
        if(this.form.jumpType === 3){
          this.getCoupons(this.jumpContent.items)
        }
        this.$nextTick(function () {
          this.$set(this.form, 'onlineTime', [row.startTime, row.endTime])
        })
      }
    },
    // 跳转类型切换
    jumpTypeChange () {
      this.jumpContent = {}
    },
    // 取消
    doCancel () {
      this.visible = false
    },
    // 提交
    doSubmit () {
      if(this.form.jumpType === 3){
        const ids = this.jumpContent.items.map((item)=>{
          return item.activityId
        }).join(',')
        this.jumpContent.items = ids
      }
      var _jumpContent = JSON.stringify(this.jumpContent)
      if (_jumpContent && _jumpContent !== '{}') {
        this.form.jumpContent = _jumpContent
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.startTime = this.form.onlineTime[0]
          this.form.endTime = this.form.onlineTime[1]
          delete this.form.onlineTime
          if (this.isAdd) {
            add(this.form).then(res => {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.$emit('reset')
              this.visible = false
            }).catch(err => {
              this.visible = false
            })
          } else {
            update(this.form).then(res => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.$emit('reset')
              this.visible = false
            }).catch(err => {
              this.visible = false
            })
          }
        }
      })
    },
    // 获取优惠券信息
    getCoupons(ids) {
      var _this = this
      const params = {
        page: 1,
        pageSize: 999,
        ids
      }
      getCoupons(params).then(res => {
        console.log(this.form,res.data,'form')
        this.jumpContent.items = res.data.list
      })
    },
  }
}
</script>

<style scoped>
.radio-link-type .el-radio{
  padding: 5px 0;
}
.tips{
  font-size: 12px;
  color: #8c8c8c;
}
</style>