This commit is contained in:
cun-nan 2024-08-31 13:51:23 +08:00
parent 7fba30453d
commit 3051492756
5 changed files with 423 additions and 4 deletions

View File

@ -1264,7 +1264,7 @@ export default {
})
},
listUserGrade() {
listUserGrade().then(res => {
listUserGrade({page:1,pageSize:1000}).then(res => {
if (res.code == 200) {
this.userGradeList = res.data.records
}

View File

@ -188,7 +188,7 @@
<div class="nr-bottom">
<div class="left-bt">进行中1个</div>
|
<div class="right-bt" @click="routerPush(12)" >创建活动</div>
<div class="right-bt" @click="goOtherPage(12)" >创建活动</div>
</div>
</div>
</div>
@ -453,6 +453,15 @@ export default {
});
// this.$router.push('/EventMarketing/openCardGift/index')
},
//
goOtherPage(id){
if (id==12){
this.$router.push({
path: '/userGrade/index',
query: { id: id }
});
}
},
gobox(id){
if(id == 1){
this.$router.push('/EventMarketing/activeConsumption/index')

View File

@ -0,0 +1,403 @@
<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="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动时间" prop="activityTimeType">
<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="dieselUserLevel">
<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="dieselUserLevel">
<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">随机满减:订单满足规则时只优惠一次且金额随机:满100元立减5-8订单金额是210元则优惠在5-8元范围内随机生成</div>
<div style="color: grey;font-size: 11px">每满:订单满足规则时按规则优患多次:每满100元立减5元活动订单金额是210元则按每满优惠减10元</div>
</el-form-item>
<el-form-item label="适用会员等级" prop="dieselUserLevel">
<el-select v-model="ruleForm.dieselUserLevel" multiple 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="userLabelIds">
<el-select v-model="ruleForm.userLabelIds" multiple 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="everyDayCeiling">
<el-input v-model="ruleForm.everyDayCeiling"></el-input>
<span style="color: grey;font-size: 12px">每个会员每天限制参与的次数0标识不限</span>
</el-form-item>
<el-form-item label="每人每月参与上限" prop="monthlyCeiling">
<el-input v-model="ruleForm.monthlyCeiling"></el-input>
<span style="color: grey;font-size: 12px">每个会员每月限制参与的次数0标识不限</span>
</el-form-item>
<el-form-item label="每人累计参与上限" prop="accumulateCeiling">
<el-input v-model="ruleForm.accumulateCeiling"></el-input>
<span style="color: grey;font-size: 12px">每个会员累计限制参与的次数0标识不限</span>
</el-form-item>
</div>
<div style="width: 50%">
<el-form-item label="适用时间段" prop="suitTimeSlotType">
<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="suitTimeSlotFront">
<el-time-picker
v-model="ruleForm.suitTimeSlotFront"
format="HH:mm"
value-format="HH:mm"
placeholder="请选择开始时间点">
</el-time-picker>
<el-time-picker
v-model="ruleForm.suitTimeSlotAfter"
format="HH:mm"
value-format="HH:mm"
placeholder="请选择结束时间点">
</el-time-picker>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="适用油品油号" prop="activityTimeType">
<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.dieselUserLevel" multiple clearable placeholder="请选择油品油号(多选)">
<el-option
v-for="(item,index) in userGradeList"
:label="item.name"
:value="item.id.toString()"
:key="index"></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="activeGift">
<el-checkbox-group v-model="ruleForm.activeGift">
<div style="display: flex;font-size: 14px;margin: 15px 0">
<el-checkbox label="按订单金额" 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()">
</div>
<div v-for="(item,index) in pointList" :key="index" style="font-size: 14px;margin: 15px 0">
<span>订单金额满</span>
<el-input placeholder="请输入" style="width: 30%;margin: 0 10px" v-model="item.consumeAmount">
<template slot="append"></template>
</el-input>
<span>固定优惠</span>
<el-input placeholder="请输入" style="width: 30%;margin: 0 10px" v-model="item.givePoints">
<template slot="append"></template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deletePoints(index)">
</div>
<div style="display: flex;font-size: 14px;margin: 15px 0">
<el-checkbox label="按加油升数" 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()">
</div>
<div v-for="(item,index) in growthValueList" :key="index" style="font-size: 14px;margin: 15px 0">
<span>加油升数满</span>
<el-input placeholder="请输入" style="width: 30%;margin: 0 10px" v-model="item.consumeAmount">
<template slot="append">L</template>
</el-input>
<span>固定优惠</span>
<el-input placeholder="请输入" style="width: 30%;margin: 0 10px"
v-model="item.giveGrowthValue">
<template slot="append"></template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;"
@click="deleteGrowthValues(index)">
</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";
export default {
name: "LiJianMarketing",
dicts: ['payment_type'],
data() {
return {
ruleForm: {
paymentType:[],
activeGift:[],
activityTimeType:0,
suitTimeSlotType:0,
},
userGradeList:[],
userLabelList:[],
activityTimeTypeList: ["永久有效", "自定义"],
tindex1: 0,
preferentialTypeList: ["立减优惠", "折扣优惠"],
tindex2: 0,
weekMonthTypeList: ["每周", "每月"],
tindex3: 0,
oilTypeList:['不限','自定义'],
tindex4:0,
activityTypeList:['固定满减','随机满减','每满'],
tindex5:0,
weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
weekDay: [],
monthDay: [],
pointList: [],
growthValueList: [],
//
rules: {
name: [
{required: true, message: '活动名称不能为空', trigger: 'blur'},
],
activityTimeType: [
{required: true, message: '活动时间不能为空', trigger: 'blur'},
],
suitTimeSlotFront: [
{required: true, message: '时间段不能为空', trigger: 'blur'},
],
dieselUserLevel: [
{required: true, message: '适用会员等级不能为空', trigger: 'blur'},
],
paymentType: [
{required: true, message: '可使用支付方式不能为空', trigger: 'blur'},
],
everyDayCeiling: [
{required: true, message: '每人每天参与上限不能为空', trigger: 'blur'},
],
monthlyCeiling: [
{required: true, message: '每人每月参与上限不能为空', trigger: 'blur'},
],
accumulateCeiling: [
{required: true, message: '每人累计参与上限不能为空', trigger: 'blur'},
],
noticeContent: [
{required: true, message: '通知内容不能为空', trigger: 'blur'},
],
activityDetails: [
{required: true, message: '活动详情不能为空', trigger: 'blur'},
],
}
}
},
created() {
//
this.getInfo()
this.listUserGrade()
this.getUserLabelList()
},
methods:{
//
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(){
},
addPoints() {
let data = {
consumeAmount: "",
givePoints: "",
}
this.pointList.push(data)
},
deletePoints(index) {
this.pointList.splice(index, 1);
},
addGrowthValues() {
let data = {
consumeAmount: "",
giveGrowthValue: "",
}
this.growthValueList.push(data)
},
deleteGrowthValues(index) {
this.growthValueList.splice(index, 1);
},
Typeindex1(index) {
this.tindex1 = index
this.ruleForm.activityTimeType = index
},
Typeindex2(index) {
this.tindex2 = index
this.ruleForm.suitTimeSlotType = index
},
Typeindex3(index) {
this.tindex3 = index
this.ruleForm.suitTimeSlotType = index
},
Typeindex4(index) {
this.tindex4 = index
},
Typeindex5(index) {
this.tindex5 = 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.id) {
//
} else {
//
}
}
});
},
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>

View File

@ -6,6 +6,7 @@
<separate v-show="id == 9" ></separate>
<TimeLimited v-show="id == 10"></TimeLimited>
<liJianMarketing v-show="id == 11"></liJianMarketing>
</div>
</template>
@ -18,6 +19,8 @@ import activeConsumption from '../../EventMarketing/activeConsumption/index.vu
import separate from './separate.vue'
//
import TimeLimited from './TimeLimited.vue'
//
import liJianMarketing from "@/views/EventMarketing/liJianMarketing/index.vue";
export default {
data() {
@ -38,8 +41,9 @@ export default {
//
separate,
//
TimeLimited
TimeLimited,
//
liJianMarketing
},
methods: {

View File

@ -1261,6 +1261,9 @@ export default {
this.getClearConfig();
this.getRule();
this.getISEnableLevel();
if (this.$route.query.id){
this.getindex(2)
}
},
methods: {
addlsit() {