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

<template>
  <div class="subPage">
    <div class="content">
      <div class="input-div">
        <div style="float: left; font-size: 20px;">
          活动名称:
        </div>
        <div style="float: left; margin-left: 30px;">
          <template>
            <el-input v-model="activityName" placeholder="请输入内容" style="width: 300px;"></el-input>
          </template>
        </div>
      </div>
      <div class="input-div">
        <div style="float: left; font-size: 20px;">
          活动类型:
        </div>
        <div style="float: left; margin-left: 30px;">
          <template>
            <el-select v-model="regValue" placeholder="请选择" style="width: 300px;">
              <el-option
                v-for="item in regOptions"
                :key="item.regValue"
                :label="item.label"
                :value="item.regValue">
              </el-option>
            </el-select>
          </template>
        </div>
      </div>
      <div class="input-div">
        <div style="float: left; font-size: 20px;">
          赠券卡券:
        </div>
        <div style="float: left; margin-left: 30px;">
          <template>
            <el-select v-model="giftValue" placeholder="请选择" style="width: 300px;">
              <el-option
                v-for="item in giftOptions"
                :key="item.giftValue"
                :label="item.label"
                :value="item.giftValue">
              </el-option>
            </el-select>
          </template>
        </div>
      </div>
      <div class="input-div">
        <div style="float: left; font-size: 20px;">
           赠券数量:
        </div>
        <div style="float: left; margin-left: 30px;">
          <template>
            <el-input v-model="giftNum" placeholder="请输入内容" style="width: 300px;"></el-input>
          </template>
        </div>
      </div>
      <div class="input-div">
        <div style="float: left; font-size: 20px;">
          活动描述:
        </div>
        <div style="float: left; margin-left: 30px;">
          <template>
            <el-input
              type="textarea"
              :rows="10"
              placeholder="请输入内容"
              v-model="desc" style="width: 300px; height: 200px;">
            </el-input>
          </template>
        </div>
      </div>
      <div class="input-div">
        <el-row>
          <el-button type="warning" style="float: right;" @click="redirection('activitiesList')">返回</el-button>
          <el-button type="primary" style="float: right; margin-right: 10px;" @click="submitData">提交</el-button>
        </el-row>
      </div>
    </div>
  </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: '1',
        label: '注册类型'
      }],
      regValue: '',
      giftOptions: [], // [{giftValue: '1',label: '饮品通用券'}, {giftValue: '2',label: '课程通用券'}, {giftValue: '3',label: '小小外交官体验券'}]
      giftValue: '',
      giftLabel: '',
      activityName: '', // 活动名称
      activityType: this.regValue, // 活动类型
      resourceDesc: '', // 存储JSON (赠券类型,赠送数量,活动描述)
      giftNum: 0, // 赠送数量
      desc: '', // 活动描述
      giftList: [] // 赠券卡券数据体
    }
  },
  mounted () {
    this.getCouponList()
  },
  computed: {
    ...mapState({
      defaultCaseId: x => x.app.cases.default,
    }),
    giftData: {
      get () {
        let jsonData = this.$data.giftList
        console.log('请求到的:' + 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
          console.log('卡券编号:' + tempData.giftValue + ' ' + tempData.label)
          data.push(tempData)
        }
        console.log('giftData 数据:')
        return data
      }
    }
  },
  methods: {
    redirection (pathName) { // 重定向
      this.$router.push({ name: pathName })
    },
    submitData () { // 提交数据
      // 判断是否提交成功
      // 提交成功,跳转页面
      // let subData = []
      // subData.activityName = this.$data.activityName
      // subData.activityType = this.$data.regValue
      // let obj = []
      // obj.giftValue = this.$data.giftValue
      // obj.giftNum = this.$data.giftNum
      // obj.desc = this.$data.desc
      // subData.resourceDesc = obj

      // console.log(subData)

      // let obj = []
      // obj.giftValue = this.$data.giftValue
      // obj.giftNum = this.$data.giftNum
      // obj.desc = this.$data.desc

      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, 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,
        queryData: {}
      }).then(res => {
        // console.log(res)
        this.giftList = res.list
        this.giftOptions = this.giftData
      })
    },
  }
}
</script>

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