admin/src/pages/system/cardAndCouponManager/couponManager/edit.vue

<template>
  <div class="subPage">
    <form class="mainForm">
      <!-- <h1 style="font-size:22px;">{{isEdit === 0 ? '新建' : '编辑'}}{{couponInfo.CouponType === 'goods' ? '饮品优惠券' : '课程优惠券'}}</h1> -->
      <ul>
        <li class="flex-h">
          <span>选择案场：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="couponInfo.CaseId" placeholder="请选择" @change="caseChange">
                <el-option
                  v-for="item in cases"
                  :key="item.CaseId"
                  :label="item.CaseName"
                  :value="item.CaseId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>券图片：</span>
          <div class="flex-item">
            <div>
              <el-upload
                class="avatar-uploader"
                action='string'
                :http-request="toolClass.upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="couponInfo.Images[0].CouponImageUrl" :src="couponInfo.Images[0].CouponImageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>券名称：</span>
          <div class="flex-item">
            <div style="width:200px;">
              <el-input
                placeholder="请输入"
                v-model="couponInfo.CouponName"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>券类型：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="couponInfo.CouponType" placeholder="请选择" @change="couponTypeChange">
                <el-option
                  v-for="item in TypeList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>券价格：</span>
          <div class="flex-item">
            <div style="width:200px;">
              <el-input
                placeholder="请输入"
                v-model="couponInfo.Price"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>总张数：</span>
          <div class="flex-item">
            <div style="width:200px;">
              <el-input
                placeholder="请输入"
                v-model="couponInfo.TotalCount"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>发送类型：</span>
          <div class="flex-item">
            <div>
              <el-radio v-model="couponInfo.SendType" label="channel">渠道</el-radio>
              <el-radio v-if="couponInfo.CouponType === 'course'" v-model="couponInfo.SendType" label="case">案场</el-radio>
              <el-radio v-model="couponInfo.SendType" label="system">系统</el-radio>
            </div>
          </div>
        </li>
        <li class="flex-h" v-if="couponInfo.SendType === 'channel'">
          <span>选择渠道：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="couponInfo.ChannelId" placeholder="请选择">
                <el-option
                  v-for="item in channelList"
                  :key="item.ChannelId"
                  :label="item.ChannelName"
                  :value="item.ChannelId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>目标商品：</span>
          <div class="flex-item">
            <div>
              <el-radio v-model="couponInfo.IsAll" label="1">全部商品</el-radio>
              <el-radio v-model="couponInfo.IsAll" label="0">指定商品</el-radio>
            </div>
          </div>
        </li>
        <li class="flex-h" v-if="couponInfo.IsAll === '0'">
          <div class="flex-item">
            <div style="border: 1px solid #eee;">
              <el-table
                :data="couponInfo.Targets"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="TargetName"
                  label="商品">
                </el-table-column>
                <el-table-column
                  prop="TargetType"
                  label="分类">
                  <template slot-scope="scope">
                    {{returnGoodsType(scope.row.TargetType)}}
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="warning"
                      @click="deleteGoodsItem(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="text-align:center;padding:10px 0;">
                <el-button type="success" size="mini" @click="addGoods">添加商品</el-button>
              </div>
            </div>
          </div>
        </li>
        <li class="flex-h" v-if="couponInfo.CouponType === 'goods'">
          <span>券有效时间：</span>
          <div class="flex-item">
            <div>
              <div class="addLine flex-h" style="align-item:center;margin-bottom:20px;">
                <el-radio v-model="postData.TimeType" label="1">固定时间</el-radio>
                <el-date-picker
                  v-model="couponInfo.StartDate"
                  type="date"
                  placeholder="选择起始日期">
                </el-date-picker>
                <span style="line-height:40px;">至</span>
                <el-date-picker
                  v-model="couponInfo.EndDate"
                  type="date"
                  placeholder="选择截止日期">
                </el-date-picker>
              </div>
              <div class="addLine flex-h" style="align-item:center;">
                <el-radio v-model="postData.TimeType" label="2">领取后</el-radio>
                <span style="width:100px;">
                  <el-input
                    placeholder="请输入"
                    v-model="couponInfo.ValidDays"
                    clearable>
                  </el-input>
                </span>
                <span style="line-height:40px;">天</span>
              </div>
            </div>
          </div>
        </li>
        <li class="flex-h" v-if="couponInfo.CouponType === 'course'">
          <span>券有效时间：</span>
          <div class="flex-item">
            <div>
              <el-date-picker
                v-model="couponInfo.StartDate"
                type="date"
                placeholder="选择起始日期">
              </el-date-picker>
              <span style="line-height:40px;">至</span>
              <el-date-picker
                v-model="couponInfo.EndDate"
                type="date"
                placeholder="选择截止日期">
              </el-date-picker>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>视频：</span>
          <div class="flex-item">
            <div style="vertical-align: middle;">
              <a style="line-height: 40px;" v-if="videoOff" :href="couponInfo.VideoUrl" target="blank">{{couponInfo.VideoUrl}}</a>
              <el-upload
                class="avatar-uploader"
                action='string'
                :http-request="toolClass.upload"
                :show-file-list="false"
                :on-success="videoSuccess">
                <a style="line-height: 40px;padding: 0 10px;">{{videoOff ? '更换' : '添加'}}视频</a>
              </el-upload>
              <el-button v-if="videoOff" type="danger" @click="deleteVideo">删除视频</el-button>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>分享描述：</span>
          <div class="flex-item">
            <div>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入"
                v-model="couponInfo.Share.CouponShareInfo">
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>规则描述：</span>
          <div class="flex-item">
            <div>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入"
                v-model="couponInfo.Share.UseRule">
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>使用说明：</span>
          <div class="flex-item">
            <div>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入"
                v-model="couponInfo.Share.UseInstruction">
              </el-input>
            </div>
          </div>
        </li>
        <li style="text-align:center">
          <el-button type="primary" size="mini" @click="submit">保存</el-button>
          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
        </li>
      </ul>
    </form>
    <el-dialog
      title="选择指定商品"
      :visible.sync="centerDialogVisible"
      width="650px"
      center>
      <div>
        <div v-if="couponInfo.CouponType === 'goods'">
          <el-table
            ref="multipleTable"
            :data="goodsList.list"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleGoodsChange">
            <el-table-column
              type="selection">
            </el-table-column>
            <el-table-column
              prop="GoodsName"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="TypeId"
              label="类别">
              <template slot-scope="scope">
                <span>{{returnGoodsType(scope.row.TypeId)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="Price"
              label="价格">
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="postData.page"
            :page-size="postData.pagesize"
            layout="prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <div v-if="couponInfo.CouponType === 'course'">
          <el-table
            ref="multipleTable"
            :data="courseList.list"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleCourseChange">
            <el-table-column
              type="selection">
            </el-table-column>
            <el-table-column
              prop="CourseName"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="BeginDate"
              label="开始时间">
            </el-table-column>
            <el-table-column
              prop="EndDate"
              label="结束时间">
            </el-table-column>
            <el-table-column
              prop="CourseType"
              label="类别">
            </el-table-column>
            <el-table-column
              prop="Price"
              label="价格">
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="postData.page"
            :page-size="postData.pagesize"
            layout="prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureAddItem">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapCouponActions } = createNamespacedHelpers('coupon')
const { mapState: mapChannelState, mapActions: mapChannelActions } = createNamespacedHelpers('channel')
const { mapState: mapGoodsState, mapActions: mapGoodsActions } = createNamespacedHelpers('goods')
const { mapState: mapCourseState, mapActions: mapCourseActions } = createNamespacedHelpers('course')

export default {
  name: '',
  data () {
    return {
      videoOff: false,
      total: 0,
      centerDialogVisible: false,
      type: this.$route.query.type || '', // goods、course
      isEdit: this.$route.query.id === undefined ? 0 : 1,
      ChannelList: [], // 渠道列表
      TypeList: [{ // 类型列表
        value: '商品券',
        id: 'goods'
      }, {
        value: '课程券',
        id: 'course'
      }],
      currentList: [{
        Name: 'ccc',
        Type: 'xxx'
      }], // 指定商品数据
      couponInfo: {
        CaseId: '',
        CouponName: '',
        CouponType: '',
        Price: '',
        TotalCount: '',
        SendType: '',
        IsAll: '',
        StartDate: '',
        EndDate: '',
        ValidDays: '',
        VideoUrl: '',
        ChannelId: '',
        Images: [{
          CouponImageUrl: ''
        }],
        Share: {
          CouponShareInfo: '',
          UseRule: '',
          UseInstruction: ''
        },
        Targets: []
      },
      postData: {
        page: 1,
        pagesize: 6,
      },
      currentSelectArr: [],
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.GetChannelListList({
        caseid: this.defaultCaseId,
        page: 1,
        pagesize: 10000
      }).then(() => {
        this.GetGoodTypes({ pagesize: 1000, caseid: this.$route.query.caseid }).then(() => {
          if (this.$route.query.id) {
            this.getCouponById({
              id: this.$route.query.id
            }).then((res) => {
              // console.log(JSON.stringify(res))
              res.coupon.IsAll = String(res.coupon.IsAll)
              if (res.coupon.VideoUrl !== '') {
                this.videoOff = true
              }
              this.couponInfo = res.coupon
            })
          }
        })
      })
    })
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default
    }),
    ...mapChannelState({
      channelList: x => x.channelList,
    }),
    ...mapGoodsState({
      goodsList: x => x.goodsList,
      goodsTypes: x => x.goodsTypes.list,
    }),
    ...mapCourseState({
      courseList: x => x.courseList,
    }),
    CaseId: {
      get () {
        return this.couponInfo.caseid || this.defaultCaseId
      },
      set (val) {
        this.couponInfo.caseid = val
      }
    },
  },
  methods: {
    ...mapGoodsActions([
      'GetGoodsList',
      'GetGoodTypes',
    ]),
    ...mapCouponActions([
      'addCoupon',
      'getCouponById',
      'editCoupon',
    ]),
    ...mapChannelActions([
      'GetChannelListList',
    ]),
    ...mapCourseActions([
      'GetCourseList',
    ]),
    returnGoodsType (val) {
      for (var n = 0; n < this.goodsTypes.length; n++) {
        if (this.goodsTypes[n].TypeId === val) {
          return this.goodsTypes[n].TypeName
        }
      }
    },
    deleteVideo () { // 删除视频
      this.couponInfo.VideoUrl = ''
      this.videoOff = false
    },
    caseChange () { // 选择案场
      this.couponInfo.ChannelId = ''
      this.GetChannelListList({
        caseid: this.couponInfo.CaseId,
        page: 1,
        pagesize: 10000
      })
    },
    sureAddItem () { // 确定添加指定商品
      var bool = true
      if (this.couponInfo.CouponType === 'goods') {
        for (var n = 0; n < this.currentSelectArr.length; n++) {
          if (this.couponInfo.Targets.length) {
            bool = true
            for (var a = 0; a < this.couponInfo.Targets.length; a++) {
              if (this.currentSelectArr[n].GoodsId === this.couponInfo.Targets[a].TargetId) {
                bool = false
              }
            }
            if (bool) {
              this.couponInfo.Targets.push({
                TargetName: this.currentSelectArr[n].GoodsName,
                TargetId: this.currentSelectArr[n].GoodsId,
                TargetType: this.currentSelectArr[n].TypeId
              })
            }
          } else {
            this.couponInfo.Targets.push({
              TargetName: this.currentSelectArr[n].GoodsName,
              TargetId: this.currentSelectArr[n].GoodsId,
              TargetType: this.currentSelectArr[n].TypeId
            })
          }
        }
      } else if (this.couponInfo.CouponType === 'course') {
        for (var x = 0; x < this.currentSelectArr.length; x++) {
          if (this.couponInfo.Targets.length) {
            bool = true
            for (var y = 0; y < this.couponInfo.Targets.length; y++) {
              if (this.currentSelectArr[x].CourseId === this.couponInfo.Targets[y].TargetId) {
                bool = false
              }
            }
            if (bool) {
              this.couponInfo.Targets.push({
                TargetName: this.currentSelectArr[x].CourseName,
                TargetId: this.currentSelectArr[x].CourseId,
                TargetType: this.currentSelectArr[x].CourseType
              })
            }
          } else {
            this.couponInfo.Targets.push({
              TargetName: this.currentSelectArr[x].CourseName,
              TargetId: this.currentSelectArr[x].CourseId,
              TargetType: this.currentSelectArr[x].CourseType
            })
          }
        }
      }
      this.centerDialogVisible = false
    },
    handleGoodsChange (val) {
      this.currentSelectArr = val
    },
    handleCourseChange (val) {
      this.currentSelectArr = val
    },
    couponTypeChange () {
      if (this.goodsList.length) {
        this.goodsList = []
      }
      if (this.courseList.length) {
        this.courseList = []
      }
      this.couponInfo.Targets = []
    },
    addGoods () { // 添加指定商品
      if (this.couponInfo.CouponType === 'goods') {
        this.GetGoodsList({
          ...this.postData,
          caseid: this.couponInfo.CaseId
        }).then((res) => {
          this.total = res.pagenum
          this.centerDialogVisible = true
        })
      } else if (this.couponInfo.CouponType === 'course') {
        this.GetCourseList({
          ...this.postData,
          caseid: this.couponInfo.CaseId
        }).then((res) => {
          this.total = res.pagenum
          this.centerDialogVisible = true
        })
      }
    },
    submit () { // 保存
      if (this.$route.query.id) {
        this.editCoupon({
          ...this.couponInfo,
          IsAll: this.couponInfo.IsAll - 0,
          TotalCount: this.couponInfo.TotalCount - 0,
          ValidDays: this.couponInfo.ValidDays || 0
        }).then((res) => {
          this.$alert('操作成功', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push({ name: 'couponList' })
            }
          })
        })
      } else {
        this.addCoupon({
          ...this.couponInfo,
          IsAll: this.couponInfo.IsAll - 0,
          TotalCount: this.couponInfo.TotalCount - 0,
          ValidDays: this.couponInfo.ValidDays || 0
        }).then((res) => {
          this.$alert('操作成功', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push({ name: 'couponList' })
            }
          })
        })
      }
    },
    cancel () { // 取消
      this.$router.push({ name: 'couponList' })
    },
    deleteGoodsItem (index, row) { // 删除指定商品item
      this.couponInfo.Targets.splice(index, 1)
    },
    handleAvatarSuccess (res, file) {
      this.couponInfo.Images[0].CouponImageUrl = res.result.url
    },
    videoSuccess (res, file) {
      this.videoOff = true
      this.couponInfo.VideoUrl = res.result.url
    },
    handleCurrentChange (val) { // 跳转到分页
      this.postData.page = val
      if (this.couponInfo.CouponType === 'goods') {
        this.GetGoodsList({
          ...this.postData,
          caseid: this.couponInfo.CaseId
        }).then((res) => {
          this.total = res.pagenum
        })
      } else if (this.couponInfo.CouponType === 'course') {
        this.GetCourseList({
          ...this.postData,
          caseid: this.couponInfo.CaseId
        }).then((res) => {
          this.total = res.pagenum
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.addLine {
  > * {
    margin-right: 10px;
  }
}
.mainForm > ul > li > div > div > button {
  margin-top: 0;
}
</style>