boss/pages/main/index/vip_setting.vue

<template>
  <div id="vip-setting">
    <el-button
      v-for="(title, i) of titles"
      :key="i"
      :type="i === currentIndex ? 'primary' : 'button'"
      @click="clickTitle(i)"
    >{{title}}</el-button>
    <el-form style="padding-top: 1%" v-if="shows" :model="ruleForm" :rules="rules" ref="ruleForm">
      <h3>会员定价</h3>
      <el-form-item label="统一" prop="job_reduction_rate">
        <h4>月付</h4>
        <el-form-item label="原价" prop="monthly_origin_price">
          <el-input v-model="ruleForm.monthly_origin_price"></el-input>
        </el-form-item>
        <el-form-item label="现价" prop="monthly_real_price">
          <el-input v-model="ruleForm.monthly_real_price"></el-input>
        </el-form-item>
        <el-form-item prop="can_buy_monthly">
          <el-checkbox label="支持购买" v-model="ruleForm.can_buy_monthly"></el-checkbox>
        </el-form-item>

        <h4>季付</h4>
        <el-form-item label="原价" prop="quarterly_origin_price">
          <el-input v-model="ruleForm.quarterly_origin_price"></el-input>
        </el-form-item>
        <el-form-item label="现价" prop="quarterly_real_price">
          <el-input v-model="ruleForm.quarterly_real_price"></el-input>
        </el-form-item>
        <el-form-item prop="can_buy_quarterly">
          <el-checkbox label="支持购买" v-model="ruleForm.can_buy_quarterly"></el-checkbox>
        </el-form-item>

        <h4>半年</h4>
        <el-form-item label="原价" prop="half_yearly_origin_price">
          <el-input v-model="ruleForm.half_yearly_origin_price"></el-input>
        </el-form-item>
        <el-form-item label="现价" prop="half_yearly_real_price">
          <el-input v-model="ruleForm.half_yearly_real_price"></el-input>
        </el-form-item>
        <el-form-item prop="can_buy_half_yearly">
          <el-checkbox label="支持购买" v-model="ruleForm.can_buy_half_yearly"></el-checkbox>
        </el-form-item>

        <h4>年付</h4>
        <el-form-item label="原价" prop="yearly_origin_price">
          <el-input v-model="ruleForm.yearly_origin_price"></el-input>
        </el-form-item>
        <el-form-item label="现价" prop="yearly_real_price">
          <el-input v-model="ruleForm.yearly_real_price"></el-input>
        </el-form-item>
        <el-form-item prop="can_buy_yearly">
          <el-checkbox label="支持购买" v-model="ruleForm.can_buy_yearly"></el-checkbox>
        </el-form-item>
      </el-form-item>
      <el-form-item label="iOS" prop="job_reduction_rate">
        <h4>月付</h4>
        <el-form-item label="原价" prop="apple_monthly_origin_price">
          <el-input v-model="ruleForm.apple_monthly_origin_price"></el-input>
        </el-form-item>
        <el-form-item label="现价" prop="apple_monthly_real_price">
          <el-input v-model="ruleForm.apple_monthly_real_price"></el-input>
        </el-form-item>
        <el-form-item prop="can_buy_monthly">
          <el-checkbox label="支持购买" v-model="ruleForm.can_buy_monthly"></el-checkbox>
        </el-form-item>

        <h4>季付</h4>
        <el-form-item label="原价" prop="apple_quarterly_origin_price">
          <el-input v-model="ruleForm.apple_quarterly_origin_price"></el-input>
        </el-form-item>
        <el-form-item label="现价" prop="quarterly_real_price">
          <el-input v-model="ruleForm.apple_quarterly_real_price"></el-input>
        </el-form-item>
        <el-form-item prop="can_buy_quarterly">
          <el-checkbox label="支持购买" v-model="ruleForm.can_buy_quarterly"></el-checkbox>
        </el-form-item>

        <h4>半年</h4>
        <el-form-item label="原价" prop="apple_half_yearly_origin_price">
          <el-input v-model="ruleForm.apple_half_yearly_origin_price"></el-input>
        </el-form-item>
        <el-form-item label="现价" prop="half_yearly_real_price">
          <el-input v-model="ruleForm.apple_half_yearly_real_price"></el-input>
        </el-form-item>
        <el-form-item prop="can_buy_half_yearly">
          <el-checkbox label="支持购买" v-model="ruleForm.can_buy_half_yearly"></el-checkbox>
        </el-form-item>

        <h4>年付</h4>
        <el-form-item label="原价" prop="apple_yearly_origin_price">
          <el-input v-model="ruleForm.apple_yearly_origin_price"></el-input>
        </el-form-item>
        <el-form-item label="现价" prop="apple_yearly_real_price">
          <el-input v-model="ruleForm.apple_yearly_real_price"></el-input>
        </el-form-item>
        <el-form-item prop="can_buy_yearly">
          <el-checkbox label="支持购买" v-model="ruleForm.can_buy_yearly"></el-checkbox>
        </el-form-item>
      </el-form-item>

      <h3>权益设置</h3>
      <el-form v-if="ruleForm.id==2">
        <el-form-item :label="ruleForm.name+rights1" prop="accept_times">
          <el-input style="width: 30%" v-model="ruleForm.accept_times"></el-input>次
        </el-form-item>
        <br />
        <el-form-item :label="ruleForm.name+rights2" prop="accept_count">
          <el-input style="width: 30%" v-model="ruleForm.accept_count"></el-input>个
        </el-form-item>
      </el-form>
      <el-form v-else>
        <el-form-item :label="ruleForm.name+rights1" prop="chat_times">
          <el-input style="width: 30%" v-model="ruleForm.chat_times"></el-input>次
        </el-form-item>
        <br />
        <el-form-item :label="ruleForm.name+rights2" prop="hire_times">
          <el-input style="width: 30%" v-model="ruleForm.hire_times"></el-input>个
        </el-form-item>
      </el-form>
      <el-form-item :label="ruleForm.name+'整包减免费率'" prop="project_reduction_rate">
        &#12288;<el-input style="width: 30%" v-model="ruleForm.project_reduction_rate"></el-input>%
      </el-form-item>
      <br />
      <el-form-item :label="ruleForm.name+'云端减免费率'" prop="job_reduction_rate">
        &#12288;<el-input style="width: 30%" v-model="ruleForm.job_reduction_rate"></el-input>%
      </el-form-item>
      <br />
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      </el-form-item>
    </el-form>
    <el-form v-else="shows" :model="ruleForm"  ref="commonRights">
      <h3 style="padding-top: 1%;">普通开发者用户权益设置</h3>
      <el-form-item style="padding: 4%">
        <el-form-item label="普通用户每月可接单次数" prop="project_reduction_rate">
          <el-input style="width: 30%" v-model="commonRights.limit1"></el-input>次
        </el-form-item>
      </el-form-item>
      <h3>普通企业方用户权益设置</h3>
      <el-form-item style="padding: 4%">
        <el-form-item label="普通用户每天可聊一聊次数" prop="project_reduction_rate">
          <el-input style="width: 30%" v-model="commonRights.limit2"></el-input>次
        </el-form-item>
        <br /><br />
        <el-form-item label="普通用户每天可发布雇佣数" prop="job_reduction_rate">
          <el-input style="width: 30%" v-model="commonRights.limit3"></el-input>个
        </el-form-item>
      </el-form-item>
      <br />
      <el-form-item>
        <el-button type="primary" @click="submitForm('commonRights')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {validAlphabets} from "../../../utils/validate";

export default {
  data() {
    return {
      ruleForm: {},
      rules: {
        mOrigin: [{ required: true, message: "请输入数字", trigger: "blur" }],
        mCurrent: [{ required: true, message: "请输入数字", trigger: "blur" }],
        sOrigin: [{ required: true, message: "请输入数字", trigger: "blur" }],
        sCurrent: [{ required: true, message: "请输入数字", trigger: "blur" }],
        yOrigin: [{ required: true, message: "请输入数字", trigger: "blur" }],
        sCurrent: [{ required: true, message: "请输入数字", trigger: "blur" }],
        tPercent: [{ required: true, message: "请输入数字", trigger: "blur" }],
        cPercent: [{ required: true, message: "请输入数字", trigger: "blur" }]
      },
      // 当前 title 索引
      currentIndex: 0,
      // vip 的类型名字
      titles: [],
      // vip 列表
      list: [],
      // 设备类型, iOS/其他
      device: "其他",
        rights1:'',
        rights2:'',
        shows:true,
        commonRights:{}
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /**
     * 点击 title
     */
    clickTitle(i) {
      this.currentIndex = i;
      this.resetForm();
      this.getDetail(this.list[i]);
    },
    /**
     * 重置
     */
    resetForm(formName = "ruleForm") {
        if(this.shows){
            this.$refs[formName].resetFields();
        }
    },
    /**
     * 保存或更新
     */
    async update() {
        let res;
        if (this.shows){
            const ruleForm = this.ruleForm;

            const can_buy_monthly = ruleForm.can_buy_monthly ? "1" : "0";
            const can_buy_quarterly = ruleForm.can_buy_quarterly ? "1" : "0";
            const can_buy_half_yearly = ruleForm.can_buy_half_yearly ? "1" : "0";
            const can_buy_yearly = ruleForm.can_buy_yearly ? "1" : "0";
            res = await this.$post("/api/admin/vip/update", {
                ...ruleForm,
                can_buy_monthly,
                can_buy_quarterly,
                can_buy_half_yearly,
                can_buy_yearly
            });
        }else{
            const rights = {
                'id':4,
                'limit1':this.commonRights.limit1,
                'limit2':this.commonRights.limit2,
                'limit3':this.commonRights.limit3,
            };
            res = await this.$post("/api/admin/vip/set_rights", rights);
        }

      if (res)
        this.$message({
          message: "更新成功",
          type: "success"
        });
    },
    /**
     * 提交
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // console.log(this.ruleForm);
          this.update();
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * 获取详情数据
     */
    async getDetail({ id }) {
      switch ({ id }.id) {
          case '2':
              this.shows = true;
              this.rights1 = '每月可接单次数';
              this.rights2 = '可同时接单数量';
              break;
          case '1':
          case '3':
              this.shows = true;
              this.rights1 = '每月可雇佣次数';
              this.rights2 = '每天聊一聊次数';
              break;
          case '4':
              this.shows = false;
              const res = await this.$post("/api/admin/vip/get_rights", { id });
              this.commonRights = res.data;
              return ;
              break;
      }
      const res = await this.$post("/api/admin/vip/getDetail", { id });
      const data = res.data;
      // console.log({id}.id);
      const can_buy_monthly = data.can_buy_monthly === "1";
      const can_buy_quarterly = data.can_buy_quarterly === "1";
      const can_buy_half_yearly = data.can_buy_half_yearly === "1";
      const can_buy_yearly = data.can_buy_yearly === "1";
      // ruleForm 相当于 detail, 这里同步下关键词
      this.ruleForm = {
        ...data,
        can_buy_monthly,
        can_buy_quarterly,
        can_buy_half_yearly,
        can_buy_yearly
      };
    },
    /**
     * 获取列表数据
     */
    async getList() {
      const res = await this.$post("/api/admin/vip/getList");
      // console.log(res)
        //更改显示顺序
      this.list = res.data;
        let temp = this.list[0];
        this.list[0] = this.list[1];
        this.list[1] = temp;
        this.list.push({
            id :'4',
            name: "普通用户权益",
        });
      this.titles = this.list.map(i => i.name);
      // console.log(this.titles);
      // 模拟点击一次
      this.clickTitle(0);
    }
  }
};
</script>

<style>
#vip-setting {
  padding: 20px;
}
.table {
  height: 100%;
  height: calc(100% - 80px);
}
.el-input {
  width: auto;
}
.el-check-group,
.el-form-item,
.el-form-item__content {
  display: inline-block;
}
.device-select {
  margin-bottom: 20px;
}
</style>