dy-admin-manager/src/views/resetTeaming/modals/payMember.vue

<template>
  <div class="teamCourseList">
    <p class="coreTitle">云教练
      <el-form-item label="是否展示" prop="isShowMemberForPay" v-if="allCourseCurrentPrice==0"  class="titleFormItem">
        <el-select
          style="width: 100% !important"
          v-model="form.isShowMemberForPay"
          placeholder="请选择是否展示云教练费用"
          size="mini"
        >
          <el-option label="是" :value="true"> </el-option>
          <el-option label="否" :value="false"> </el-option>
        </el-select>
      </el-form-item>
    </p>

    <el-table
    class="courseTable"
      :data="form.memberList"
      style="width: 100% !important; background: #f9f9f9"
      :header-cell-style="{ background: '#F9F9F9', color: '#444' }"
    >
      <el-table-column
        width="170px"
        label="会员类型"
        prop="memberRankSettingId"
        key="memberRankSettingId"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'memberList.' + scope.$index + '.memberRankSettingId'"
            :rules="{
              required: true,
              message: '请选择会员类型',
              trigger: 'change',
            }"
          >
            <el-select
              style="width: 90% !important"
              v-model="form.memberList[scope.$index].memberRankSettingId"
              placeholder="会员类型"
            >
              <el-option
                :value="item.id"
                :label="item.name"
                v-for="item in memberRankList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="是否必选"
        prop="optionalFlag"
        key="optionalFlag"
        width="170px"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'memberList.' + scope.$index + '.optionalFlag'"
            :rules="{
              required: true,
              message: '请选择是否必选',
              trigger: 'change',
            }"
          >
            <el-select
              style="width: 90% !important"
              v-model="form.memberList[scope.$index].optionalFlag"
              placeholder="是否必选"
              :disabled="!form.memberList[scope.$index].memberRankSettingId"
              clearable
            >
              <el-option
                v-for="(item, index) in boolOptionsOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
            <el-table-column
        label="自动激活"
        prop="autoActivationFlag"
        key="autoActivationFlag"
        width="170px"
        v-if="showAutoActivationFlag"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'memberList.' + scope.$index + '.autoActivationFlag'"
            :rules="{
              required: true,
              message: '请选择是否自动激活',
              trigger: 'change',
            }"
          >
            <el-select
              style="width: 90% !important"
              v-model="form.memberList[scope.$index].autoActivationFlag"
              placeholder="请选择是否自动激活"
              :disabled="!form.memberList[scope.$index].memberRankSettingId"
              clearable
            >
              <el-option
                v-for="(item, index) in boolOptionsOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="会员周期" prop="num" key="num" width="170px">
        <template slot-scope="scope">
          <el-form-item
            :prop="'memberList.' + scope.$index + '.num'"
            :rules="[
              {
                required: true,
                message: '请选择会员周期',
                trigger: 'blur',
              },
            ]"
          >
            <el-input-number
              style="width: 90% !important"
              class="number-input"
              v-model="form.memberList[scope.$index].num"
              :controls="false"
              :precision="0"
              :min="0"
              @change="
                changeMemberperiodEnum(form.memberList[scope.$index].period)
              "
              placeholder="会员周期"
              :disabled="!form.memberList[scope.$index].memberRankSettingId"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="周期单位"
        prop="period"
        key="period"
        width="170px"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'memberList.' + scope.$index + '.period'"
            :rules="[
              {
                required: true,
                message: '请选择周期单位',
                trigger: 'blur',
              },
            ]"
          >
            <el-select
              v-model="form.memberList[scope.$index].period"
              style="width: 90% !important"
              @change="changeMemberperiodEnum"
              :disabled="!form.memberList[scope.$index].memberRankSettingId"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in memberEnumList"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="售价(元)"
        prop="actualAmount"
        key="actualAmount"
        width="170px"
        v-if="form.calenderFeeType !='TEACHER'"
      >
        <template slot="header">
          <p style="position: relative">
            售价(元)
            <el-tooltip placement="top" popper-class="mTooltip">
              <div slot="content">学生实际缴费金额</div>
              <i
                class="el-icon-question"
                 style="font-size: 18px; color: #f56c6c;top:2px;position: relative"
              ></i>
            </el-tooltip>
          </p>
        </template>
        <template slot-scope="scope">
          <el-form-item
            :prop="'memberList.' + scope.$index + '.actualAmount'"
            :rules="[
              {
                required: true,
                message: '请输入售价',
                trigger: 'blur',
              },
              { validator: validateMember, trigger: 'blur' },
            ]"
          >
            <!-- $listeners.moneyChange -->
            <el-input-number
              style="width: 90% !important"
              class="number-input"
              v-model="form.memberList[scope.$index].actualAmount"
              :controls="false"
              :precision="0"
              :min="0"
              @change="change"
              :disabled="
                !form.memberList[scope.$index].period ||
                !form.memberList[scope.$index].num
              "
              placeholder="请输入售价"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        label="原价(元)"
        prop="originalAmount"
        key="originalAmount"
        width="170px"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="'memberList.' + scope.$index + '.originalAmount'"
            :rules="{
              required: true,
              message: '请输入原价',
              trigger: 'blur',
            }"
          >
            <!-- $listeners.moneyChange -->
            <el-input-number
              style="width: 90% !important"
              class="number-input"
              v-model="form.memberList[scope.$index].originalAmount"
              :controls="false"
              :precision="0"
              :min="0"
              @change="change"
              :disabled="true"
              placeholder="请输入原价"
            />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="close" key="close">
        <template slot-scope="scope">
          <div style="color: #fa6400; cursor: pointer">
            <!--  v-if="form.length > 1" v-if="clearable" -->
            <!-- <i
              @click="$listeners.remove && $listeners.remove(scope.$index)"
              class="el-icon-error"
              style="margin-bottom: 24px"
            ></i>
            删除 -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--          v-if="!isCommon && $listeners.create"  @click="$listeners.create"-->
    <!-- <el-button icon="el-icon-plus" plain class="addBtn">新增课程类型</el-button> -->
  </div>
</template>
<script>
import { courseType, boolOptions } from "@/constant";
import { objectToOptions } from "@/utils";
import { memberEnumList } from "@/utils/searchArray";
import { getMemberFee } from "../api";
export default {
  props: ["form", "memberRankList", "organId", "rulesForm",'showAutoActivationFlag'],
  data() {
    return {
      charges: [],
      clearable: false,
      isDisabled: false,
      courseUnitPriceSettingsByType: [],
      boolOptionsOptions: objectToOptions(boolOptions),
      memberEnumList,
      memberPrice: {},
      getMemberFeeFlag: true,
    };
  },
  mounted() {},
  methods: {
    changeMemberperiodEnum(val) {
      console.log(this.memberPrice);
      if (val == "DAY") {
        this.$set(
          this.form.memberList[0],
          "actualAmount",
          this.memberPrice.groupPurchaseDayFee * this.form.memberList[0].num
        );
        this.$set(
          this.form.memberList[0],
          "originalAmount",
          this.memberPrice.originalDayFee * this.form.memberList[0].num
        );
      }
      if (val == "MONTH") {
        this.$set(
          this.form.memberList[0],
          "actualAmount",
          this.memberPrice.groupPurchaseMonthFee * this.form.memberList[0].num
        );
        this.$set(
          this.form.memberList[0],
          "originalAmount",
          this.memberPrice.originalMonthFee * this.form.memberList[0].num
        );
      }
      if (val == "QUARTERLY") {
        this.$set(
          this.form.memberList[0],
          "actualAmount",
          this.memberPrice.groupPurchaseQuarterlyFee *
            this.form.memberList[0].num
        );
        this.$set(
          this.form.memberList[0],
          "originalAmount",
          this.memberPrice.originalQuarterlyFee * this.form.memberList[0].num
        );
      }
      if (val == "YEAR_HALF") {
        this.$set(
          this.form.memberList[0],
          "actualAmount",
          this.memberPrice.groupPurchaseHalfYearFee *
            this.form.memberList[0].num
        );
        this.$set(
          this.form.memberList[0],
          "originalAmount",
          this.memberPrice.originalHalfYearFee * this.form.memberList[0].num
        );
      }
      if (val == "YEAR") {
        this.$set(
          this.form.memberList[0],
          "actualAmount",
          this.memberPrice.groupPurchaseYearFee * this.form.memberList[0].num
        );
        this.$set(
          this.form.memberList[0],
          "originalAmount",
          this.memberPrice.originalYearFee * this.form.memberList[0].num
        );
      }
    },
    change() {},
    async changeMember(val) {
      if (val) {
        if (this.getMemberFeeFlag) {
          this.getMemberFeeFlag = false;
          try {
            const res = await getMemberFee({
              rankId: val,
              organId: this.organId,
            });
            this.memberPrice = res.data;
            this.getMemberFeeFlag = true;
            if (!res.data) {
              this.$bus.$emit("showguide", ["memberList"]);
              return;
            }
          } catch (e) {
            console.log(e);
            this.getMemberFeeFlag = true;
          }
        }
      }
    },
    validateMember(rule, value, callback) {
      const one = Number(value);
      let min = 0;
      let max = 0;

      switch (this.form.memberList[0]?.period) {
        case "MONTH": {
          min =
            Number(this.rulesForm.minMonthFee) * this.form.memberList[0].num;
          max =
            Number(this.rulesForm.maxMonthFee) * this.form.memberList[0].num;
          break;
        }
        case "QUARTERLY": {
          min =
            Number(this.rulesForm.minQuarterlyFee) *
            this.form.memberList[0].num;
          max =
            Number(this.rulesForm.maxQuarterlyFee) *
            this.form.memberList[0].num;
          console.log(
            this.form.memberList[0]?.period,
            min,
            max,
            this.rulesForm
          );
          break;
        }
        case "YEAR_HALF": {
          min =
            Number(this.rulesForm.minHalfYearFee) * this.form.memberList[0].num;
          max =
            Number(this.rulesForm.maxHalfYearFee) * this.form.memberList[0].num;
          break;
        }
        case "YEAR": {
          min = Number(this.rulesForm.minYearFee) * this.form.memberList[0].num;
          max = Number(this.rulesForm.maxYearFee) * this.form.memberList[0].num;
          break;
        }
      }

      if (one >= min && one <= max) {
        return callback();
      }
      return callback(new Error(`定价应在${min}-${max}之间`));
    },
  },
  watch: {
    form: {
      deep: true,
      handler(val) {
        if (val.memberList[0].memberRankSettingId && !this.memberPrice.id) {
          this.changeMember(val.memberList[0].memberRankSettingId);
        }
      },
    },
  },
  computed:{
    allCourseCurrentPrice(){
      let price = 0
      this.form.memberList.forEach(element => {
        price+=element.actualAmount
      });
      if(price >0){
        this.form.isShowMemberForPay = true
      }
      return price
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/views/resetTeaming/modals/pay.scss";
</style>