admin/src/pages/system/marketingActivities/addActivities/index.vue

<template>
  <div class="subPage">
    <form class="mainForm">
      <ul>
        <li class="flex-h">
          <span>活动名称：<em>*</em></span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input v-model="activityName" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>活动类型：<em>*</em></span>
          <div class="flex-item">
            <div>
              <el-select v-model="regValue" placeholder="请选择">
                <el-option
                  v-for="item in regOptions"
                  :key="item.regValue"
                  :label="item.label"
                  :value="item.regValue">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>活动方式：<em>*</em></span>
          <div class="flex-item">
            <div>
              <el-select v-model="activeType" placeholder="请选择">
                <el-option
                  v-for="item in activeTypeList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h" v-if="activeType === 'giveCoupon'">
          <span>赠券卡券：<em>*</em></span>
          <div class="flex-item">
            <div>
              <el-select v-model="giftValue" placeholder="请选择">
                <el-option
                  v-for="item in giftOptions"
                  :key="item.giftValue"
                  :label="item.label"
                  :value="item.giftValue">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h" v-if="activeType === 'giveCoupon'">
          <span>赠券数量：<em>*</em></span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input v-model="giftNum" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>活动描述：</span>
          <div class="flex-item">
            <div>
              <el-input
                type="textarea"
                :rows="10"
                placeholder="请输入内容"
                v-model="desc">
              </el-input>
            </div>
          </div>
        </li>
        <li style="text-align:center">
          <el-button type="primary" size="mini" @click="submitData">提交</el-button>
          <el-button type="warning" size="mini" @click="redirection('activitiesList')">返回</el-button>
        </li>
      </ul>
    </form>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {
      msg: '添加活动',
      postData: {
        TableId: '', // 桌位id
        AreaId: '', // 区域id
        CaseId: '', // 案场id
        OrgId: '', // 机构id
        TableNo: '', // 桌位编号
        Order: '', // 排序
      },
      regOptions: [{
        regValue: 'reigste',
        label: '注册'
      }],
      activeTypeList: [{
        value: '送券',
        id: 'giveCoupon'
      }],
      activeType: '',
      regValue: '',
      giftOptions: [], // [{giftValue: '1',label: '饮品通用券'}, {giftValue: '2',label: '课程通用券'}, {giftValue: '3',label: '小小外交官体验券'}]
      giftValue: '',
      giftLabel: '',
      activityName: '', // 活动名称
      activityType: this.regValue, // 活动类型
      resourceDesc: '', // 存储JSON (赠券类型,赠送数量,活动描述)
      giftNum: '', // 赠送数量
      desc: '', // 活动描述
      giftList: [] // 赠券卡券数据体
    }
  },
  mounted () {
    this.getCouponList()
  },
  computed: {
    ...mapState({
      defaultCaseId: x => x.app.cases.default,
    }),
    giftData: {
      get () {
        let jsonData = this.$data.giftList
        let data = []
        for (let i = 0; i < jsonData.length; i++) {
          let tempData = []
          tempData.giftValue = jsonData[i].CouponId
          tempData.label = jsonData[i].CouponName
          data.push(tempData)
        }
        return data
      }
    }
  },
  methods: {
    redirection (pathName) { // 重定向
      this.$router.push({ name: pathName })
    },
    submitData () { // 提交数据
      // 判断是否提交成功
      // 提交成功,跳转页面
      if (this.activityName === '') {
        this.$message({
          type: 'error',
          message: '活动名称不能为空'
        })
        return false
      }
      if (this.regValue === '') {
        this.$message({
          type: 'error',
          message: '活动类型不能为空'
        })
        return false
      }
      if (this.activeType === '') {
        this.$message({
          type: 'error',
          message: '活动方式不能为空'
        })
        return false
      }
      if (this.giftValue === '') {
        this.$message({
          type: 'error',
          message: '赠券卡券不能为空'
        })
        return false
      }
      if (this.giftNum - 0 < 1 && (this.giftNum - 0) % 1 !== 0) {
        this.$message({
          type: 'error',
          message: '赠券数量须为大于0正整数'
        })
        return false
      }
      let tempGiftOptions = this.$data.giftOptions
      let tempGiftValue = this.$data.giftValue
      for (let i = 0; i < tempGiftOptions.length; i++) {
        if (tempGiftOptions[i].giftValue === tempGiftValue) {
          this.$data.giftLabel = tempGiftOptions[i].label
          break
        }
      }
      let jsonString = '{"giftValue":"' + this.$data.giftValue + '","giftLabel":"' + this.$data.giftLabel + '","giftNum":"' + this.$data.giftNum + '","desc":"' + this.$data.desc + '"}'
      this.$ajax(this.$api.marketingActivities.addMarketing.url, {
        method: this.$api.marketingActivities.addMarketing.method,
        queryData: { activityName: this.$data.activityName, activityType: this.$data.regValue, activeType: this.activeType, resourceDesc: jsonString, CaseId: this.defaultCaseId }
      }).then(res => {
        // console.log(res)
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        // 跳转路由
        this.redirection('activitiesList')
      })
    },
    getCouponList () {
      this.$ajax(this.$api.marketingActivities.getCouponList.url, {
        method: this.$api.marketingActivities.getCouponList.method,
        urlData: {
          type: 'system',
        },
      }).then(res => {
        this.giftList = res
        this.giftOptions = this.giftData
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>