oil-station/fuintAdmin/src/views/EventMarketing/liJianMarketing/index.vue
2024-09-04 17:32:58 +08:00

625 lines
27 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">
<div class="cot-box">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
<div style="display: flex">
<div style="width: 50%">
<el-form-item label="活动名称" prop="activeName">
<el-input v-model="ruleForm.activeName"></el-input>
</el-form-item>
<el-form-item label="活动时间" prop="activeTimeType">
<div class="d-s">
<div class="icon-type" v-for="(item,index) in activityTimeTypeList" :key="index"
:class="{ 'acvtive' : index === tindex1 }" @click="Typeindex1(index)">
<img src="@/assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex1">
<img src="@/assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex1">
{{ item }}
</div>
<el-date-picker
v-model="ruleForm.activeStartTime"
style="width: 160px"
type="date"
value-format="yyyy-MM-dd"
placeholder="开始日期">
</el-date-picker>
<span style="margin: 0 5px">至</span>
<el-date-picker
v-model="ruleForm.activeEndTime"
style="width: 160px"
type="date"
value-format="yyyy-MM-dd"
placeholder="结束日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="优惠类型" prop="offerType">
<div class="d-s">
<div class="icon-type" v-for="(item,index) in preferentialTypeList" :key="index"
:class="{ 'acvtive' : index === tindex2 }" @click="Typeindex2(index)">
<img src="@/assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex2">
<img src="@/assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex2">
{{ item }}
</div>
</div>
<span style="color: grey;font-size: 12px">例如:立减优惠满100立减2元;折扣优惠满200享受95折</span>
</el-form-item>
<el-form-item label="活动类型" prop="activeType">
<div class="d-s">
<div class="icon-type" v-for="(item,index) in activityTypeList" :key="index"
:class="{ 'acvtive' : index === tindex5 }" @click="Typeindex5(index)">
<img src="@/assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex5">
<img src="@/assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex5">
{{ item }}
</div>
</div>
<div style="color: grey;font-size: 11px">
固定满减:订单满足规则时,只优惠一次且金额固定。如:满100元立减5元订单金额是210元则优惠减5元。
</div>
<div style="color: grey;font-size: 11px" v-if="ruleForm.offerType==0">
随机满减:订单满足规则时,只优惠一次且金额随机。如:满100元立减5-8元订单金额是210元则优惠在5-8元范围内随机生成。
</div>
<div style="color: grey;font-size: 11px" v-if="ruleForm.offerType==0">
每满:订单满足规则时,按规则优患多次。如:每满100元立减5元活动订单金额是210元则按每满优惠减10元。
</div>
</el-form-item>
<el-form-item label="适用会员等级" prop="levelId">
<el-select v-model="ruleForm.levelId" clearable placeholder="请选择会员等级">
<el-option
v-for="(item,index) in userGradeList"
:label="item.name"
:value="item.id.toString()"
:key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="会员标签" prop="babelIds">
<el-select v-model="ruleForm.babelIds" clearable placeholder="请选择会员标签">
<el-option
v-for="item in userLabelList"
:key="item.id+''"
:label="item.labelName"
:value="item.id+''"></el-option>
</el-select>
</el-form-item>
<el-form-item label="每人每天参与上限" prop="dayLimitNum">
<el-input v-model="ruleForm.dayLimitNum"></el-input>
<span style="color: grey;font-size: 12px">每个会员每天限制参与的次数0标识不限</span>
</el-form-item>
<el-form-item label="每人每月参与上限" prop="monthLimitNum">
<el-input v-model="ruleForm.monthLimitNum"></el-input>
<span style="color: grey;font-size: 12px">每个会员每月限制参与的次数0标识不限</span>
</el-form-item>
<el-form-item label="每人累计参与上限" prop="limitNum">
<el-input v-model="ruleForm.limitNum"></el-input>
<span style="color: grey;font-size: 12px">每个会员累计限制参与的次数0标识不限</span>
</el-form-item>
</div>
<div style="width: 50%">
<el-form-item label="适用时间段" prop="timeType">
<div>
<div class="icon-type" v-for="(item,index) in weekMonthTypeList" :key="index"
:class="{ 'acvtive' : index === tindex3 }" @click="Typeindex3(index)">
<img src="@/assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex3">
<img src="@/assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex3">
{{ item }}
<el-checkbox-group v-model="weekDay" v-if="item=='每周'" style="margin-left: 20px"
:disabled="tindex3!=0">
<el-checkbox v-for="(item,index) in weekList" :key="index" :label="item"></el-checkbox>
</el-checkbox-group>
<el-select v-model="monthDay" placeholder="请选择每月固定日期" multiple v-if="item=='每月'"
:disabled="tindex3!=1"
style="margin-left: 20px">
<el-option
v-for="item in 31"
:key="item.value"
:label="item+'日'"
:value="item">
</el-option>
</el-select>
</div>
</div>
<div style="margin-top: 20px">
<el-form-item label="时间段" prop="timeApplyStart">
<el-time-picker
v-model="ruleForm.timeApplyStart"
format="HH:mm"
value-format="HH:mm"
placeholder="请选择开始时间点">
</el-time-picker>
<el-time-picker
v-model="ruleForm.timeApplyEnd"
format="HH:mm"
value-format="HH:mm"
placeholder="请选择结束时间点">
</el-time-picker>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="适用油品油号" prop="applyOilType">
<div class="d-s">
<div class="icon-type" v-for="(item,index) in oilTypeList" :key="index"
:class="{ 'acvtive' : index === tindex4 }" @click="Typeindex4(index)">
<img src="@/assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex4">
<img src="@/assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex4">
{{ item }}
</div>
<el-select v-model="ruleForm.applyOil" multiple clearable placeholder="请选择油品油号(多选)">
<el-option v-for="(item,index) in oilNumberList" :key="index"
:label="getOilNamess(oilNameList,item.oilName)" :value="item.oilName"></el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label="可使用支付方式" prop="paymentType">
<el-checkbox-group v-model="ruleForm.paymentType">
<el-checkbox
v-for="dict in dict.type.payment_type"
v-if="dict.value!='APPLET_CODE'"
:key="dict.value"
:label="dict.label"
:value="dict.value"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="活动方式" prop="activeManner">
<el-checkbox-group v-model="ruleForm.activeManner">
<div style="display: flex;font-size: 14px;margin: 15px 0">
<el-checkbox label="0" name="type">按订单金额</el-checkbox>
<img src="@/assets/images/tjb.png"
style="width: 20px;height: 20px;cursor: pointer;margin-top: 7px;margin-left: 10px"
@click="addPoints(0)">
</div>
<div v-if="ruleForm.offerType == 0 && ruleForm.activeType == 0">
<div v-for="(item,index) in orderList" :key="index" style="font-size: 14px;margin: 15px 0">
<span>订单金额满</span>
<el-input placeholder="请输入" style="width: 30%;margin: 0 10px" v-model="item.full">
<template slot="append">元</template>
</el-input>
<span>固定优惠</span>
<el-input placeholder="请输入" style="width: 30%;margin: 0 10px" v-model="item.sub">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deletePoints(index)">
</div>
</div>
<div v-if="ruleForm.offerType == 0 && ruleForm.activeType == 1">
<div v-for="(item,index) in orderList" :key="index" style="font-size: 14px;margin: 15px 0">
<span>订单金额满</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.full">
<template slot="append">元</template>
</el-input>
<span>随机优惠</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.randomFront">
<template slot="append">元</template>
</el-input>
<span>至</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.randomAfter">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deletePoints(index)">
</div>
</div>
<div v-if="ruleForm.offerType == 0 && ruleForm.activeType == 2">
<div v-for="(item,index) in orderList" :key="index" style="font-size: 14px;margin: 15px 0">
<span>订单金额每满</span>
<el-input placeholder="请输入" style="width: 19%;margin: 0 10px" v-model="item.full">
<template slot="append">元</template>
</el-input>
<span>固定优惠</span>
<el-input placeholder="请输入" style="width: 19%;margin: 0 10px" v-model="item.sub">
<template slot="append">元</template>
</el-input>
<span>最大优惠</span>
<el-input placeholder="请输入" style="width: 19%;margin: 0 10px" v-model="item.maxPreferential">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deletePoints(index)">
</div>
</div>
<div v-if="ruleForm.offerType == 1 && ruleForm.activeType == 0">
<div v-for="(item,index) in orderList" :key="index" style="font-size: 14px;margin: 15px 0">
<span>订单金额满</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.full">
<template slot="append">元</template>
</el-input>
<span>享受折扣</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.enjoyDiscount">
<template slot="append">折</template>
</el-input>
<span>最大优惠</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.maxPreferential">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deletePoints(index)">
</div>
</div>
<div style="display: flex;font-size: 14px;margin: 15px 0">
<el-checkbox label="1" name="type">按加油升数</el-checkbox>
<img src="@/assets/images/tjb.png"
style="width: 20px;height: 20px;cursor: pointer;margin-top: 7px;margin-left: 10px"
@click="addGrowthValues(1)">
</div>
<div v-if="ruleForm.offerType == 0 && ruleForm.activeType == 0">
<div v-for="(item,index) in refuelList" :key="index" style="font-size: 14px;margin: 15px 0">
<span>加油升数满</span>
<el-input placeholder="请输入" style="width: 30%;margin: 0 10px" v-model="item.full">
<template slot="append">L</template>
</el-input>
<span>固定优惠</span>
<el-input placeholder="请输入" style="width: 30%;margin: 0 10px"
v-model="item.sub">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deleteGrowthValues(index)">
</div>
</div>
<div v-if="ruleForm.offerType == 0 && ruleForm.activeType == 1">
<div v-for="(item,index) in refuelList" :key="index" style="font-size: 14px;margin: 15px 0">
<span>加油升数满</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.full">
<template slot="append">L</template>
</el-input>
<span>随机优惠</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px"
v-model="item.randomFront">
<template slot="append">元</template>
</el-input>
<span>至</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px"
v-model="item.randomAfter">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deleteGrowthValues(index)">
</div>
</div>
<div v-if="ruleForm.offerType == 0 && ruleForm.activeType == 2">
<div v-for="(item,index) in refuelList" :key="index" style="font-size: 14px;margin: 15px 0">
<span>加油升数每满</span>
<el-input placeholder="请输入" style="width: 19%;margin: 0 10px" v-model="item.full">
<template slot="append">L</template>
</el-input>
<span>固定优惠</span>
<el-input placeholder="请输入" style="width: 19%;margin: 0 10px"
v-model="item.sub">
<template slot="append">元</template>
</el-input>
<span>最大优惠</span>
<el-input placeholder="请输入" style="width: 19%;margin: 0 10px"
v-model="item.maxPreferential">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deleteGrowthValues(index)">
</div>
</div>
<div v-if="ruleForm.offerType == 1 && ruleForm.activeType == 0">
<div v-for="(item,index) in refuelList" :key="index" style="font-size: 14px;margin: 15px 0">
<span>加油升数满</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px" v-model="item.full">
<template slot="append">L</template>
</el-input>
<span>享受折扣</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px"
v-model="item.enjoyDiscount">
<template slot="append">折</template>
</el-input>
<span>最大优惠</span>
<el-input placeholder="请输入" style="width: 20%;margin: 0 10px"
v-model="item.maxPreferential">
<template slot="append">元</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deleteGrowthValues(index)">
</div>
</div>
</el-checkbox-group>
</el-form-item>
</div>
</div>
<el-form-item style="text-align: center">
<el-button @click="resetForm('ruleForm')">取消</el-button>
<el-button type="primary" @click="submitRuleForm('ruleForm')">保存</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import {listUserLabel} from "@/api/staff/user/userlabel";
import {listUserGrade} from "@/api/staff/user/usergrade";
import {getOilNameList, oilNumberList} from "@/api/order/oilnumgun";
import {addActiveSubPrice, editActiveSubPrice, getActiveSubPrice} from "@/api/EventMarketing/activeSubPrice";
export default {
name: "LiJianMarketing",
dicts: ['payment_type'],
data() {
return {
ruleForm: {
activeTimeType: 0,
paymentType: [],
activeManner: [],
offerType: 0,
activeType: 0,
timeType: 0,
applyOilType: 0,
},
userGradeList: [],
userLabelList: [],
oilNameList: [],
// 油号列表
oilNumberList: [],
activityTimeTypeList: ["永久有效", "自定义"],
tindex1: 0,
preferentialTypeList: ["立减优惠", "折扣优惠"],
tindex2: 0,
weekMonthTypeList: ["每周", "每月"],
tindex3: 0,
oilTypeList: ['不限', '自定义'],
tindex4: 0,
activityTypeList: ['固定满减', '随机满减', '每满'],
tindex5: 0,
weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
weekDay: [],
monthDay: [],
orderList: [],
refuelList: [],
// 表单校验
rules: {
activeName: [
{required: true, message: '活动名称不能为空', trigger: 'blur'},
],
activeTimeType: [
{required: true, message: '活动时间不能为空', trigger: 'blur'},
],
offerType: [
{required: true, message: '优惠类型不能为空', trigger: 'blur'},
],
levelId: [
{required: true, message: '适用会员等级不能为空', trigger: 'blur'},
],
dayLimitNum: [
{required: true, message: '每人每天参与上限不能为空', trigger: 'blur'},
],
monthLimitNum: [
{required: true, message: '每人每月参与上限不能为空', trigger: 'blur'},
],
limitNum: [
{required: true, message: '每人累计参与上限不能为空', trigger: 'blur'},
],
applyOilType: [
{required: true, message: '适用油品油号不能为空', trigger: 'blur'},
],
paymentType: [
{required: true, message: '可使用支付方式不能为空', trigger: 'blur'},
],
activeManner: [
{required: true, message: '活动方式不能为空', trigger: 'blur'},
],
}
}
},
created() {
// 查询信息
this.getInfo()
this.listUserGrade()
this.getUserLabelList()
this.getOilList()
},
methods: {
getOilList() {
getOilNameList().then(response => {
this.oilNameList = response.data;
})
oilNumberList().then(response => {
this.oilNumberList = response.data.records;
})
},
getOilNamess(list, id) {
let name = ""
if (list != null && list != "") {
list.forEach(item => {
if (item.id == id) {
name = item.oilName;
}
})
}
return name;
},
// 会员等级
listUserGrade() {
listUserGrade({page: 1, pageSize: 1000}).then(res => {
if (res.code == 200) {
this.userGradeList = res.data.records
}
})
},
// 会员标签
getUserLabelList() {
listUserLabel({page: 1, pageSize: 10000}).then(res => {
this.userLabelList = res.data.records
})
},
getInfo() {
getActiveSubPrice().then(res => {
if (res.data) {
this.ruleForm = res.data
if (res.data.timeSlots) {
if (res.data.timeType == 0) {
this.weekDay = this.ruleForm.timeSlots.split(",")
} else if (res.data.timeType == 1) {
this.monthDay = this.ruleForm.timeSlots.split(",")
}
}
if (res.data.applyOil) this.ruleForm.applyOil = res.data.applyOil.split(",")
if (res.data.paymentType) this.ruleForm.paymentType = res.data.paymentType.split(",")
if (res.data.activeManner) this.ruleForm.activeManner = res.data.activeManner.split(",")
if (res.data.orderList) this.orderList = this.ruleForm.orderList
if (res.data.refuelList) this.refuelList = this.ruleForm.refuelList
} else {
this.ruleForm = {
activeTimeType: 0,
paymentType: [],
activeManner: [],
offerType: 0,
activeType: 0,
timeType: 0,
applyOilType: 0,
}
this.tindex1 = 0
this.tindex2 = 0
this.tindex3 = 0
this.tindex4 = 0
this.tindex5 = 0
}
})
},
addPoints(activeManner) {
let data = {
activeManner: activeManner,
full: "",
sub: "",
randomFront: "",
randomAfter: "",
maxPreferential: "",
enjoyDiscount: "",
}
this.orderList.push(data)
},
deletePoints(index) {
this.orderList.splice(index, 1);
},
addGrowthValues(activeManner) {
let data = {
activeManner: activeManner,
full: "",
sub: "",
randomFront: "",
randomAfter: "",
maxPreferential: "",
enjoyDiscount: "",
}
this.refuelList.push(data)
},
deleteGrowthValues(index) {
this.refuelList.splice(index, 1);
},
Typeindex1(index) {
this.tindex1 = index
this.ruleForm.activeTimeType = index
},
Typeindex2(index) {
this.tindex2 = index
this.ruleForm.offerType = index
if (index == 0) {
this.activityTypeList = ['固定满减', '随机满减', '每满']
} else {
this.activityTypeList = ['固定满减']
}
this.tindex5 = 0
this.orderList = []
this.refuelList = []
},
Typeindex3(index) {
this.tindex3 = index
this.ruleForm.timeType = index
},
Typeindex4(index) {
this.tindex4 = index
this.ruleForm.applyOilType = index
},
Typeindex5(index) {
this.tindex5 = index
this.ruleForm.activeType = index
},
submitRuleForm(formName) {
if (this.tindex1 == 1) {
if (!this.ruleForm.activeStartTime || !this.ruleForm.activeEndTime) {
this.$message.error("请选择活动开始时间")
return
}
}
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.ruleForm.timeType == 0) {
this.ruleForm.timeSlots = this.weekDay.toString()
} else if (this.ruleForm.timeType == 1) {
this.ruleForm.timeSlots = this.monthDay.toString()
}
if (this.ruleForm.applyOil) this.ruleForm.applyOil = this.ruleForm.applyOil.toString()
if (this.ruleForm.paymentType) this.ruleForm.paymentType = this.ruleForm.paymentType.toString()
if (this.ruleForm.activeManner) this.ruleForm.activeManner = this.ruleForm.activeManner.toString()
if (this.orderList) this.ruleForm.orderList = this.orderList
if (this.refuelList) this.ruleForm.refuelList = this.refuelList
if (this.ruleForm.id) {
// 修改
editActiveSubPrice(this.ruleForm).then(res => {
this.$message.success("修改成功")
this.getInfo()
})
} else {
// 添加
addActiveSubPrice(this.ruleForm).then(res => {
if (res.data) {
this.$message.success("添加成功")
this.getInfo()
} else {
this.$message.error("添加失败")
}
})
}
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.getInfo()
},
}
}
</script>
<style lang="scss" scoped>
.cot-box {
width: 100%;
border-radius: 8px;
background: #fff;
box-sizing: border-box;
padding: 20px;
margin: 0 auto;
}
.d-s {
display: flex;
align-items: center;
}
.icon-type {
display: flex;
align-items: center;
font-weight: 400;
font-size: 14px;
color: #999999;
margin-right: 20px;
cursor: pointer;
}
.acvtive {
color: #FF770F !important;
}
</style>