规则验证

1

src/views/categroyManager/modals/baseInfo.vue

@@ -10,18 +10,21 @@
     <div class="m-core">
       <el-form
         :label-position="labelPosition"
-        :model="vipform"
+        :model="baseForm"
         ref="vipform"
         label-width="120px"
         :rules="vipformRules"
         class="vipform"
       >
         <el-form-item label="活动名称" prop="name">
-          <el-input style="width: 400px" v-model.trim="vipform.name"></el-input>
+          <el-input
+            style="width: 400px"
+            v-model.trim="baseForm.name"
+          ></el-input>
         </el-form-item>
         <el-form-item label="适用分部" prop="organ">
           <select-all
-            v-model.trim="vipform.organ"
+            v-model.trim="baseForm.organ"
             style="width: 400px"
             multiple
             filterable
@@ -41,48 +44,26 @@
         <el-form-item label="活动描述" prop="desc">
           <el-input
             type="textarea"
-            v-model.trim="vipform.desc"
+            v-model.trim="baseForm.desc"
             style="width: 400px"
             :rows="5"
             placeholder="请输入活动说明"
           ></el-input>
         </el-form-item>
-<!--
-        <el-form-item label="课程形式" prop="stauts">
-          <select-all
-            v-model.trim="vipform.stauts"
-            style="width: 400px"
-            @visible-change="$forceUpdate()"
-            clearable
-            multiple
-          >
-            <el-option
-              v-for="item in selects.vipGroupCategory"
-              :key="item.id"
-              :value="item.id"
-              :label="item.name"
-            ></el-option>
-          </select-all>
-        </el-form-item>
-        <el-form-item label="课程调整方式" prop="allowOnlineToOffline">
+        <el-form-item label="活动类型" prop="activeType">
           <el-select
-            v-model.trim="vipform.allowOnlineToOffline"
-            placeholder="请选择课程调整方式"
+            v-model.trim="baseForm.activeType"
+            placeholder="请选择活动类型"
             clearable
           >
-            <el-option
-              :label="item.label"
-              :value="item.value"
-              v-for="item in vipResetTypeList"
-              :key="item.value"
-            ></el-option>
+            <el-option label="课程活动" :value="0"></el-option>
+            <el-option label="会员活动" :value="1"></el-option>
           </el-select>
-        </el-form-item> -->
-
+        </el-form-item>
 
         <el-form-item label="活动生效时间" prop="activeTime">
           <el-date-picker
-            v-model.trim="vipform.activeTime"
+            v-model.trim="baseForm.activeTime"
             type="datetimerange"
             :default-time="['00:00:00', '23:59:59']"
             range-separator="至"
@@ -96,7 +77,7 @@
         </el-form-item>
         <el-form-item label="排课时间范围" prop="courseTime">
           <el-date-picker
-            v-model.trim="vipform.courseTime"
+            v-model.trim="baseForm.courseTime"
             type="datetimerange"
             :default-time="['00:00:00', '23:59:59']"
             range-separator="至"
@@ -108,261 +89,41 @@
             end-placeholder="结束日期"
           ></el-date-picker>
         </el-form-item>
-            <el-form-item label="适用学员" prop="applyToStudentType">
-          <el-select
-            v-model.trim="vipform.applyToStudentType"
-            placeholder="请选择适用学员"
+        <el-form-item label="适用学员" prop="applyToStudentType">
+          <select-all
+            v-model.trim="baseForm.applyToStudentType"
+            style="width: 400px"
+            multiple
+            filterable
             clearable
+            placeholder='请选择适用学员'
           >
             <el-option label="新学员" :value="1"></el-option>
             <el-option label="老学员" :value="0"></el-option>
             <el-option label="所有学员" :value="-1"></el-option>
+          </select-all>
+        </el-form-item>
+        <el-form-item label="可购买次数" prop="studentMaxUsedTimes">
+          <el-input
+            style="width: 400px"
+            type="number"
+            v-model.trim="baseForm.studentMaxUsedTimes"
+          >
+            <template slot="append">次</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="是否充值课程余额" prop="applyToStudentType">
+          <el-select
+            v-model.trim="baseForm.applyToStudentType"
+            placeholder="请选择是否充值课程余额"
+            clearable
+          >
+            <el-option label="是" :value="1"></el-option>
+            <el-option label="否" :value="0"></el-option>
           </el-select>
         </el-form-item>
       </el-form>
-      <!-- <el-alert
-        title="活动适用范围&结算标准："
-        type="info"
-        :closable="false"
-        class="alert"
-      >
-      </el-alert> -->
-      <!-- <div class="activeRange" style="padding-left: 120px">
-        <div class="right">
-          <div class="chioseWrap">
-            <el-checkbox label="线上课" v-model.trim="online"></el-checkbox>
-            <el-select
-              v-model.trim="onlineSalary"
-              disabled
-              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>
-            <el-input
-              placeholder="请输入"
-              v-if="onlineSalary == 'RATIO_DISCOUNT'"
-              style="width: 200px"
-              type="number"
-              @mousewheel.native.prevent
-              v-model.trim="onlineprice"
-            >
-              <template slot="append">%</template>
-            </el-input>
-            <el-input
-              placeholder="请输入"
-              v-if="onlineSalary == 'FIXED_SALARY'"
-              style="width: 200px"
-              type="number"
-              @mousewheel.native.prevent
-              v-model.trim="onlineprice"
-            >
-              <template slot="append">元</template>
-            </el-input>
-            <div
-              style="width: 200px"
-              v-if="onlineSalary == 'TEACHER_DEFAULT'"
-            ></div>
-          </div>
-          <div class="chioseWrap">
-            <el-checkbox label="线下课" v-model.trim="unonline"></el-checkbox>
-            <el-select
-              v-model.trim="unonlineSalary"
-              clearable
-              disabled
-              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>
-            <el-input
-              placeholder="请输入"
-              v-if="unonlineSalary == 'RATIO_DISCOUNT'"
-              style="width: 200px"
-              type="number"
-              @mousewheel.native.prevent
-              v-model.trim="unonlineprice"
-            >
-              <template slot="append">%</template>
-            </el-input>
-            <el-input
-              placeholder="请输入"
-              style="width: 200px"
-              v-if="unonlineSalary == 'FIXED_SALARY'"
-              type="number"
-              @mousewheel.native.prevent
-              v-model.trim="unonlineprice"
-            >
-              <template slot="append">元</template>
-            </el-input>
-            <div
-              style="width: 200px"
-              v-if="unonlineSalary == 'TEACHER_DEFAULT'"
-            ></div>
-
-          </div>
-
-        </div>
-      </div> -->
-      <!-- <el-alert
-        title="活动类型："
-        type="info"
-        style="margin-bottom: 15px"
-        :closable="false"
-        class="alert"
-      >
-      </el-alert> -->
-      <!-- <div class="activeType">
-
-        <div class="right">
-          <div>
-            <div
-              class="head"
-              :class="activeType == 'BASE_ACTIVITY' ? 'active' : ''"
-              @click="
-                () => {
-                  this.$refs['form'].resetFields();
-                  activeType = 'BASE_ACTIVITY';
-                  courseNumForm = {
-                    minCourseNum: '',
-                    maxCourseNum: '',
-                    studentMaxUsedTimes: '',
-                  };
-                  attribute1 = '';
-                  attribute2 = '';
-                }
-              "
-            >
-              基础活动
-            </div>
-            <p class="title" v-if="activeType == 'BASE_ACTIVITY'">课程原价</p>
-          </div>
-          <div>
-            <div
-              class="head"
-              :class="activeType == 'DISCOUNT' ? 'active' : ''"
-              @click="activeType = 'DISCOUNT'"
-            >
-              折扣
-            </div>
-            <el-input
-              v-if="activeType == 'DISCOUNT'"
-              v-model.trim="attribute1"
-              style="width: 200px !important"
-              placeholder="请输入折扣数值"
-            >
-              <template slot="append">%</template>
-            </el-input>
-            <el-form
-              :model="courseNumForm"
-              :inline="true"
-              ref="form"
-              v-show="activeType == 'DISCOUNT'"
-              :rules="activeType == 'DISCOUNT' ? courseNumrules : {}"
-            >
-              <el-form-item prop="minCourseNum">
-                <el-input
-                  @change="handleMinChange"
-                  v-model.number="courseNumForm.minCourseNum"
-                  type="number"
-                  style="margin-left: 10px; width: 120px !important"
-                  placeholder="最小课时数"
-                >
-                </el-input>
-              </el-form-item>
-              <el-form-item prop="maxCourseNum">
-                <el-input
-                  @change="handleMaxChange"
-                  v-model.number="courseNumForm.maxCourseNum"
-                  type="number"
-                  style="margin-left: 10px; width: 120px !important"
-                  placeholder="最大课时数"
-                >
-                </el-input>
-              </el-form-item>
-              <el-form-item>
-                <el-input
-                  v-model.number="courseNumForm.studentMaxUsedTimes"
-                  type="number"
-                  style="margin-left: 10px; width: 120px !important"
-                  placeholder="学员购买次数"
-                >
-                </el-input>
-              </el-form-item>
-            </el-form>
-          </div>
-          <div>
-            <div
-              class="head"
-              :class="activeType == 'GIVE_CLASS' ? 'active' : ''"
-              @click="
-                () => {
-                  this.$refs['form'].resetFields();
-                  activeType = 'GIVE_CLASS';
-                  courseNumForm.minCourseNum = '';
-                  courseNumForm.maxCourseNum = '';
-                  attribute1 = '';
-                  attribute2 = '';
-                }
-              "
-            >
-              赠送课时
-            </div>
-            <el-input
-              placeholder="多少节开始赠"
-              v-if="activeType == 'GIVE_CLASS'"
-              v-model.trim="attribute1"
-              type="number"
-              @mousewheel.native.prevent
-              style="margin-right: 10px; width: 200px !important"
-            >
-              <template slot="append">节</template>
-            </el-input>
-            <span v-if="activeType == 'GIVE_CLASS'">赠</span>
-            <el-input
-              v-if="activeType == 'GIVE_CLASS'"
-              placeholder="请输入赠送课时数"
-              type="number"
-              @mousewheel.native.prevent
-              v-model.trim="attribute2"
-              style="margin: 0 10px; width: 200px !important"
-            >
-              <template slot="append">节</template>
-            </el-input>
-            <el-input
-              v-show="activeType == 'GIVE_CLASS'"
-              v-model.number="courseNumForm.studentMaxUsedTimes"
-              type="number"
-              style="margin-left: 10px; width: 120px !important"
-              placeholder="学员购买次数"
-            >
-            </el-input>
-          </div>
-        </div>
-      </div>
     </div>
-    <div
-      class="btnWrap"
-      style="justify-content: flex-start; padding-left: 120px"
-    >
-      <el-button type="primary" @click="submitFrom">确定</el-button>
-      <el-button type="info" @click="onReSet">重置</el-button>
-    </div> -->
   </div>
 </template>
 <script>
@@ -373,19 +134,13 @@ import cleanDeep from "clean-deep";
 const MIN_NUMBER = 1;
 const MAX_NUMBER = 999;
 export default {
+  props: ["baseForm"],
   name: "vipNewActive",
   data() {
     return {
       vipResetTypeList,
       pageType: "",
       labelPosition: "right",
-      vipform: {
-        name: "",
-        desc: "",
-        activeTime: [],
-        courseTime: [],
-        organ: [],
-      },
       vipformRules: {
         name: [
           { required: true, message: "请输入活动名称", trigger: "blur" },
@@ -405,12 +160,16 @@ export default {
             trigger: "blur",
           },
         ],
-        activeTime: [
-          { required: false, message: "请选择活动时间", trigger: "blur" },
+        activeType: [
+          { required: false, message: "请选择活动类型", trigger: "blur" },
         ],
+        // activeTime: [
+        //   { required: false, message: "请选择活动时间", trigger: "blur" },
+        // ],
         courseTime: [
           { required: false, message: "请选择课程时间", trigger: "blur" },
         ],
+        studentMaxUsedTimes:[{ required: true, message: "请输入购买次数", trigger: "blur" }],
         organ: [{ required: true, message: "请选择适用分部", trigger: "blur" }],
         stauts: [
           { required: true, message: "请选择活动形式", trigger: "blur" },

src/views/categroyManager/modals/payInfo.vue

@@ -0,0 +1,308 @@
+<template>
+  <div>
+    <el-alert
+      title="缴费信息"
+      type="info"
+      :closable="false"
+      class="baseMsg"
+    ></el-alert>
+    <el-form
+      :model="payForm"
+      label-width="120px"
+      label-position="right"
+      :inline="true"
+    >
+      <div v-if="activeType">
+        <el-row>
+          <el-form-item label="课程类型" prop="applyToStudentType">
+            <el-select
+              style="width: 400px !important"
+              v-model.trim="payForm.applyToStudentType"
+              placeholder="请选择课程类型"
+              clearable
+            >
+              <el-option label="VIP课" :value="1"></el-option>
+              <el-option label="网管课" :value="0"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="课程形式" prop="stauts">
+            <select-all
+              v-model.trim="payForm.stauts"
+              style="width: 400px"
+              @visible-change="$forceUpdate()"
+              clearable
+              multiple
+            >
+              <el-option
+                v-for="item in selects.vipGroupCategory"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              ></el-option>
+            </select-all>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="上课模式" prop="applyToStudentType">
+            <el-select
+              style="width: 400px !important"
+              v-model.trim="payForm.applyToStudentType"
+              placeholder="请选择上课模式"
+              clearable
+              multiple
+            >
+              <el-option label="线上" :value="1"></el-option>
+              <el-option label="线下" :value="0"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="课程调整方式" prop="allowOnlineToOffline">
+            <el-select
+              style="width: 400px !important"
+              v-model.trim="payForm.allowOnlineToOffline"
+              placeholder="请选择课程调整方式"
+              clearable
+            >
+              <el-option
+                :label="item.label"
+                :value="item.value"
+                v-for="item in vipResetTypeList"
+                :key="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="单课时长" prop="allowOnlineToOffline">
+            <el-select
+              style="width: 400px !important"
+              v-model.trim="payForm.allowOnlineToOffline"
+              placeholder="请选择单课时长"
+              clearable
+            >
+              <el-option
+                :label="item.label"
+                :value="item.value"
+                v-for="item in coureTimerList"
+                :key="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item prop="minCourseNum" label="最小课时数">
+            <el-input
+              @change="handleMinChange"
+              v-model.number="payForm.minCourseNum"
+              type="number"
+              style="width: 400px"
+              placeholder="最小课时数"
+            >
+              <template slot="append">课时</template>
+            </el-input>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item prop="maxCourseNum" label="最大课时数">
+            <el-input
+              @change="handleMaxChange"
+              v-model.number="payForm.maxCourseNum"
+              type="number"
+              style="width: 400px"
+              placeholder="最大课时数"
+            >
+              <template slot="append">课时</template>
+            </el-input>
+          </el-form-item>
+        </el-row>
+      </div>
+      <div v-else>
+              <el-row>
+          <el-form-item label="会员名称" prop="applyToStudentType">
+            <el-select
+              style="width: 400px !important"
+              v-model.trim="payForm.applyToStudentType"
+              placeholder="请选择会员名称"
+              clearable
+              multiple
+            >
+              <el-option label="线上" :value="1"></el-option>
+              <el-option label="线下" :value="0"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="会员时长" prop="allowOnlineToOffline">
+            <el-select
+              style="width: 400px !important"
+              v-model.trim="payForm.allowOnlineToOffline"
+              placeholder="请选择课程调整方式"
+              clearable
+            >
+              <el-option
+                :label="item.label"
+                :value="item.value"
+                v-for="item in vipResetTypeList"
+                :key="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-row>
+      </div>
+      <el-row>
+        <el-form-item prop="maxCourseNum" label="折扣值">
+          <el-input
+            v-model.number="payForm.maxCourseNum"
+            type="number"
+            style="width: 400px"
+            placeholder="折扣值"
+          >
+            <template slot="append">%</template>
+          </el-input>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item prop="maxCourseNum" label="满赠达标课时">
+          <el-input
+            v-model.number="payForm.maxCourseNum"
+            type="number"
+            style="width: 400px"
+            placeholder="满赠达标课时"
+          >
+            <template slot="append">课时</template>
+          </el-input>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-col>
+          <el-form-item label="赠课类型" prop="applyToStudentType">
+            <el-select
+              v-model.trim="payForm.applyToStudentType"
+              placeholder="请选择赠课类型"
+              style="width: 400px !important"
+              clearable
+            >
+              <el-option label="VIP课" :value="1"></el-option>
+              <el-option label="网管课" :value="0"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col>
+          <el-form-item label="赠课形式" prop="stauts">
+            <select-all
+              style="width: 400px !important"
+              v-model.trim="payForm.stauts"
+              @visible-change="$forceUpdate()"
+              clearable
+              multiple
+            >
+              <el-option
+                v-for="item in selects.vipGroupCategory"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              ></el-option>
+            </select-all>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="赠课时长" prop="allowOnlineToOffline">
+        <el-select
+          style="width: 400px !important"
+          v-model.trim="payForm.allowOnlineToOffline"
+          placeholder="请选择赠课时长"
+          clearable
+        >
+          <el-option
+            :label="item.label"
+            :value="item.value"
+            v-for="item in coureTimerList"
+            :key="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-row>
+        <el-form-item prop="maxCourseNum" label="赠送课时数">
+          <el-input
+            v-model.number="payForm.maxCourseNum"
+            type="number"
+            style="width: 400px"
+            placeholder="赠送课时数"
+          >
+            <template slot="append">课时</template>
+          </el-input>
+        </el-form-item>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  props: ["payForm", "activeType"],
+  data() {
+    return {
+      courseNumrules: {
+        minCourseNum: [
+          { required: true, message: "请输入最小课时数", trigger: "blur" },
+          { validator: this.validateCom, trigger: "blur" },
+          { validator: this.validateMin, trigger: "blur" },
+        ],
+        maxCourseNum: [
+          { required: true, message: "请输入最大课时数", trigger: "blur" },
+          { validator: this.validateCom, trigger: "blur" },
+          { validator: this.validateMax, trigger: "blur" },
+        ],
+      },
+      coureTimerList: [],
+      vipResetTypeList: [],
+    };
+  },
+  async mounted() {
+    await this.$store.dispatch("setVipGroupCategory");
+  },
+  methods: {
+    handleMinChange() {
+      this.$refs.form.validateField("maxCourseNum");
+    },
+    handleMaxChange() {
+      this.$refs.form.validateField("minCourseNum");
+    },
+    validateCom(rule, value, callback) {
+      const one = Number(value);
+      if (Number.isInteger(one)) {
+        if (one < MIN_NUMBER) {
+          return callback(new Error("输入值必须大于0"));
+        } else if (one > MAX_NUMBER) {
+          return callback(new Error("输入值必须小于999"));
+        }
+        return callback();
+      }
+      return callback(new Error("输入值必须为正整数"));
+    },
+    validateMin(rule, value, callback) {
+      const one = Number(value);
+      const max = Number(this.courseNumForm.maxCourseNum);
+      if (!max || one <= max) {
+        return callback();
+      }
+      return callback(new Error("输入值不得大于最大课时数"));
+    },
+    validateMax(rule, value, callback) {
+      const one = Number(value);
+      const min = Number(this.courseNumForm.minCourseNum);
+      if (!min || one >= min) {
+        return callback();
+      }
+      return callback(new Error("输入值不得小于最小课时数"));
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.baseMsg {
+  margin: 30px 0;
+}
+</style>

src/views/categroyManager/modals/salaryInfo.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <el-alert
+      title="课酬信息"
+      type="info"
+      :closable="false"
+      class="baseMsg"
+    ></el-alert>
+    <el-form
+      :model="salaryForm"
+      label-width="140px"
+      label-position="right"
+      :inline="true"
+    >
+      <el-row>
+        <el-form-item label="付费VIP线上课课酬" prop="applyToStudentType">
+          <el-select
+            style="width: 180px !important"
+            v-model.trim="salaryForm.applyToStudentType"
+            placeholder="请选择付费VIP线上课课酬"
+            clearable
+
+          >
+            <el-option label="自定义课酬" :value="1"></el-option>
+            <el-option label="标准课酬" :value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="自定义课时课酬" prop="applyToStudentType">
+          <el-input
+            v-model.number="salaryForm.maxCourseNum"
+            type="number"
+            style="width: 180px"
+            placeholder="自定义课时课酬"
+          >
+            <template slot="append">课时/元</template>
+          </el-input>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="付费VIP线下课课酬" prop="applyToStudentType">
+          <el-select
+            style="width: 180px !important"
+            v-model.trim="salaryForm.applyToStudentType"
+            placeholder="请选择付费VIP线下课课酬"
+            clearable
+
+          >
+            <el-option label="自定义课酬" :value="1"></el-option>
+            <el-option label="标准课酬" :value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="自定义课时课酬" prop="applyToStudentType">
+          <el-input
+            v-model.number="salaryForm.maxCourseNum"
+            type="number"
+            style="width: 180px"
+            placeholder="自定义课时课酬"
+          >
+            <template slot="append">课时/元</template>
+          </el-input>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="付费网管课课酬" prop="applyToStudentType">
+          <el-select
+            style="width: 180px !important"
+            v-model.trim="salaryForm.applyToStudentType"
+            placeholder="请选择付费网管课课酬"
+            clearable
+
+          >
+            <el-option label="自定义课酬" :value="1"></el-option>
+            <el-option label="标准课酬" :value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="自定义课时课酬" prop="applyToStudentType">
+          <el-input
+            v-model.number="salaryForm.maxCourseNum"
+            type="number"
+            style="width: 180px"
+            placeholder="自定义课时课酬"
+          >
+            <template slot="append">课时/元</template>
+          </el-input>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="赠送VIP线上课课酬" prop="applyToStudentType">
+          <el-select
+            style="width: 180px !important"
+            v-model.trim="salaryForm.applyToStudentType"
+            placeholder="请选择付费VIP线上课课酬"
+            clearable
+
+          >
+            <el-option label="自定义课酬" :value="1"></el-option>
+            <el-option label="标准课酬" :value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="自定义课时课酬" prop="applyToStudentType">
+          <el-input
+            v-model.number="salaryForm.maxCourseNum"
+            type="number"
+            style="width: 180px"
+            placeholder="自定义课时课酬"
+          >
+            <template slot="append">课时/元</template>
+          </el-input>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="赠送VIP线下课课酬" prop="applyToStudentType">
+          <el-select
+            style="width: 180px !important"
+            v-model.trim="salaryForm.applyToStudentType"
+            placeholder="请选择赠送VIP线下课课酬"
+            clearable
+
+          >
+            <el-option label="自定义课酬" :value="1"></el-option>
+            <el-option label="标准课酬" :value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="自定义课时课酬" prop="applyToStudentType">
+          <el-input
+            v-model.number="salaryForm.maxCourseNum"
+            type="number"
+            style="width: 180px"
+            placeholder="自定义课时课酬"
+          >
+            <template slot="append">课时/元</template>
+          </el-input>
+        </el-form-item>
+      </el-row>
+      <el-row>
+        <el-form-item label="赠送网管课课酬" prop="applyToStudentType">
+          <el-select
+            style="width: 180px !important"
+            v-model.trim="salaryForm.applyToStudentType"
+            placeholder="请选择赠送网管课课酬"
+            clearable
+
+          >
+            <el-option label="自定义课酬" :value="1"></el-option>
+            <el-option label="标准课酬" :value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="自定义课时课酬" prop="applyToStudentType">
+          <el-input
+            v-model.number="salaryForm.maxCourseNum"
+            type="number"
+            style="width: 180px"
+            placeholder="自定义课时课酬"
+          >
+            <template slot="append">课时/元</template>
+          </el-input>
+        </el-form-item>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  props: ["salaryForm"],
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped>
+.baseMsg {
+  margin: 30px 0;
+}
+</style>

src/views/categroyManager/vipNewActive.vue

@@ -8,37 +8,100 @@
       ></el-page-header>
     </h2>
 
-    <el-steps :active="active" finish-status="success" align-center class="steps">
+    <el-steps
+      :active="active"
+      finish-status="success"
+      align-center
+      class="steps"
+    >
       <el-step title="基础信息"></el-step>
       <el-step title="缴费信息"></el-step>
       <el-step title="课酬信息"></el-step>
     </el-steps>
     <div class="wrap">
-      <baseInfo  v-if="active==1"/>
+      <baseInfo :baseForm="baseForm" v-if="active == 1" />
+      <payInfo :payForm="payForm" :activeType="baseForm.activeType" v-if="active == 2" />
+      <salaryInfo :salaryForm="salaryForm" v-if="active == 3" :activeType="baseForm.activeType" :payForm="payForm"/>
     </div>
+    <el-button
+      style="margin-top: 12px"
+      type="primary"
+      @click="prve"
+      v-if="active > 1"
+      >上一步</el-button
+    >
+    <el-button
+      style="margin-top: 12px"
+      type="primary"
+      @click="next"
+      v-if="active < 3"
+      >下一步</el-button
+    >
+    <el-button
+      style="margin-top: 12px"
+      type="danger"
+      @click="submit"
+      v-if="active == 3"
+      >提 交</el-button
+    >
   </div>
 </template>
 
 <script>
-import baseInfo from './modals/baseInfo.vue'
+import baseInfo from "./modals/baseInfo.vue";
+import payInfo from "./modals/payInfo.vue";
+import salaryInfo from './modals/salaryInfo.vue'
 export default {
-  components:{
-    baseInfo
+  components: {
+    baseInfo,
+    payInfo,
+    salaryInfo
   },
   data() {
     return {
       active: 1,
+      baseForm: {
+        name: "",
+        desc: "",
+        activeTime: [],
+        courseTime: [],
+        organ: [],
+        activeType:''
+      },
+      payForm: {},
+      salaryForm: {},
     };
   },
   mounted() {},
   methods: {
     onCancel() {
-      this.$store.dispatch("delVisitedViews", this.$route);
-      this.$router.push({
-        path: "/vipActiveManager/vipActiveList",
-        query: { rules: this.rules, searchForm: this.searchForm },
-      });
+      if (this.active > 1) {
+        this.active--
+        console.log(this.active)
+      } else {
+        this.$store.dispatch("delVisitedViews", this.$route);
+        this.$router.push({
+          path: "/vipActiveManager/vipActiveList",
+          query: { rules: this.rules, searchForm: this.searchForm },
+        });
+      }
     },
+    next() {
+      if (this.active == 1) {
+        // 验证表单1
+      } else if (this.active == 2) {
+        // 验证表单2
+      }
+      if (this.active < 3) {
+        this.active++;
+      }
+    },
+    prve() {
+      if (this.active >= 2) {
+        this.active--;
+      }
+    },
+    submit() {},
   },
 };
 </script>
@@ -46,9 +109,9 @@ export default {
 .steps {
   margin-top: 30px;
 }
-/deep/.is-success{
-  color: #14928a!important;
-    border-color: #14928a!important;
+/deep/.is-success {
+  color: #14928a !important;
+  border-color: #14928a !important;
 }
 </style>