oil-station/fuintAdmin/src/views/EventMarketing/activeNewlyweds/index.vue
2023-11-25 18:07:50 +08:00

837 lines
28 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 style="margin-bottom: 20px">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="活动名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入活动名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryParams.status" clearable placeholder="请选择活动状态">
<el-option label="启用" value="0"></el-option>
<el-option label="禁用" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="上线/下线">
<el-select v-model="queryParams.isonline" clearable placeholder="请选择是否上线">
<el-option label="上线" value="0"></el-option>
<el-option label="已下线" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card style="margin-bottom: 20px">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" :data="activeNewlywedsList" :label-position="labelPosition" @selection-change="handleSelectionChange">
<el-table-column
type="index"
align="center"
label="排序"
>
</el-table-column>
<el-table-column label="活动编号" align="center" prop="id" />
<el-table-column label="活动名称" align="center" prop="name" />
<el-table-column label="活动开始时间" align="center" prop="activeStartTime" width="180">
<template slot-scope="scope">
<span>{{scope.row.activeStartTime}}</span>
</template>
</el-table-column>
<el-table-column label="活动结束时间" align="center" prop="activeEndTime" width="180">
<template slot-scope="scope">
<span>{{scope.row.activeEndTime}}</span>
</template>
</el-table-column>
<el-table-column label="有礼奖励" align="center" prop="courtesyReward" >
<template slot-scope="scope">
<div v-for="(item,index) in scope.row.courtesyReward ">
<div v-if="item == 0" >优惠券</div>
<div v-if="item == 1">兑换券</div>
</div>
</template>
</el-table-column>
<el-table-column label="活动码" align="center" prop="activeCode" >
<template slot-scope="scope">
<div style="cursor: pointer" @click="qrcodelook(scope.row.activeCode)">
<i class="el-icon-picture" ></i>
</div>
</template>
</el-table-column>
<el-table-column label="活动状态" align="center" prop="status" >
<template slot-scope="scope">
<span v-if="scope.row.status == 0"> <el-tag>进行中</el-tag> </span>
<span v-if="scope.row.status == 1"> <el-tag type="success">待生效</el-tag> </span>
<span v-if="scope.row.status == 2"> <el-tag type="danger">已结束</el-tag> </span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDeletexia(scope.row)"
v-if="scope.row.isonline == 0"
>下线</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-card>
<!-- 添加或修改新人有礼活动对话框 -->
<el-dialog :title="title" :visible.sync="open" width="45%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" :label-position="labelPosition" label-width="110px">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name" placeholder="请输入活动名称" />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="活动开始时间" prop="activeStartTime">
<el-date-picker clearable
v-model="form.activeStartTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择活动开始时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="活动结束时间" prop="activeEndTime">
<el-date-picker clearable
v-model="form.activeEndTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择活动结束时间">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="有礼奖励" prop="courtesyReward" >
<el-checkbox-group v-model="form.courtesyReward">
<el-checkbox label="1" >赠送优惠券</el-checkbox>
<el-checkbox label="2" >赠送兑换券</el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- 选择优惠券-->
<div class="xh-box" v-if="form.courtesyReward && form.courtesyReward.indexOf('1')>-1 " >
<div class="box-bt"> <div >赠送卡券</div> <el-button type="primary" icon="el-icon-plus" @click="getlistFavorable()" >新增</el-button> </div>
<div style="margin: 10px 0px">
<el-table
:data="form.tableDatas"
border
style="width: 100%">
<el-table-column
prop="giftCardName"
label="卡券名称"
width="0">
</el-table-column>
<el-table-column
prop="giftCardType"
label="券类型"
width="80">
<template slot-scope="scope">
<span v-if="scope.row.giftCardType == 0" >油品券</span>
<span v-if="scope.row.giftCardType == 1" >商品券</span>
<span v-if="scope.row.giftCardType == 2" >通用券</span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="券详情"
width="80">
<template slot-scope="scope">
<span>{{scope.row.giftCardDetail}}</span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="有效期(天)"
width="240">
<template slot-scope="scope">
<span v-if="scope.row.timeType == 0" > <el-input-number v-model="scope.row.validityZero" controls-position="right" :min="1" :max="9999"></el-input-number>天 </span>
<span v-if="scope.row.timeType == 1" > <el-input-number v-model="scope.row.validityOne" controls-position="right" :min="1" :max="9999"></el-input-number>天 </span>
<span v-if="scope.row.timeType == 2" > <el-input-number v-model="scope.row.validityTwo" controls-position="right" :min="1" :max="9999"></el-input-number>天 </span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="数量"
width="240">
<template slot-scope="scope">
<el-input-number v-model="scope.row.giftCardTotal" controls-position="right" :min="1" :max="9999"></el-input-number>
</template>
</el-table-column>
<el-table-column
prop="address"
label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="deletedata(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 选择兑换券-->
<div class="xh-box" v-if="form.courtesyReward && form.courtesyReward.indexOf('2')>-1 " >
<div class="box-bt"> <div >选择兑换券</div> <el-button type="primary" icon="el-icon-plus" @click="getlistExchange()" >新增</el-button> </div>
<div style="margin: 10px 0px">
<el-table
:data="tableDatas"
border
style="width: 100%">
<el-table-column
prop="giftCardName"
label="卡券名称"
width="80">
</el-table-column>
<el-table-column
prop="date"
label="券类型"
width="80">
<template slot-scope="scope">
<span v-if="scope.row.giftCardType == 0" >油品券</span>
<span v-if="scope.row.giftCardType == 1" >商品券</span>
<span v-if="scope.row.giftCardType == 2" >通用券</span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="券详情"
width="80">
<template slot-scope="scope">
<span>{{scope.row.giftCardDetail}}</span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="有效期(天)"
width="240">
<template slot-scope="scope">
<span > <el-input-number v-model="scope.row.giftCardTime" controls-position="right" :min="1" :max="9999"></el-input-number>天 </span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="数量"
width="240">
<template slot-scope="scope">
<el-input-number v-model="scope.row.giftCardTotal" controls-position="right" :min="1" :max="9999"></el-input-number>
</template>
</el-table-column>
<el-table-column
prop="address"
label="操作"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="deletedhdata(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<el-form-item label="赠送积分" prop="points">
<el-input-number v-model="form.points" controls-position="right" :min="1" :max="99999"></el-input-number>
</el-form-item>
<el-form-item label="赠送成长值" prop="growthValue">
<el-input-number v-model="form.growthValue" controls-position="right" :min="1" :max="9999999"></el-input-number>
</el-form-item>
<el-form-item label="自定义规则" prop="remark">
<el-input v-model="form.remark" placeholder="请输入自定义规则" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 优惠券列表-->
<el-dialog title="优惠券列表" :visible.sync="dialogTableVisible">
<div style="display: flex;align-items: center; margin-bottom: 20px ">
<el-input v-model="youhuiquan.name" placeholder="优惠券名称"></el-input>
<el-button type="primary" icon="el-icon-search" @click="getlistFavorable" >搜索</el-button>
</div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="name"
label="卡券名称"
width="100">
</el-table-column>
<el-table-column
prop="date"
label="券类型"
width="100">
<template slot-scope="scope">
<span v-if="scope.row.type == 0" >油品券</span>
<span v-if="scope.row.type == 1" >商品券</span>
<span v-if="scope.row.type == 2" >通用券</span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="券详情"
width="100">
<template slot-scope="scope">
<span>满{{scope.row.fullDeduction}}减 {{scope.row.discountAmount}}元 </span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="有效期(天)"
width="180">
<template slot-scope="scope">
<span v-if="scope.row.timeType == 0" >{{scope.row.validityZero}}天 </span>
<span v-if="scope.row.timeType == 1" >{{scope.row.validityOne}}天 </span>
<span v-if="scope.row.timeType == 2" >{{scope.row.validityTwo}}天 </span>
</template>
</el-table-column>
<el-table-column
prop="address"
label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="chosedata(scope.row)"
>选择</el-button>
</template>
</el-table-column>
</el-table>
<div><pagination
v-show="ytotal>0"
:total="ytotal"
:page.sync="youhuiquan.pageNum"
:limit.sync="youhuiquan.pageSize"
@pagination="getlistFavorable"
/></div>
</el-dialog>
<!-- 兑换券列表-->
<el-dialog title="兑换券列表" :visible.sync="dialogTableVisibledh">
<div style="display: flex;align-items: center; margin-bottom: 20px ">
<el-input v-model="duihuanquan.name" placeholder="兑换券名称"></el-input>
<el-button type="primary" icon="el-icon-search" @click="getlistExchange" >搜索</el-button>
</div>
<el-table
:data="tableDatadh"
border
style="width: 100%">
<el-table-column
prop="name"
label="卡券名称"
width="100">
</el-table-column>
<el-table-column
prop="date"
label="券类型"
width="100">
<template slot-scope="scope">
<span v-if="scope.row.type == 0" >油品券</span>
<span v-if="scope.row.type == 1" >商品券</span>
<span v-if="scope.row.type == 2" >通用券</span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="使用说明"
width="100">
<template slot-scope="scope">
<span>{{scope.row.useInstructions}}</span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="有效期(天)"
width="180">
<template slot-scope="scope">
<span >{{scope.row.validity}}天 </span>
</template>
</el-table-column>
<el-table-column
prop="address"
label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="Favorabledata(scope.row)"
>选择</el-button>
</template>
</el-table-column>
</el-table>
<div><pagination
v-show="dtotal>0"
:total="dtotal"
:page.sync="duihuanquan.pageNum"
:limit.sync="duihuanquan.pageSize"
@pagination="getlistExchange"
/></div>
</el-dialog>
<el-dialog
title="二维码"
v-loading="loadingdialog"
:visible.sync="centerDialogVisible"
width="350px"
center>
<div style="display: flex;align-items: center">
<div class="qr-code" id="qrCode" ref="qrCodeUrl"></div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="centerDialogVisible = false"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { listActiveNewlyweds, getActiveNewlyweds, delActiveNewlyweds, addActiveNewlyweds, updateActiveNewlyweds } from "@/api/EventMarketing/activeNewlyweds";
import {getoilName, listExchange, listFavorable} from "@/api/EventMarketing/activeConsumption";
import QRCode from "qrcodejs2";
import {getActiveFullminus, updateActiveFullminus} from "@/api/EventMarketing/activeFullminus";
export default {
name: "ActiveNewlyweds",
data() {
return {
labelPosition:'left',
loadingdialog:false,
centerDialogVisible:false,
pdidlist:[],//判断优惠券id
pddhidlist:[],//判断兑换券id
tableData: [],//优惠券
tableDatadh:[],//兑换券
dialogTableVisible:false,//优惠券
dialogTableVisibledh:false,//兑换券
tableDatas:[],
//请求优惠券列表时的参数
youhuiquan:{
name:'',
pageNum: 1,
pageSize: 10,
},
ytotal:0,
//请求兑换券列表时的参数
duihuanquan:{
name:'',
pageNum: 1,
pageSize: 10,
total:0
},
dtotal:0,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 新人有礼活动表格数据
activeNewlywedsList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
chainStoreId: null,
storeId: null,
name: null,
activeStartTime: null,
activeEndTime: null,
courtesyReward: null,
activeCode: null,
isonline: null,
status: null,
remainderTotal: null,
points: null,
growthValue: null,
},
// 表单参数
form: {
tableDatas:[],
activeNewlywedsChildList:[],
},
// 表单校验
rules: {
name: [
{ required: true, message: '必填项不能为空', trigger: 'blur' },
],
activeStartTime: [
{ required: true, message: '必填项不能为空', trigger: 'blur' },
],
activeEndTime: [
{ required: true, message: '必填项不能为空', trigger: 'blur' },
],
courtesyReward: [
{ required: true, message: '必填项不能为空', trigger: 'blur' },
],
points: [
{ required: true, message: '必填项不能为空', trigger: 'blur' },
],
growthValue: [
{ required: true, message: '必填项不能为空', trigger: 'blur' },
],
remark: [
{ required: true, message: '必填项不能为空', trigger: 'blur' },
],
}
};
},
created() {
this.getList();
},
methods: {
/** 查询新人有礼活动列表 */
getList() {
this.loading = true;
listActiveNewlyweds(this.queryParams).then(response => {
this.activeNewlywedsList = response.data.records;
this.total = response.data.total;
this.loading = false;
});
},
getoilName(){
getoilName().then(res=>{
console.log(res)
this.oillist = res.data
})
},
qrcodelook(url) {
this.loadingdialog = true
this.centerDialogVisible = true
setTimeout(() => {
this.creatQrCode(url)
this.loadingdialog = false
}, 1000);
},
creatQrCode(url) {
document.getElementById("qrCode").innerHTML = ""
new QRCode(this.$refs.qrCodeUrl, {
text: url, // 二维码的内容
width: 300,
height: 300,
colorDark: '#000',
colorLight: '#fff',
correctLevel: QRCode.CorrectLevel.H
})
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
chainStoreId: null,
storeId: null,
name: null,
activeStartTime: null,
activeEndTime: null,
courtesyReward: [],
tableDatas:[],
activeNewlywedsChildList:[],
activeCode: null,
isonline: null,
status: null,
remainderTotal: null,
points: null,
growthValue: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.pdidlist = []
this.form.tableDatas = []
this.pddhidlist = []
this.tableDatas = []
this.resetForm("form");
},
// 请求兑换券
getlistExchange(){
this.tableDatadh = []
listExchange(this.duihuanquan).then(res=>{
if(res.code==200){
this.dialogTableVisibledh = true
this.tableDatadh = res.data.records
this.dtotal = res.data.total
}
})
},
// 请求优惠券
getlistFavorable(){
this.tableData = []
listFavorable(this.youhuiquan).then(res=>{
if(res.code == 200){
this.dialogTableVisible = true
this.tableData = res.data.records
this.ytotal = res.data.total
}
})
},
// 兑换券券列表选择
Favorabledata(row){
this.dialogTableVisibledh = false
if(this.pddhidlist.indexOf(row.id)>-1 ){
this.$message.error("该兑换卡券已存在")
return
}
this.pddhidlist.push(row.id)
console.log(row)
let data ={
activeGift: 2, //活动奖品 0赠送积分1赠送优惠券 2. 赠送兑换券 3赠送成长值 4. 赠送实物
goodsIds: "", //商品id
goodsName:"" , //商品名称
goodsTotal: "", //商品数量
vouchersId:row.id, //券id
giftCardName:row.name, //赠送卡券名称
giftCardType: row.type, //券类型
validityZero: null,
validityOne: null,
validityTwo:null,
validity:row.validity,
giftCardDetail: row.useInstructions , //券详情
giftCardTime: row.validity, //券有效期
giftCardTotal: 1 //券数量
}
this.tableDatas.push(data)
this.$message.success("新增成功")
},
// 优惠券列表选择
chosedata(row){
this.dialogTableVisible = false
if(this.pdidlist.indexOf(row.id)>-1 ){
this.$message.error("该优惠卡券已存在")
return
}
this.pdidlist.push(row.id)
let data ={
activeGift: 1, //活动奖品 0赠送积分1赠送优惠券 2. 赠送兑换券 3赠送成长值 4. 赠送实物
goodsIds: "", //商品id
goodsName:"" , //商品名称
goodsTotal: "", //商品数量
vouchersId:row.id, //券id
giftCardName:row.name, //赠送卡券名称
giftCardType: row.type, //券类型
timeType: row.timeType,
validityZero: row.validityZero,
validityOne: row.validityOne,
validityTwo:row.validityTwo,
giftCardDetail: "满"+ row.fullDeduction+"减 "+row.discountAmount+"元" , //券详情
giftCardTime: "", //券有效期
giftCardTotal: 1//券数量
}
this.form.tableDatas.push(data)
this.$message.success("新增成功")
},
// 优惠券删除
deletedata(row){
if(this.form.tableDatas&&this.form.tableDatas.length>0){
let delIdx=-1;
for ( let item of this.form.tableDatas) {
delIdx++;
if (item.id===row.id){
break
}
}
this.pdidlist.splice(delIdx,1);
this.form.tableDatas.splice(delIdx,1);
}
},
// 兑换券删除
deletedhdata(row){
if(this.tableDatas&&this.tableDatas.length>0){
let delIdx=-1;
for ( let item of this.tableDatas) {
delIdx++;
if (item.id===row.id){
break
}
}
this.pddhidlist.splice(delIdx,1);
this.tableDatas.splice(delIdx,1);
}
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加新人有礼活动";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getActiveNewlyweds(id).then(response => {
this.form = response.data;
this.form.tableDatas = response.data.activeNewlywedsChildList.filter(item => item.activeGift == '1')
this.tableDatas = response.data.activeNewlywedsChildList.filter(item => item.activeGift == '2')
this.open = true;
this.title = "修改新人有礼活动";
});
},
handleDeletexia(row){
getActiveNewlyweds(row.id).then(response => {
let data = response.data
data.isonline = 1
updateActiveNewlyweds(data).then(response => {
this.$modal.msgSuccess("下线成功");
this.open = false;
this.getList();
});
});
},
/** 提交按钮 */
submitForm() {
// this.form.activeNewlywedsChildList
this.form.activeNewlywedsChildList = this.form.tableDatas.concat(this.tableDatas);
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateActiveNewlyweds(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addActiveNewlyweds(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除新人有礼活动编号为"' + ids + '"的数据项?').then(function() {
return delActiveNewlyweds(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('business/marketingActivity/activeNewlyweds/export', {
...this.queryParams
}, `activeNewlyweds_${new Date().getTime()}.xlsx`)
}
}
};
</script>
<style scoped>
.box-bt{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
}
</style>