boss/pages/main/index/card_conf.vue

<template>
  <div class="content_t">
    <div>
      <span>单次价格</span>
      <el-input v-model="options[0].price" type="number" class="input_t"></el-input>
    </div>
    <template v-for="(item,key) in options">
      <div v-if="item.type !== '1'">
        <div class="conf_title">{{ item.name }}:</div>
        <div class="conf_content">
          <span>套餐次数</span>
          <el-input v-model="item.view_limit" type="number" class="input_t"></el-input>
          <spqn>次</spqn>
          <span>原价</span>
          <el-input v-model="item.original_price" type="number" class="input_t"></el-input>
          <spqn>元</spqn>
          <spqn>现价</spqn>
          <el-input v-model="item.price" type="number" class="input_t"></el-input>
          <spqn>元</spqn>
        </div>
      </div>
    </template>
    <div class="save-btn">
      <el-button @click="onSave" :loading="logding">保存配置</el-button>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      logding: false,
      options: [{name: '无套餐', price: '0.00', type: '1'}]
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await this.$post("/api/admin/UserCards/getCardsConf");
      if (res && res.status === 1) {
        this.options = res.data || [{name: '无套餐', price: '0.00', type: '1'}];
      }
    },
    async onSave() {
      this.logding = true;
      let data = {
        content: JSON.stringify(this.options)
      };
      const res = await this.$post("/api/admin/UserCards/saveCardsConf", data);
      if (res && res.status === 1) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.getData()
      }
      this.logding = false;

    }
  }
};
</script>

<style scoped>
.content_t {
  padding: 20px;
}

.conf_title {
  font-weight: 500;
  margin: 10px 0 10px 0;
}

.conf_content {
  margin-left: 30px;
}

.input_t {
  width: 120px;
}
.save-btn{
  margin-top: 30px;
}
</style>