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">
      <el-form-item label="签到标题：" prop="signTitle">
        <el-input v-model="form.signTitle" placeholder="请输入签到标题" />
      </el-form-item>
      <el-form-item label="签到周期：" prop="signDay">
        <el-input v-model.number="form.signDay" placeholder="请输入签到周期" @change="changeSignDay">
          <template slot="append">天</template>
        </el-input>
      </el-form-item>
      <el-form-item label="基础积分：" prop="baseRewardPoint">
        <el-input v-model.number="form.baseRewardPoint" placeholder="请输入基础积分">
          <template slot="append">积分</template>
        </el-input>
      </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 v-model.number="scope.row.signDay" @change="getChange($event, scope.$index)" />
            </template>
          </el-table-column>
          <el-table-column label="奖励积分 / 积分" align="center">
            <template slot-scope="scope">
              <el-input v-model.number="scope.row.rewardPoint" />
            </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 v-model.number="scope.row.listenTime" @change="getChange($event, scope.$index)" />
            </template>
          </el-table-column>
          <el-table-column label="奖励积分 / 积分" align="center">
            <template slot-scope="scope">
              <el-input v-model.number="scope.row.rewardPoint" />
            </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 v-model.number="form.notifyRewardPoint" placeholder="请输入手机通知奖励">
          <template slot="append">积分</template>
        </el-input>
      </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, submit, removeContinue, removeListenGood } from '@/api/registration/regConfig'
import { rewardMixin } from '@/mixin/index'
export default {
  mixins: [rewardMixin],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表单
      form: {},
      // 连续签到奖励 添加按钮禁止
      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'
        }]
      }
    }
  },
  watch: {
    'form.signDay'() {
      // this.form.pointConfigContinueRList = []
    },
    'form.pointConfigContinueRList': {
      handler(val) {
        // 当连续签到已达基础签到周期上限则禁止添加新数据
        this.continuePush = val.findIndex(i => i.signDay === this.form.signDay) !== -1 ? true : false
      },
      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() {
      this.form.pointConfigContinueRList = []
    },

    // 添加
    handlerPush(key) {
      if (key === '签到奖励') {
        this.form.pointConfigContinueRList.push({
          signDay: '',
          rewardPoint: ''
        })
      } else {
        this.form.pointConfigListenGoodList.push({
          listenTime: '',
          rewardPoint: ''
        })
      }
    },

    // 判断连续签到天数是否大于签到周期天数
    getChange(e, index) {
      if (Number(e) > this.form.signDay) {
        this.$message.error('连续签到天数不可大于签到周期！')
        this.form.pointConfigContinueRList[index].signDay = null
      }
      if (this.form.pointConfigContinueRList.filter(i => i.signDay === Number(e)).length >= 2) {
        this.$message.error('此天数已存在！')
        this.form.pointConfigContinueRList[index].signDay = null
      }
      if (this.form.pointConfigListenGoodList.filter(i => i.listenTime === Number(e)).length >= 2) {
        this.$message.error('此时间已存在！')
        this.form.pointConfigListenGoodList[index].listenTime = null
      }
    },

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

    // 删除收听播放奖励
    getDeleteListenGood(scope) {
      let title = scope.row.listenTime ? scope.row.listenTime : '空'
      this.$confirm(`是否删除 播放时间为${title} 的数据?`, '提示', {
        type: 'warning'
      }).then(() => {
        if (scope.row.id) {
          removeListenGood({
            id: scope.row.id
          }).then(res => {
            if (res.code !== 0) {
              return false
            }
          })
        }
        this.$message.success('删除成功！')
        this.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
        }
      })
    }
  }
}
</script>

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