oil-station/fuintAdmin/src/views/integral/settings/index.vue

<template>
  <div class="app-conr">
    <div class="tab-box">
      <div class="f-box" v-for="(item,index) in tablist" :key="index" @click="activeindex=index"
           :class="{ 'active' :activeindex==index}">{{ item.name }}
      </div>
    </div>
    <div class="cor">
      <div class="bai-box" v-if="activeindex == 0">

        <div class="qizhi">
          <div class="left-icon">i</div>
          <div>
            <div class="bigsize">每日积分签到</div>
            <div class="smallsize">签到规则为连续签到、如中途漏签一天将重置从第一天开始</div>
          </div>
        </div>
        <el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">
          <el-row :gutter="24">
            <el-col :span="15">
              <el-form-item label="签到功能" prop="signInFunction">
                <el-radio-group v-model="dataForm.signInFunction">
                  <el-radio :label='0'>启用</el-radio>
                  <el-radio :label='1'>禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="15">
              <el-form-item label="适用规则" prop="">
                <el-radio-group v-model="dataForm.signApplicableRules" @input="applicableRules()">
                  <el-radio :label='0'>不限制</el-radio>
                  <el-radio :label='1'>按签到周期</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-select v-model="value" placeholder="请选择" @change="cycle()">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <div style="width: 100%; padding-left: 70px">

            <el-form-item style="" v-for="(item,index) in dataForm.pointsObtained" :key="index"
                          :prop="'pointsObtained' + index" :label="item.day">
              <el-input v-model.number="item.integral" placeholder="请输入赠送积分">
                <template slot="append">积分</template>
              </el-input>
            </el-form-item>

          </div>

          <el-form-item label="签到规则" prop="signInRules">
            <el-input :rows="3" style="width: 1300px;" type="textarea" v-model="dataForm.signInRules"></el-input>
          </el-form-item>


        </el-form>
        <div style="width: 1600px; margin-top: 150px; display: flex;justify-content: center ">
          <el-button type="primary" @click="submit">保存</el-button>
        </div>

      </div>
      <div class="bai-box" v-else>
        <el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">
          <el-form-item label="积分说明" prop="desc" style="width: 100%;margin-right: 0px ">
            <el-input type="textarea" :rows="8" v-model="dataForm.pointsRules" style="width: 1550px"></el-input>
          </el-form-item>

        </el-form>
        <div style="width: 1600px; margin-top: 150px; display: flex;justify-content: center ">
          <el-button type="primary" @click="submit">保存</el-button>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import {getSettingsApi, updateSettingsApi} from "@/api/integral/settings";
import editor from '@/components/Editor/index'

export default {
  name: "index",
  // components: {Editor},

  data() {
    var valiNumberPass = (rule, value, callback) => {//包含小数的数字
      parseFloat(value).toFixed(2)
      let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
      if (value === '') {
        callback(new Error('请输入内容'));
      } else if (!reg.test(value)) {
        callback(new Error('请输入数字'));
      } else {
        callback();
      }
    };
    return {
      tablist: [
        {
          name: '每日签到',
        },
        {
          name: '积分规则',
        },

      ],
      activeindex: 0,
      activeName: 'first',


      rules: {
        desc: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        refuelPointsRules: [
          {required: true, message: '请选择积分规则', trigger: 'change'}
        ],
        refuelSceneType: [
          {required: true, message: '请选择场景类型', trigger: 'change'}
        ],
        refuelAmountType: [
          {required: true, message: '请选择金额类型', trigger: 'change'}
        ],
        refuelValueParticipation: [
          {required: true, message: '请选择储值参与', trigger: 'change'}
        ],
        refuelSceneRules: [
          {required: true, message: '请选择场景规则', trigger: 'change'}
        ],
        refuelFuelAmount: [
          {required: true, validator: valiNumberPass, trigger: "blur"}
        ],
        refuelPoints: [
          {required: true, message: '输入积分', trigger: "blur"},
          {type: 'number', message: '积分必须为数字值'}
        ],
        //   amount:[
        //     {required: true,
        //     validator: (rule, value, callback) => this.valiNumberPass(rule, value, callback, 'amount'),
        //     trigger: 'blur'
        // }
        // ],

        rechargeGive: [
          {required: true, message: '输入积分', trigger: "blur"},
          {type: 'number', message: '积分必须为数字值'}
        ],
        // points: [
        //   { required: true}
        // ],
      },
      dataForm: {
        // 积分设置ID
        id: null,
        // 加油积分规则
        refuelPointsRules: 0,
        // 加油积分功能
        refuelPointsFunction: 0,
        // 加油场景类型
        refuelSceneType: 0,
        // 加油金额类型
        refuelAmountType: 0,
        // 加油储值参与
        refuelValueParticipation: 0,
        // 加油场景规则
        refuelSceneRules: 0,
        // 加油消费金额
        refuelConsumptionAmount: '',
        // 加油积分
        refuelPoints: 0,
        // 加油油品金额
        refuelFuelAmount: 0.0,
        // 加油油品升数
        refuelFuelVolume: 0.0,
        // 充值赠送
        rechargeGive: 0,
        // 邀请赠送
        inviteGive: 0,
        // 邀请赠送规则
        inviteGiveRules: '',
        // 签到功能
        signInFunction: 0,
        // 签到规则
        signInRules: '',
        //适用规则
        signApplicableRules: 0,
        // 签到周期
        signInCycle: 0,
        // 签到获得
        pointsObtained: [
          {
            day: '第1天获得',
            integral: 0,
          },
          {
            day: '第2天获得',
            integral: 0,
          },
          {
            day: '第3天获得',
            integral: 0,
          },
          {
            day: '第4天获得',
            integral: 0,
          },
          {
            day: '第5天获得',
            integral: 0,
          },
          {
            day: '第6天获得',
            integral: 0,
          },
          {
            day: '第7天获得',
            integral: 0,
          },
          {
            day: '超8天获得',
            integral: 0,
          }
        ],

        // 积分规则
        pointsRules: ''

      },
      options: [{
        value: 0,
        label: '一周'
      }, {
        value: 1,
        label: '两周'
      }, {
        value: 2,
        label: '一个月'
      }],
      value: ''


    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleChildValue(value) {
      console.log("vale", value)
      this.dataForm.pointsRules = value
    },
    applicableRules() {
      if (this.dataForm.signApplicableRules == 0) {
        this.value = '',
          this.dataForm.pointsObtained = [
            {
              day: '每天获得',
              integral: 0,
            }]
      } else if (this.dataForm.signApplicableRules == 1) {
        this.value = 0
        this.getRules(7)
      }
    },
    cycle() {
      if (this.value == 0) {
        this.getRules(7)
      } else if (this.value == 1) {
        this.getRules(14)
      } else if (this.value == 2) {
        this.getRules(30)
      }
    },
  getRules(length){
    this.dataForm.pointsObtained = []
    for (let i = 0; i < length; i++) {
      let obj = {
        day: '第' + (i + 1) + '天获得',
        integral: 0,
      }
      this.dataForm.pointsObtained.push(obj)
    }
  },


  getData() {
    let file = this.dataForm
    file.pointsObtained = JSON.stringify(file.pointsObtained);
    file.refuelConsumptionAmount = JSON.stringify(file.refuelConsumptionAmount);


    console.log("第一个this.dataForm", this.dataForm)
    getSettingsApi(this.dataForm).then(res => {
      this.dataForm = res.data
      this.dataForm.pointsObtained = JSON.parse(this.dataForm.pointsObtained)
      this.dataForm.refuelConsumptionAmount = JSON.parse(res.data.refuelConsumptionAmount)
      if (this.dataForm.signCycle == 3) {
        this.value = ''
      }else {
        this.value = this.dataForm.signCycle
      }
    })
    console.log("dataForm", this.dataForm)
  },
  submit() {
    let file = this.dataForm
    // console.log()
    file.pointsObtained = JSON.stringify(file.pointsObtained);
    file.refuelConsumptionAmount = JSON.stringify(file.refuelConsumptionAmount);
    file.signCycle = this.value
    this.dataForm = {}
    if (this.value === '') {
      file.signCycle = 3
    }
    console.log("file", file)
    updateSettingsApi(file).then(res => {
      this.$modal.msgSuccess("添加成功");
      this.dataForm = {}
      res.data.pointsObtained = JSON.parse(res.data.pointsObtained)
      res.data.refuelConsumptionAmount = JSON.parse(res.data.refuelConsumptionAmount)
      this.dataForm = res.data
      this.dataForm.signApplicableRules = res.data.signApplicableRules
      console.log("res.data", res.data)
    }).catch(res => {
      this.$modal.msgSuccess("添加失败");

    })
    // this.dataForm= {
    //   // 积分设置ID
    //   id: null,
    //     // 加油积分规则
    //     refuelPointsRules: 0,
    //     // 加油积分功能
    //     refuelPointsFunction: 0,
    //     // 加油场景类型
    //     refuelSceneType: 0,
    //     // 加油金额类型
    //     refuelAmountType: 0,
    //     // 加油储值参与
    //     refuelValueParticipation: 0,
    //     // 加油场景规则
    //     refuelSceneRules: 0,
    //     // 加油消费金额
    //     refuelConsumptionAmount: '',
    //     // 加油积分
    //     refuelPoints: 0,
    //     // 加油油品金额
    //     refuelFuelAmount: 0.0,
    //     // 加油油品升数
    //     refuelFuelVolume: 0.0,
    //     // 充值赠送
    //     rechargeGive: 0,
    //     // 邀请赠送
    //     inviteGive: 0,
    //     // 邀请赠送规则
    //     inviteGiveRules: '',
    //     // 签到功能
    //     signInFunction: 0,
    //     // 签到规则
    //     signInRules: '',
    //     //适用规则
    //     signApplicableRules: 0,
    //     // 签到周期
    //     signInCycle: 0,
    //     // 签到获得
    //     pointsObtained: [
    //     {
    //       day: '第1天获得',
    //       integral: 0,
    //     },
    //     {
    //       day: '第2天获得',
    //       integral: 0,
    //     },
    //     {
    //       day: '第3天获得',
    //       integral: 0,
    //     },
    //     {
    //       day: '第4天获得',
    //       integral: 0,
    //     },
    //     {
    //       day: '第5天获得',
    //       integral: 0,
    //     },
    //     {
    //       day: '第6天获得',
    //       integral: 0,
    //     },
    //     {
    //       day: '第7天获得',
    //       integral: 0,
    //     },
    //     {
    //       day: '超8天获得',
    //       integral: 0,
    //     }
    //   ],
    //
    //     // 积分规则
    //     pointsRules: ''
    //
    // }
    // this.getData()

  },
  cancel() {
  },
  handleClick(tab, event) {
    console.log(tab, event);
  }
}
,

valiNumberPass(rule, value, callback, fieldName)
{
  this.$nextTick(() => {
    // 在这里进行自定义验证逻辑，value 应该在这时候被正确设置
    console.log(`Validating ${fieldName}:`, value);
  });
}
,


}
</script>

<style scoped lang="scss">

.app-container {
  width: 100%;
  height: 100%;
  background: #f6f8f9;
}

.conten-bottom {
  box-sizing: border-box;
  padding: 20px 20px;
  display: flex;
  flex-wrap: wrap;
}

.cardbox {
  margin-right: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 10px;
  width: 23%;
  height: 150px;
  background-size: 40% 70%;
  background-color: #f9f9f9;
  border: 1px solid rgb(196, 196, 196)
}

.tab-box {
  width: 100%;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  padding: 0px 50px;
}

.f-box {
  height: 40px;
  color: #999999;
  margin-right: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;

}

.active {
  color: #FF9655 !important;
  border-bottom: 2px solid #FF9655 !important;
}

.container {
  background: #F4F5F9;
  box-sizing: border-box;
  //padding: 20px;
}

.tabder-box {
  width: 85%;
}

.cor {
  box-sizing: border-box;
  padding: 10px;
  background: #f9f9f9;

}

.bai-box {
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  height: 85vh;
}

.qizhi {
  width: 100%;
  border-radius: 8px;
  padding: 20px;
  color: #FF9655;
  font-size: 16px;
  background: rgba(255, 150, 85, 0.15);
  align-items: center;
  display: flex;
  margin-bottom: 30px;
}

.left-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #FF9655;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  margin-right: 25px;
}

.bigsize {
  font-size: 24px;
  margin-bottom: 15px;
}
</style>