dy-admin-manager/src/views/categroyManager/modals/payInfo.vue

<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"
      ref="form"
    >
      <div v-if="!activeType">
        <el-row>
          <el-form-item
            label="课程类型"
            prop="courseType"
            :rules="[
              { required: true, message: '请选择课程类型', trigger: 'change' }
            ]"
          >
            <el-select
              style="width: 400px !important"
              v-model.trim="payForm.courseType"
              placeholder="请选择课程类型"
              @change="changeCourseType"
              clearable
              :disabled="isDisabled"
            >
              <el-option label="VIP课" value="VIP"></el-option>
              <el-option label="网管课" value="PRACTICE"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            :rules="[
              { required: true, message: '请选择课程形式', trigger: 'change' }
            ]"
            label="课程形式"
            prop="vipGroupCategoryIdList"
            v-if="payForm.courseType == 'VIP'"
          >
            <el-select
              v-model.trim="payForm.vipGroupCategoryIdList"
              style="width: 400px !important"
              @visible-change="$forceUpdate()"
              @change="changeCateFee"
              clearable
              :disabled="isDisabled"
            >
              <el-option
                v-for="item in selects.vipGroupCategory"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!-- <el-row v-if="activityChannel != 1">
          <el-form-item
            :rules="[
              { required: true, message: '请选择上课模式', trigger: 'change' },
            ]"
            label="上课模式"
            prop="teachMode"
            :validate-on-rule-change="true"
            v-if="payForm.courseType == 'VIP'"
          >
            <el-select
              style="width: 400px !important"
              v-model.trim="payForm.teachMode"
              placeholder="请选择上课模式"
              clearable
              :disabled="isDisabled || unOnlinePay"
            >
              <el-option label="线上" value="0"></el-option>
              <el-option label="线下" value="1"></el-option>
              <el-option label="不限制" value="-1"></el-option>
            </el-select>
          </el-form-item>
        </el-row> -->
        <!-- <el-row v-if="activityChannel != 1">
          <el-form-item
            label="课程调整方式"
            prop="allowOnlineToOffline"
            v-if="payForm.courseType == 'VIP'"
            :rules="[
              { required: true, message: '课程调整方式', trigger: 'change' },
            ]"
          >
            <el-select
              style="width: 400px !important"
              v-model.trim="payForm.allowOnlineToOffline"
              placeholder="请选择课程调整方式"
              clearable
              :disabled="isDisabled || unOnlinePay"
            >
              <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="singleCourseTime"
            :rules="[
              { required: true, message: '请输入单课时长', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.number="payForm.singleCourseTime"
              type="number"
              style="width: 400px"
              placeholder="单课时长"
              :disabled="isDisabled"
            >
              <template slot="append"
                >分钟</template
              >
            </el-input>
          </el-form-item>
        </el-row>
        <el-row v-if="activityChannel != 1">
          <el-form-item
            label="是否限制课时数"
            prop="isLimitNum"
            :rules="[
              {
                required: false,
                message: '请选择是否限制课时数',
                trigger: 'blur'
              }
            ]"
          >
            <el-select
              style="width: 400px !important"
              v-model.trim="payForm.isLimitNum"
              placeholder="请选择是否限制课时"
              clearable
              :disabled="isDisabled"
              @change="checkisLimitNum"
            >
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row v-if="payForm.isLimitNum && activityChannel != 1">
          <el-form-item
            prop="minCourseNum"
            label="最小课时数"
            :rules="[
              { required: true, message: '请输入最小课时数', trigger: 'blur' },
              { validator: this.validateCom, trigger: 'blur' },
              { validator: this.validateMin, trigger: 'blur' }
            ]"
          >
            <el-input
              @change="handleMinChange"
              v-model.number="payForm.minCourseNum"
              type="number"
              style="width: 400px"
              placeholder="最小课时数"
              :disabled="isDisabled"
            >
              <template slot="append"
                >课时</template
              >
            </el-input>
          </el-form-item>
        </el-row>
        <el-row v-if="payForm.isLimitNum && activityChannel != 1">
          <el-form-item
            prop="maxCourseNum"
            label="最大课时数"
            :rules="[
              { required: true, message: '请输入最大课时数', trigger: 'blur' },
              { validator: this.validateCom, trigger: 'blur' },
              { validator: this.validateMax, trigger: 'blur' }
            ]"
          >
            <el-input
              @change="handleMaxChange"
              v-model.number="payForm.maxCourseNum"
              type="number"
              style="width: 400px"
              placeholder="最大课时数"
              :disabled="isDisabled"
            >
              <template slot="append"
                >课时</template
              >
            </el-input>
          </el-form-item>
        </el-row>

        <el-row v-if="activityChannel == 1">
          <el-form-item
            prop="minCourseNum"
            label="课时数"
            :rules="[
              { required: true, message: '请输入课时数', trigger: 'blur' }
            ]"
          >
            <el-input
              @change="handleMinChange"
              v-model.number="payForm.minCourseNum"
              type="number"
              style="width: 400px"
              placeholder="课时数"
              :disabled="isDisabled"
            >
              <template slot="append"
                >课时</template
              >
            </el-input>
          </el-form-item>
        </el-row>
      </div>
      <div v-else>
        <el-row>
          <el-form-item
            label="会员名称"
            prop="memberRankId"
            :rules="[
              { required: true, message: '请选择会员名称', trigger: 'change' }
            ]"
          >
            <el-select
              style="width: 400px !important"
              v-model.trim="payForm.memberRankId"
              placeholder="请选择会员名称"
              clearable
              :disabled="isDisabled"
            >
              <el-option
                v-for="(item, index) in remberList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            label="会员周期"
            prop="periodEnum"
            :rules="[
              { required: true, message: '请选择会员周期', trigger: 'change' }
            ]"
          >
            <el-select
              style="width: 400px !important"
              v-model.trim="payForm.periodEnum"
              placeholder="请选择会员周期"
              clearable
              :disabled="isDisabled"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in memberEnumList"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </div>
      <el-row v-if="activityChannel != 1">
        <!--  {
              pattern: /^100$|^(\d|[1-9]\d)(\.\d{1,8})*$/,
              message: '请输入正确的折扣',
            } -->
        <el-form-item
          prop="discount"
          label="折扣值"
          :rules="[
            { required: true, message: '请输入折扣值', trigger: 'blur' }
          ]"
        >
          <el-input
            v-model.number="payForm.discount"
            type="number"
            style="width: 400px"
            placeholder="折扣值"
            :disabled="isDisabled"
          >
            <template slot="append"
              >%</template
            >
          </el-input>
        </el-form-item>
      </el-row>
      <el-row v-if="activityChannel != 1">
        <el-form-item prop="fullMinusCourseTimes" label="满赠达标数量">
          <el-input
            v-model.number="payForm.fullMinusCourseTimes"
            type="number"
            style="width: 400px"
            @input="changeFullMinus"
            placeholder="满赠达标数量"
            :disabled="isDisabled"
          >
          </el-input>
        </el-form-item>
      </el-row>
      <el-row v-if="activityChannel != 1">
        <el-col>
          <el-form-item
            label="赠送类型"
            prop="giveCourseType"
            v-if="payForm.fullMinusCourseTimes"
            :rules="[
              { required: true, message: '请选择赠送类型', trigger: 'change' }
            ]"
          >
            <el-select
              v-model.trim="payForm.giveCourseType"
              placeholder="请选择赠送类型"
              style="width: 400px !important"
              @change="changeGiveCourseType"
              clearable
              :disabled="isDisabled"
            >
              <el-option label="VIP课" value="VIP"></el-option>
              <el-option label="网管课" value="PRACTICE"></el-option>
              <el-option label="会员" value="MEMBER"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item
            label="赠课形式"
            prop="giveCategoryId"
            v-if="
              payForm.giveCourseType == 'VIP' && payForm.fullMinusCourseTimes
            "
            :rules="[
              { required: true, message: '请选择赠课形式', trigger: 'change' }
            ]"
          >
            <el-select
              style="width: 400px !important"
              v-model.trim="payForm.giveCategoryId"
              @visible-change="$forceUpdate()"
              clearable
              @change="chageSalary"
              :disabled="isDisabled"
            >
              <el-option
                v-for="item in selects.vipGroupCategory"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-form-item
          label="赠课模式"
          prop="giveTeachMode"
          v-if="payForm.giveCourseType == 'VIP' && payForm.fullMinusCourseTimes"
          :rules="[
            { required: true, message: '请选择赠课模式', trigger: 'change' },
          ]"
        >
          <el-select
            style="width: 400px !important"
            v-model.trim="payForm.giveTeachMode"
            placeholder="请选择赠课模式"
            clearable
            :disabled="isDisabled || unOnlinePay"
          >
            <el-option label="线上" value="0"></el-option>
            <el-option label="线下" value="1"></el-option>
            <el-option label="不限制" value="-1"></el-option>
          </el-select>
        </el-form-item>
        <el-col>
          <el-form-item
            label="赠课调整方式"
            prop="giveAllowOnlineToOffline"
            v-if="
              payForm.giveCourseType == 'VIP' && payForm.fullMinusCourseTimes
            "
            :rules="[
              {
                required: true,
                message: '请选择赠课调整方式',
                trigger: 'change',
              },
            ]"
          >
            <el-select
              style="width: 400px !important"
              v-model.trim="payForm.giveAllowOnlineToOffline"
              placeholder="请选择赠课调整方式"
              clearable
              :disabled="isDisabled || unOnlinePay"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in vipResetTypeList"
                :key="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-form-item
        label="赠课时长"
        prop="giveSingleCourseTime"
        v-if="
          payForm.giveCourseType != 'MEMBER' && payForm.fullMinusCourseTimes
        "
        :rules="[
          { required: true, message: '请选择赠课时长', trigger: 'blur' }
        ]"
      >
        <el-input
          v-model.number="payForm.giveSingleCourseTime"
          type="number"
          style="width: 400px"
          placeholder="赠课时长"
          :disabled="isDisabled"
        >
          <template slot="append"
            >分钟</template
          >
        </el-input>
      </el-form-item>
      <el-row
        v-if="
          payForm.giveCourseType != 'MEMBER' && payForm.fullMinusCourseTimes
        "
      >
        <el-form-item
          prop="giveCourseNum"
          label="赠送课时数"
          :rules="[
            { required: true, message: '请输入赠送课时数', trigger: 'blur' }
          ]"
        >
          <el-input
            v-model.number="payForm.giveCourseNum"
            @input="changeGiveCourseNum"
            type="number"
            style="width: 400px"
            placeholder="赠送课时数"
            :disabled="isDisabled"
          >
            <template slot="append"
              >课时</template
            >
          </el-input>
        </el-form-item>
      </el-row>
      <el-row
        v-if="
          payForm.giveCourseType == 'MEMBER' && payForm.fullMinusCourseTimes
        "
      >
        <el-form-item
          label="赠送会员名称"
          prop="giveMemberRankId"
          :rules="[
            {
              required: true,
              message: '请选择赠送会员名称',
              trigger: 'change'
            }
          ]"
        >
          <el-select
            style="width: 400px !important"
            v-model.trim="payForm.giveMemberRankId"
            placeholder="请选择会员名称"
            clearable
            :disabled="isDisabled"
          >
            <el-option
              v-for="(item, index) in remberList"
              :key="index"
              :label="item.name"
              :value="item.id"
              :disabled="item.id == 2"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item
          prop="giveMemberTime"
          label="赠送会员时长"
          v-if="
            payForm.giveCourseType == 'MEMBER' && payForm.fullMinusCourseTimes
          "
          :rules="[
            { required: true, message: '请输入赠送会员时长', trigger: 'blur' }
          ]"
        >
          <el-input
            v-model.number="payForm.giveMemberTime"
            type="number"
            style="width: 400px"
            placeholder="请输入赠送会员时长"
            :disabled="isDisabled"
          >
            <template slot="append"
              >天</template
            >
          </el-input>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { vipResetTypeList, memberEnumList } from "@/utils/searchArray";
import { getOnlineMun } from "@/api/vipSeting";

const MIN_NUMBER = 1;
const MAX_NUMBER = 999;
export default {
  props: [
    "payForm",
    "activeType",
    "remberList",
    "isDisabled",
    "activityChannel"
  ],
  data() {
    return {
      coureTimerList: [],
      vipResetTypeList,
      memberEnumList,
      studentRuleNum: null,
      unOnlinePay: false,
      unOnlineFee: false
    };
  },
  async mounted() {
    const res1 = await getOnlineMun();

    let tempObj = JSON.parse(res1.data.config);
    this.studentRuleNum = tempObj.cloud_room_rule.cloud_room_up_limit - 1;
    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.payForm.maxCourseNum);
      if (!max || one <= max) {
        return callback();
      }
      return callback(new Error("输入值不得大于最大课时数"));
    },
    validateMax(rule, value, callback) {
      const one = Number(value);
      const min = Number(this.payForm.minCourseNum);
      if (!min || one >= min) {
        return callback();
      }
      return callback(new Error("输入值不得小于最小课时数"));
    },
    changeCourseType(val) {
      this.$emit("chageSalary");
      this.$emit("changeCourseType", val);
    },
    changeGiveCourseType(val) {
      this.$emit("chageSalary");
      this.$emit("changeGiveCourseType", val);
    },
    chageSalary(val) {
      this.selects.vipGroupCategory.forEach(item => {
        if (item.id == val) {
          this.studentNum = item.studentNum;
        }
      });
      if (this.studentNum > this.studentRuleNum) {
        // 只能是线下课
        // 上课模式 teachMode
        // 调整方式 allowOnlineToOffline
        this.$set(this.payForm, "giveTeachMode", "1");
        this.$set(this.payForm, "giveAllowOnlineToOffline", "3");
        this.unOnlinePay = true;
      } else {
        this.unOnlinePay = false;
        this.$set(this.payForm, "giveTeachMode", null);
        this.$set(this.payForm, "giveAllowOnlineToOffline", null);
      }
      this.$emit("chageSalary");
    },
    changeFullMinus(val) {
      if (!val || val <= 0) {
        this.$emit("chageSalary");
        this.$emit("changeGiveCourseType");
      }
    },
    changeGiveCourseNum(val) {
      if (!val || val <= 0) {
        this.$emit("chageSalary");
      }
    },
    checkisLimitNum(val) {
      if (!val) {
        this.$emit("resetIsLimitNum");
      }
    },
    changeCateFee(val) {
      this.selects.vipGroupCategory.forEach(item => {
        if (item.id == val) {
          this.studentNum = item.studentNum;
        }
      });
      if (this.studentNum > this.studentRuleNum) {
        // 只能是线下课
        // 上课模式 teachMode
        // 调整方式 allowOnlineToOffline
        this.$set(this.payForm, "teachMode", "1");
        this.$set(this.payForm, "allowOnlineToOffline", "3");
        this.unOnlinePay = true;
      } else {
        this.unOnlinePay = false;
        this.$set(this.payForm, "teachMode", null);
        this.$set(this.payForm, "allowOnlineToOffline", null);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.baseMsg {
  margin: 30px 0;
}
</style>