dy-admin-manager/src/views/buildVip/index.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      VIP课申请
    </h2>
    <div class="m-core">
      <div class="vipLeft">
        <h4>课程信息</h4>
        <el-form ref='leftForm'
                 :rules='leftFormRules'
                 :label-position='labelPosition'
                 label-width="100px"
                 :model="leftForm">
          <el-form-item label="课程名称"
                        prop="name">
            <el-input v-model="leftForm.name"></el-input>
          </el-form-item>
          <el-form-item label="科目名称"
                        prop="subject">
            <el-select v-model="leftForm.subject">
              <el-option v-for='(item,index) in subjectList'
                         :key='index'
                         :value="item.id"
                         :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="指导老师"
                        prop="teacher">
            <el-select v-model="leftForm.teacher"
                       :disabled="!leftForm.subject">
              <el-option v-for="(item,index) in teacherList"
                         :key="index"
                         :label="item.username"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课程形式"
                        prop="courseType">
            <el-select v-model="leftForm.courseType"
                       @change="changeType">
              <el-option v-for="(item,index) in courseTypeList"
                         :key="index"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动方案"
                        prop="activeType">
            <el-select v-model="leftForm.activeType"
                       :disabled="!leftForm.courseType"
                       @change='chioseActive'>
              <el-option v-for='(item,index) in activeList'
                         :key='index'
                         :value="item.id"
                         :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="每班人数">
            <el-input type='number'
                      disabled
                      v-model="leftForm.classNum"></el-input>
          </el-form-item>
          <el-form-item label="每课时长">
            <el-input type='number'
                      disabled
                      v-model="leftForm.classTime"></el-input>
          </el-form-item>
          <el-form-item label="报名开始时间"
                        v-if="leftForm.signUpStart">
            <el-date-picker v-model="leftForm.signUpStart"
                            disabled
                            type="date"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="报名结束时间"
                        v-if="leftForm.signUpEnd">
            <el-date-picker v-model="leftForm.signUpEnd"
                            disabled
                            type="date"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="课程开始时间"
                        v-if="leftForm.courseStart">
            <el-date-picker v-model="leftForm.courseStart"
                            disabled
                            type="date"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="课程结束时间"
                        v-if="leftForm.courseEnd">
            <el-date-picker v-model="leftForm.courseEnd"
                            disabled
                            type="date"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择时间">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="center">
        <h4>排课设置</h4>
        <el-form :model='centerForm'
                 label-width="100px"
                 :label-position="labelPosition">
          <el-form-item label="线上课数"
                        v-if="hasOnline">
            <el-input type='number'
                      v-model="centerForm.onlineCourseNum"></el-input>
          </el-form-item>
          <el-form-item label="线下课数"
                        v-if="hasOffline">
            <el-input type='number'
                      v-model="centerForm.offlineCourseNum"></el-input>
          </el-form-item>
          <el-form-item label="待排课数">
            <el-input disabled
                      v-model="allCourseCount"></el-input>
          </el-form-item>
          <el-form-item label="赠课课程类型"
                        v-if="hotType=='GIVE_CLASS'">
            <el-radio v-model="centerForm.radio"
                      label="ONLINE">线上课</el-radio>
            <el-radio v-model="centerForm.radio"
                      label="OFFLINE">线下课</el-radio>
          </el-form-item>
        </el-form>
        <!-- 排课列表开始 -->
        <div class="planList">
          <div class="planTop">
            <p>已排课程</p>
            <el-button type='text'
                       @click="dialogFormVisible = true">点击排课</el-button>
          </div>
          <div class="planCore">
            <div class="row"
                 v-for="(item,index) in this.lookList">
              <div class="name">{{ item.type }}</div>
              <div class="week">{{ item.week }}</div>
              <div class="time">{{ item.time }}</div>
              <div class="operation">
                <el-button type='text'
                           @click="removeWeekCourse(item.id)">删除</el-button>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="right">
        <h4>课酬设置</h4>
        <el-form :model="rightForm"
                 label-width="100px"
                 :label-position="labelPosition">
          <el-form-item label="线上课课酬"
                        v-if="hasOnline">
            <el-input v-model="rightForm.onlineCourse"
                      :disabled="salaryReadonlyFlag==0 || onlineSalary!='TEACHER_DEFAULT'"></el-input>
          </el-form-item>
          <el-form-item label="线下课课酬"
                        v-if="hasOffline">
            <el-input v-model="rightForm.offlineCourse"
                      :disabled="salaryReadonlyFlag==0 || offlineSalary!='TEACHER_DEFAULT'"></el-input>
          </el-form-item>
          <el-form-item label="线上课单价"
                        v-if="hasOnline">
            <el-input v-model="rightForm.onlinePrice"
                      :disabled="salaryReadonlyFlag==0"></el-input>
          </el-form-item>
          <el-form-item label="线下课单价"
                        v-if="hasOffline">
            <el-input v-model="rightForm.offlinePrice"
                      :disabled="salaryReadonlyFlag==0"></el-input>
          </el-form-item>
          <el-form-item label="课程总价">
            <el-input v-model="rightForm.allPrice"
                      disabled></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary"
                   style="float:right"
                   @click="computational">计算</el-button>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog title="VIP排课"
               width="500px"
               ref='maskForm'
               :visible.sync="dialogFormVisible">
      <el-form :model="maskForm">
        <el-form-item label="课程类型"
                      prop="type">
          <el-radio v-model="maskForm.type"
                    v-if="hasOnline"
                    label="ONLINE">线上课</el-radio>
          <el-radio v-model="maskForm.type"
                    v-if="hasOffline"
                    label="OFFLINE">线下课</el-radio>
        </el-form-item>

        <el-form-item label="循环周次"
                      prop="week">
          <el-select v-model="maskForm.week">
            <el-option label="星期日"
                       value="0"></el-option>
            <el-option label="星期一"
                       value="1"></el-option>
            <el-option label="星期二"
                       value="2"></el-option>
            <el-option label="星期三"
                       value="3"></el-option>
            <el-option label="星期四"
                       value="4"></el-option>
            <el-option label="星期五"
                       value="5"></el-option>
            <el-option label="星期六"
                       value="6"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="上课时间"
                      prop="startTime">
          <el-time-picker v-model="maskForm.startTime"
                          format='HH:mm'
                          value-format='HH:mm'
                          :picker-options="{
                          selectableRange: '00:00:00 - 23:59:00'
                            }"
                          placeholder="选择时间">
          </el-time-picker>
        </el-form-item>
      </el-form>
      <div class="btnWrap">
        <div class="okBtn"
             @click='addWeek'>确认</div>
      </div>

      <div class="planList">
        <div class="planTop">
          <p>已排课程</p>
        </div>
        <div class="planCore">
          <div class="row"
               v-for="(item,index) in this.lookList">
            <div class="name">{{ item.type }}</div>
            <div class="week">{{ item.week }}</div>
            <div class="time">{{ item.time }}</div>
            <div class="operation">
              <el-button type='text'
                         @click="removeWeekCourse(item.id)">删除</el-button>
            </div>
          </div>
        </div>
        <div style="margin:20px 0">
          <el-date-picker v-model="maskForm.courseStart"
                          type="date"
                          :picker-options="courseOption"
                          placeholder="请选择开课时间">
          </el-date-picker>
        </div>

        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="setTimeTable">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <div class="btnWrap">
      <div class="closeBtn">取消</div>
      <div class="okBtn"
           @click="submitInfo">确定</div>
    </div>
  </div>
</template>
<script>
import { getTeacher, getSubject } from '@/api/buildTeam'
import { vipGroupCategory, vipGroupActivityFind, getVipGroupCostCount, createVip } from '@/api/vipSeting'
export default {
  data () {
    return {
      dialogFormVisible: false,
      labelPosition: 'right',
      leftForm: {
        name: '',
        teacher: '',
        subject: '',
        courseType: '',
        activeType: '',
        classNum: '',
        classTime: '',
        signUpStart: '',
        signUpEnd: '',
        courseStart: '',
        courseEnd: ''
      },
      centerForm: {
        allCourseNum: '',
        onlineCourseNum: 0,
        offlineCourseNum: 0,
        radio: ''
      },
      maskForm: {
        type: '',
        week: '',
        startTime: ''
      },
      rightForm: {
        onlineCourse: '',
        offlineCourse: '',
        onlinePrice: '',
        offlinePrice: '',
        allPrice: ''
      },
      subjectList: [], // 科目列表
      teacherList: [], // 老师列表
      courseTypeList: [], // 课程类型集合
      activeList: [], //活动集合
      hasOnline: false,
      hasOffline: false,
      onlineSalary: '', // 线上课课酬结算方式
      offlineSalary: '',// 线下课课酬结算方式
      hotType: '',
      attribute1: '',
      attribute2: '',
      salaryReadonlyFlag: '', // 老师工资是否可配
      lookList: [], // 展示课表
      timeTable: [], // 真正的课表
      giveNum: '',
      weekDay: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      courseOption: {
        disabledDate: time => {
          let startTime = this.leftForm.courseStart;
          if (startTime) {
            let date = new Date(startTime.replace(/-/, "/"))
            return time.getTime() < date.getTime()
          }
          return;
        }
      },
      leftFormRules: {
        /**?
         * teacher: '',
        subject: '',
        courseType: '',
        activeType: '',
         */
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        teacher: [
          { required: true, message: '请选择老师', trigger: 'blur' },],
        subject: [{
          required: true, message: '请选择科目', trigger: 'blur'
        }],
        courseType: [{
          required: true, message: '请选择课程类型', trigger: 'blur'
        }],
        activeType: [{
          required: true, message: '请选择活动', trigger: 'blur'
        }]
      }
    }
  },
  mounted () {
    // 获取所有科目的接口
    getSubject().then(res => {
      if (res.code == 200) {
        this.subjectList = res.data.rows;
      }

    })
    // 获取所有老师的接口
    getTeacher().then(res => {
      if (res.code == 200) {
        this.teacherList = res.data;
      }
    })
    // 获取课程类型的接口
    vipGroupCategory({ organId: this.$store.getters.organ }).then(res => {
      if (res.code == 200) {
        this.courseTypeList = res.data;
      }
    })


  },
  computed: {
    allCourseCount () {

      let online, offline;
      this.centerForm.onlineCourseNum ? online = this.centerForm.onlineCourseNum : online = 0;
      this.centerForm.offlineCourseNum ? offline = this.centerForm.offlineCourseNum : offline = 0;
      let giveNum;
      if (this.hotType == 'GIVE_CLASS') {
        //  this.attribute1  从多少节开始送
        //  this.attribute2  送多少节
        giveNum = parseInt((parseInt(offline) + parseInt(online)) - this.attribute1 >= 0 ? giveNum = this.attribute2 : giveNum = 0);
        this.giveNum = giveNum || 0;
        return (parseInt(offline) + parseInt(online) + '+' + giveNum) || '';
      }
      return parseInt(offline) + parseInt(online) || ''
    }
  },
  methods: {
    // 选择课程类型
    changeType (val) {

      for (let i in this.courseTypeList) {
        if (this.courseTypeList[i].id == val) {
          // 学生人数
          this.leftForm.classNum = this.courseTypeList[i].studentNum;
          // 每课时长
          this.leftForm.classTime = this.courseTypeList[i].singleClassMinutes;
          // 线上课单节价格
          this.rightForm.onlinePrice = this.courseTypeList[i].onlineClassesUnitPrice;
          // 线下课单节价格
          this.rightForm.offlinePrice = this.courseTypeList[i].offlineClassesUnitPrice;
        }
      }
      // 根据课程类型获取活动方案
      if (this.leftForm.courseType) {
        vipGroupActivityFind({ 'categoryId': this.leftForm.courseType }).then(res => {
          if (res.code == 200) {
            this.activeList = res.data;
          }
        })
      }

    },
    // 选择活动方案
    chioseActive (val) {
      this.attribute1 = ''
      this.attribute2 = '';
      // console.log(val);
      // 根须活动id获取 相应的值
      for (let i in this.activeList) {
        if (this.activeList[i].id == val) {
          // 报名开始 报名结束 课程开始 课程结束 // 判断是否有线上,线下课 并同步状态
          this.leftForm.signUpStart = this.activeList[i].startTime;
          this.leftForm.signUpEnd = this.activeList[i].endTime;
          this.leftForm.courseStart = this.activeList[i].coursesStartTime;
          this.leftForm.courseEnd = this.activeList[i].coursesEndTime;
          // 获取活动种类并保存
          this.hotType = this.activeList[i].type;
          // 获取买赠必要参数
          this.attribute1 = this.activeList[i].attribute1;
          this.attribute2 = this.activeList[i].attribute2;
          // 存储课酬是否可配置
          this.salaryReadonlyFlag = this.activeList[i].salaryReadonlyFlag
          //  hasOnline: false, hasOffline: false 还需要判断type类型 根据活动id获取
          if (this.activeList[i].salarySettlementJson) {
            let obj = JSON.parse(this.activeList[i].salarySettlementJson)
            if (obj && obj.onlineSalarySettlement) {
              // 有线上课
              this.hasOnline = true;
              this.onlineSalary = obj.onlineSalarySettlement.salarySettlementType;
              console.log('线上:' + this.onlineSalary)
            } else {
              this.hasOnline = false;
            }
            if (obj && obj.offlineSalarySettlement) {
              // 有线下课
              this.hasOffline = true;
              this.offlineSalary = obj.offlineSalarySettlement.salarySettlementType;
              console.log('线下:' + this.offlineSalary)
            } else {
              this.hasOffline = false;
            }
          }

        }
      }
    },
    // 点击确插入课表
    addWeek () {
      let courseType = this.maskForm.type;
      // let week = ;this.maskForm.week 
      let startTime = this.maskForm.startTime;
      if (!courseType || !this.maskForm.week || !startTime) {
        this.$message({
          type: 'error',
          message: '请填写完成信息'
        })
        return;
      }
      // 拿到相应的值插入数组
      let endTime = this.MinutesTest(startTime, this.leftForm.classTime);

      let str;
      switch (courseType) {
        case 'ONLINE': {
          str = '线上课'
          break;
        }
        case 'OFFLINE': {
          str = '线下课'
          break;
        }
      }
      let flag = false;
      for (let i in this.lookList) {
        if (this.lookList[i].weekDay == this.maskForm.week) {
          flag = true;
        }
      }
      // true=> 说明有这一周 那么循环找到这一周 在判断时间
      // flase=> 说明没有这一周的时间 直接添加
      if (flag) {
        // 有相同的周日
        let arr = [];
        for (let i in this.lookList) {
          if (this.lookList[i].weekDay == this.maskForm.week) { // 找到这一天的所有元素
            //  && !this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, startTime) && !this.timeIsrange(this.lookList[i].startTime, this.lookList[i].endTime, endTime)
            let isStartTime = this.timeIsrange(startTime, endTime, this.lookList[i].startTime);
            let isEndTime = this.timeIsrange(startTime, endTime, this.lookList[i].endTime);
            arr.push(!isEndTime && !isStartTime)
          }
        }
        let isAdd = true;
        for (let j = 0; j < arr.length; j++) {
          isAdd = isAdd && arr[j]
        }
        if (isAdd) {
          this.lookList.push({
            'type': str,
            'week': this.weekDay[this.maskForm.week],
            'weekDay': this.maskForm.week,
            'startTime': startTime,
            'endTime': endTime,
            'time': startTime + '-' + endTime,
            'id': Date.now()
          })
        } else {
          this.$message({
            type: 'error',
            message: '该时间段已排课请重选时间'
          })
        }
      } else {
        this.lookList.push({
          'type': str,
          'week': this.weekDay[this.maskForm.week],
          'weekDay': this.maskForm.week,
          'startTime': startTime,
          'endTime': endTime,
          'time': startTime + '-' + endTime,
          'id': Date.now()
        })
      }

      // let courseType = this.maskForm.type;
      // // let week = ;this.maskForm.week 
      // let startTime = this.maskForm.startTime;
      this.maskForm.type = '';
      this.maskForm.week = '';
      this.maskForm.startTime = '';
    },
    // 分钟小时相加减
    MinutesTest (str, interval) {
      let houer = str.split(':')[0];
      let min = str.split(':')[1];
      let sdate1 = new Date(1900, 1, 1, houer, min);
      sdate1.setMinutes(sdate1.getMinutes() + parseInt(interval));
      let H = sdate1.getHours();
      let M = sdate1.getMinutes();
      if (H < 10) H = '0' + H;
      if (M < 10) M = '0' + M;
      return H + ':' + M
    },
    // 判断时间是否在时间段内
    timeIsrange (beginTime, endTime, nowTime) {
      var strb = beginTime.split(":");
      if (strb.length != 2) {
        return false;
      }
      var stre = endTime.split(":");
      if (stre.length != 2) {
        return false;
      }
      var strn = nowTime.split(":");
      if (stre.length != 2) {
        return false;
      }
      var b = new Date();
      var e = new Date();
      var n = new Date();
      b.setHours(strb[0]);
      b.setMinutes(strb[1]);
      e.setHours(stre[0]);
      e.setMinutes(stre[1]);
      n.setHours(strn[0]);
      n.setMinutes(strn[1]);

      if (n.getTime() - b.getTime() >= 0 && n.getTime() - e.getTime() <= 0) {
        // 在时间范围内
        return true;
      } else {
        // 不在时间范围内
        return false;
      }
    },
    removeWeekCourse (id) {
      for (let i in this.lookList) {
        if (this.lookList[i].id == id) {
          this.lookList.splice(i, 1);
        }
      }
    },
    setTimeTable () {
      if (!this.maskForm.courseStart) {
        this.$message.error('请选择开课时间')
        return;
      }
      // 拿到线上课数与线下课数 以及
      let online = parseInt(this.centerForm.onlineCourseNum);
      let offline = parseInt(this.centerForm.offlineCourseNum);

      let giveNum = this.giveNum;
      let giveClassType = this.centerForm.radio;
      if (giveClassType == 'ONLINE') {
        // 线上
        online += giveNum;
      } else if (giveClassType == 'OFFLINE') {
        offline += giveNum;
      }


      let date = this.maskForm.courseStart;
      let date1 = this.maskForm.courseStart;
      let startWeekday = this.maskForm.courseStart.getDay();
      let onlineList = [];
      let offlineList = [];
      for (let i in this.lookList) {
        if (this.lookList[i].type == '线上课') {
          onlineList.push({ week: this.lookList[i].weekDay, date: this.lookList[i] })
        }
        if (this.lookList[i].type == '线下课') {
          offlineList.push({ week: this.lookList[i].weekDay, date: this.lookList[i] })
        }
      }

      // 获取要排课的总数  获取每周要排多少次
      while (online && online > 0) {
        // 排线上课g
        for (let i in onlineList) {
          let num;
          onlineList[i].week - date.getDay() >= 0 ? num = onlineList[i].week - date.getDay() : num = onlineList[i].week - date.getDay() + 7// +差值的天数://差值的天数+7
          // console.log(num);
          let dataStr = this.getThinkDate(date, num);
          this.timeTable.push({
            'classDate': dataStr + ' 00:00:00',
            'actualTeacherId': this.leftForm.teacher,
            'startClassTime': onlineList[i].date.startTime,
            "endClassTime": onlineList[i].date.endTime,
            "teachMode": 'ONLINE'
          })
          online--;
          if (online == 0) break
        }
        // 加一周
        date.setDate(date.getDate() + 7);
      }

      while (offline && offline > 0) {
        // 排线下课
        for (let i in offlineList) {
          let num;
          offlineList[i].week - date1.getDay() >= 0 ? num = offlineList[i].week - date1.getDay() : num = offlineList[i].week - date1.getDay() + 7// +差值的天数://差值的天数+7
          let dataStr = this.getThinkDate(date1, num);
          console.log(dataStr);
          this.timeTable.push({
            'classDate': dataStr + ' 00:00:00',
            'actualTeacherId': this.leftForm.teacher,
            'startClassTime': offlineList[i].date.startTime,
            "endClassTime": offlineList[i].date.endTime,
            "teachMode": 'OFFNLINE'
          })
          offline--;
          if (offline == 0) break
        }
        // 加一周
        date1.setDate(date1.getDate() + 7);
      }
      this.dialogFormVisible = false;
    },
    getThinkDate (date, num) {

      let Stamp = date;
      Stamp.setDate(date.getDate() + num) // 获取当前月数的第几天
      // console.log(date.getMonth() + 1)
      // console.log(Stamp.getMonth() + 1)
      var year = Stamp.getFullYear(); //获取完整的年份(4位,1970-????)
      var month = Stamp.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var mvar = '';
      if (month < 10) {
        mvar = '0' + month;
      } else {
        mvar = month + '';
      }
      var day = Stamp.getDate();
      var dvar = '';
      if (day < 10) {
        dvar = '0' + day;
      } else {
        dvar = day + '';
      }
      // console.log(year + "-" + mvar + '-' + dvar);
      return year + "-" + mvar + '-' + dvar;
    },
    // 计算课酬
    computational () {
      let userId = this.leftForm.teacher;
      let giveTeachMode = this.centerForm.radio;
      let vipGroupCategoryId = this.leftForm.courseType;
      let vipGroupActivityId = this.leftForm.activeType;
      let onlineClassesUnitPrice = this.rightForm.onlinePrice;
      let offlineClassesUnitPrice = this.rightForm.offlinePrice;
      let onlineClassesNum = this.centerForm.onlineCourseNum;
      let offlineClassesNum = this.centerForm.offlineCourseNum;
      if (this.hotType == 'GIVE_CLASS') {
        if (this.centerForm.radio == 'ONLINE') {
          onlineClassesNum = parseInt(onlineClassesNum) + parseInt(this.giveNum)
        } else if (this.centerForm.radio == 'OFFLINE') {
          offlineClassesNum = parseInt(offlineClassesNum) + parseInt(this.giveNum)
        }
      }
      getVipGroupCostCount({ vipGroupActivityId, onlineClassesUnitPrice, vipGroupCategoryId, offlineClassesUnitPrice, onlineClassesNum, offlineClassesNum, userId, giveTeachMode }).then(res => {
        if (res.code == 200) {
          this.rightForm.onlineCourse = res.data.onlineTeacherSalary;
          this.rightForm.offlineCourse = res.data.offlineTeacherSalary;
          this.rightForm.allPrice = res.data.totalPrice;
        }
      })

    },
    submitInfo () {
      let online = parseInt(this.centerForm.onlineCourseNum);
      let offline = parseInt(this.centerForm.offlineCourseNum);

      let giveNum = this.giveNum;
      let giveClassType = this.centerForm.radio;
      if (giveClassType == 'ONLINE') {
        // 线上
        online += giveNum;
      } else if (giveClassType == 'OFFLINE') {
        offline += giveNum;
      }
      let obj = {};
      obj.courseSchedules = this.timeTable;
      /**
       * 
       * teacher: '',
        subject: '',
        courseType: '',
        activeType: '',
        classNum: '',
        classTime: '',
        signUpStart: '',
        signUpEnd: '',
        courseStart: '',
        courseEnd: ''
       */
      obj.vipGroupApplyBaseInfo = {
        coursesExpireDate: this.leftForm.courseEnd,
        name: this.leftForm.name,
        offlineClassesNum: offline,
        onlineClassesNum: online,
        offlineClassesUnitPrice: this.rightForm.offlinePrice,
        onlineClassesUnitPrice: this.rightForm.onlinePrice,
        paymentExpireDate: this.leftForm.signUpEnd,
        registrationStartTime: this.leftForm.signUpStart,
        singleClassMinutes: this.leftForm.classTime,
        studentNum: this.leftForm.classNum,
        userId: this.leftForm.teacher,
        vipGroupActivityId: this.leftForm.activeType,
        vipGroupCategoryId: this.leftForm.courseType,
        onlineTeacherSalary: this.rightForm.onlineCourse,
        offlineTeacherSalary: this.rightForm.offlineCourse,
        giveTeachMode: this.centerForm.radio,
        subjectIdList: this.leftForm.subject,
      }
      createVip(obj).then(res => { })
    }
  },
}
</script>
<style lang="scss" scoped>
.m-core {
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  .el-input {
    width: 180px;
  }
  h4 {
    font-size: 16px;
    background-color: #ccc;
    color: #fff;
    text-align: center;
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
  }
  .vipLeft {
    width: 400px;
    // h4 {
    //   font-size: 16px;
    //   background-color: #ccc;
    //   color: #fff;
    //   text-align: center;
    //   width: 100%;
    //   height: 40px;
    //   line-height: 40px;
    //   margin-bottom: 20px;
    // }
  }
  .center {
    width: 400px;
  }
  .right {
    width: 400px;
  }
}
.planList {
  padding: 0 25px;
  .planTop {
    height: 40px;
    line-height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    margin-top: 20px;
    > p {
      font-size: 14px;
    }
  }
  .planCore {
    .row {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: nowrap;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
  }
}
.okBtn {
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  border-radius: 4px;
  margin-right: 20px;
  cursor: pointer;
  background-color: #f97215;
  float: right;
}
</style>