458 lines
16 KiB
Vue
458 lines
16 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>积分设置</span>
|
||
</div>
|
||
<div>
|
||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||
<el-tab-pane label="加油返积分" name="first">
|
||
<div>
|
||
<el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">
|
||
<el-row>
|
||
<el-form-item label="积分规则" prop="refuelPointsRules" >
|
||
<el-radio-group v-model="dataForm.refuelPointsRules">
|
||
<el-radio :label='0'>默认规则</el-radio>
|
||
<el-radio :label='1'>积分活动规则</el-radio>
|
||
</el-radio-group>
|
||
<span style="display: block; width: 800px; color: rgb(128, 128, 128);font-size: 10px;">
|
||
默认规则:使用当前页面简版设置,适用于对积分规则要求不高的油站积分活动规则:积分获取按照积分活动(活动营销-积分活动)进行处理,积分活动功能可实现指定日期、指定油品、指定周、指定等级等使用不同积分规则</span>
|
||
</el-form-item>
|
||
</el-row>
|
||
<template v-if="dataForm.refuelPointsRules == 1">
|
||
<span style="color: red;border-left: 40px;padding-left: 100px;">请前往活动营销-积分活动页面创建积分规则</span>
|
||
</template>
|
||
<template v-if="dataForm.refuelPointsRules == 0">
|
||
<el-row>
|
||
<el-form-item label="积分功能" prop="refuelPointsFunction" >
|
||
<el-radio-group v-model="dataForm.refuelPointsFunction">
|
||
<el-radio :label='0'>启用</el-radio>
|
||
<el-radio :label='1'>禁用</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<el-form-item label="场景类型" prop="refuelSceneType" >
|
||
<el-radio-group v-model="dataForm.refuelSceneType">
|
||
<el-radio :label='0'>按金额</el-radio>
|
||
<el-radio :label='1'>实付金额</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-row>
|
||
|
||
<template v-if="dataForm.refuelSceneType == 0">
|
||
<el-row>
|
||
<el-form-item label="金额类型" prop="refuelAmountType" >
|
||
<el-radio-group v-model="dataForm.refuelAmountType">
|
||
<el-radio :label='0'>订单金额</el-radio>
|
||
<el-radio :label='1'>实付金额</el-radio>
|
||
</el-radio-group>
|
||
<span style="display: block; width: 800px; color: rgb(128, 128, 128);font-size: 10px;">
|
||
计算积分的金额类型 </span>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row v-if="dataForm.refuelAmountType == 1">
|
||
<el-form-item label="储值参与" prop="refuelValueParticipation" >
|
||
<el-radio-group v-model="dataForm.refuelValueParticipation">
|
||
<el-radio :label='0'>储值金额不参与</el-radio>
|
||
<el-radio :label='1'>储值金额参与</el-radio>
|
||
</el-radio-group>
|
||
<span style="display: block; width: 800px; color: rgb(128, 128, 128);font-size: 10px;">
|
||
按照实付金额计算积分,实付金额是否包含储值卡付款金额部分 如参与 则实付金额 = 储值金额+其它实际付款金额
|
||
</span>
|
||
</el-form-item>
|
||
</el-row>
|
||
</template>
|
||
|
||
<el-row>
|
||
<el-form-item label="场景规则" prop="refuelSceneRules" >
|
||
<el-radio-group v-model="dataForm.refuelSceneRules" @click="abc($event)">
|
||
<el-radio :label='0'>通用规则</el-radio>
|
||
<el-radio :label='1'>油品区分</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-row>
|
||
|
||
|
||
<template v-if="dataForm.refuelSceneRules == 0">
|
||
<el-row>
|
||
<el-form-item label="消费金额" prop="refuelFuelAmount" label-width="90px">
|
||
<el-input style="width: 500px;" v-model="dataForm.refuelFuelAmount" placeholder="？？？">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<el-form-item label="积多少分" prop="refuelPoints" label-width="90px">
|
||
<el-input style="width: 500px;" v-model.number="dataForm.refuelPoints" placeholder="？？？">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-row>
|
||
</template>
|
||
<template v-if="dataForm.refuelSceneRules == 1">
|
||
<div class="conten-bottom">
|
||
<div v-for="(item, index) in dataForm.refuelConsumptionAmount" class="cardbox">
|
||
<div style="height:40px; ">
|
||
<span>{{ item.oilName }}</span>
|
||
</div>
|
||
<div style=" width: 99%;height: 99%;">
|
||
<el-form-item label="消费金额" prop="amount" label-width="90px">
|
||
<el-input style="width: 200px;" v-model="item.amount" placeholder="？？？">
|
||
<!-- {{ item.amount }} -->
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="积多少分" prop="points" label-width="90px">
|
||
<el-input style="width: 200px;" v-model.number="item.integral" placeholder="？？？">
|
||
<!-- {{ parseInt(item.integral) }} -->
|
||
<template slot="append">积分</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
</template>
|
||
|
||
</el-form>
|
||
</div>
|
||
</el-tab-pane>
|
||
<!-- <el-tab-pane label="充值积分" name="second">
|
||
<div>
|
||
<el-alert
|
||
title="充值赠送积分详细规则请在充值活动对应规则内配置"
|
||
type="warning"
|
||
show-icon>
|
||
</el-alert>
|
||
<el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">
|
||
<el-row>
|
||
<el-form-item label="充值赠送" prop="rechargeGive" >
|
||
<el-radio-group v-model="dataForm.rechargeGive">
|
||
<el-radio :label='0'>启用</el-radio>
|
||
<el-radio :label='1'>禁用</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
</el-tab-pane> -->
|
||
<el-tab-pane label="邀请用户" name="third">
|
||
<div>
|
||
<el-alert
|
||
title="邀请用户为推荐有礼活动赠送积分规则、邀请新人后将获得的积分"
|
||
type="info"
|
||
show-icon>
|
||
</el-alert>
|
||
<el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">
|
||
<el-row>
|
||
<el-form-item label="邀请赠送" prop="inviteGive" >
|
||
<el-radio-group v-model="dataForm.inviteGive">
|
||
<el-radio :label='0'>启用</el-radio>
|
||
<el-radio :label='1'>禁用</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<el-form-item label="充值赠送" prop="rechargeGive" >
|
||
<el-input v-model.number="dataForm.rechargeGive" placeholder="？？？">
|
||
<template slot="prepend">每邀请一人赠送</template>
|
||
<template slot="append">积分</template>
|
||
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="每日签到" name="fourth">
|
||
<div>
|
||
<el-alert
|
||
title="每日积分签到"
|
||
type="info"
|
||
description="签到规则为连续签到、如中途漏签一天将重置从第一天开始"
|
||
show-icon>
|
||
</el-alert>
|
||
<el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">
|
||
|
||
<div style="width: 100%; margin-top: 20px;">
|
||
|
||
<el-form-item style="width: 24%" 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-row :gutter="24">
|
||
<el-col :span="23">
|
||
<el-form-item label="签到规则" prop="signInRules" >
|
||
<el-input style="width: 900px;" :rows="3" type="textarea" v-model="dataForm.signInRules"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<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-form>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="积分规则" name="five">
|
||
<div>
|
||
<el-form :model="dataForm" ref="dataForm" :rules="rules" size="small" :inline="true" label-width="100px">
|
||
<!-- <el-row> -->
|
||
<span style="margin-bottom: 20px;">积分说明</span>
|
||
<editor style="margin-top: 20px;" @input="handleChildValue" :value.default="dataForm.pointsRules" :height.default="500"></editor>
|
||
|
||
<!-- </el-row> -->
|
||
</el-form>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<div style="float: right;margin-top: 20px; margin-bottom: 20px;">
|
||
<el-button type="primary" @click="submit"
|
||
v-hasPermi="['integral:settings:index']"
|
||
|
||
>确 定</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</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 {
|
||
|
||
|
||
activeName: 'first',
|
||
|
||
|
||
rules:{
|
||
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: '',
|
||
// 签到获得
|
||
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: ''
|
||
|
||
},
|
||
|
||
|
||
|
||
}
|
||
},
|
||
created() {
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
handleChildValue(value) {
|
||
console.log("vale",value)
|
||
this.dataForm.pointsRules = value
|
||
},
|
||
|
||
|
||
getData() {
|
||
let file = this.dataForm
|
||
file.pointsObtained = JSON.stringify(file.pointsObtained);
|
||
file.refuelConsumptionAmount = JSON.stringify(file.refuelConsumptionAmount);
|
||
|
||
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)
|
||
})
|
||
},
|
||
submit() {
|
||
let file = this.dataForm
|
||
// console.log()
|
||
file.pointsObtained = JSON.stringify(file.pointsObtained);
|
||
file.refuelConsumptionAmount = JSON.stringify(file.refuelConsumptionAmount);
|
||
this.dataForm = {}
|
||
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
|
||
}).catch(res=>{
|
||
this.$modal.msgSuccess("添加失败");
|
||
|
||
})
|
||
// 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)
|
||
}
|
||
</style>
|