dy-admin-manager/src/views/categroyManager/vipActiveList.vue

<template >
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      VIP活动方案
    </h2>

    <div class="m-core">
      <el-button type="primary" style="margin-bottom: 20px" v-permission="'/vipNewActive'" @click="gotoNewActive">新建</el-button>
      <save-form
        :inline="true"
        class="searchForm"
        ref="searchForm"
        @submit="search"
        @reset="onReset"
        :model="searchForm"
      >
        <el-form-item prop="search">
          <el-input
            v-model.trim="searchForm.search"
            placeholder="请输入活动编号、名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="organId">
          <el-select
            class="multiple"
            filterable
            style="width: 180px !important"
            v-model.trim="searchForm.organId"
            clearable
            placeholder="请选择分部"
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="enable">
          <el-select
            filterable
            style="width: 180px !important"
            v-model="searchForm.enable"
            clearable
            @clear="resetEnable"
            placeholder="活动状态"
          >
            <el-option label="开启" :value="true"></el-option>
            <el-option label="关闭" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="danger">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="reset">重置</el-button>
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        >
          <el-table-column
            align="center"
            prop="id"
            label="活动编号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="活动名称"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="vipGroupCategoryNames"
            label="适用课程形式"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="type"
            :formatter="fommatterType"
            label="活动类型"
          ></el-table-column>
          <el-table-column
            align="center"
            label="适用课时类型"
            :formatter="fommatterCourseType"
          ></el-table-column>
          <el-table-column align="center" label="结算标准">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.salarySettlementJson | onlinePip }}</p>
                <p>{{ scope.row.salarySettlementJson | unonlinePip }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="结算说明">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.salarySettlementJson | onlineDesc }}</p>
                <p>{{ scope.row.salarySettlementJson | unonlineDesc }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="启用状态"
            prop="enable"
            :formatter="fommatterEnable"
          ></el-table-column>
          <el-table-column align="center" width="130px" label="活动持续时间">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.startTime | formatTimer }}</p>
                <p>{{ scope.row.endTime | formatTimer }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="130px" label="课程安排时间">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.coursesStartTime | formatTimer }}</p>
                <p>{{ scope.row.coursesEndTime | formatTimer }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <!--   v-if="scope.row.enable > 0" -->
                <el-button
                  type="text"
                  v-permission="'vipGroupActivity/update'"
                  @click="reset(scope.row)"
                  >修改</el-button
                >
                <!-- <el-button type='text'
                @click="remove(scope.row)">删除</el-button>-->
                <el-popover
                  placement="top"
                  width="160"
                  v-permission="'vipGroupActivity/delete'"
                  :ref="scope.$index"
                >
                  <p>确定删除?</p>
                  <div style="text-align: right; margin: 0">
                    <el-button
                      size="mini"
                      type="text"
                      @click="scope._self.$refs[scope.$index].doClose()"
                      >取消</el-button
                    >
                    <el-button type="primary" size="mini" @click="remove(scope)"
                      >确定</el-button
                    >
                  </div>
                  <el-button type="text" slot="reference">删除</el-button>
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <pagination
          :total.sync="rules.total"
          sync
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog
      title="修改VIP活动"
      width="650px"
      :before-close="closeVipform"
      :visible.sync="dialogVisible"
    >
      <div>
        <el-form
          :label-position="labelPosition"
          :model="resetForm"
          ref="vipform"
          :rules="resetFormRules"
          class="vipform"
        >
          <el-form-item label="活动名称" label-width="120px" prop="name">
            <el-input
              style="width: 400px"
              v-model.trim="resetForm.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="适用分部" label-width="120px" prop="organ">
            <el-select
              v-model.trim="resetForm.organ"
              filterable
              disabled
              multiple
              clearable
            >
              <el-option
                v-for="(item, index) in selects.branchs"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <!-- <el-button @click="onCheckAllBranch">适用所有分部</el-button> -->
          </el-form-item>
          <el-form-item label="课程形式" label-width="120px" prop="stauts">
            <el-select
              v-model.trim="resetForm.stauts"
              filterable
              clearable
              multiple
              disabled
            >
              <el-option
                v-for="(item, index) in selects.vipGroupCategory"
                :key="index"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动描述" label-width="120px" prop="desc">
            <el-input
              type="textarea"
              v-model.trim="resetForm.desc"
              style="width: 400px"
              :rows="5"
              placeholder="请输入活动说明"
            ></el-input>
          </el-form-item>
          <el-form-item label="活动时间" label-width="120px" prop="activeTime">
            <el-date-picker
              v-model.trim="resetForm.activeTime"
              style="width: 100%"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="{
                firstDayOfWeek: 1,
              }"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="课程时间" label-width="120px" prop="courseTime">
            <el-date-picker
              v-model.trim="resetForm.courseTime"
              style="width: 100%"
              type="datetimerange"
              :picker-options="{
                firstDayOfWeek: 1,
              }"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <el-alert
          title="活动适用范围&结算标准"
          type="info"
          :closable="false"
          class="alert">
        </el-alert>
        <div class="activeRange">
          <!-- <div class="left">
            <p>活动适用范围&结算标准：</p>
          </div> -->
          <div class="right">
            <div class="chioseWrap">
              <el-checkbox label="线上课" v-model.trim="online"></el-checkbox>
              <el-select v-model.trim="onlineSalary" clearable filterable>
                <el-option
                  label="老师默认课酬"
                  value="TEACHER_DEFAULT"
                ></el-option>
                <el-option
                  label="实际课程单价比例折扣"
                  value="RATIO_DISCOUNT"
                ></el-option>
                <el-option label="固定课酬" value="FIXED_SALARY"></el-option>
              </el-select>
              <!--   v-show='onlineSalary!= "TEACHER_DEFAULT"' -->
              <el-input
                placeholder="请输入"
                style="width: 150px"
                type="number"
                @mousewheel.native.prevent
                v-if="onlineSalary == 'FIXED_SALARY'"
                v-model.trim="onlineprice"
              >
                <template slot="append">元</template>
              </el-input>
              <el-input
                placeholder="请输入"
                style="width: 150px"
                type="number"
                @mousewheel.native.prevent
                v-else-if="onlineSalary == 'RATIO_DISCOUNT'"
                v-model.trim="onlineprice"
              >
                <template slot="append">%</template>
              </el-input>
              <el-checkbox
                label="是否参加梯度"
                style="margin-left: 20px"
                v-model.trim="onlineClassJoinGradientRewards"
              ></el-checkbox>
            </div>
            <div class="chioseWrap">
              <el-checkbox label="线下课" v-model.trim="unonline"></el-checkbox>
              <el-select v-model.trim="unonlineSalary" filterable clearable>
                <el-option
                  label="老师默认课酬"
                  value="TEACHER_DEFAULT"
                ></el-option>
                <el-option
                  label="实际课程单价比例折扣"
                  value="RATIO_DISCOUNT"
                ></el-option>
                <el-option label="固定课酬" value="FIXED_SALARY"></el-option>
              </el-select>
              <!-- unonlineSalary -->
              <el-input
                placeholder="请输入"
                style="width: 150px"
                type="number"
                @mousewheel.native.prevent
                v-if="unonlineSalary == 'FIXED_SALARY'"
                v-model.trim="unonlineprice"
              >
                <template slot="append">元</template>
              </el-input>
              <el-input
                placeholder="请输入"
                style="width: 150px"
                type="number"
                @mousewheel.native.prevent
                v-else-if="unonlineSalary == 'RATIO_DISCOUNT'"
                v-model.trim="unonlineprice"
              >
                <template slot="append">%</template>
              </el-input>
              <el-checkbox
                label="是否参加梯度"
                style="margin-left: 20px"
                v-model.trim="offlineClassJoinGradientRewards"
              ></el-checkbox>
            </div>
            <div class="chioseWrap">
              <el-checkbox
                v-model.trim="paymentReadonlyFlag"
                label="可自定义单价"
              ></el-checkbox>
              <!-- <el-checkbox v-model.trim="salaryReadonlyFlag"
                           disabled
                           label="可自定义课酬"></el-checkbox> -->
            </div>
          </div>
        </div>
        <el-alert
          title="活动类型"
          type="info"
          :closable="false"
          style="margin-bottom: 15px;"
          class="alert">
        </el-alert>
        <div class="activeType">
          <!-- <div class="left">
            <p style="width: 60px">活动类型</p>
          </div> -->
          <div class="right">
            <div>
              <div
                class="head"
                @click="activeType = 'BASE_ACTIVITY'"
                :class="activeType == 'BASE_ACTIVITY' ? 'active' : ''"
              >
                基础活动
              </div>
              <p class="title" v-if="activeType == 'BASE_ACTIVITY'">课程原价</p>
            </div>
            <div>
              <div
                class="head"
                @click="activeType = 'DISCOUNT'"
                :class="activeType == 'DISCOUNT' ? 'active' : ''"
              >
                折扣
              </div>
              <el-input

                v-if="activeType == 'DISCOUNT'"
                v-model.trim="attribute1"
                placeholder="请输入折扣数值"
              >
                <template slot="append">%</template>
              </el-input>
            </div>
            <div>
              <div
                class="head"
                @click="activeType = 'GIVE_CLASS'"
                :class="activeType == 'GIVE_CLASS' ? 'active' : ''"
              >
                赠送课时
              </div>
              <el-input
                placeholder="多少节开始赠"
                v-if="activeType == 'GIVE_CLASS'"

                v-model.trim="attribute1"
                style="margin-right: 10px"
              ></el-input>
              <span v-if="activeType == 'GIVE_CLASS'">赠</span>
              <el-input
                v-if="activeType == 'GIVE_CLASS'"

                placeholder="请输入赠送课时数"
                v-model.trim="attribute2"
                style="margin: 0 10px"
              ></el-input>
              <!-- <el-checkbox v-if="activeType=='GIVE_CLASS'"
                           v-model.trim="giveClassPaySalaryFlag"
                           label="赠送课时结算课酬"></el-checkbox> -->
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="resetRow">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import {
  vipGroupActivity,
  vipGroupCategory,
  addVipActive,
  resetVipActive,
  removeVipActive,
} from "@/api/vipSeting";
export default {
  name: "vipActiveList",
  components: { pagination },
  data() {
    return {
      labelPosition: "right",
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      searchForm: { organId: null, enable: null, search: "" },
      dialogVisible: false,
      resetForm: {
        name: "",
        desc: "",
        activeTime: [],
        courseTime: [],
        stauts: [],
        organ: [],
      }, // 修改信息
      resetFormRules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 1,
            max: 25,
            message: "长度在 1 到 25 个字符",
            trigger: "blur",
          },
        ],
        desc: [
          { required: false, message: "请输入文字描述", trigger: "blur" },
          {
            min: 1,
            max: 200,
            message: "长度在 1 到 200 个字符",
            trigger: "blur",
          },
        ],
        activeTime: [
          { required: false, message: "请选择活动时间", trigger: "blur" },
        ],
        courseTime: [
          { required: false, message: "请选择课程时间", trigger: "blur" },
        ],
        organ: [{ required: true, message: "请选择分部", trigger: "blur" }],
        stauts: [
          { required: true, message: "请选择活动形式", trigger: "blur" },
        ],
      },
      courseStatusList: [],
      activeType: "",
      online: true,
      unonline: true,
      onlineClassJoinGradientRewards: false,
      offlineClassJoinGradientRewards: false,
      onlineSalary: "TEACHER_DEFAULT",
      unonlineSalary: "TEACHER_DEFAULT",
      onlineprice: "",
      unonlineprice: "",
      salaryReadonlyFlag: false,
      paymentReadonlyFlag: true,
      attribute1: "",
      attribute2: "",
      attribute3: "",
      giveClassPaySalaryFlag: false,
      activeId: "",
      isReset: false,
    };
  },
  // created() {
  //   this.init();
  // },
  // activated() {
  //   this.init();
  // },
  mounted() {
    this.init()
  },
  filters: {
    onlinePip(val) {
      let obj = JSON.parse(val);
      // debugger;
      if (
        obj &&
        obj.onlineSalarySettlement &&
        obj.onlineSalarySettlement.salarySettlementType
      ) {
        switch (obj.onlineSalarySettlement.salarySettlementType) {
          case "RATIO_DISCOUNT": {
            return "线上:比例结算";
            break;
          }
          case "TEACHER_DEFAULT": {
            return "线上:老师默认";
            break;
          }
          case "FIXED_SALARY": {
            return "线上:固定课酬";
            break;
          }
        }
      }
    },
    unonlinePip(val) {
      let obj = JSON.parse(val);
      if (
        obj &&
        obj.offlineSalarySettlement &&
        obj.offlineSalarySettlement.salarySettlementType
      ) {
        switch (obj.offlineSalarySettlement.salarySettlementType) {
          case "RATIO_DISCOUNT": {
            return "线下:比例结算";
            break;
          }
          case "TEACHER_DEFAULT": {
            return "线下:老师默认";
            break;
          }
          case "FIXED_SALARY": {
            return "线下:固定课酬";
            break;
          }
        }
      }
    },
    onlineDesc(val) {
      let obj = JSON.parse(val);
      // debugger;
      if (
        obj &&
        obj.onlineSalarySettlement &&
        obj.onlineSalarySettlement.salarySettlementType
      ) {
        switch (obj.onlineSalarySettlement.salarySettlementType) {
          case "RATIO_DISCOUNT": {
            if (obj.onlineSalarySettlement.settlementValue) {
              return `线上:${obj.onlineSalarySettlement.settlementValue}%`;
            } else {
              return "-";
            }
            break;
          }
          case "TEACHER_DEFAULT": {
            return "线上:默认";
            break;
          }
          case "FIXED_SALARY": {
            if (obj.onlineSalarySettlement.settlementValue) {
              return `线上:${obj.onlineSalarySettlement.settlementValue}/次`;
            } else {
              return "-";
            }

            break;
          }
        }
      }
    },
    unonlineDesc(val) {
      let obj = JSON.parse(val);
      if (
        obj &&
        obj.offlineSalarySettlement &&
        obj.offlineSalarySettlement.salarySettlementType
      ) {
        switch (obj.offlineSalarySettlement.salarySettlementType) {
          case "RATIO_DISCOUNT": {
            if (obj.offlineSalarySettlement.settlementValue) {
              return `线下:${obj.offlineSalarySettlement.settlementValue}%`;
            } else {
              return "-";
            }
            break;
          }
          case "TEACHER_DEFAULT": {
            return "线下:默认";
            break;
          }
          case "FIXED_SALARY": {
            if (obj.offlineSalarySettlement.settlementValue) {
              return `线下:${obj.offlineSalarySettlement.settlementValue}/次`;
            } else {
              return "-";
            }
            break;
          }
        }
      }
    },
  },
  methods: {
    async init() {
      // 获取类型
      await this.$store.dispatch('setVipGroupCategory')
      // 获取分部
      await this.$store.dispatch('setBranchs')

      this.getList();
    },
    loadNumber(event) {
      var el = event.currentTarget;
      var elValue = el.value;
      console.log(elValue);
      var reg = /^((?!0)\d{1,2}|100)$/;
      if (!elValue.match(reg)) {
        elValue = "";
        return false;
      } else {
        return true;
      }
    },

    onCheckAllBranch() {
      // 适用所有分部
      this.resetForm.organ = [];
      this.organList.forEach((item) => {
        this.resetForm.organ.push(item.id);
      });
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReset() {
      // this.searchForm = {
      //   enable: null,
      //   search: null,
      //   organId: null,
      // }
      this.$refs["searchForm"].resetFields();
      this.search();
    },
    getList() {
      let enable = this.searchForm.enable;
      let search = this.searchForm.search;
      vipGroupActivity({
        organId: this.searchForm.organId,
        rows: this.rules.limit,
        page: this.rules.page,
        enable,
        search,
      }).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    resetEnable(val) {
      val = null;
    },
    // 格式化活动类型
    fommatterType(row, column) {
      switch (row.type) {
        case "BASE_ACTIVITY": {
          return "基础";
          break;
        }
        case "DISCOUNT": {
          return "折扣";
          break;
        }
        case "GIVE_CLASS": {
          if (row.giveClassPaySalaryFlag) {
            return "买赠(赠课结算)";
          } else {
            return "买赠(不结算)";
          }

          break;
        }
      }
    },
    // 格式化课时类型
    fommatterCourseType(row) {
      let date = JSON.parse(row.salarySettlementJson);
      let str = "";
      if (date && date.onlineSalarySettlement) {
        str += "线上 ";
      }
      if (date && date.offlineSalarySettlement) {
        str += "线下";
      }
      return str;
    },
    // 格式化启用状态
    fommatterEnable(row) {
      switch (row.enable) {
        case 0: {
          return "关闭";
          break;
        }
        case 1: {
          return "开启";
          break;
        }
      }
    },
    // 点击列表修改同步状态
    reset(row) {
      this.isReset = true;
      this.activeId = row.id;
      this.dialogVisible = true;
      this.resetForm.name = row.name;
      this.resetForm.desc = row.description;

      if (row.organId) {
        this.resetForm.organ = row.organId.split(",").map((res) => {
          return parseInt(res);
        });
      }
      if (row.vipGroupCategoryIdList) {
        this.resetForm.stauts = row.vipGroupCategoryIdList
          .split(",")
          .map((res) => {
            return parseInt(res);
          });
      }

      // 同步活动时间
      if (row.startTime && row.endTime) {
        this.resetForm.activeTime = [row.startTime, row.endTime];
      }
      if (row.coursesStartTime && row.coursesEndTime) {
        this.resetForm.courseTime = [row.coursesStartTime, row.coursesEndTime];
      }
      // 同步适用范围
      let obj = JSON.parse(row.salarySettlementJson);
      // 同步线上课状态
      obj.onlineSalarySettlement ? (this.online = true) : (this.online = false);
      if (obj.onlineSalarySettlement) {
        this.onlineSalary = obj.salarySettlementType;
        if (obj.onlineSalarySettlement.settlementValue) {
          this.onlineprice = obj.onlineSalarySettlement.settlementValue;
        }
        if (obj.onlineSalarySettlement.salarySettlementType)
          this.onlineSalary = obj.onlineSalarySettlement.salarySettlementType;
      } else {
        this.onlineSalary = "TEACHER_DEFAULT";
        this.onlineprice = "";
      }
      // 同步线下课状态
      obj.offlineSalarySettlement
        ? (this.unonline = true)
        : (this.unonline = false);
      if (obj.offlineSalarySettlement) {
        this.unonlineSalary = obj.offlineSalarySettlement;
        if (obj.offlineSalarySettlement.settlementValue) {
          this.unonlineprice = obj.offlineSalarySettlement.settlementValue;
        }
        if (obj.offlineSalarySettlement.salarySettlementType)
          this.unonlineSalary =
            obj.offlineSalarySettlement.salarySettlementType;
      } else {
        this.unonlineSalary = "TEACHER_DEFAULT";
        this.unonlineprice = "";
      }
      //
      this.salaryReadonlyFlag = !!parseInt(row.salaryReadonlyFlag);
      this.paymentReadonlyFlag = !!parseInt(row.paymentReadonlyFlag);
      this.offlineClassJoinGradientRewards = !!parseInt(
        row.offlineClassJoinGradientRewards
      );
      this.onlineClassJoinGradientRewards = !!parseInt(
        row.onlineClassJoinGradientRewards
      );

      this.activeType = row.type;
      this.attribute1 = row.attribute1;
      this.attribute2 = row.attribute2;
      this.giveClassPaySalaryFlag =
        row.giveClassPaySalaryFlag == 1 ? true : false;
    },
    // 点击确认按钮发送修改请求
    resetRow() {
      this.$refs["vipform"].validate((valid) => {
        if (valid) {
          // 验证通过
          let coursesStartTime;
          let coursesEndTime;
          let startTime;
          let endTime;
          if (!this.resetForm.courseTime) {
            this.resetForm.courseTime = [];
            // coursesStartTime = null;
            // coursesEndTime = null;
          }
          if (!this.resetForm.activeTime) {
            this.resetForm.activeTime = [];
            // startTime = null;
            // endTime = null;
          }
          let id = this.activeId;
          coursesStartTime = this.resetForm.courseTime[0] || null;
          coursesEndTime = this.resetForm.courseTime[1] || null;
          startTime = this.resetForm.activeTime[0] || null;
          endTime = this.resetForm.activeTime[1] || null;
          let organId = this.resetForm.organ.join(",");
          let type = this.activeType;
          if (type == "DISCOUNT") {
            if (this.attribute1 < 0 || this.attribute1 > 100) {
              this.$message.error("折扣必须大于0且小于100");
              return;
            }
          }
          let vipGroupCategoryIdList = this.resetForm.stauts.join(",");
          let onlineSalarySettlement;
          let offlineSalarySettlement;
          if (this.online) {
            // 勾选线上

            // 判断勾选的是折扣还是现金
            if (this.onlineSalary == "RATIO_DISCOUNT") {
              if (this.onlineprice < 0 || this.onlineprice > 100) {
                this.$message.error("折扣比必须大于0且小于100");
                return;
              }
            }else if(this.onlineSalary == 'TEACHER_DEFAULT'){
              this.onlineprice = 0;
            }
            onlineSalarySettlement = {
              salarySettlementType: this.onlineSalary,
              settlementValue: this.onlineprice,
            };
          } else {
            onlineSalarySettlement = null;
          }
          if (this.unonline) {
            // 勾选线下
            if (this.unonlineSalary == "RATIO_DISCOUNT") {
              if (this.unonlineprice < 0 || this.unonlineprice > 100) {
                this.$message.error("折扣比必须大于0且小于100");
                return;
              }
            }else if(this.unonlineSalary == 'TEACHER_DEFAULT'){
              this.unonlineprice = 0;
            }
            offlineSalarySettlement = {
              salarySettlementType: this.unonlineSalary,
              settlementValue: this.unonlineprice,
            };
          } else {
            offlineSalarySettlement = null;
          }
          let salaryReadonlyFlag = this.salaryReadonlyFlag * 1;
          let paymentReadonlyFlag = this.paymentReadonlyFlag * 1;
          // let giveClassPaySalaryFlag = this.giveClassPaySalaryFlag * 1;
          let vipGroupSalarySettlement = {
            onlineSalarySettlement,
            offlineSalarySettlement,
          };

          // 发请求创建活动
          resetVipActive({
            paymentReadonlyFlag,
            id,
            coursesStartTime,
            coursesEndTime,
            startTime,
            endTime,
            name: this.resetForm.name,
            description: this.resetForm.desc,
            organId,
            type,
            vipGroupCategoryIdList,
            vipGroupSalarySettlement,
            salaryReadonlyFlag,
            giveClassPaySalaryFlag: 1,
            attribute1: this.attribute1,
            attribute2: this.attribute2,
            attribute3: this.attribute3,
            onlineClassJoinGradientRewards:
              this.onlineClassJoinGradientRewards * 1,
            offlineClassJoinGradientRewards:
              this.offlineClassJoinGradientRewards * 1,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("恭喜你,活动修改成功");
              this.dialogVisible = false;
              this.getList();
            }
          });
        } else {
          this.$message.error("请填写必要参数");
        }
      });
    },
    remove(scope) {
      let id = scope.row.id;
      removeVipActive({ id }).then((res) => {
        if (res.code == 200) {
          this.$message.success("恭喜您删除成功");
          this.getList();
        }
        scope._self.$refs[scope.$index].doClose();
      });
    },
    gotoNewActive() {
      // 带参数 searchForm: { organId: null } 搜索条件
      let rules = JSON.stringify(this.rules);
      let searchForm = JSON.stringify(this.searchForm);
      this.$router.push({
        path: "/vipClassSet/vipNewActive?type=create",
        query: { rules, searchForm },
      });
    },
    closeVipform() {
      this.$refs["vipform"].resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.activeType {
  .right {
    .el-input {
      width: 150px !important;
    }
  }
}
.activeRange {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .left {
    height: 72px;
    line-height: 72px;
  }
  .right {
    .chioseWrap {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      height: 72px;
      line-height: 72px;
      align-items: center;
      .el-checkbox {
        margin-right: 20px;
      }
      .el-select {
        margin-right: 20px;
      }
    }
  }
}
.activeType {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .left {
    margin-right: 20px;
    p {
      height: 40px;
      line-height: 40px;
    }
  }
  .right {
    > div {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      height: 40px;
      line-height: 40px;
      margin-bottom: 20px;
      .head {
        width: 120px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #ccc;

        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
      }
      > .head.active {
        background-color: #13817a;
        color: #fff;
        border: none;
      }
      .title {
        line-height: 40px;
        height: 40px;
      }
    }
  }
}
.vipform {
  .el-select {
    width: 400px !important;
    .el-input__inner {
      width: 400px;
    }
  }
}
.ishidden {
  visibility: hidden;
}
</style>