plus-ui/src/views/set/integralSetting.vue

<template>
  <div class="app-container">
    <el-card>
      <template v-slot:header>
        <div class="clearfix">
          <div class="flex-center">
            <h2>积分获取规则</h2>
            <el-button class="ml-auto" type="primary" @click="saveData">保存 </el-button>
          </div>
        </div>
      </template>
      <el-form :model="incomeVal" label-width="180px">
        <el-form-item label="签到活动状态">
          <el-switch v-model="incomeVal.signStatus" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="每日签到固定积分">
          <el-input type="number" v-model="incomeVal.signCount" style="width: 200px" placeholder="每天签到获取的积分">
            <template v-slot:append>
              <span>积分</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="消费获得积分">
          <div class="flex-center">
            <span class="mr5">每消费</span>
            <el-input type="number" v-model="incomeVal.orderAmount" style="width: 200px" placeholder="每天签到获取的积分">
              <template v-slot:append>
                <span>元</span>
              </template>
            </el-input>
            <span class="ml5 mr5">，获得</span>
            <el-input type="number" v-model="incomeVal.orderCount" style="width: 200px" placeholder="每天签到获取的积分">
              <template v-slot:append>
                <span>积分</span>
              </template>
            </el-input>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addOrUpdate, getConfigKey2 } from '@/api/system/config';

const key = 'activity-integral-income-set-key';

const defaultIncomeVal = {
  signStatus: 1,
  signCount: 1,
  orderAmount: 1,
  orderCount: 1
};

export default {
  data() {
    return {
      incomeObj: {},
      incomeVal: {}
    };
  },
  methods: {
    initData() {
      getConfigKey2(key).then((res) => {
        if (res.data) {
          this.incomeObj = res.data;
          this.incomeVal = JSON.parse(res.data.configValue);
        } else {
          this.incomeVal = { ...defaultIncomeVal };
          this.incomeObj = {
            configValue: JSON.stringify(this.incomeVal),
            configKey: key,
            configType: 'N',
            configName: '积分获取规则',
            configId: null
          };
        }
      });
    },
    saveData() {
      const self = this;
      this.$modal
        .confirm('是否确认要保存积分获取规则？')
        .then(function () {
          self.incomeObj.configValue = JSON.stringify(self.incomeVal);
          return addOrUpdate(self.incomeObj);
        })
        .then(() => {
          this.initData();
          this.$modal.msgSuccess('保存成功');
        })
        .catch(() => {});
    }
  },
  created() {
    this.initData();
  }
};
</script>

<style lang="scss" scoped>
.number-input {
  width: 120px;
}

.jc {
  justify-content: center;
}
</style>