oil-station/fuintAdmin/src/views/EventMarketing/cardFavorable/index.vue

<template>
<!--  优惠券页面-->
  <div class="app-container">
    <el-card  style="margin-bottom: 20px">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="" prop="name">
        <el-input v-model="queryParams.name" placeholder="优惠券名称"></el-input>
      </el-form-item>
      <el-form-item label="" prop="region">
        <el-select v-model="queryParams.isonline" clearable placeholder="在线/下线">
          <el-option label="在线" value="0"></el-option>
          <el-option label="下线" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="region">
        <el-select v-model="queryParams.discountType" clearable placeholder="优惠类型">
          <el-option label="满减券" value="0"></el-option>
          <el-option label="折扣券" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="region">
<!--        <el-select v-model="queryParams.type" clearable placeholder="卡券类型">
          <el-option label="油品券" value="0"></el-option>
&lt;!&ndash;          <el-option label="商品券" value="1"></el-option>&ndash;&gt;
&lt;!&ndash;          <el-option label="通用券" value="2"></el-option>&ndash;&gt;
        </el-select>-->
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    </el-card>
    <el-card  style="margin-bottom: 20px">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"

        >新增</el-button>


      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="favorableList" @selection-change="handleSelectionChange">
<!--      <el-table-column label="是否在线 0：在线 1： 下线" align="center" prop="isonline" />-->
      <el-table-column
        label="序号"
        type="index"
      >
      </el-table-column>
      <el-table-column label="优惠券名称" align="center" prop="name" />
      <el-table-column label="卡券类型 " align="center" prop="type" >
                  <template slot-scope="scope">
                    <el-tag  v-if="scope.row.type == 0">油品券</el-tag>
<!--                    <el-tag type="success" v-if="scope.row.type == 1">商品券</el-tag>-->
<!--                    <el-tag type="warning" v-if="scope.row.type == 2">通用券</el-tag>-->
                  </template>
      </el-table-column>
      <el-table-column label="优惠类型" align="center" prop="discountType" >
        <template slot-scope="scope">
        <el-tag  effect="dark"  type="success" v-if="scope.row.discountType == 0">满减券</el-tag>
        <el-tag  effect="dark" v-if="scope.row.discountType == 1">折扣券</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="满减金额" align="center" prop="satisfiedAmount" >
        <template slot-scope="scope">
           满 <el-tag  effect="plain"  type="success" >{{scope.row.satisfiedAmount}}</el-tag> 元
        </template>
      </el-table-column>
      <el-table-column label="优惠金额" align="center" prop="discountAmount" >
      <template slot-scope="scope">
        <span v-if="scope.row.discountType == 0">减 <el-tag  effect="plain"  >{{scope.row.discountAmount}}</el-tag> 元</span>
        <span v-if="scope.row.discountType == 1">打 <el-tag  effect="plain"  >{{scope.row.specialDiscount}}</el-tag> 折</span>
      </template>
      </el-table-column>
      <el-table-column label="有效期" align="center" prop="validity" >
      <template slot-scope="scope">
        <span v-if="scope.row.timeType == 0" >{{scope.row.validityZero }} 天</span>
        <span v-if="scope.row.timeType == 1"  >{{scope.row.validityOne}} 天</span>
        <span v-if="scope.row.timeType == 2"  >{{scope.row. validityTwo}} 天</span>
      </template>
      </el-table-column>
      <el-table-column label="生效日期" align="center" prop="timeType" >
        <template slot-scope="scope">
          <span v-if="scope.row.timeType == 0" >领券后立即生效</span>
          <span v-if="scope.row.timeType == 1"  >固定有效周期，固定开始日期{{scope.row.effectiveDate}}</span>
          <span v-if="scope.row.timeType == 2"  >领券后第{{ scope.row.validityDay}}天生效</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="生效时间" align="center" prop="effectiveDateType" >
        <template slot-scope="scope">
            <span v-if="scope.row.effectiveDateType == 0" >领取时间</span>
            <span v-if="scope.row.effectiveDateType == 1" >指定{{scope.row. effectiveDateStart}}</span>
        </template>
      </el-table-column>-->
      <el-table-column label="发放数量" align="center" prop="count" />
      <el-table-column label="满足金额" align="center" prop="satisfiedAmount" />
<!--      <el-table-column label="二维码链接" align="center" prop="qrCodeLink" >
      <template slot-scope="scope">
        <div style="cursor: pointer" @click="qrcodelook(scope.row.qrCodeLink)">
          <i class="el-icon-picture" ></i>
        </div>
      </template>
      </el-table-column>-->
      <el-table-column label="优惠券状态" align="center" prop="status" >
      <template slot-scope="scope">
        <div v-if="scope.row.isonline == 0"> <el-tag>上线</el-tag> </div>
        <div v-if="scope.row.isonline == 1"> <el-tag type="danger">下线</el-tag> </div>
      </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"

            @click="handleUpdate(scope.row)"

          >修改</el-button>
<!--          <el-button
            size="mini"
            type="text"
            @click="tableciick(scope.row)"
          >统计</el-button>-->
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.isonline == 0"
            @click="ordai(scope.row)"
          >下线</el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.isonline == 1"
            @click="handleDelete1(scope.row)"
          >删除</el-button>

        </template>
      </el-table-column>
    </el-table>


    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    </el-card>
    <!-- 添加或修改优惠券对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="50%"  append-to-body>
      <el-form ref="form" :model="form" :rules="rules" :label-position="labelPosition"  label-width="100px">

        <el-form-item label="优惠券名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入优惠券名称" />

        </el-form-item>
        <el-form-item label="卡券类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio label="0">油品券</el-radio>
<!--            <el-radio label="1">商品券</el-radio>-->
<!--            <el-radio label="2">通用券</el-radio>-->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="优惠类型" prop="discountType">
          <el-radio-group v-model="form.discountType">
            <el-radio label="0">满减券</el-radio>
            <el-radio label="1">折扣券</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可用油品" prop="oilType" v-if="form.type == 0">
          <el-checkbox-group v-model="form.oilType">
            <el-checkbox v-for="(item,index) in oillist" :label=" item.id " :key="index">{{item.oilType}}{{item.oilName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div style="display: flex;align-items: center;margin-bottom: 25px"  v-if="form.discountType == 0">
          <div style="color: red">*</div>
          <div style="margin: 0px 10px;font-weight: bold">满</div>
          <div>
                          <el-input v-model="form.satisfiedAmount" placeholder="请输入满足金额"  >
                            <template slot="append">元</template>
                          </el-input>
          </div>
          <div style="margin: 0px 10px;font-weight: bold">减</div>
          <div>
                          <el-input v-model="form.discountAmount" placeholder="请输入优惠金额" >
                            <template slot="append">元</template>
                          </el-input>
          </div>

<!--          <div class="_k">-->
<!--            <el-form-item label="满" prop="satisfiedAmount" v-if="form.discountType == 0">-->
<!--              <el-input v-model="form.satisfiedAmount" placeholder="请输入满足金额"  >-->
<!--                <template slot="append">元</template>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </div>-->
<!--          <div class="_k" style="margin-left: 15px">-->
<!--            <el-form-item label="减" prop="discountAmount" v-if="form.discountType == 0">-->
<!--              <el-input v-model="form.discountAmount" placeholder="请输入优惠金额" >-->
<!--                <template slot="append">元</template>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </div>-->
        </div>
<!--        <div style="color: red" v-if="form.discountAmount>form.satisfiedAmount" >检测到优惠金额大于满足金额请确定是否要继续执行</div>-->
        <div style="display: flex;align-items: center;margin-bottom: 25px"  v-if="form.discountType == 1">
          <div style="color: red">*</div>
          <div style="margin: 0px 10px;font-weight: bold">满</div>
          <div>
            <el-input v-model="form.satisfiedAmount" placeholder="请输入满足金额"   >
              <template slot="append">元</template>
            </el-input>
          </div>
          <div style="margin: 0px 10px;font-weight: bold">打</div>
          <div>
            <el-input-number v-model="form.specialDiscount" :min="1" :max="9.9" placeholder="1 ~ 9.9"/>
          </div>
          <div style="margin: 0px 10px;font-weight: bold">折</div>
        </div>

<!--        <div class="_k">-->
<!--          <el-form-item  label="满足金额" prop="satisfiedAmount" v-if="form.discountType == 1">-->
<!--            <el-input v-model="form.satisfiedAmount" placeholder="请输入满足金额"   >-->
<!--              <template slot="append">元</template>-->
<!--            </el-input>-->
<!--          </el-form-item>-->
<!--        </div>-->

<!--        <el-form-item label="优惠折扣" prop="specialDiscount"  v-if="form.discountType == 1">-->
<!--          <el-input-number v-model="form.specialDiscount" :min="0" :max="9.9" placeholder="1 ~ 9.9"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="折扣抵消" prop="discountOffset" v-if="form.discountType == 1">
          <el-input v-model="form.discountOffset" placeholder="请输入折扣抵消" />
        </el-form-item>-->
        <el-form-item label="生效日期" prop="timeType">
          <el-radio-group v-model="form.timeType">
<!--          0   -->
            <el-radio label="0"  style="display: flex;align-items: center" >
              <div class="h-box"> <span style="margin-right: 5px">领券后立即生效，有效期 </span>   <el-input placeholder="有效天数" type="number" min="0" style="width: 200px" v-model="form.validityZero">
                <template slot="append">天</template>
              </el-input>  </div>


            </el-radio>
<!--          1  -->
            <el-radio label="1"  style="display: flex;align-items: center" >
              <div class="h-box">
                <span style="margin-right: 5px"> 固定有效周期，固定开始日期 </span>
              <el-date-picker
              v-model="form.effectiveDate"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
                <span style="margin-right: 5px; margin-left: 5px">有效期</span>
            <el-input type="number" min="0" placeholder="有效天数" style="width: 200px" v-model="form.validityOne"><template slot="append">天</template></el-input>
              </div>
            </el-radio>
<!--            2-->
            <el-radio label="2" style="display: flex;align-items: center">
              <div class="h-box">
              <span style="margin-right: 5px">领券后第</span>  <el-input style="width: 200px" type="number"  min="0" placeholder="1" v-model="form.validityDay">
              <template slot="append">天生效</template>
            </el-input> <span style="margin-right: 5px; margin-left: 5px">有效期</span>  <el-input type="number" min="0" placeholder="有效天数" style="width: 200px" v-model="form.validityTwo"><template slot="append">天</template></el-input>
              </div>
            </el-radio>

          </el-radio-group>
        </el-form-item>
        <el-form-item label="互斥功能" prop="exclusiveFunctionList" style="margin-left: 10px">
          <el-checkbox-group v-model="form.exclusiveFunctionList">
            <el-checkbox label="0">满减活动</el-checkbox>
            <el-checkbox label="1">储值卡付款</el-checkbox>
            <el-checkbox label="2">会员等级</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="会员等级"  prop="region"  v-if="form.exclusiveFunctionList && form.exclusiveFunctionList.length>0 && form.exclusiveFunctionList.includes('2') " >
          <el-select v-model="form.membershipLevel"  multiple  placeholder="会员等级"   >
            <el-option v-for="(item,index) in vipname" :key="index" :label="item.name" :value="item.id.toString()"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="领取规则 " prop="claimRule">
          <el-radio-group v-model="form.claimRule">
            <el-radio label="0">每人限领一张</el-radio>
            <el-radio label="1">每人每日限领一张</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发放数量" prop="count">
          <el-input v-model="form.count" placeholder="请输入发放数量" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="0">启用</el-radio>
            <el-radio label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="二维码"
      v-loading="loadingdialog"
      :visible.sync="centerDialogVisible"
      width="350px"
      center>
      <div style="display: flex;align-items: center">
        <div class="qr-code" id="qrCode" ref="qrCodeUrl"></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>
<!--    <el-drawer
      title="统计!"
      :visible.sync="table"
      direction="rtl"
      size="50%">
      <div style="box-sizing: border-box;padding: 20px">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="" prop="name">
          <el-input v-model="tongji.mobile" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="" prop="region">
          <el-select v-model="tongji.status" placeholder="卡券状态">
            <el-option label="已使用" value="0"></el-option>
            <el-option label="未使用" value="1"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="gettongji" >查询</el-button>
        </el-form-item>
      </el-form>
      <div style="display: flex;align-items: center">
        <div class="hui-box">
          <div>已领取数量</div>
          <div class="sizewit">{{fourdata.tatol}}</div>
        </div>
        <div class="hui-box">
          <div>已使用数量</div>
          <div class="sizewit">{{fourdata.usedTatal}}</div>
        </div>
        <div class="hui-box">
          <div>未使用数量</div>
          <div class="sizewit">{{fourdata.unTatal}}</div>
        </div>
        <div class="hui-box">
          <div>过期数量</div>
          <div class="sizewit">{{fourdata.outTatal}}</div>
        </div>
      </div>
      <el-table :data="gridData">
        <el-table-column property="createTime" label="领取时间"></el-table-column>
        <el-table-column property="mobile" label="会员"></el-table-column>
        <el-table-column property="startTime" label="有效期开始" ></el-table-column>
        <el-table-column property="endTime" label="有效期结束"></el-table-column>
        <el-table-column property="status" label="券状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">未使用</span>
            <span v-if="scope.row.status == 1">已使用</span>
            <span v-if="scope.row.status == 2">已过期</span>
          </template>
        </el-table-column>
        <el-table-column property="exchangeFrom" label="描述信息"></el-table-column>
      </el-table>
        <pagination
          v-show="tongji.total>0"
          :total="tongji.total"
          :page.sync="tongji.pageNum"
          :limit.sync="tongji.pageSize"
          @pagination="gettongji"
        />
      </div>
    </el-drawer>-->

  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import { listFavorable, getFavorable,getcardFavorable,getcount,getcountList, delFavorable, addFavorable, updateFavorable } from "@/api/EventMarketing/cardFavorable";
  import { getoilName, } from "@/api/EventMarketing/activeConsumption";
  import {deleteById} from "@/api/EventMarketing/oilBlock";
  import {listUserGrade} from "@/api/EventMarketing/SaveBlock";
export default {
  name: "Favorable",
  data() {
    return {
      labelPosition:'left',
      table: false,
      gridData: [
        {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      cities: ['1', '2', '3', '4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
      yue: ['1', '2', '3', '4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
      lookyue:[],
      zhou:['周一','周二','周三','周四','周五','周六','周天'],
      oillist:[],
     /* oillist:['92#','95#','98#','0#','-10#','LNG','CNG','京92#','京95#','京0#',],*/
      checkboxGroup1: ['1'],
      centerDialogVisible:false,
      loadingdialog:true,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 优惠券表格数据
      favorableList: [],
      fourdata:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        chainStorId: null,
        storeId: null,
        isonline: null,
        name: null,
        type: null,
        discountType: null,
        oilType: null,
        fullDeduction: null,
        discountAmount: null,
        satisfiedAmount: null,
        specialDiscount: null,
        discountOffset: null,
        validity: null,
        effectiveDate: null,
        effectiveTime: null,
        availablePeriod: null,
        checkDateType: null,
        checkTime: [],
        checkOutTime: null,
        exclusiveFunctionList: [],
        exclusiveFunction: null,
        claimRule: null,
        count: null,
        qrCodeLink: null,
        status: null,
        effectiveDateType:'0'
      },
      tongji:{
          id:'',
          pageNum: 1,
          pageSize: 10,
          total:0
      },
      radioShow:[],
      // 表单参数
      form: {},
      vipname:[],
      // 表单校验
      rules: {
        timeType: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        chainStorId: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        storeId: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        isonline: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        name: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        type: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        discountType: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        oilType: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        fullDeduction: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        discountAmount: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        satisfiedAmount: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        specialDiscount: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        effectiveTime: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        checkTime: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        claimRule: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        count: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        status: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],



      },
    };
  },
  created() {
    this.getList();
    this.getoilName()
  },
  methods: {


    getoilName(){
      getoilName().then(res=>{
        console.log(res)
        this.oillist = res.data

      })

    },
    yueinput(e){
      console.log(e)
      this.lookyue = e
    },
    gettongji(){
      let data = {
        pageNum:this.tongji.pageNum,
        pageSize:this.tongji.pageSize,
        status:this.tongji.status,
        mobile:this.tongji.mobile,
        id:this.tongji.id
      }
      getcountList(data).then(res=>{
        if(res.code == 200){
          this.gridData = res.data.records
          this.tongji.total = res.data.total
        }

      })

    },
    qrcodelook(url) {
      this.loadingdialog = true
      this.centerDialogVisible = true
      setTimeout(() => {
        this.creatQrCode(url)
        this.loadingdialog = false
      }, 1000);
    },
    creatQrCode(url) {
      document.getElementById("qrCode").innerHTML = ""
      new QRCode(this.$refs.qrCodeUrl, {
        text: url, // 二维码的内容
        width: 300,
        height: 300,
        colorDark: '#000',
        colorLight: '#fff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    /** 查询优惠券列表 */
    getList() {
      this.loading = true;
      listFavorable(this.queryParams).then(response => {
        this.favorableList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    handleDelete1(data){

      this.$modal.confirm('确定删除此条优惠券信息？').then(function() {
        return delFavorable(data.id);
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
        this.getList();
      }).catch(() => {});
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        chainStorId: null,
        storeId: null,
        isonline: 0,
        name: null,
        type: "0",
        discountType: "0",
        oilType: [],
        fullDeduction: null,
        discountAmount: null,
        satisfiedAmount: null,
        specialDiscount: null,
        discountOffset: null,
        validity: null,
        effectiveDate: null,
        effectiveTime: null,
        availablePeriod: [],
        checkDateType: null,
        checkTime: [],
        checkOutTime: null,
        exclusiveFunctionList:[],
        exclusiveFunction: null,
        claimRule: null,
        count: null,
        qrCodeLink: null,
        status: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
          pageSize: 10,
          chainStorId: null,
          storeId: null,
          isonline: null,
          name: null,
          type: null,
          discountType: null,
          oilType: null,
          fullDeduction: null,
          discountAmount: null,
          satisfiedAmount: null,
          specialDiscount: null,
          discountOffset: null,
          validity: null,
          effectiveDate: null,
          effectiveTime: null,
          availablePeriod: null,
          checkDateType: null,
          checkTime: [],
          checkOutTime: null,
          exclusiveFunctionList: [],
          exclusiveFunction: null,
          claimRule: null,
          count: null,
          qrCodeLink: null,
          status: null,
          effectiveDateType:'0'
      }
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      listUserGrade().then(res=>{
        this.vipname = res.data.records
      })
      this.open = true;
      this.form.status = '0'
      this.title = "添加电子优惠券";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      listUserGrade().then(res=>{
        this.vipname = res.data.records
      })
      getcardFavorable(row.id).then(res=>{
        console.log(res)
        if(res.code == 200){
          this.form = res.data;
          this.open = true;
          this.title = "修改优惠券";
        }

      })
    },
    tableciick(row){
       this.table = true
      this.tongji.id = row.id
      getcount(row.id).then(res =>{
        this.fourdata = res.data
      })
        let data = {
          pageNum:this.tongji.pageNum,
          pageSize:this.tongji.pageSize,
          id:row.id
        }
      getcountList(data).then(res=>{
        this.gridData = res.data.records
        this.tongji.total = res.data.total
      })

    },
    async ordai(row){
      // 获取详情
      // await getcardFavorable(row.id).then(res=>{
      //   console.log(res)
      //   if(res.code == 200){
      //     this.form = res.data;
      //     this.form.isonline = 1
      //
      //   }
      // })
      this.$modal.confirm('确定下线此条优惠券信息？').then(function() {
        return updateFavorable({id:row.id,isonline:1});
      }).then(() => {
        console.log(111)
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      }).catch(() => {console.log(222)});
      // 执行修改
      // await updateFavorable(this.form).then(response => {
      //   this.$modal.msgSuccess("修改成功");
      //   this.open = false;
      //   this.getList();
      // });


    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateFavorable(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addFavorable(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除优惠券编号为"' + ids + '"的数据项？').then(function() {
        return delFavorable(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('business/marketingActivity/favorable/export', {
        ...this.queryParams
      }, `favorable_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style scoped lang="scss">

 .hui-box{
   width: 150px ;
   height: 80px;
   background: #f9f9f9;
   margin: 0px 10px;
   box-sizing: border-box;
   padding: 15px;
 }
  .sizewit{
    font-size: 18px;
    font-weight: bold;
    margin: 5px 0px;
  }
  .h-box{

    height: 60px;
    display: flex;

    align-items: center;
  }
  ._k{
    box-sizing: border-box;
    width: 300px;
  }
</style>