ohplay_system/src/views/registration/regConfig/index.vue

<!-- 签到管理 签到配置-->
<template>
  <div class="app-container">
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="auto"
      v-loading="loading"
      :disabled="checkPermi(['registration:regConfig:change']) ? false : true"
    >
      <el-form-item label="签到标题：" prop="signTitle">
        <el-input
          v-model="form.signTitle"
          placeholder="请输入签到标题"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="签到周期：" prop="signDay">
        <el-input-number
          v-model="form.signDay"
          :min="1"
          :max="99"
          placeholder="请输入签到周期"
          :controls="false"
          @change="changeSignDay"
        />
        <span class="span">天</span>
      </el-form-item>
      <el-form-item label="基础积分：" prop="baseRewardPoint">
        <el-input-number
          v-model="form.baseRewardPoint"
          :min="0"
          :controls="false"
          placeholder="请输入基础积分"
        />
        <span class="span">积分</span>
      </el-form-item>

      <el-form-item label="连续签到奖励：">
        <el-popover
          placement="top"
          content="连续签到一定天数后，可以额外获得积分"
          trigger="hover"
        >
          <el-checkbox
            v-model="form.isContinueReward"
            :true-label="0"
            :false-label="1"
            slot="reference"
          >
            开启
          </el-checkbox>
        </el-popover>
        <el-table
          v-if="form.isContinueReward === 0"
          :data="form.pointConfigContinueRList"
        >
          <el-table-column label="连续签到天数 / 天" align="center">
            <template slot-scope="scope">
              <el-input-number
                class="input-number"
                v-model="scope.row.signDay"
                :min="1"
                :max="99"
                :controls="false"
                @blur="checkSignDay(scope.row.signDay, scope.$index)"
              />
            </template>
          </el-table-column>
          <el-table-column label="奖励积分 / 积分" align="center">
            <template slot-scope="scope">
              <el-input-number
                class="input-number"
                v-model="scope.row.rewardPoint"
                :min="0"
                :controls="false"
              />
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template #header>
              <el-button
                type="text"
                icon="el-icon-plus"
                @click="handlerPush('签到奖励')"
                :disabled="continuePush"
                >添加</el-button
              >
            </template>
            <template slot-scope="scope">
              <el-button type="delete" @click="getDeleteContinue(scope)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="收听播放奖励：">
        <el-popover
          placement="top"
          content="播放一定时间后，可以获得相应奖励"
          trigger="hover"
        >
          <el-select
            v-model="form.notifyRewardType"
            placeholder="请选择奖励类型"
            slot="reference"
            style="width: 150px; margin-bottom: 10px"
          >
            <el-option
              v-for="item in rewardOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-popover>
        <el-table
          v-if="form.notifyRewardType"
          :data="form.pointConfigListenGoodList"
        >
          <el-table-column label="播放时间 / 小时" align="center">
            <template slot-scope="scope">
              <el-input-number
                class="input-number"
                v-model="scope.row.listenTime"
                :max="99"
                :controls="false"
                @blur="checkListenTime(scope.row.listenTime, scope.$index)"
              />
            </template>
          </el-table-column>
          <el-table-column label="奖励积分 / 积分" align="center">
            <template slot-scope="scope">
              <el-input-number
                class="input-number"
                v-model="scope.row.rewardPoint"
                :min="0"
                :controls="false"
              />
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template #header>
              <el-button
                type="text"
                icon="el-icon-plus"
                @click="handlerPush('播放奖励')"
                :disabled="listenGoodPush"
                >添加</el-button
              >
            </template>
            <template slot-scope="scope">
              <el-button type="delete" @click="getDeleteListenGood(scope)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="手机通知奖励：">
        <el-input-number
          v-model="form.notifyRewardPoint"
          :min="0"
          :controls="false"
        />
        <span class="span">积分</span>
      </el-form-item>
      <el-form-item label="签到规则：" prop="signRule">
        <el-input
          v-model="form.signRule"
          type="textarea"
          :autosize="{ minRows: 5, maxRows: 10 }"
          placeholder="请输入签到规则"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getSubmit">确定 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
list,
removeContinue,
removeListenGood,
submit,
} from "@/api/registration/regConfig";
import { dialogCallBack } from "@/utils/DialogUtil";
import { checkPermi } from "@/utils/permission";
export default {
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表单
      form: {
        pointConfigContinueRList: [],
      },
      // 连续签到奖励 添加按钮禁止
      continuePush: false,
      // 收听播放奖励 添加按钮禁止
      listenGoodPush: false,
      // 校验
      rules: {
        signTitle: [
          {
            required: true,
            message: "请输入签到标题",
            trigger: "blur",
          },
        ],
        signDay: [
          {
            required: true,
            message: "请输入签到周期",
            trigger: "blur",
          },
        ],
        baseRewardPoint: [
          {
            required: true,
            message: "请输入基础积分",
            trigger: "blur",
          },
        ],
        signRule: [
          {
            required: true,
            message: "请输入签到规则",
            trigger: "blur",
          },
        ],
      },
      // 奖励类型
      rewardOptions: [
        {
          value: 4,
          label: "积分",
        },
      ],
      // 是否只读
      disabled: false,
    };
  },
  watch: {
    "form.pointConfigContinueRList": {
      handler(val) {
        // 当连续签到已达基础签到周期上限则禁止添加新数据
        this.continuePush =
          val.length < this.form.signDay
            ? val.findIndex((i) => i.signDay === this.form.signDay) !== -1
              ? true
              : false
            : true;
      },
      deep: true,
    },
    "form.pointConfigListenGoodList"(val) {
      this.listenGoodPush = val.length >= 10 ? true : false;
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 详情
    getList() {
      this.loading = true;
      list().then((res) => {
        if (res.code === 0) {
          this.form = res.data;
          this.loading = false;
        }
      });
    },

    // 签到周期改变 连续签到列表重置
    changeSignDay() {
      let ids = "";
      let arr = [];
      this.form.pointConfigContinueRList.map((i) => {
        if (i.id) {
          arr.push(i.id);
        }
      });
      ids = arr.join(",");
      if (ids) {
        removeContinue(ids).then((res) => {});
      }
      this.form.pointConfigContinueRList = [];
    },

    // 添加
    handlerPush(key) {
      if (key === "签到奖励") {
        this.form.pointConfigContinueRList.push({
          signDay: undefined,
          rewardPoint: undefined,
          status: 1,
        });
      } else {
        this.form.pointConfigListenGoodList.push({
          listenTime: undefined,
          rewardPoint: undefined,
          type: this.form.notifyRewardType,
        });
      }
    },

    // 判断连续签到天数是否大于签到周期天数
    checkSignDay(e, index) {
      if (e > this.form.signDay) {
        this.$message.error("连续签到天数不可大于签到周期！");
        this.form.pointConfigContinueRList[index].signDay = undefined;
      }
      if (
        this.form.pointConfigContinueRList.filter((i) => i.signDay === e)
          .length === 2
      ) {
        this.$message.error("此天数已存在！");
        this.form.pointConfigContinueRList[index].signDay = undefined;
      }
    },

    // 判断收听播放奖励时是否填写重复的时间
    checkListenTime(e, index) {
      if (
        this.form.pointConfigListenGoodList.filter((i) => i.listenTime === e)
          .length === 2
      ) {
        this.$message.error("此时间已存在！");
        this.form.pointConfigListenGoodList[index].listenTime = undefined;
      }
    },

    // 删除连续签到奖励
    getDeleteContinue(scope) {
      var that = this;
      dialogCallBack(that, function () {
        let title = scope.row.signDay ? scope.row.signDay : "空";
        that
          .$confirm(`是否删除 连续签到天数为${title} 的数据?`, "提示", {
            type: "warning",
          })
          .then(() => {
            if (scope.row.id) {
              removeContinue(scope.row.id).then((res) => {
                if (res.code !== 0) {
                  return false;
                }
              });
            }
            that.$message.success("删除成功！");
            that.form.pointConfigContinueRList.splice(scope.$index, 1);
          })
          .catch(() => {});
      });
    },

    // 删除收听播放奖励
    getDeleteListenGood(scope) {
      var that = this;
      dialogCallBack(that, function () {
        let title = scope.row.listenTime ? scope.row.listenTime : "空";
        that
          .$confirm(`是否删除 播放时间为${title} 的数据?`, "提示：", {
            type: "warning",
          })
          .then(() => {
            if (scope.row.id) {
              removeListenGood({
                id: scope.row.id,
              }).then((res) => {
                if (res.code !== 0) {
                  return false;
                }
              });
            }
            that.$message.success("删除成功！");
            that.form.pointConfigListenGoodList.splice(scope.$index, 1);
          })
          .catch(() => {});
      });
    },

    // 确定
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          submit(this.form).then((res) => {
            if (res.code === 0) {
              this.$message.success("修改成功！");
              this.getList();
            }
          });
        } else {
          return false;
        }
      });
    },

    // 监控权限
    checkPermi,
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  width: 500px;
}

.input-number {
  width: 110px;
}

.span {
  margin-left: 10px;
}
</style>