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 :model="ruleForm" :rules="rules" ref="ruleForm">
      <h3>会员定价</h3>
      <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="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>

      <h3>服务费减免</h3>
      <el-form-item label="整包" prop="project_reduction_rate">
        <el-input v-model="ruleForm.project_reduction_rate"></el-input>%
      </el-form-item>
      <el-form-item label="云端" prop="job_reduction_rate">
        <el-input 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>
  </div>
</template>

<script>
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: [],
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    /**
     * 点击 title
     */
    clickTitle(i) {
      this.currentIndex = i;
      this.resetForm();
      this.getDetail(this.list[i]);
    },
    /**
     * 重置
     */
    resetForm(formName = 'ruleForm') {
      this.$refs[formName].resetFields();
    },
    /**
     * 保存或更新
     */
    async update() {
      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_yearly = ruleForm.can_buy_yearly ? '1' : '0';
      const res = await this.$post("/api/admin/vip/update", {
        ...ruleForm,
        can_buy_monthly,
        can_buy_quarterly,
        can_buy_yearly,
      });
      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 }) {
      const res = await this.$post("/api/admin/vip/getDetail", { id });
      const data = res.data;
      const can_buy_monthly = data.can_buy_monthly === '1';
      const can_buy_quarterly = data.can_buy_quarterly === '1';
      const can_buy_yearly = data.can_buy_yearly === '1';
      // ruleForm 相当于 detail, 这里同步下关键词
      this.ruleForm = {
        ...data,
        can_buy_monthly,
        can_buy_quarterly,
        can_buy_yearly,
      };
    },
    /**
     * 获取列表数据
     */
    async getList() {
      const res = await this.$post("/api/admin/vip/getList");
      // console.log(res)
      this.list = res.data;
      this.titles = this.list.map(i => i.name);
      // 模拟点击一次
      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;
}
</style>