yunyubang-web/src/views/marketing/components/addAd.vue

<template>
  <div>
    <xy-dialog :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增广告' : '编辑广告'" :form="form" :rules="rules" @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>活动名称：
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写活动名称" v-model="form.name" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:type>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>类型：
          </div>
          <div class="xy-table-item-content">
            <el-select clearable placeholder="请选择类型" v-model="form.type" style="width: 300px;">
              <el-option v-for="item in types" :value="item.value" :key="item.value" :label="item.label"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:system>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>发布系统：
          </div>
          <div class="xy-table-item-content">
            <el-select clearable placeholder="请选择发布系统" v-model="form.system" style="width: 300px;">
              <el-option v-for="item in systems" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:to>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>跳转方向：
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写跳转方向" v-model="form.to" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:state>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>状态：
          </div>
          <div class="xy-table-item-content">
            <el-select clearable placeholder="请选择状态" v-model="form.state" style="width: 300px;">
              <el-option v-for="item in states" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:sort>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>排序：
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写排序" v-model="form.sort" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:effectDate>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>有效期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker
              :editable="false"
              type="daterange"
              append-to-body
              clearable
              placeholder="请选择有效期"
              v-model="form.effectDate"
              style="width: 300px;"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"/>
          </div>
        </div>
      </template>
      <template v-slot:img>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>图片：
          </div>
          <div class="xy-table-item-content">
            <div v-if="form.img" style="position: relative;">
              <img :src="form.img" class="avatar">
              <Button shape="circle" icon="md-close" type="error" size="small" class="img__delete" @click="form.img = ''"></Button>
            </div>
            <el-upload
              v-else
              accept="picture"
              :limit="1"
              class="avatar-uploader"
              list-type="picture-card"
              action="/api/admin/upload-file"
              :show-file-list="true"
              :on-error="uploadFail"
              :on-success="uploadSuccess"
              :before-upload="uploadBefore">
              <i  class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div style="font-size: 10px;">建议尺寸： 800*450像素</div>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {store,show,update} from '@/api/ad'
import {getparameter} from '@/api/system/dictionary'
import { Message } from 'element-ui'
export default {
  props:{
    systems:{
      type:Array
    }
  },
  data() {
    return {
      id:'',
      type:'add',
      isShow:false,

      types:[{label:'首页轮播图',value:1}],
      states:[
        {
          label:'禁用',
          value:0
        },
        {
          label:'启动',
          value:1
        }
      ],

      form:{
        name:'',
        type:'',
        system:'',
        to:'',
        state:'',
        sort:'',
        effectDate:[],
        img:''
      },
      rules:{
        name:[
          {required:true,message:"请填写活动名称"}
        ],
        type:[
          {required:true,message:"请选择类型"}
        ],
        system:[
          {required:true,message:"请选择发布系统"}
        ],
        to:[
          {required:true,message:"请填写跳转方向"}
        ],
        state:[
          {required:true,message:"请选择状态"}
        ],
        sort:[
          {required:true,message:"请填写排序"}
        ],
        effectDate:[
          {required:true,message:"请选择日期"}
        ],
        img:[
          {required:true,message:"请选择图片"}
        ]
      }
    }
  },
  methods: {

    async getToUrl(){
      let res = await getparameter({number:'toUrl'})
      this.toUrls = res.detail.map(item => {
        return {
          label:item.value,
          value:item.id
        }
      })
    },

    //上传
    uploadFail(err){
      console.log(err)
    },
    uploadSuccess(response){
      console.log(response)
      this.form.img = response.url
    },
    uploadBefore(file){
      console.log(file)
      if((file.size/1000) > 2024){
        Message({
          type:'warning',
          message:'上传图片大小超过2M！'
        })
        return false
      }
    },

    submit(){
      console.log(this.form)

      if(this.type === 'add'){
        store({
          pic:this.form.img,
          name:this.form.name,
          action:this.form.to,
          origin_system:this.form.system,
          type:this.form.type,
          sort:this.form.sort,
          state:this.form.state,
          valid_time_begin:this.form.effectDate[0],
          valid_time_over:this.form.effectDate[1]
        }).then(res => {
          Message({
            type:'success',
            message:'添加广告成功'
          })
          this.isShow = false
          this.$emit('refresh')
          this.form = {
            name:'',
            type:'',
            system:'',
            to:'',
            state:'',
            sort:'',
            effectDate:[],
            img:''
          }
          this.id = ''
        })
        return
      }
      if(this.type === 'editor'){
        update({
          id:this.id,
          pic:this.form.img,
          name:this.form.name,
          action:this.form.to,
          origin_system:this.form.system,
          type:this.form.type,
          sort:this.form.sort,
          state:this.form.state,
          valid_time_begin:this.form.effectDate[0],
          valid_time_over:this.form.effectDate[1]
        }).then(res => {
          Message({
            type:'success',
            message:'编辑广告成功'
          })
          this.isShow = false
          this.$emit('refresh')
          this.form = {
            name:'',
            type:'',
            system:'',
            to:'',
            state:'',
            sort:'',
            effectDate:[],
            img:''
          }
          this.id = ''
        })
        return
      }
    },

    //获取详情
    async getDetailAd (){
      const res = await show({id:this.id})
      this.form.name = res?.name
      this.form.state = res?.state
      this.form.system = res?.origin_system
      this.form.to = Number(res?.action)
      this.form.sort = res?.sort
      this.form.type = res?.type
      this.form.img = res?.pic
      this.form.effectDate = [res?.valid_time_begin,res?.valid_time_over]
    }
  },
  watch:{
    isShow(val){
      if(val){

        if(this.type === 'editor'){
          this.getDetailAd()
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.img__delete{


  position: absolute;
  top: 3px;
  right: 15px;
}
</style>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  display: block;
  border-radius: 6px;
}
</style>