boss/pages/main/index/user_credit_setting.vue

<template>

  <div id="vip-setting">
    <el-radio-group v-model="tab" size="small">
      <el-radio-button label="item">技术信用</el-radio-button>
      <el-radio-button label="package">套餐配置</el-radio-button>
    </el-radio-group>

    <el-form v-if="tab=='item'" style="padding-top: 1%" :rules="rules" ref="ruleForm">
      <h3>技术信用定价</h3><br/>
      <template v-for="(item,i) of items">
        <div style="width: 150px;margin-bottom: 20px;">
          <label style="margin-right: 20px">{{item.name}}</label>
        </div>
        <div style="margin-left: 20px;">
          <el-form-item label="原价(分)" prop="original_price">
            <el-input v-model="items[i].original_price" type="number"></el-input>
          </el-form-item>
          <el-form-item label="现价(分)" prop="real_price">
            <el-input v-model="items[i].real_price" type="number"></el-input>
          </el-form-item>
          <el-form-item prop="can_buy">
            <el-checkbox label="支持购买" v-model="items[i].status_bool"></el-checkbox>
          </el-form-item>
        </div>
        <br/>
      </template>
      <br/>
      <el-form-item label-width="150px">
        <el-button type="primary" @click="submitForm('item')">保存</el-button>
      </el-form-item>
    </el-form>
    <el-form v-if="tab=='package'" style="padding-top: 1%" :rules="rules" ref="ruleForm">
      <h3>套餐定价</h3><br/>
      <template v-for="(item,i) of packages">
        <el-form-item :label="item.name">
          <el-form-item label="原价(分)" prop="original_price">
            <el-input v-model="packages[i].original_price" disabled type="number"></el-input>
          </el-form-item>
          <el-form-item label="现价(分)" prop="real_price">
            <el-input v-model="packages[i].real_price" type="number"></el-input>
          </el-form-item>
          <el-form-item label="套餐内容" prop="real_price">
            <el-input v-model="packages[i].items" ></el-input>
          </el-form-item>
          <el-form-item prop="can_buy">
            <el-checkbox label="支持购买" v-model="packages[i].status_bool"></el-checkbox>
          </el-form-item>
        </el-form-item>
      </template>
      <br/>
      <el-form-item label-width="150px">
        <el-button type="primary" @click="submitForm('package')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        ruleForm: {},
        rules: {},
        items: [],
        shows: true,
        tab: 'item',
        packages: []
      };
    },
    async mounted() {
      await this.getList();
    },
    methods: {
      /**
       * 提交
       */
      submitForm(type) {
        switch (type) {
          case 'item':
            this.$post("/api/admin/user_credit/update_setting", {
              type: 'item',
              'content': JSON.stringify(this.items)
            }).then(res => {
              this.$message({
                message: '更新成功',
                type: "success"
              });
            });
            break;
          case 'package':
            this.$post("/api/admin/user_credit/update_setting", {
              type: 'package',
              'content': this.packages
            }).then(res => {
              this.$message({
                message: '更新成功',
                type: "success"
              });
            });
            break;
          default:

        }

      },

      /**
       * 获取列表数据
       */
      async getList() {
        const res = await this.$post("/api/admin/user_credit/get_credit_list", {page: 1, size: 100});
        this.items = res.data.items;
        this.packages = res.data.packages;
      }
    }
  };
</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>