dvcp_v2_webapp/project/activeAnalysis/AppMarketingActivity/components/Add.vue

<template>
  <ai-detail class="content-add">
    <template slot="title">
      <ai-title :title="params.id ? '编辑活动' : '添加活动'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
      </ai-title>
    </template>
    <template slot="content">
      <ai-card title="基本信息">
        <template #content>
          <el-form class="ai-form" :model="form" label-width="180px!important" ref="form">
            <el-form-item prop="title" style="width: 100%;" label="标题" :rules="[{required: true, message: '请输入活动标题', trigger: 'change'}]">
              <el-input size="small" placeholder="请输入活动标题" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item prop="beginTime" label="开始时间" :rules="[{required: true, message: '请选择开始时间', trigger: 'change'}]">
              <el-date-picker
                v-model="form.beginTime"
                type="datetime"
                style="width: 100%"
                size="small"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择开始时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="endTime" label="结束时间" :rules="[{required: true, message: '请选择结束时间', trigger: 'change'}]">
              <el-date-picker
                v-model="form.endTime"
                type="datetime"
                style="width: 100%"
                size="small"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择结束时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="round1ActiveLimit" label="第一轮抽奖限制日活天数">
              <el-input-number size="small" v-model="form.round1ActiveLimit" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item prop="round2ActiveLimit" label="第二轮抽奖限制日活天数" :rules="[{required: true, message: '请输入', trigger: 'change'}]">
              <el-input-number size="small" v-model="form.round2ActiveLimit" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item prop="round3ActiveLimit" label="第三轮抽奖限制日活天数" :rules="[{required: true, message: '请输入', trigger: 'change'}]">
              <el-input-number size="small" v-model="form.round3ActiveLimit" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item prop="round4ActiveLimit" label="第四轮抽奖限制日活天数" :rules="[{required: true, message: '请输入', trigger: 'change'}]">
              <el-input-number size="small" v-model="form.round4ActiveLimit" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item prop="beginTime5" label="第五轮抽奖开始时间" :rules="[{required: true, message: '第五轮抽奖开始时间', trigger: 'change'}]">
              <el-date-picker
                v-model="form.beginTime5"
                type="datetime"
                style="width: 100%"
                size="small"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="第五轮抽奖开始时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="round5ActiveLimit" label="第五轮抽奖限制日活天数" :rules="[{required: true, message: '请输入', trigger: 'change'}]">
              <el-input-number size="small" v-model="form.round5ActiveLimit" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item style="width: 100%;" prop="wxQrcode" label="微信插件二维码" :rules="[{required: true, message: '请上传', trigger: 'change'}]">
              <ai-uploader
                :instance="instance"
                v-model="form.wxQrcode"
                :limit="1">
              </ai-uploader>
            </el-form-item>
            <div>
              <el-form-item :label="'奖品' + (index + 1)" style="width: 100%;" v-for="(item, index) in form.prizes" :key="'prizes' + (index + 1)">
                <div>
                  <div class="form-flex">
                    <div class="prize-item">
                      <span>奖品名称：</span>
                      <el-input size="small" style="width: 265px;" placeholder="请输入奖品名称" v-model="item.name"></el-input>
                    </div>
                    <div class="prize-item">
                      <span>中奖规则：</span>
                      <el-input size="small" style="width: 265px;" placeholder="指定第x个抽奖的人中奖，多个逗号隔开" v-model="item.rule"></el-input>
                    </div>
                    <div class="prize-item">
                      <span>奖品总数：</span>
                      <el-input-number size="small" v-model="item.total" :min="1"></el-input-number>
                    </div>
                    <div class="prize-item">
                      <span>奖品排序：</span>
                      <el-input-number size="small" v-model="item.showIndex" :min="1"></el-input-number>
                    </div>
                    <div class="prize-item">
                      <span>开放轮次：</span>
                      <el-radio-group v-model="item.belongRound">
                        <el-radio :label="1">第一轮</el-radio>
                        <el-radio :label="2">第二轮</el-radio>
                        <el-radio :label="3">第三轮</el-radio>
                        <el-radio :label="4">第四轮</el-radio>
                        <el-radio :label="5">第五轮</el-radio>
                      </el-radio-group>
                    </div>
                    <div class="prize-item">
                      <span>是否默认：</span>
                      <el-switch
                        v-model="item.defaultPrize"
                        active-value="1"
                        inactive-value="0">
                      </el-switch>
                    </div>
                    <div class="prize-item">
                      <span>奖品图片：</span>
                      <ai-uploader
                        :instance="instance"
                        v-model="item.picture"
                        :limit="1">
                      </ai-uploader>
                    </div>
                    <div class="prize-item">
                      <el-button type="danger" @click="remove(index)">删除</el-button>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </div>
            <el-form-item style="width: 100%;">
              <el-button type="primary" @click="add">添加奖品</el-button>
            </el-form-item>
          </el-form>
        </template>
      </ai-card>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'Add',

    props: {
      instance: Function,
      dict: Object,
      params: Object
    },
    data () {
      return {
        info: {},
        form: {
          title: '',
          beginTime: '',
          beginTime1: '',
          beginTime2: '',
          beginTime3: '',
          beginTime4: '',
          beginTime5: '',
          endTime: '',
          round1ActiveLimit: '',
          round2ActiveLimit: '',
          round3ActiveLimit: '',
          round4ActiveLimit: '',
          round5ActiveLimit: '',
          wxQrcode: [],
          prizes: []
        },
        id: ''
      }
    },

    computed: {
      ...mapState(['user'])
    },

    created () {
      if (this.params && this.params.id) {
        this.id = this.params.id
        this.getInfo(this.params.id)
      }
    },

    methods: {
      getInfo (id) {
        this.instance.post(`/app/appmarketingactivityinfo/queryDetailById?id=${id}`).then(res => {
          if (res.code === 0) {
            this.form = res.data

            this.form.wxQrcode = [{
              url: res.data.wxQrcode
            }]
            if (res.data.prizes.length) {
              this.form.prizes = res.data.prizes.map(v => {
                return {
                  ...v,
                  picture: [{
                    url: v.picture
                  }]
                }
              })
            }
          }
        })
      },

      add () {
        this.form.prizes.push({
          name: '',
          picture: [],
          rule: '',
          showIndex: '',
          total: '',
          defaultPrize: '',
          belongRound: ''
        })
      },

      remove (index) {
        this.form.prizes.splice(index, 1)
      },

      confirm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.instance.post(`/app/appmarketingactivityinfo/addOrUpdate`, {
              ...this.form,
              id: this.params.id || '',
              wxQrcode: this.form.wxQrcode[0].url,
              prizes: this.form.prizes.map(v => {
                return {
                  ...v,
                  picture: v.picture[0].url
                }
              })
            }).then(res => {
              if (res.code == 0) {
                this.$message.success('提交成功')
                setTimeout(() => {
                  this.cancel(true)
                }, 600)
              }
            })
          }
        })
      },

      cancel (isRefresh) {
        this.$emit('change', {
          type: 'List',
          isRefresh: !!isRefresh
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .form-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .prize-item {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    width: 50%;

    span {
      color: #666;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
</style>