oil-station/fuintAdmin/src/views/integral/settings/index.vue
2024-08-16 18:26:19 +08:00

458 lines
16 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>