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

<template>
  <div class="subPage">
    <form class="mainForm">
      <h1 style="font-size:22px;">{{isEdit === 0 ? '新建' : '编辑'}}{{type === 'drink' ? '饮品优惠券' : '课程优惠券'}}</h1>
      <ul>
        <li class="flex-h">
          <span>选择案场：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="postData.CaseId" placeholder="请选择">
                <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='$api.file.image.url'
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="postData.Img" :src="postData.Img" 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="postData.Name"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>券类型：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="postData.Type" placeholder="请选择">
                <el-option
                  v-for="item in TypeList"
                  :key="item.id"
                  :label="item.name"
                  :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="postData.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="postData.TotalNum"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>发送类型：</span>
          <div class="flex-item">
            <div>
              <el-radio v-model="postData.SendType" label="1">渠道</el-radio>
              <el-radio v-if="type === 'course'" v-model="postData.SendType" label="3">案场</el-radio>
              <el-radio v-model="postData.SendType" label="2">系统</el-radio>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>选择渠道：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="postData.ChannelId" placeholder="请选择">
                <el-option
                  v-for="item in ChannelList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>目标商品：</span>
          <div class="flex-item">
            <div>
              <el-radio v-model="postData.Assign" label="1">全部商品</el-radio>
              <el-radio v-model="postData.Assign" label="2">指定商品</el-radio>
            </div>
          </div>
        </li>
        <li class="flex-h" v-if="postData.Assign === '2'">
          <div class="flex-item">
            <div style="border: 1px solid #eee;">
              <el-table
                :data="currentList"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="Name"
                  label="商品">
                </el-table-column>
                <el-table-column
                  prop="Type"
                  label="分类">
                </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="type === 'drink'">
          <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="postData.StartDate"
                  type="date"
                  placeholder="选择起始日期">
                </el-date-picker>
                <span style="line-height:40px;">至</span>
                <el-date-picker
                  v-model="postData.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="postData.Days"
                    clearable>
                  </el-input>
                </span>
                <span style="line-height:40px;">天</span>
              </div>
            </div>
          </div>
        </li>
        <li class="flex-h" v-if="type === 'course'">
          <span>券有效时间：</span>
          <div class="flex-item">
            <div>
              <el-date-picker
                v-model="postData.StartDate"
                type="date"
                placeholder="选择起始日期">
              </el-date-picker>
              <span style="line-height:40px;">至</span>
              <el-date-picker
                v-model="postData.EndDate"
                type="date"
                placeholder="选择截止日期">
              </el-date-picker>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>视频：</span>
          <div class="flex-item">
            <div></div>
          </div>
        </li>
        <li class="flex-h">
          <span>分享描述：</span>
          <div class="flex-item">
            <div>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入"
                v-model="postData.ShareDesc">
              </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="postData.RuleDesc">
              </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="postData.UsedDesc">
              </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="type === 'drink'">
          <el-table
            ref="multipleTable"
            :data="drinkList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection">
            </el-table-column>
            <el-table-column
              prop="Name"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="Type"
              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 v-if="type === 'course'">
          <el-table
            ref="multipleTable"
            :data="courseList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection">
            </el-table-column>
            <el-table-column
              prop="Name"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="StartDate"
              label="开始时间">
            </el-table-column>
            <el-table-column
              prop="EndDate"
              label="结束时间">
            </el-table-column>
            <el-table-column
              prop="Type"
              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="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: '',
  data () {
    return {
      total: 0,
      drinkList: [], // 饮品列表
      courseList: [], // 课程列表
      centerDialogVisible: false,
      type: this.$route.query.type,
      isEdit: this.$route.query.id === undefined ? 0 : 1,
      ChannelList: [], // 渠道列表
      TypeList: [], // 类型列表
      currentList: [{
        Name: 'ccc',
        Type: 'xxx'
      }], // 指定商品数据
      postData: {
        page: 1,
        pagesize: 10,
      },
    }
  },
  mounted () {
    this.$nextTick(function () { })
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default
    }),
    CaseId: {
      get () {
        return this.postData.caseid || this.defaultCaseId
      },
      set (val) {
        this.postData.caseid = val
      }
    }
  },
  methods: {
    handleSelectionChange (val) {
      // this.multipleSelection = val;
    },
    addGoods () { // 添加指定商品
      this.centerDialogVisible = true
    },
    submit () { // 保存
      // 1
    },
    cancel () { // 取消
      this.$router.push({ name: 'couponList' })
    },
    deleteGoodsItem () { // 删除指定商品item
      // 1
    },
    handleAvatarSuccess (res, file) {
      this.postData.Img = res.result.url
    },
    handleCurrentChange (val) { // 跳转到分页
      // this.getList()
    },
  }
}
</script>

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