545 lines
14 KiB
Vue
545 lines
14 KiB
Vue
<template>
|
||
<div class="app-conr">
|
||
<div class="tab-box">
|
||
<div class="f-box" v-for="(item,index) in tablist" :key="index" @click="activeindex=index"
|
||
:class="{ 'active' :activeindex==index}">{{ item.name }}
|
||
</div>
|
||
</div>
|
||
<div class="cor">
|
||
<div class="bai-box" v-if="activeindex == 0">
|
||
|
||
<div class="qizhi">
|
||
<div class="left-icon">i</div>
|
||
<div>
|
||
<div class="bigsize">每日积分签到</div>
|
||
<div class="smallsize">签到规则为连续签到、如中途漏签一天将重置从第一天开始</div>
|
||
</div>
|
||
</div>
|
||
<el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">
|
||
<el-row :gutter="24">
|
||
<el-col :span="15">
|
||
<el-form-item label="签到功能" prop="signInFunction">
|
||
<el-radio-group v-model="dataForm.signInFunction">
|
||
<el-radio :label='0'>启用</el-radio>
|
||
<el-radio :label='1'>禁用</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="15">
|
||
<el-form-item label="适用规则" prop="">
|
||
<el-radio-group v-model="dataForm.signApplicableRules" @input="applicableRules()">
|
||
<el-radio :label='0'>不限制</el-radio>
|
||
<el-radio :label='1'>按签到周期</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-select v-model="value" placeholder="请选择" @change="cycle()">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-col>
|
||
</el-row>
|
||
<div style="width: 100%; padding-left: 70px">
|
||
|
||
<el-form-item style="" v-for="(item,index) in dataForm.pointsObtained" :key="index"
|
||
:prop="'pointsObtained' + index" :label="item.day">
|
||
<el-input v-model.number="item.integral" placeholder="请输入赠送积分">
|
||
<template slot="append">积分</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
</div>
|
||
|
||
<el-form-item label="签到规则" prop="signInRules">
|
||
<el-input :rows="3" style="width: 1300px;" type="textarea" v-model="dataForm.signInRules"></el-input>
|
||
</el-form-item>
|
||
|
||
|
||
</el-form>
|
||
<div style="width: 1600px; margin-top: 150px; display: flex;justify-content: center ">
|
||
<el-button type="primary" @click="submit">保存</el-button>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="bai-box" v-else>
|
||
<el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">
|
||
<el-form-item label="积分说明" prop="desc" style="width: 100%;margin-right: 0px ">
|
||
<el-input type="textarea" :rows="8" v-model="dataForm.pointsRules" style="width: 1550px"></el-input>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
<div style="width: 1600px; margin-top: 150px; display: flex;justify-content: center ">
|
||
<el-button type="primary" @click="submit">保存</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {getSettingsApi, updateSettingsApi} from "@/api/integral/settings";
|
||
import editor from '@/components/Editor/index'
|
||
|
||
export default {
|
||
name: "index",
|
||
// components: {Editor},
|
||
|
||
data() {
|
||
var valiNumberPass = (rule, value, callback) => {//包含小数的数字
|
||
parseFloat(value).toFixed(2)
|
||
let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
|
||
if (value === '') {
|
||
callback(new Error('请输入内容'));
|
||
} else if (!reg.test(value)) {
|
||
callback(new Error('请输入数字'));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
return {
|
||
tablist: [
|
||
{
|
||
name: '每日签到',
|
||
},
|
||
{
|
||
name: '积分规则',
|
||
},
|
||
|
||
],
|
||
activeindex: 0,
|
||
activeName: 'first',
|
||
|
||
|
||
rules: {
|
||
desc: [
|
||
{required: true, message: '不能为空', trigger: 'blur'}
|
||
],
|
||
refuelPointsRules: [
|
||
{required: true, message: '请选择积分规则', trigger: 'change'}
|
||
],
|
||
refuelSceneType: [
|
||
{required: true, message: '请选择场景类型', trigger: 'change'}
|
||
],
|
||
refuelAmountType: [
|
||
{required: true, message: '请选择金额类型', trigger: 'change'}
|
||
],
|
||
refuelValueParticipation: [
|
||
{required: true, message: '请选择储值参与', trigger: 'change'}
|
||
],
|
||
refuelSceneRules: [
|
||
{required: true, message: '请选择场景规则', trigger: 'change'}
|
||
],
|
||
refuelFuelAmount: [
|
||
{required: true, validator: valiNumberPass, trigger: "blur"}
|
||
],
|
||
refuelPoints: [
|
||
{required: true, message: '输入积分', trigger: "blur"},
|
||
{type: 'number', message: '积分必须为数字值'}
|
||
],
|
||
// amount:[
|
||
// {required: true,
|
||
// validator: (rule, value, callback) => this.valiNumberPass(rule, value, callback, 'amount'),
|
||
// trigger: 'blur'
|
||
// }
|
||
// ],
|
||
|
||
rechargeGive: [
|
||
{required: true, message: '输入积分', trigger: "blur"},
|
||
{type: 'number', message: '积分必须为数字值'}
|
||
],
|
||
// points: [
|
||
// { required: true}
|
||
// ],
|
||
},
|
||
dataForm: {
|
||
// 积分设置ID
|
||
id: null,
|
||
// 加油积分规则
|
||
refuelPointsRules: 0,
|
||
// 加油积分功能
|
||
refuelPointsFunction: 0,
|
||
// 加油场景类型
|
||
refuelSceneType: 0,
|
||
// 加油金额类型
|
||
refuelAmountType: 0,
|
||
// 加油储值参与
|
||
refuelValueParticipation: 0,
|
||
// 加油场景规则
|
||
refuelSceneRules: 0,
|
||
// 加油消费金额
|
||
refuelConsumptionAmount: '',
|
||
// 加油积分
|
||
refuelPoints: 0,
|
||
// 加油油品金额
|
||
refuelFuelAmount: 0.0,
|
||
// 加油油品升数
|
||
refuelFuelVolume: 0.0,
|
||
// 充值赠送
|
||
rechargeGive: 0,
|
||
// 邀请赠送
|
||
inviteGive: 0,
|
||
// 邀请赠送规则
|
||
inviteGiveRules: '',
|
||
// 签到功能
|
||
signInFunction: 0,
|
||
// 签到规则
|
||
signInRules: '',
|
||
//适用规则
|
||
signApplicableRules: 0,
|
||
// 签到周期
|
||
signInCycle: 0,
|
||
// 签到获得
|
||
pointsObtained: [
|
||
{
|
||
day: '第1天获得',
|
||
integral: 0,
|
||
},
|
||
{
|
||
day: '第2天获得',
|
||
integral: 0,
|
||
},
|
||
{
|
||
day: '第3天获得',
|
||
integral: 0,
|
||
},
|
||
{
|
||
day: '第4天获得',
|
||
integral: 0,
|
||
},
|
||
{
|
||
day: '第5天获得',
|
||
integral: 0,
|
||
},
|
||
{
|
||
day: '第6天获得',
|
||
integral: 0,
|
||
},
|
||
{
|
||
day: '第7天获得',
|
||
integral: 0,
|
||
},
|
||
{
|
||
day: '超8天获得',
|
||
integral: 0,
|
||
}
|
||
],
|
||
|
||
// 积分规则
|
||
pointsRules: ''
|
||
|
||
},
|
||
options: [{
|
||
value: 0,
|
||
label: '一周'
|
||
}, {
|
||
value: 1,
|
||
label: '两周'
|
||
}, {
|
||
value: 2,
|
||
label: '一个月'
|
||
}],
|
||
value: ''
|
||
|
||
|
||
}
|
||
},
|
||
created() {
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
handleChildValue(value) {
|
||
console.log("vale", value)
|
||
this.dataForm.pointsRules = value
|
||
},
|
||
applicableRules() {
|
||
if (this.dataForm.signApplicableRules == 0) {
|
||
this.value = '',
|
||
this.dataForm.pointsObtained = [
|
||
{
|
||
day: '每天获得',
|
||
integral: 0,
|
||
}]
|
||
} else if (this.dataForm.signApplicableRules == 1) {
|
||
this.value = 0
|
||
this.getRules(7)
|
||
}
|
||
},
|
||
cycle() {
|
||
if (this.value == 0) {
|
||
this.getRules(7)
|
||
} else if (this.value == 1) {
|
||
this.getRules(14)
|
||
} else if (this.value == 2) {
|
||
this.getRules(30)
|
||
}
|
||
},
|
||
getRules(length){
|
||
this.dataForm.pointsObtained = []
|
||
for (let i = 0; i < length; i++) {
|
||
let obj = {
|
||
day: '第' + (i + 1) + '天获得',
|
||
integral: 0,
|
||
}
|
||
this.dataForm.pointsObtained.push(obj)
|
||
}
|
||
},
|
||
|
||
|
||
getData() {
|
||
let file = this.dataForm
|
||
file.pointsObtained = JSON.stringify(file.pointsObtained);
|
||
file.refuelConsumptionAmount = JSON.stringify(file.refuelConsumptionAmount);
|
||
|
||
|
||
console.log("第一个this.dataForm", this.dataForm)
|
||
getSettingsApi(this.dataForm).then(res => {
|
||
this.dataForm = res.data
|
||
this.dataForm.pointsObtained = JSON.parse(this.dataForm.pointsObtained)
|
||
this.dataForm.refuelConsumptionAmount = JSON.parse(res.data.refuelConsumptionAmount)
|
||
if (this.dataForm.signCycle == 3) {
|
||
this.value = ''
|
||
}else {
|
||
this.value = this.dataForm.signCycle
|
||
}
|
||
})
|
||
console.log("dataForm", this.dataForm)
|
||
},
|
||
submit() {
|
||
let file = this.dataForm
|
||
// console.log()
|
||
file.pointsObtained = JSON.stringify(file.pointsObtained);
|
||
file.refuelConsumptionAmount = JSON.stringify(file.refuelConsumptionAmount);
|
||
file.signCycle = this.value
|
||
this.dataForm = {}
|
||
if (this.value === '') {
|
||
file.signCycle = 3
|
||
}
|
||
console.log("file", file)
|
||
updateSettingsApi(file).then(res => {
|
||
this.$modal.msgSuccess("添加成功");
|
||
this.dataForm = {}
|
||
res.data.pointsObtained = JSON.parse(res.data.pointsObtained)
|
||
res.data.refuelConsumptionAmount = JSON.parse(res.data.refuelConsumptionAmount)
|
||
this.dataForm = res.data
|
||
this.dataForm.signApplicableRules = res.data.signApplicableRules
|
||
console.log("res.data", res.data)
|
||
}).catch(res => {
|
||
this.$modal.msgSuccess("添加失败");
|
||
|
||
})
|
||
// this.dataForm= {
|
||
// // 积分设置ID
|
||
// id: null,
|
||
// // 加油积分规则
|
||
// refuelPointsRules: 0,
|
||
// // 加油积分功能
|
||
// refuelPointsFunction: 0,
|
||
// // 加油场景类型
|
||
// refuelSceneType: 0,
|
||
// // 加油金额类型
|
||
// refuelAmountType: 0,
|
||
// // 加油储值参与
|
||
// refuelValueParticipation: 0,
|
||
// // 加油场景规则
|
||
// refuelSceneRules: 0,
|
||
// // 加油消费金额
|
||
// refuelConsumptionAmount: '',
|
||
// // 加油积分
|
||
// refuelPoints: 0,
|
||
// // 加油油品金额
|
||
// refuelFuelAmount: 0.0,
|
||
// // 加油油品升数
|
||
// refuelFuelVolume: 0.0,
|
||
// // 充值赠送
|
||
// rechargeGive: 0,
|
||
// // 邀请赠送
|
||
// inviteGive: 0,
|
||
// // 邀请赠送规则
|
||
// inviteGiveRules: '',
|
||
// // 签到功能
|
||
// signInFunction: 0,
|
||
// // 签到规则
|
||
// signInRules: '',
|
||
// //适用规则
|
||
// signApplicableRules: 0,
|
||
// // 签到周期
|
||
// signInCycle: 0,
|
||
// // 签到获得
|
||
// pointsObtained: [
|
||
// {
|
||
// day: '第1天获得',
|
||
// integral: 0,
|
||
// },
|
||
// {
|
||
// day: '第2天获得',
|
||
// integral: 0,
|
||
// },
|
||
// {
|
||
// day: '第3天获得',
|
||
// integral: 0,
|
||
// },
|
||
// {
|
||
// day: '第4天获得',
|
||
// integral: 0,
|
||
// },
|
||
// {
|
||
// day: '第5天获得',
|
||
// integral: 0,
|
||
// },
|
||
// {
|
||
// day: '第6天获得',
|
||
// integral: 0,
|
||
// },
|
||
// {
|
||
// day: '第7天获得',
|
||
// integral: 0,
|
||
// },
|
||
// {
|
||
// day: '超8天获得',
|
||
// integral: 0,
|
||
// }
|
||
// ],
|
||
//
|
||
// // 积分规则
|
||
// pointsRules: ''
|
||
//
|
||
// }
|
||
// this.getData()
|
||
|
||
},
|
||
cancel() {
|
||
},
|
||
handleClick(tab, event) {
|
||
console.log(tab, event);
|
||
}
|
||
}
|
||
,
|
||
|
||
valiNumberPass(rule, value, callback, fieldName)
|
||
{
|
||
this.$nextTick(() => {
|
||
// 在这里进行自定义验证逻辑，value 应该在这时候被正确设置
|
||
console.log(`Validating ${fieldName}:`, value);
|
||
});
|
||
}
|
||
,
|
||
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
.app-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #f6f8f9;
|
||
}
|
||
|
||
.conten-bottom {
|
||
box-sizing: border-box;
|
||
padding: 20px 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.cardbox {
|
||
margin-right: 20px;
|
||
margin-bottom: 20px;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
width: 23%;
|
||
height: 150px;
|
||
background-size: 40% 70%;
|
||
background-color: #f9f9f9;
|
||
border: 1px solid rgb(196, 196, 196)
|
||
}
|
||
|
||
.tab-box {
|
||
width: 100%;
|
||
background: #fff;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
padding: 0px 50px;
|
||
}
|
||
|
||
.f-box {
|
||
height: 40px;
|
||
color: #999999;
|
||
margin-right: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
}
|
||
|
||
.active {
|
||
color: #FF9655 !important;
|
||
border-bottom: 2px solid #FF9655 !important;
|
||
}
|
||
|
||
.container {
|
||
background: #F4F5F9;
|
||
box-sizing: border-box;
|
||
//padding: 20px;
|
||
}
|
||
|
||
.tabder-box {
|
||
width: 85%;
|
||
}
|
||
|
||
.cor {
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
background: #f9f9f9;
|
||
|
||
}
|
||
|
||
.bai-box {
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
height: 85vh;
|
||
}
|
||
|
||
.qizhi {
|
||
width: 100%;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
color: #FF9655;
|
||
font-size: 16px;
|
||
background: rgba(255, 150, 85, 0.15);
|
||
align-items: center;
|
||
display: flex;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.left-icon {
|
||
width: 45px;
|
||
height: 45px;
|
||
border-radius: 50%;
|
||
background: #FF9655;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
margin-right: 25px;
|
||
}
|
||
|
||
.bigsize {
|
||
font-size: 24px;
|
||
margin-bottom: 15px;
|
||
}
|
||
</style>
|