oil-station/fuintAdmin/src/views/EventMarketing/openCardGift/TimeLimited.vue

<template>
  <div class="center_">
    <div class="bai-box">
      <div class="d-a">
        <div class="top-title">
          <div class="d-s">
            <div class="bigNum">1</div>
            <div class="smtitle">创建限时优惠</div>
          </div>
          <div class="hui-text">
            不同的商品可以分别创建多个营销价格，分别设置多个
            不同的价格优惠
          </div>
        </div>
        <div class="gang_"></div>
        <div class="top-title">
          <div class="d-s">
            <div class="bigNum">2</div>
            <div class="smtitle">添加活动规则</div>
          </div>
          <div class="hui-text">
            同一个限时优惠可以根据支付方式、会员等级以及活动
            时间添加多个不同的活动规则;同一个商品，同一时间段
            内，同一个会员，同一个支付方式不能添加多个活动规则
          </div>
        </div>
        <div class="gang_"></div>
        <div class="top-title">
          <div class="d-s">
            <div class="bigNum">3</div>
            <div class="smtitle">开始使用限时优惠</div>
          </div>
          <div class="hui-text">
            限时优惠和活动规则创建后，商城会根据后台设置的
            使用时间、支付方式、会员等级来显示不同的会员价
          </div>
        </div>
      </div>
      <!--      -->
      <div class="d-b" style="margin-bottom: 15px">
        <div class="d-s">
          <div class="gang"></div>
          <div class="g-title">限时优惠</div>
        </div>
        <el-button type="primary" @click="Timeshare()">新增限时优惠</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          align="center"
          prop="title"
          label="限时优惠名称"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="countCom"
          label="适用商品数量"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="createName"
          label="创建人"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间">
        </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="modifySeparateList(scope.row.id)"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="deleteOil(scope.row.id)"
            >删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <!--        -->
      <div class="d-b" style="margin-bottom: 15px;margin-top: 20px">
        <div class="d-s">
          <div class="gang"></div>
          <div class="g-title">活动规则</div>
        </div>
        <el-button type="primary" @click="addActiveRule">新增活动规则</el-button>
      </div>
      <el-table
        :data="ruleList"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          align="center"
          prop="activeTitle"
          label="限时优惠名称"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="ruleName"
          label="活动规则名称"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="levelText"
          label="会员等级"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="paymentType"
          label="支付方式"
        >
          <template slot-scope="scope">
            {{ getPaymentTypeStr(scope.row.paymentType) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="labelText"
          label="会员标签"
        >
        </el-table-column>
        <el-table-column
          align="date"
          prop="activeStartTime"
          label="生效时间">
        </el-table-column>
        <el-table-column
          align="date"
          prop="timeSlots"
          label="适用时间段">
        </el-table-column>
        <el-table-column
          align="center"
          prop="dayLimitNum"
          label="每人每天参与限制"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="limitNum"
          label="每人累计参与限制"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="状态"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status==0" style="color:#FF9655;">未生效</span>
            <span v-if="scope.row.status==1" style="color:#fe8c4a;">使用中</span>
            <span v-if="scope.row.status==2" style="color:#F44522;">已失效</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="createName"
          label="创建人"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
        >
        </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="editRule(scope.row)"
            >修改
            </el-button>

            <el-button
              size="mini"
              type="text"
              @click="deleteRule(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total1>0"
        :total="total1"
        :page.sync="queryParams1.page"
        :limit.sync="queryParams1.pageSize"
        @pagination="getRuleList"
      />
    </div>
    <el-dialog
      :title="titles"
      :close-on-click-modal="false"
      :visible.sync="centerDialogVisible"
      width="40%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="限时优惠名称" prop="title">
          <el-input v-model="ruleForm.title" style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="category">
          <el-select style="width: 100%" v-model="ruleForm.category" placeholder="请选择类型">
            <el-option label="固定价格" value="1"></el-option>
            <el-option label="折扣" value="2"></el-option>
            <el-option label="减价" value="3"></el-option>
          </el-select>
          <div>当手动/自动调整商品价格后，若调整后的售价低于规则设置时的会员
            价，则该规则不生效。
          </div>
        </el-form-item>
        <el-form-item label="折扣" required prop="disValue" v-if="ruleForm.category == '2' ">
          <el-input v-model="ruleForm.disValue" style="width: 100%"></el-input>
          <div>折扣请填写0~1的数字。例如输入0.8，表示打8折</div>
        </el-form-item>
        <el-form-item label="减价金额" required  prop="disValue" v-if="ruleForm.category == '3' ">
          <el-input v-model="ruleForm.disValue" style="width: 100%"></el-input>
          <div>减价金额不能小于 0.01</div>
        </el-form-item>

        <el-table
          :data="ruleForm.oilList"
          border
          style="width: 100%">

          <el-table-column
            align="center"
            prop="oilNames"
            label="油品油号"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.oilType }}{{ scope.row.oilName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="oilPrice"
            label="当前挂牌价（元/L)"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="price"
            label="优惠价（元/L）"
          >
            <template slot-scope="scope">
              <el-form-item
                label-width="0px"
                :prop="'oilList.' + scope.$index + '.price'"
                :rules="rules['oilList.*.price']"
                class="custom-form-itemMy100989"
              >
                <el-input
                  style="width: 100%"
                  v-model="scope.row.price"
                  type="number"
                  controls-position="right"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">

              <el-button
                v-if="scope.row.type == '0'"
                size="mini"
                type="text"
                @click="deleteType(scope.row)"
              >删除
              </el-button>
              <el-button
                v-if="scope.row.type == '1'"
                size="mini"
                type="text"
                @click="addType(scope.row)"
              >添加
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSeparateList()">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
      :title="titles1"
      :close-on-click-modal="false"
      :visible.sync="showDialogVisible"
      width="60%">
      <el-form :model="ruleForm1" :rules="rules" ref="ruleForm1" label-width="120px" class="demo-ruleForm">
        <div style="display: flex;width: 100%;margin: 20px 0;">
          <div style="width: 50%">
            <el-form-item label="限时优惠名称" prop="activeId">
              <el-select v-model="ruleForm1.activeId" placeholder="请选择优惠名称" style="width: 100%">
                <el-option
                  v-for="(item,index) in timeShareList"
                  :key="index"
                  :label="item.title"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="可使用支付方式" prop="paymentType">
              <el-checkbox-group v-model="ruleForm1.paymentType">
                <el-checkbox
                  v-for="dict in dict.type.payment_type"
                  v-if="dict.value!='APPLET_CODE'"
                  :key="dict.value"
                  :label="dict.value"
                  :value="dict.value">{{ dict.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label=" 会员标签">
              <el-select v-model="ruleForm1.babelIds" multiple placeholder="请选择会员标签" style="width: 100%">
                <el-option
                  v-for="item in userLabelList"
                  :key="item.id+''"
                  :label="item.labelName"
                  :value="item.id+''"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="消费条件" required prop="consumeType">
              <div v-if="ruleForm1.consumeType!=1">
                <el-col :span="7">
                  <el-select v-model="ruleForm1.consumeType" style="width: 90%">
                    <el-option label="订单金额" value="0"></el-option>
                    <el-option label="加油升数" value="1"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="moneyMin">
                    <el-input v-model="ruleForm1.moneyMin">
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <div style="margin-left: 10px">到</div>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="moneyMax">
                    <el-input v-model="ruleForm1.moneyMax">
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </div>
              <div v-if="ruleForm1.consumeType==1">
                <el-col :span="7">
                  <el-select v-model="ruleForm1.consumeType" style="width: 90%">
                    <el-option label="实收金额" value="0"></el-option>
                    <el-option label="加油升数" value="1"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="literMin">
                    <el-input v-model="ruleForm1.literMin">
                      <template slot="append">L</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <div style="margin-left: 10px">到</div>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="literMax">
                    <el-input v-model="ruleForm1.literMax">
                      <template slot="append">L</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </div>
            </el-form-item>

            <el-form-item label="最大优惠金额" prop="disMax">
              <el-input v-model="ruleForm1.disMax"></el-input>
            </el-form-item>
            <el-form-item label="每人每日参与限制" label-width="140px" prop="dayLimitNum">
              <el-input v-model="ruleForm1.dayLimitNum"></el-input>
            </el-form-item>
          </div>
          <div style="width:50%">
            <el-form-item label="活动规则名称" prop="ruleName">
              <el-input v-model="ruleForm1.ruleName"></el-input>
            </el-form-item>
            <el-form-item label="适用会员等级" prop="levelId">
              <el-select v-model="ruleForm1.levelId" clearable placeholder="请选择会员等级" style="width: 100%">
                <el-option
                  v-for="(item,index) in userGradeList"
                  :label="item.name"
                  :value="item.id.toString()"
                  :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="生效时间" required>
              <el-col :span="11">
                <el-form-item prop="activeStartTime">
                  <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm1.activeStartTime"
                                  style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <div style="margin-left: 5px">至</div>
              </el-col>
              <el-col :span="11">
                <el-form-item prop="activeEndTime">
                  <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm1.activeEndTime"
                                  style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>

            </el-form-item>


            <el-form-item label="适用时间段" prop="timeType">
              <div>
                <div class="icon-type" v-for="(item,index) in weekMonthTypeList" :key="index"
                     :class="{ 'acvtive' : index === tindex3 }" @click="Typeindex3(index)" style="margin-bottom: 20px">
                  <img src="@/assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex3">
                  <img src="@/assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex3">
                  {{ item }}
                  <el-select v-model="weekDay" v-if="item=='每周'" placeholder="请选择每月固定日期" multiple
                             :disabled="tindex3!=0"
                             style="margin-left: 20px;">
                    <el-option
                      v-for="(item,index) in weekList"
                      :key="index"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                  <el-select v-model="monthDay" placeholder="请选择每月固定日期" multiple v-if="item=='每月'"
                             :disabled="tindex3!=1"
                             style="margin-left: 20px">
                    <el-option
                      v-for="item in 31"
                      :key="item.value"
                      :label="item+'日'"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div style="margin-top: 20px">
                <el-form-item label="时间段" prop="timeApplyStart" label-width="60px">
                  <el-time-picker
                    v-model="ruleForm1.dayStartTime"
                    format="HH:mm"
                    value-format="HH:mm"
                    style="width: 45%"
                    placeholder="请选择开始时间点">
                  </el-time-picker>
                  至
                  <el-time-picker
                    v-model="ruleForm1.dayEndTime"
                    format="HH:mm"
                    value-format="HH:mm"
                    style="width: 45%"
                    placeholder="请选择结束时间点">
                  </el-time-picker>
                </el-form-item>
              </div>
            </el-form-item>
            <el-form-item label="每人累计参与限制" label-width="140px" prop="limitNum">
              <el-input v-model="ruleForm1.limitNum"></el-input>
            </el-form-item>
          </div>
        </div>
        <!--          -->

        <el-form-item style="text-align: center">
          <el-button @click="showDialogVisible = !showDialogVisible">取消</el-button>
          <el-button type="primary" @click="submitRuleForm()">保存</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>
<script>
import {
  getoilList,
  getRequestList,
  postaddList,
  getID,
  updateActivePrice,
  deleteList,
  getPriceRuleList, addPriceRule, editPriceRule, getPriceRule, deletePriceRule
} from "./api/separate";
import {oilNumberList1} from "@/api/order/oilnumgun";
import {listUserGrade} from "@/api/staff/user/usergrade";
import {listUserLabel} from "@/api/staff/user/userlabel";

export default {
  dicts: ['payment_type'],
  data() {
    return {
      // 限时
      queryParams: {
        pageNo: 1,
        pageSize: 1000,
        activeType: 2
      },
      titles:'',
      titles1:'',
      total: 0,
      total1: 0,
      ruleForm: {
        activeType: 2,
        title: '',
        name: '',
        region: '',
        category: '1',
        disValue: '',
        type: [],
        oilList: []
      },
      rules: {
        activeStartTime: [
          {required: true, message: '请选择开始时间', trigger: 'change'},
        ],
        activeEndTime:[
          {required: true, message: '请选择结束时间', trigger: 'change'}
        ],
        timeApplyStart: [
          {
            validator: (rule, value, callback) => {
              if (this.ruleForm1.dayStartTime === undefined) {
                callback(new Error('请选择开始时间点'));
              } else if (this.ruleForm1.dayEndTime === undefined) {
                callback(new Error('请选择结束时间点'));
              } else if (this.ruleForm1.dayStartTime > this.ruleForm1.dayEndTime) {
                callback(new Error('结束时间必须晚于开始时间'));
              } else {
                callback();
              }

            },
          }
        ],
        moneyMax: [
          {required: true, message: '请输入订单最高金额', trigger: 'blur'},
        ],
        literMax: [
          {required: true, message: '请输入最高加油升数', trigger: 'blur'},
        ],
        moneyMin: [
          {required: true, message: '请输入订单最低金额', trigger: 'blur'},
        ],
        literMin: [
          {required: true, message: '请输入最低加油升数', trigger: 'blur'},
        ],
        consumeType: [
          {required: true, message: '请选择消费类型', trigger: 'change'},
        ],
        disValue:[
          {required: true, message: '请输入优惠金额', trigger: 'change'}
        ],
        'oilList.*.price': [
          {required: true, message: '请输入优惠价', trigger: 'change'}
        ],
        title: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
        category: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
        activeId: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
        paymentType: [
          {required: true, message: '请输入支付方式', trigger: 'blur'},
        ],
        disMax: [
          {required: true, message: '请输入优惠金额', trigger: 'blur'},
        ],
        dayLimitNum: [
          {required: true, message: '请输入每人每日参与限制', trigger: 'blur'},
        ],
        ruleName: [
          {required: true, message: '请输入规则名称', trigger: 'blur'},
        ],
        levelId: [
          {required: true, message: '请输入会员等级', trigger: 'blur'},
        ],
        limitNum: [
          {required: true, message: '请输入每人累计参与限制', trigger: 'blur'},
        ],
      },
      centerDialogVisible: false,
      showDialogVisible: false,
      // 限时列表
      tableData: [],
      // 油品列表
      oilList: [],
      // 活动规则列表
      queryParams1: {
        activeType: 2,
        pageNo: 1,
        pageSize: 5,
      },
      ruleList: [],
      weekMonthTypeList: ["每周", "每月"],
      tindex3: 0,
      weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      weekDay: [],
      monthDay: [],
      userLabelList: [],
      userGradeList: [],
      timeShareList: [],
      ruleForm1: {
        activeType: 2,
        timeType: 0,
        consumeType: '',
        paymentType: []
      }
    }
  },
  created() {
    this.getList()
    this.getRuleList()
  },
  watch: {
    'ruleForm.category': function (newVal, oldVal) {
      //  当类型切换的时候  清空  折扣 和 减价 字段
      this.ruleForm.disValue = null;

    },
    'ruleForm.disValue': function (newVal, oldVal) {

      console.log('监听', newVal)

      if (this.ruleForm.category == 2) {

        // 这地方 必须产生新数组   elementui 对数据监听都是浅层的
        this.ruleForm.oilList = this.ruleForm.oilList.map(item => ({
          ...item,
          price: Number((item.oilPrice * newVal).toFixed(2))
        }));
      }

      if (this.ruleForm.category == 3) {

        this.ruleForm.oilList = this.ruleForm.oilList.map(item => ({
          ...item,
          price: Number((item.oilPrice - newVal).toFixed(2))
        }));
      }

      if (newVal == null) {
        this.clearOilListPrice()
      }
    }
  },
  methods: {
    //支付方式 转义
    getPaymentTypeStr(value) {

      let valueList = value.split(",");

      console.log(this.dict.type.payment_type)

      let newValueList = valueList.map((item) => {
        let matchedLabel = this.dict.type.payment_type.find((item1) => item1.value === item)?.label;
        return matchedLabel || item; // 如果没有找到匹配的 label，则返回原来的 item
      });

      //数组 转字符串
      return newValueList.join(",")

    },
    //清空油品 优惠价属性
    clearOilListPrice() {
      this.ruleForm.oilList = this.ruleForm.oilList.map(
        item => ({
          ...item,
          price: null
        }))
    },
    // 重置活动规则
    resetRule() {
      this.ruleForm1 = {
        activeType: 2,
        timeType: 0,
        paymentType: []
      }
      this.tindex3 = 0
      this.weekDay = []
      this.monthDay = []
    },
    // 删除活动规则
    deleteRule(data) {
      deletePriceRule(data.id).then(res => {
        this.$message.success("删除成功")
        this.getRuleList()
      })
    },
    // 修改活动规则
    editRule(data) {
      this.resetRule()
      getPriceRule(data.id).then(res => {

        this.getTimeShareList()
        this.listUserGrade()
        this.getUserLabelList()
        this.showDialogVisible = true

        if (res.data) {
          this.ruleForm1 = res.data
          if (res.data.paymentType) this.ruleForm1.paymentType = res.data.paymentType.split(",")
          if (res.data.babelIds) this.ruleForm1.babelIds = res.data.babelIds.split(",")

          if (res.data.timeSlots) {
            if (res.data.timeType == "0") {
              this.weekDay = this.ruleForm1.timeSlots.split(",")
            } else if (this.ruleForm1.timeType == "1") {
              this.monthDay = this.ruleForm1.timeSlots.split(",")
            }
          }
        }
      })
    },
    // 提交活动规则
    submitRuleForm() {
      this.$refs["ruleForm1"].validate((valid) => {
        if (valid) {
          if (this.ruleForm1.paymentType) this.ruleForm1.paymentType = this.ruleForm1.paymentType.toString()
          if (this.ruleForm1.babelIds) this.ruleForm1.babelIds = this.ruleForm1.babelIds.toString()
          if (this.ruleForm1.timeType == "0") {
            this.ruleForm1.timeSlots = this.weekDay.toString()
          } else if (this.ruleForm1.timeType == "1") {
            this.ruleForm1.timeSlots = this.monthDay.toString()
          }

          if (this.ruleForm1.id) {
            editPriceRule(this.ruleForm1).then(res => {
              this.$message.success("修改成功")
              this.getRuleList()
              this.showDialogVisible = false
            })
          } else {
            addPriceRule(this.ruleForm1).then(res => {
              this.$message.success("添加成功")
              this.getRuleList()
              this.showDialogVisible = false
            })
          }
        }
      })
    },
    // 添加活动规则
    addActiveRule() {
      this.titles1 = "新增活动规则"
      this.resetRule()
      this.getTimeShareList()
      this.listUserGrade()
      this.getUserLabelList()
      this.showDialogVisible = true
    },
    // 查询限时优惠列表信息
    getTimeShareList() {
      getRequestList({pageNo: 1, pageSize: 10000, activeType: 2}).then(res => {
        this.timeShareList = res.data.records
      })
    },
    // 会员等级
    listUserGrade() {
      listUserGrade({page: 1, pageSize: 1000}).then(res => {
        if (res.code == 200) {
          this.userGradeList = res.data.records
        }
      })
    },
    // 会员标签
    getUserLabelList() {
      listUserLabel({page: 1, pageSize: 10000}).then(res => {
        this.userLabelList = res.data.records
      })
    },
    Typeindex3(index) {
      this.tindex3 = index
      this.ruleForm1.timeType = index
      this.weekDay = []
      this.monthDay = []
    },
    // 查询活动规则列表
    getRuleList() {
      getPriceRuleList(this.queryParams1).then(res => {
        this.ruleList = res.data.records
        this.total1 = res.data.total
      })
    },
    // 删除
    deleteOil(id) {
      deleteList(id).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        }

      })
    },
    // 限时优惠制空
    Blank() {
      this.ruleForm = {
        activeType: 2,
        title: '',
        name: '',
        region: '',
        category: '1',
        disValue: '',
        type: [],
        oilList: []
      }
    },
    // 修改
    modifySeparateList(id) {
      this.titles = "修改分时优惠"
      getID(id).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.ruleForm = res.data
          this.centerDialogVisible = true
        }
      })
    },
    // 新增/修改
    addSeparateList() {

      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {

          this.centerDialogVisible = false
          if (this.ruleForm.id) {
            updateActivePrice(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.getList()
              }
            })
          } else {
            postaddList(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.getList()
              }
            })
          }

        }
      })
    },
    //列表查询
    getList() {
      getRequestList(this.queryParams).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    // 新增限时
    Timeshare() {
      this.titles="新增限时优惠"
      this.Blank()
      oilNumberList1().then(res => {
        this.ruleForm.oilList = res.data.records
        for (let i = 0; i < this.ruleForm.oilList.length; i++) {
          this.ruleForm.oilList[i].type = 0
        }
      })
      this.centerDialogVisible = !this.centerDialogVisible
    },
    deleteType(data) {

      data.type = '1'
      this.$forceUpdate()
      let tempList = JSON.stringify(this.ruleForm.oilList)
      this.ruleForm.oilList = []
      this.ruleForm.oilList = JSON.parse(tempList)
    },
    addType(data) {
      data.type = '0'
      this.$forceUpdate()
      let tempList = JSON.stringify(this.ruleForm.oilList)
      this.ruleForm.oilList = []
      this.ruleForm.oilList = JSON.parse(tempList)
    }


  }
}
</script>

<style scoped lang="scss">
.center_ {
  width: 100%;
  border-radius: 8px;
  background: #f9f9f9;
  box-sizing: border-box;
  padding: 20px;
  margin: 0 auto;
}

.bai-box {
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  padding: 15px;
}

.d-b {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.d-a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.d-s {
  display: flex;
  align-items: center;
}

.top-title {

}

.hui-text {
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 30px;
  width: 380px;
  height: 120px;
  overflow: hidden;
}

.bigNum {
  font-size: 60px;
  font-weight: bold;
  color: #333333;
  margin-right: 15px;
}

.smtitle {
  font-size: 28px;
  color: #333333;
  font-weight: bold;
}

.gang_ {
  width: 1px;
  height: 75px;
  border: 1px solid #FF9655;
}

.gang {
  width: 2px;
  height: 13px;
  background: #FF9655;
  margin-right: 10px;
}

.g-title {
  font-size: 14px;
  color: #333333;
}

.d-s {
  display: flex;
  align-items: center;
}

.icon-type {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  margin-right: 20px;
  cursor: pointer;
}

.acvtive {
  color: #FF770F !important;
}
</style>