tourism_merchant_ui/src/views/tourism/membershipManagement/pointsManagement/IntegralRule.vue

<template>
    <div class="app-container">
      <el-row :gutter="20">
        <div 
    style="padding: 40px;"
    v-loading="loading"
    :element-loading-text="loadingText"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <el-form :model="form" ref="form" size="small" :rules="rules" label-width="120px">
            <el-form-item label="积分功能" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">关闭</el-radio>
                    <el-radio :label="2">开启</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="积分抵现" prop="isDischarge">
                <el-radio-group v-model="form.isDischarge">
                    <el-radio :label="1">关闭</el-radio>
                    <el-radio :label="2">开启</el-radio>
                </el-radio-group>
            </el-form-item>
            <div style="display: flex;align-items: center;">
                <el-form-item v-if="form.isDischarge==2" label="积分抵现系数" prop="dischargeRate">
                  <el-input-number style="width: 300px" v-model="form.dischargeRate"  placeholder="请输积分抵现系数" controls-position="right"></el-input-number>
                </el-form-item>
                <span style="margin-left: 15px; padding-bottom:15px; font-size: 12px;color: #ccc;"></span>
            </div>
            <div v-if="form.status==2" style="display: flex;align-items: center;">
                <el-form-item label="积分奖励系数" prop="exchangeRate">
                  <el-input-number style="width: 300px" v-model="form.exchangeRate"  placeholder="请输积分奖励系数" controls-position="right"></el-input-number>
                </el-form-item>
                <span style="margin-left: 15px; padding-bottom:15px; font-size: 12px;color: #ccc;">（会员下单获取积分值=实付金额*积分规则基础系数奖励系数越大，获得成长值越多，建议数值设置不要过大）</span>
            </div>
            <div style="display: flex;align-items: center;">
                <el-form-item label="积分自动清零" prop="isClean">
                    <el-radio-group v-model="form.isClean">
                        <el-radio :label="1">关闭</el-radio>
                        <el-radio :label="2">开启</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="form.isClean==2"  label="每年固定" prop="cleanTime">
                    <el-date-picker
                    style="width: 300px"
                    v-model="form.cleanTime"
                    type="datetime"
                    format="MM-dd"
                    value-format="MM-dd"
                    placeholder="请选择每年固定自动清零时间">
                    </el-date-picker>
                </el-form-item>
                <span v-if="form.isClean==2" style="margin-left: 15px; padding-bottom:15px; font-size: 12px;color: #ccc;">自动清零</span>
            </div>
            
          <el-form-item style="margin-top: 15px;">
            <el-button :loading="loading" @click="initData()">取消</el-button>
            <el-button
                v-hasPermi="configPermi.seva"
                type="primary"
                @click="submitForm"
                :loading="loading"
                element-loading-text="提交中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
            > 
                {{ loading ? '提交中...' : '保存' }}
            </el-button>
          </el-form-item>
        </el-form>
    </div>
      </el-row>
    </div>
  </template>
  
  <script>
import { 
  getTableDeatilsByIdApi,
  addTableApi,
 } from '@/api/CURD'
  export default {
    name: "IntegralRule",
    dicts: [],
    data() {
      return {
        title: "积分规则",// 通用标题
        loading: false,
        loadingText: "拼命加载数据中...",
        configPermi: {
            add: [''], // 新增权限
            details: [''], // 详情权限
            delect: [''], // 删除权限
            edit: [''], // 编辑权限http://localhost/scenicAreaManagement/contentManagement/scenicAreaManagement/contentManagement/questions
            upload: [''],// 导入权限
            export: [''],// 导出权限http://localhost/scenicAreaManagement/contentManagement/scenicAreaManagement/contentManagement/suggestions
            release: [''],
            seva: ['pointsManagement:IntegralRecord:seva'] // 保存
        },
        configUrl: {
            details: '/merchant/creditConfig/getCreditConfig', // 详情地址
            edit: '/merchant/creditConfig/insertOrUpdate', // 编辑地址
        },
        form: {},
        rules: {
            status: [{ required: true, message: "请选择积分功能", trigger: ["change","blur"] }],
            isDischarge: [{ required: true, message: "请选择积分抵现", trigger: ["change","blur"] }],
            isClean: [{ required: true, message: "请选择积分自动清零", trigger: ["change","blur"] }],
            cleanTime: [{ required: true, message: "请选择每年固定自动清零时间", trigger: ["change","blur"] }],
            dischargeRate: [{ required: true, message: "请输积分抵现系数", trigger: ["change","blur"] }],
            exchangeRate: [{ required: true, message: "请输入积分奖励系数", trigger: ["change","blur"] }],
          },
      };
    },
    created() {
        this.initData()
    },
    methods: {
       /**  初始化  */
    initData() {
        this.loadingText = "拼命加载数据中..."
        this.loading = true
        this.getTableDeatilsFun()
    },
    /** 获取详情 */
    async getTableDeatilsFun(row) {
      this.loading = true
      try {
        let res = await getTableDeatilsByIdApi(this.configUrl.details,{})
        if(res.code == 200) {
          let obj = {
          ...res.data
        }
          this.$set(this,'form',JSON.parse(JSON.stringify(obj)))
          this.formStatus = 1
          this.$nextTick(()=>{
            if(this.form.longitude&&this.form.latitude){
              console.log("dsfasfdasdfasdfadsfads")
              this.$refs.qqMapBox.setMakerLayer({
                height: 0,
                lat: this.form.latitude,
                lng: this.form.longitude,
              },true)
            }
            
          })
          
        }else {
          this.$message.error('获取详情失败!!!');
          this.formStatus = 2
          this.loading = false
          this.open = false;
        }
        this.$nextTick(()=>{
            this.reset()
        })
        this.loading = false
      } catch (error) {
        console.error('获取详情失败!!!!',error)
        this.formStatus = 2
        this.loading = false
        this.open = false;
      }
    },
    /**
     * 保存
     * @date 2023-11-22
     * @returns {any}
     */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loadingText = "提交数据中..."
          this.loading = true
          addTableApi(
            this.configUrl.edit,{
            ...this.form
            }).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.loading = false
            this.initData()
            }).catch(()=>{
            this.$message.error("修改失败!!!");
            this.loading = false
        })
        }
      });
    },
    /**
     * 重置
     * @date 2023-11-22
     * @returns {any}
     */
    reset() {
      if(this.$refs["form"]) {
        this.$refs["form"].clearValidate();
      }
    },
    setDot(params){
      this.$set(this.form,'longitude',params.lng)
      this.$set(this.form,'latitude',params.lat)
    }
    }
  };
  </script>