bsdgy-front/src/pages/activity/addActivity.vue

<template>
  <Modal v-model="dispalyModal" width="1000" :mask-closable="false" @on-cancel="cancel">
    <p slot="header" style="color:#f60;text-align:left">
        <span>配置活动</span>
    </p>
    <div>基本配置</div>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
      <Row>
        <i-col style="text-align: left;"  span="8">
          <FormItem label="" prop="uploadImg">
            <!-- <Upload
              type="select"
              :on-success="uploadImgSuccess"
              :show-upload-list="false"
              :before-upload="handleBeforeUpload"
              action="//jsonplaceholder.typicode.com/posts/">
              <div style="padding: 20px 0;">
                  <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                  <p>上传活动图片</p>
              </div>
            </Upload> -->
            <Upload
              ref='upload'
              :show-upload-list="false"
              :on-success="uploadImgSuccess"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              :before-upload="handleBeforeUpload"
              multiple
              type="drag"
              action=""
              style="display: inline-block;">
              <div style="width: 200px;height:200px;line-height: 200px;">
                  <span v-if="!formValidate.logo">请上传图片</span>
                <img v-if="formValidate.logo" :src="formValidate.logo" alt="" style="width: 100%; height: auto">
              </div>
          </Upload>
          </FormItem>
        </i-col>
        <i-col span="15" offset="1">
          <FormItem label="活动名称" prop="activityName">
            <i-input type="text" v-model="formValidate.activityName" placeholder="请输入活动名称"></i-input>
          </FormItem>
          <Form-item label="活动描述" prop="activityDsc">
              <i-input v-model="formValidate.activityDsc" type="textarea" :autosize="{minRows: 3}" placeholder="请输入活动描述"></i-input>
          </Form-item>
          <FormItem label="APPID" prop="appId">
              <i-input type="text" v-model="formValidate.appId" placeholder="请输入appid"></i-input>
          </FormItem>
          <FormItem label="URI" prop="uri">
              <i-input type="text" v-model="formValidate.uri" placeholder="请输入URI"></i-input>
          </FormItem>
        </i-col>
      </Row>
    </Form>
    <div class="topic">活动类型</div>
    <Row class="inputItem" v-for="(item, index) in inputActivityList" :key="index">
      <i-col :span="2">
        类型{{index+1}}
      </i-col>
      <i-col :span="20">
        <i-input class="inputClass" type="text" v-model="item.value1" placeholder=""></i-input>
        <i-input class="inputClass" type="text" style="margin-left: 20px" v-model="item.value2" placeholder=""></i-input>
        <Button style="margin-left: 20px" type="error" @click="delActivityInput(index)">删除</Button>
      </i-col>
    </Row>
    <Button style="margin-top: 10px" type="primary" @click="addActivityInput">+添加活动类型</Button>
    <div style="text-align: center;" slot="footer">
        <Button type="primary" size="large" shape="circle" :loading="modal_loading" @click="next">保存</Button>
    </div>
    </Modal>
</template>
<script>
import ActivityManager from "../../services/ActivityManager/ActivityManager";
import axios from 'axios';
export default {
  name: "addActivity",
  data() {
		return {
      dispalyModal: false,
      currentStep: 0,
      modal_loading: false,
      inputActivityList: [],
      imageName: '212',
      formValidate: {
          activityName: '',
          activityDsc: '',
          appId: '',
          uri: '',
        logo: '',
      },
      ruleValidate: {
        activityName: [
          { required: true, message: '活动名称不能为空', trigger: 'blur' }
        ],
        activityDsc: [
          { required: true, message: '活动描述不能为空', trigger: 'blur' }
        ],
        appId: [
          { required: true, message: 'appId不能为空', trigger: 'blur' }
        ],
        uri: [
          { required: true, message: 'URI不能为空', trigger: 'blur' }
        ],
        // uploadImg: [
        //   { required: true, message: '请上传活动图片', trigger: 'blur' }
        // ]
      }
		}
  },
  props: {
    addActivityModal: Boolean,
    id: String
  },
  watch: {
    addActivityModal(val) {
      this.dispalyModal = val
      if(val === true && this.id) {
        this.getActivityData()
      }
    },
  },
	mounted() {
  },
  methods: {
    addActivityInput() {
      this.inputActivityList.push({
        value1: '',
        value2: ''
      })
    },
    delActivityInput(index) {
      this.inputActivityList.splice(index,1)
    },
    cancel() {
      this.inputActivityList = []
      this.formValidate.appId = ''
      this.formValidate.activityDsc = ''
      this.formValidate.activityName = ''
      this.formValidate.uri = ''
      this.dispalyModal = false
      this.$emit("dispalyAddActivityModal", false, false)
    },
    getActivityData() {
      let that = this
      let data = {
        id: that.id
      }
      ActivityManager.getActivityInfo(data, function (data) {
        that.inputActivityList = []
        that.formValidate.appId = data.data.results.appId
        that.formValidate.activityDsc = data.data.results.description
        that.formValidate.activityName = data.data.results.name
        that.formValidate.uri = data.data.results.uri
        data.data.results.params.forEach(item => {
          that.inputActivityList.push({
            value1: item.name,
            value2: item.description
          })
        })
      })
    },
    uploadImgSuccess(res, file) {
      debugger
        this.imageName = file.name
    },
    handleBeforeUpload(res) {
      const me = this;
      let data = new FormData();
      data.append('file', res);
      axios({
        method: 'post',
        url: '/upload',
        data: data,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(function (res) {
        console.log(res);
        if (res.data.success) {
          me.formValidate.logo = res.data.results;
        }
      })
    },
    next() {
      let that = this
      this.$refs["formValidate"].validate((valid) => {
          if (valid) {
            let param = []
            that.inputActivityList.forEach(element => {
              param.push({
                defaultVal: element.value1,
                description: that.formValidate.activityDsc,
                key: element.value2,
                name: 1,
                type: 2,
                id: that.id
              })
            })
            // param = JSON.stringify(param)
            let data = {
                  appId: that.formValidate.appId,
                  image: that.imageName,
                  name: that.formValidate.activityName,
                  uri: that.formValidate.uri,
                  params: param,
                  isGetActivityInfo: true,
                  description: that.formValidate.activityDsc,
                  id: that.id
                }
            ActivityManager.addOreditActivity(data, function (data) {
              console.log(data)
                that.addActivityModal = false
                that.$emit("dispalyAddActivityModal", false, true)
            })
          } else {
              that.$Message.error('表单验证失败!');
          }
      })
    }
  }
}
</script>

<style  scoped>
.inputClass{
  width: 1000px;
}
.inputItem{
  margin-top: 40px;
}
.topic{
  margin-top: 100px;
}
</style>