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="formInline" :rules="rules" size="small" label-width="80px">

      <el-form-item label="方案编号" prop="name">
        <el-input v-model="formInline.id" />
      </el-form-item>
      <el-form-item label="方案标题" prop="name">
        <el-input v-model="formInline.schemeTitle" />
      </el-form-item>
      <el-form-item label="投放渠道" prop="name">
        <el-input v-model="formInline.promotionContent" />
      </el-form-item>

      <el-form-item label="上线时间" prop="onlineTime">
      <el-date-picker
      v-model='formInline.createDate'
             type="datetime"
             placeholder="选择日期"
             value-format="yyyy-MM-dd HH:mm:ss"
           >
           </el-date-picker>
      </el-form-item>
      </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>
    <div slot="footer" class="dialog-footer">
      <el-button  @click="doCancel" size="mini" style="background-color: #fff;color:#000" >取消</el-button>
      <el-button  @click="doSubmit" size="mini" style="background-color: #3F9B6A;color: #fff">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import LinkConfig from '@/components/adCoverConfig/linkConfig'
import { uploadUrl,token } from '@/utils/request'
 import axios from 'axios'
import {
  add,
  update
} from '@/api/advert'
import {
  getCoupons
} from '@/api/public'
import {
addTui,
editTui
} from '@/api/tuiguancehuguanli'

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,
        fNum:0,
        fTit:'',
        qudao:''
      },
      id:'',
      formInline: {
        page: '1', // 当前页
        pageSize: '10', // 每页记录数
        id:'',
        schemeTitle:'',//方案标题
        promotionContent:'',//投放渠道
        createDate:'',
        imgs:''
      },
      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: {},
      success:false
    }
  },
  mounted() {
    axios.post('http://localhost:9003/cerePromotion/queryByPage')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  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) {
        console.log(1111)
        formInline={
          page: '1', // 当前页
          pageSize: '10', // 每页记录数
          id:'',
          schemeTitle:'',//方案标题
          promotionContent:'',//投放渠道
          createDate:'',
          imgs:''
        }
        // this.form = {
        //   popupImg: '',
        //   name: '',
        //   closeImg: '',
        //   applyGroup: 1,
        //   triggerCondition: 1,
        //   jumpContent: '',
        //   jumpType: 0,
        //   status: 1,
        //   weight:0,
        //   sTime:0
        // }
        // this.jumpContent = {}
        // this.onlineTime = []
        this.$nextTick(function () {
          this.$refs.form.clearValidate();
        })
      } else {
        console.log(2222)
        // 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])
        // })
          this.id = row.id
        this.formInline = {
        id:row.id,
         createUser: row.createUser,
          schemeTitle:row.schemeTitle,
          promotionContent:row.promotionContent,
         createDate:row.createDate
        }
      }
    },
    // 跳转类型切换
    jumpTypeChange () {
      this.jumpContent = {}
    },
    // 取消
    doCancel () {
      this.visible = false
    },
    // 提交
    doSubmit () {

              if(this.isAdd){
                 console.log('新增')
                console.log(this.formInline)
                const that = this
                 addTui(this.formInline).then(res=>{
                    console.log(res.data)
                    that.isAdd = !that.isAdd
                     that.visible = false
                    that.$emit('ok')
                 })
              }else{
                console.log('编辑')
                 const that = this
                editTui(this.formInline).then(res=>{
                       that.isAdd = !that.isAdd
                        that.visible = false
                       that.$emit('ok')
                })

                         return;
              }

    },
    // 获取优惠券信息
    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>