dy-admin-manager/src/views/resetTeaming/modals/member-setting.vue

<template>
  <el-form
    label-width="160px"
    :model="form"
    ref="form"
    label-suffix=": "
    :inline="true"
  >
    <el-form-item label="是否购买会员" v-if="isUserType && addStudent">
      <el-radio-group v-model="radio">
        <el-radio :label="true">购买会员</el-radio>
        <el-radio :label="false">不购买会员</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="会员等级"
      prop="memberRankSettingId"
      v-if="isUserType && radio"
      :rules="[{ required: true, message: '请选择会员等级', trigger: 'blur' }]"
    >
      <el-select
        placeholder="会员等级"
        style="width: 620px !important"
        clearable
        filterable
        @change="memberRankSettingIdChange"
        v-model.trim="form.memberRankSettingId"
      >
        <el-option
          :value="item.id"
          :label="item.name"
          v-for="item in memberRankList"
          :key="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="会员有效期"
      prop="memberValidDate"
      v-if="isUserType && radio"
      :rules="[
        { required: true, message: '请选择会员有效期', trigger: 'blur' },
      ]"
    >
      <el-input
        :disabled="true"
        style="width: 596px"
        v-model="form.memberValidDate"
      >
        <template slot="append">个月</template>
      </el-input>
      <el-tooltip placement="top" popper-class="mTooltip">
        <div slot="content">自开课之日起6个月有效。</div>
        <i
          class="el-icon-question micon el-tooltip"
          style="font-size: 18px; color: #f56c6c"
          v-permission="'export/teacherSalary'"
        ></i>
      </el-tooltip>
    </el-form-item>
    <el-form-item
      label="团购价"
      prop="memberPaymentAmount"
      v-if="isUserType && radio"
      :rules="[
        {
          pattern:
            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
          message: '请输入正确的金额',
        },
        { required: true, message: '请输入现价', trigger: 'blur' },
      ]"
    >
      <el-input style="width: 223px" v-model="form.memberPaymentAmount">
        <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item
      label="原价"
      prop="originalMemberPaymentAmount"
      v-if="isUserType && radio"
      :rules="[{ required: true, message: '请输入原价', trigger: 'blur' }]"
    >
      <el-input
        style="width: 223px"
        v-model="form.originalMemberPaymentAmount"
        :disabled="true"
      >
        <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item
      label="缴费时间"
      prop="paymentDate"
      v-if="isUserType && !addStudent && showTime"
      :rules="[{ required: true, message: '请选择缴费时间', trigger: 'blur' }]"
    >
      <el-date-picker
        v-model="form.paymentDate"
        type="daterange"
        style="width: 620px"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </el-form-item>
  </el-form>
</template>
<script>
import { objectToOptions } from "@/utils";
import { getAllmemberRank, getMemberFee } from "../api";
export default {
  props: [
    "form",
    "isUserType",
    "organId",
    "addStudent",
    "showTime",
    "viewDetail",
  ],
  data() {
    return {

      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 <= new Date().getTime();
        },
      },
      dataTime: ["2021-05-14", "2021-05-19"],
      memberRankList: [],
      radio: true,
    };
  },
  async mounted() {
    // 获取所有得会员信息
    try {
      const res = await getAllmemberRank({ isDefault: 0 });
      this.memberRankList = res.data;
    } catch (e) {
      console.log(e);
    }
    this.$set(this.form, "memberValidDate", 6);
  },
  beforeDestroy() {
    this.$set(this.form, "memo", null);
    this.$set(this.form, "memberRankSettingId", null);
    this.$set(this.form, "memberValidDate", null);
    this.$set(this.form, "memberPaymentAmount", null);
    this.$set(this.form, "originalMemberPaymentAmount", null);
    this.$set(this.form, "paymentDate", []);
  },
  methods: {
    async memberRankSettingIdChange(val) {
      if (val) {
        try {
          const res = await getMemberFee({
            rankId: val,
            organId: this.organId,
          });
          if (
            res.data?.groupPurchaseHalfYearFee &&
            res.data?.originalHalfYearFee
          ) {
            this.$set(
              this.form,
              "memberPaymentAmount",
              res.data?.groupPurchaseHalfYearFee
            );
            this.$set(
              this.form,
              "originalMemberPaymentAmount",
              res.data?.originalHalfYearFee
            );
          } else {
            this.$message.error("请设置该会员的默认价格");
          }
          if (!res.data) {
            this.$bus.$emit("showguide", ["memberList"]);
            return;
          }
        } catch (e) {
          console.log(e);
        }
      }
    },
  },
  watch: {
    radio(val) {
      if (!val) {
        this.$set(this.form, "memberRankSettingId", null);
        this.$set(this.form, "memberValidDate", null);
        this.$set(this.form, "memberPaymentAmount", null);
        this.$set(this.form, "originalMemberPaymentAmount", null);
        this.$set(this.form, "paymentDate", []);
      } else {
        this.$set(this.form, "memberValidDate", 6);
      }
    },
    viewDetail: {
      deep: true,
      handler(val) {
        if (val.musicGroupPaymentCalenders[0]?.memberRankSettingId) {
          this.radio = true;
        } else {
          this.radio = false;
        }
      },
    },
  },
};
</script>
<style lang="less" scoped>
.number-input {
  /deep/ .el-input__inner {
    text-align: left;
  }

  width: 100%;
}
</style>