<template>
|
<!--
|
作者：luoyiming
|
时间：2020-06-04
|
描述：插件中心-签到有礼-签到设置
|
-->
|
<div>
|
<el-form size="small" :model="form" :rules="rules" ref="ruleForm" label-width="100px">
|
<div class="open-sign">
|
<span class="gray9">是否开启签到有礼</span>
|
<el-switch v-model="form.is_open" class="ml10"></el-switch>
|
</div>
|
<div v-if="form.is_open" class="mt16">
|
<!--每日签到固定奖励-->
|
<div class="common-form">每日签到固定奖励</div>
|
|
<el-form-item label="每日签到送" prop="ever_sign">
|
<div class="max-w460 d-s-c">
|
<div class="flex-1">
|
<el-input v-model="form.ever_sign" placeholder="0" type="number"></el-input>
|
</div>
|
<span class="ml10">积分</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="递增奖励">
|
<el-radio v-model="form.is_increase" :label="true">有</el-radio>
|
<el-radio v-model="form.is_increase" :label="false">无</el-radio>
|
<div v-if="form.is_increase" class="max-w460 border p-0-20 pt16 mt10">
|
<el-form-item label="第二天起递增奖励" label-width="120px" prop="increase_reward">
|
<div class="d-s-c">
|
<div class="flex-1">
|
<el-input v-model="form.increase_reward" placeholder="请输入第二天起递增积分数" min="0" type="number"></el-input>
|
</div>
|
<span class="ml10">积分</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="第" label-width="120px" prop="no_increase">
|
<div class="d-s-c">
|
<div class="flex-1">
|
<el-input v-model="form.no_increase" placeholder="请输入第几天不再递增" min="0" type="number"></el-input>
|
</div>
|
<span class="ml10">天起不再递增</span>
|
</div>
|
</el-form-item>
|
</div>
|
</el-form-item>
|
<!--连续签到额外奖励-->
|
<div class="common-form">连续签到额外奖励 （达到额外奖励最大天数时，继续签到不会再获得额外奖励，断签后重新开始计算）</div>
|
<el-form-item label="额外奖励">
|
<div class="reward-list max-w460">
|
<div class="reward-item pr border" v-for="(item, reward_index) in form.reward_data" :key="reward_index">
|
<el-button class="delete-reward" @click="deleteRewardClick(reward_index)" type="danger" size="small" icon="el-icon-close"
|
circle></el-button>
|
<el-form-item label="连续签到" :prop="'reward_data.' + reward_index + '.day'" :rules="rules.day">
|
<div class="d-s-c">
|
<div class="flex-1">
|
<el-input v-model="item.day" placeholder="请输入连续签到天数" class="max-w460" type="number" min="0"></el-input>
|
</div>
|
<span class="ml10 pr16">天</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="积分奖励">
|
<div class="d-s-c">
|
<div>
|
<el-checkbox v-model="item.is_point"></el-checkbox>
|
</div>
|
<div v-if="item.is_point">
|
<el-form-item label="送" label-width="40px" :prop="'reward_data.' + reward_index + '.point'" :rules="rules.point"
|
style="margin-bottom: 0;">
|
<div class="d-s-c">
|
<div class="flex-1">
|
<el-input v-model="item.point" placeholder="请输入连续签到天数的积分" type="number" min="0"></el-input>
|
</div>
|
<span class="ml10 pr16">积分</span>
|
</div>
|
</el-form-item>
|
</div>
|
</div>
|
</el-form-item>
|
</div>
|
</div>
|
<el-button size="small" icon="el-icon-plus" @click="addReward">添加</el-button>
|
</el-form-item>
|
<!--规则-->
|
<div class="common-form">规则</div>
|
<el-form-item label="规则说明：">
|
<div class="edit_container">
|
<Uediter v-if="!loading" :text="ueditor.text" :config="ueditor.config" ref="ue"></Uediter>
|
</div>
|
</el-form-item>
|
</div>
|
<!--提交-->
|
<div class="common-button-wrapper">
|
<el-button type="primary" size="small" @click="onSubmit" :disabled="loading">提交</el-button>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
<script>
|
import SignApi from '@/api/sign.js';
|
import Uediter from '@/components/UE.vue';
|
export default {
|
components: {
|
/*编辑器*/
|
Uediter
|
},
|
data() {
|
/*判断额外奖励*/
|
let validate_reward_data = (rule, value, callback) => {
|
if (value.length < 1) {
|
callback(new Error('请添加至少一项额外奖励！'));
|
} else {
|
callback();
|
}
|
};
|
|
/*连续签到天数*/
|
let validate_day = (rule, value, callback) => {
|
if (this.form.reward_data.lenght < 1) {
|
callback();
|
} else {
|
if (value === '') {
|
callback(new Error('天数不能为空！'));
|
}
|
callback();
|
}
|
};
|
|
/*连续签到天数的积分数*/
|
let validate_point = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请输入连续签到积分数！'));
|
} else {
|
callback();
|
}
|
};
|
|
return {
|
/*富文本配置*/
|
ueditor: {
|
text: '',
|
config: {
|
initialFrameWidth: 400,
|
initialFrameHeight: 500
|
}
|
},
|
/*表单数据对象*/
|
form: {
|
is_open: false,
|
is_increase: false,
|
increase_reward: 0,
|
no_increase: 0,
|
ever_sign: 0,
|
reward_data: [],
|
content: ''
|
},
|
/*是否正在加载*/
|
loading: true,
|
/*验证规则*/
|
rules: {
|
/*每日签到*/
|
ever_sign: [{
|
required: true,
|
message: '每日签到送积分有误',
|
trigger: 'blur'
|
}],
|
/*第二天起递增*/
|
increase_reward: [{
|
required: true,
|
message: '请输入第二天起递增积分数',
|
trigger: 'blur'
|
}],
|
/*第几天不再递增*/
|
no_increase: [{
|
required: true,
|
message: '请输入第几天不再递增',
|
trigger: 'blur'
|
}],
|
/*连续签到额外奖励*/
|
reward_data: [{
|
validator: validate_reward_data,
|
required: true,
|
trigger: 'blur'
|
}],
|
/*连续签到*/
|
day: [{
|
validator: validate_day,
|
required: true,
|
trigger: 'blur'
|
}],
|
/*连续签到积分数*/
|
point: [{
|
validator: validate_point,
|
required: true,
|
trigger: 'blur'
|
}]
|
}
|
};
|
},
|
created() {
|
/*获取列表*/
|
this.getData();
|
},
|
methods: {
|
/*获取列表*/
|
getData() {
|
let self = this;
|
self.loading = true;
|
SignApi.getData()
|
.then(data => {
|
self.loading = false;
|
let val = data.data.vars.values;
|
self.form.content = val.content;
|
self.ueditor.text = val.content;
|
self.form.is_increase = val.is_increase;
|
self.form.is_open = val.is_open;
|
self.form.increase_reward = val.increase_reward;
|
self.form.no_increase = val.no_increase;
|
self.form.ever_sign = val.ever_sign;
|
if (val.reward_data) {
|
let len = val.reward_data.length;
|
for (let i = 0; i < len; i++) {
|
let item = val.reward_data[i];
|
if (item.is_coupon == true) {
|
item.is_coupon = true;
|
} else {
|
item.is_coupon = false;
|
}
|
if (item.is_point == true) {
|
item.is_point = true;
|
} else {
|
item.is_point = false;
|
}
|
}
|
self.form.reward_data = val.reward_data;
|
}
|
})
|
.catch(error => {});
|
},
|
|
/*提交签到有礼*/
|
onSubmit() {
|
let self = this;
|
let params = self.form;
|
if (params.is_open) {
|
params.content = self.getContent();
|
}
|
self.loading = true;
|
self.$refs.ruleForm.validate(valid => {
|
if (valid) {
|
SignApi.saveData(params, true)
|
.then(data => {
|
self.$message({
|
message: '恭喜你，保存成功',
|
type: 'success'
|
});
|
self.getData();
|
})
|
.catch(error => {});
|
}
|
});
|
},
|
|
/*获取富文本编辑器的内容*/
|
getContent: function() {
|
return this.$refs.ue.getUEContent();
|
},
|
|
/*添加奖励*/
|
addReward() {
|
let obj = {
|
day: 0,
|
is_point: false,
|
point: 0,
|
is_coupon: false,
|
coupon: []
|
};
|
this.form.reward_data.push(obj);
|
},
|
|
/*删除奖励*/
|
deleteRewardClick(e) {
|
this.form.reward_data.splice(e, 1);
|
}
|
}
|
};
|
</script>
|
|
<style scoped="scoped">
|
.open-sign {
|
padding: 20px;
|
background: #e2f0ff;
|
}
|
|
.reward-list .reward-item {
|
margin-bottom: 10px;
|
padding: 20px 20px 0;
|
}
|
|
.reward-list .delete-reward {
|
position: absolute;
|
top: -10px;
|
right: -10px;
|
cursor: pointer;
|
z-index: 10;
|
}
|
|
.el-button--small.is-circle {
|
padding: 4px;
|
}
|
</style>
|
