128 lines
4.1 KiB
Vue
128 lines
4.1 KiB
Vue
<template>
|
||
<div class="hongbao-bg">
|
||
<el-form :inline="true" :model="form" ref="ruleForm" label-width="150px" label-position="right">
|
||
<el-row :gutter="24">
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||
<el-form-item label="展示开启" prop="enabled">
|
||
<el-switch v-model="form.enabled" active-color="#13ce66" inactive-color="#ff4949" active-text="开启"
|
||
inactive-text="关闭"></el-switch>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||
<el-form-item label="发放积分总数" prop="content">
|
||
<el-input placeholder="请输入总数" v-model.number="form.dailyLimit" style="width: 400px">
|
||
<template #append>
|
||
<span>积分</span>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||
<el-form-item :label="`第${i + 1}次领取`" size="mini" v-for="(ru, i) in form.rule" :key="i">
|
||
<el-form-item label="间隔：" size="mini" label-width="50">
|
||
<el-input placeholder="单位（s）" v-model.number="ru.interval" style="width: 120px">
|
||
<template #append>
|
||
<span>秒</span>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="最小：" size="mini" label-width="50">
|
||
<el-input placeholder="该次领取最小值" v-model.number="ru.min" style="width: 150px">
|
||
<template #append>
|
||
<span>积分</span>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="最大：" size="mini" label-width="50">
|
||
<el-input placeholder="该次领取最大值" v-model.number="ru.max" style="width: 150px">
|
||
<template #append>
|
||
<span>积分</span>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-button icon="el-icon-delete" type="danger" size="mini" @click="delRule(i)"></el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<div style="margin-left: 100px;">
|
||
<el-button type="text" icon="el-icon-circle-plus-outline" @click="addRule">新增规则</el-button>
|
||
<el-button type="primary" @click="submit"> 确 定 </el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { updateConfig, getConfig } from '@/api/activity/msg'
|
||
export default {
|
||
name: 'Hongbao',
|
||
data() {
|
||
return {
|
||
form: {
|
||
enabled: true,
|
||
interval: 600,
|
||
dailyLimit: 200,
|
||
rule: []
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
isLastRuleAvailable() {
|
||
if (!this.form.rule || !this.form.rule.length) return true
|
||
const lastRule = this.form.rule[this.form.rule.length - 1]
|
||
return lastRule.interval && lastRule.min && lastRule.max
|
||
}
|
||
},
|
||
mounted() {
|
||
this.init()
|
||
},
|
||
methods: {
|
||
async init() {
|
||
const res = await getConfig()
|
||
this.form = res.data
|
||
this.form.dailyLimit = res.data.dailyLimit || 0
|
||
if (this.form.rule) {
|
||
this.form.rule = this.form.rule.map(v => ({ ...v, min: v.min, max: v.max }))
|
||
}
|
||
},
|
||
async submit() {
|
||
if (!this.isLastRuleAvailable) {
|
||
this.$message.error('请完善最后一项规则或者删除')
|
||
return
|
||
}
|
||
const form = {
|
||
...this.form,
|
||
dailyLimit: this.form.dailyLimit
|
||
}
|
||
if (this.form.rule) {
|
||
form.rule = this.form.rule.map(v => ({ ...v, min: v.min , max: v.max }))
|
||
}
|
||
await updateConfig(form)
|
||
this.$message.success('修改成功')
|
||
},
|
||
addRule() {
|
||
if (!this.isLastRuleAvailable) {
|
||
this.$message.error('请先完善上一项规则')
|
||
return
|
||
}
|
||
const rule = {
|
||
min: null,
|
||
max: null,
|
||
interval: null
|
||
}
|
||
this.form.rule = this.form.rule || []
|
||
this.form.rule.push(rule)
|
||
},
|
||
delRule(i) {
|
||
this.form.rule.splice(i, 1)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.hongbao-bg {
|
||
height: 80vh;
|
||
background-color: #fff;
|
||
padding: 50px 100px;
|
||
}
|
||
</style>
|