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: 'blur' },
            ]"
          >
            <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: 'blur' },
            ]"
            label="课程形式"
            prop="vipGroupCategoryIdList"
            v-if="payForm.courseType == 'VIP'"
          >
            <el-select
              v-model.trim="payForm.vipGroupCategoryIdList"
              style="width: 400px!important"
              @visible-change="$forceUpdate()"
              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>
          <el-form-item
            :rules="[
              { required: true, message: '请选择上课模式', trigger: 'blur' },
            ]"
            label="上课模式"
            prop="teachMode"
            v-if="payForm.courseType == 'VIP'"
          >
            <el-select
              style="width: 400px !important"
              v-model.trim="payForm.teachMode"
              placeholder="请选择上课模式"
              clearable
              :disabled="isDisabled"
            >
              <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>
          <el-form-item
            label="课程调整方式"
            prop="allowOnlineToOffline"
            v-if="payForm.courseType == 'VIP'"
            :rules="[
              { required: true, message: '课程调整方式', trigger: 'blur' },
            ]"
          >
            <el-select
              style="width: 400px !important"
              v-model.trim="payForm.allowOnlineToOffline"
              placeholder="请选择课程调整方式"
              clearable
              :disabled="isDisabled"
            >
              <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>
          <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"
            >
              <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">
          <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">
          <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>
      </div>
      <div v-else>
        <el-row>
          <el-form-item
            label="会员名称"
            prop="memberRankId"
            :rules="[
              { required: true, message: '请选择会员名称', trigger: 'blur' },
            ]"
          >
            <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="period"
            :rules="[
              { required: true, message: '请选择会员周期', trigger: 'blur' },
            ]"
          >
            <el-select
              style="width: 400px !important"
              v-model.trim="payForm.period"
              placeholder="请选择会员周期"
              clearable
              :disabled="isDisabled"
            >
              <el-option label="按月" value="MONTH"></el-option>
              <el-option label="按季度" value="QUARTERLY"></el-option>
              <el-option label="按半年" value="YEAR_HALF"></el-option>
              <el-option label="按年" value="YEAR"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </div>
      <el-row>
        <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>
        <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>
        <el-col>
          <el-form-item
            label="赠送类型"
            prop="giveCourseType"
            v-if="payForm.fullMinusCourseTimes"
            :rules="[
              { required: true, message: '请选择赠送类型', trigger: 'blur' },
            ]"
          >
            <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-form-item
          label="赠课模式"
          prop="giveTeachMode"
          v-if="payForm.giveCourseType == 'VIP' && payForm.fullMinusCourseTimes"
          :rules="[
            { required: true, message: '请选择赠课模式', trigger: 'blur' },
          ]"
        >
          <el-select
            style="width: 400px !important"
            v-model.trim="payForm.giveTeachMode"
            placeholder="请选择赠课模式"
            clearable
            :disabled="isDisabled"
          >
            <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="giveCategoryId"
            v-if="
              payForm.giveCourseType == 'VIP' && payForm.fullMinusCourseTimes
            "
            :rules="[
              { required: true, message: '请选择赠课形式', trigger: 'blur' },
            ]"
          >
            <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-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: 'blur' },
          ]"
        >
          <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"
            ></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 } from "@/utils/searchArray";
const MIN_NUMBER = 1;
const MAX_NUMBER = 999;
export default {
  props: ["payForm", "activeType", "remberList","isDisabled"],
  data() {
    return {
      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.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.$emit('chageSalary')
    },
    changeFullMinus(val){
      if(!val|| val <= 0){
         this.$emit('chageSalary')
          this.$emit("changeGiveCourseType");
      }
    },
    changeGiveCourseNum(val){
         if(!val|| val <= 0){
         this.$emit('chageSalary')
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.baseMsg {
  margin: 30px 0;
}
</style>