570 lines
19 KiB
Vue
570 lines
19 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<!-- 储值卡-->
|
|
<el-card style="margin-bottom: 20px">
|
|
<el-radio-group v-model="isonline" @input="getlist()">
|
|
<el-radio-button label="0">可用</el-radio-button>
|
|
<el-radio-button label="1">已下线</el-radio-button>
|
|
</el-radio-group>
|
|
</el-card>
|
|
<el-card style="margin-bottom: 20px">
|
|
<div style="margin-bottom: 10px">
|
|
<el-alert
|
|
title="当前配置为储值卡活动、按照升数锁价充值活动请在锁价活动列表配置,每个卡类型最多可创建50个充值活动
|
|
关于支付即储值功能说明: 功能按照档次大于等于用户实付金额的可充值档次进行处理,不符合规则的档次则无法进行充值"
|
|
type="info">
|
|
</el-alert>
|
|
</div>
|
|
<div style="margin: 10px 0px">
|
|
<el-button type="primary" icon="el-icon-plus" @click="addblock()">新增储值活动</el-button>
|
|
</div>
|
|
<el-table
|
|
:data="tableData"
|
|
align="center"
|
|
|
|
style="width: 100%">
|
|
|
|
<el-table-column
|
|
prop="groupOriented"
|
|
label="面向群体"
|
|
width="100">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.groupOriented == 1">普通群体</span>
|
|
<span v-if="scope.row.groupOriented == 2">等级会员</span>
|
|
</template>
|
|
|
|
</el-table-column>
|
|
<el-table-column label="活动信息">
|
|
<el-table-column
|
|
prop="rechargeBalance"
|
|
label="充值金额"
|
|
width="120">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="giftBalance"
|
|
label="赠送金额"
|
|
width="120">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="points"
|
|
label="赠送积分"
|
|
width="120">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="growthValue"
|
|
label="赠送成长值"
|
|
width="120">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="refuelMoney"
|
|
label="赠送加油金"
|
|
width="120">
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="activeTime"
|
|
label="活动时间"
|
|
width="200">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.activeTime == 1">不限时间</span>
|
|
<span v-if="scope.row.activeTime == 2">自定义时间</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="activeStatus"
|
|
label="活动进度"
|
|
width="100">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.activeStatus == 1"> <el-tag>启用</el-tag></span>
|
|
<span v-if="scope.row.activeStatus == 2"> <el-tag type="danger">禁用</el-tag></span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="paymentValue"
|
|
label="支付即充值"
|
|
width="100">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.paymentValue == 1"><el-tag>启用</el-tag></span>
|
|
<span v-if="scope.row.paymentValue == 2"><el-tag type="danger">禁用</el-tag></span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="activeStatus"
|
|
label="状态"
|
|
width="80">
|
|
<template slot-scope="scope">
|
|
<!-- <span v-if="scope.row.activeStatus == 1"> <el-tag>在用</el-tag> </span>-->
|
|
<!-- <span v-if="scope.row.activeStatus == 2"> <el-tag type="success">挂失</el-tag> </span>-->
|
|
<!-- <span v-if="scope.row.activeStatus == 3"> <el-tag type="danger">停用</el-tag> </span>-->
|
|
<el-switch
|
|
v-model="scope.row.status"
|
|
:active-value="'1'"
|
|
:inactive-value="'3'"
|
|
active-color="#409EFF"
|
|
inactive-color="#909399"
|
|
@change="posteid(scope.row)"
|
|
>
|
|
</el-switch>
|
|
</template>
|
|
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="participationNo"
|
|
label="参与次数"
|
|
width="100">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.participationNo == 0">不限制次数</span>
|
|
<span v-if="scope.row.participationNo != 0">{{scope.row.participationNo}} 次</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="sort"
|
|
label="排序"
|
|
width="100">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="updateTime"
|
|
label="更新时间"
|
|
width="120">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="date"
|
|
label="操作"
|
|
width="120">
|
|
<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="handleDelete(scope.row.id)"
|
|
>删除</el-button>
|
|
</template>
|
|
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination
|
|
v-show="total>0"
|
|
:total="total"
|
|
:page.sync="pageNo"
|
|
:limit.sync="pageSize"
|
|
@pagination="getlist"
|
|
/>
|
|
</el-card>
|
|
<el-drawer
|
|
title="添加-汽油卡"
|
|
:visible.sync="dialog"
|
|
size="50%"
|
|
ref="drawer"
|
|
>
|
|
<div class="demo-drawer__content">
|
|
<el-form :model="form" :rules="rules" :inline="true" >
|
|
<el-form-item label="面向群体" :label-width="formLabelWidth">
|
|
<el-radio-group v-model="form.groupOriented">
|
|
<el-radio :label="1">不限群体</el-radio>
|
|
<el-radio :label="2">会员等级</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="充值金额" :label-width="formLabelWidth" prop="rechargeBalance">
|
|
<el-input v-model="form.rechargeBalance" autocomplete="off">
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="赠送金额" :label-width="formLabelWidth" prop="name">
|
|
<el-input v-model="form.giftBalance" autocomplete="off">
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="赠送积分" :label-width="formLabelWidth" prop="name">
|
|
<el-input v-model="form.points" autocomplete="off">
|
|
<template slot="append">分</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="赠送成长值" :label-width="formLabelWidth" prop="name">
|
|
<el-input v-model="form.growthValue" autocomplete="off">
|
|
<template slot="append">成长值</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="赠送加油金" :label-width="formLabelWidth" prop="name">
|
|
<el-input v-model="form.refuelMoney" autocomplete="off">
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="赠送特权" :label-width="formLabelWidth" prop="name">
|
|
<el-radio-group v-model="form.resource">
|
|
<el-radio label="1">显示</el-radio>
|
|
<el-radio label="2">隐藏</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="参与次数" :label-width="formLabelWidth">
|
|
<el-input-number v-model="form.participationNo" controls-position="right" :min="1" :max="10"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="员工提成" :label-width="formLabelWidth" prop="name">
|
|
<el-radio-group v-model="form.employeeCommission">
|
|
<el-radio label="1">仅会员首次充值提成</el-radio>
|
|
<el-radio label="2">会员每次充值提成</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="提成类型" :label-width="formLabelWidth" prop="name">
|
|
<el-radio-group v-model="form.royaltyType">
|
|
<el-radio label="1">无</el-radio>
|
|
<el-radio label="2">按提成金额</el-radio>
|
|
<el-radio label="3">按充值金额*提成比例</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="提成金额" v-if="form.royaltyType == 2" :label-width="formLabelWidth" prop="name">
|
|
<el-input v-model="form.amountCommission" autocomplete="off">
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="提成比例" v-if="form.royaltyType == 3" :label-width="formLabelWidth" prop="name">
|
|
<el-input v-model="form.percentageCommissions" autocomplete="off">
|
|
<template slot="append">%</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="活动时间" :label-width="formLabelWidth" prop="name">
|
|
<el-radio-group v-model="form.activeTime">
|
|
<el-radio label="1">不限时间</el-radio>
|
|
<el-radio label="2">自定义时间</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="时间范围" v-if="form.activeTime == 2" :label-width="formLabelWidth" prop="name">
|
|
<el-date-picker
|
|
v-model="form.startTime"
|
|
type="date"
|
|
placeholder="开始日期">
|
|
</el-date-picker>
|
|
-
|
|
<el-date-picker
|
|
v-model="form.endTime"
|
|
type="date"
|
|
placeholder="结束日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="活动状态" :label-width="formLabelWidth" prop="name">
|
|
<el-radio-group v-model="form.activeStatus">
|
|
<el-radio label="1">启用</el-radio>
|
|
<el-radio label="2">禁用</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="支付储值" :label-width="formLabelWidth" prop="name">
|
|
<el-radio-group v-model="form.paymentValue">
|
|
<el-radio label="1">启用</el-radio>
|
|
<el-radio label="2">禁用</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="排序" :label-width="formLabelWidth" prop="name">
|
|
<el-input-number v-model="form.sort" controls-position="right" :min="1" :max="10"></el-input-number>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!-- 赠送卡券-->
|
|
<div class="box-popup">
|
|
<div class="dis-bit"><div>赠送卡券(选填)</div> <el-button type="primary" icon="el-icon-plus" round>添加卡券</el-button> </div>
|
|
<el-table
|
|
:data="tableDatas"
|
|
border
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="date"
|
|
label="卡券名称"
|
|
width="180">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="券类型"
|
|
width="180">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
label="券详情">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
label="有效期">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
label="赠送数量">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
label="操作">
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<!-- 附加特权-->
|
|
<div class="box-popup">
|
|
<div class="dis-bit">附加特权</div>
|
|
<el-input
|
|
type="textarea"
|
|
placeholder="请输入内容"
|
|
maxlength="225"
|
|
show-word-limit
|
|
>
|
|
</el-input>
|
|
</div>
|
|
<div class="demo-drawer__footer">
|
|
<el-button @click="cancelForm">取 消</el-button>
|
|
<el-button type="primary" @click="saveblockabb()" >确定</el-button>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getList,addList,eitList,deleteList } from "@/api/EventMarketing/SaveBlock";
|
|
export default {
|
|
name: 'index',
|
|
data(){
|
|
return{
|
|
isonline: '0',
|
|
dialog: false,
|
|
rules: {
|
|
rechargeBalance: [
|
|
{ required: true, message: '不能为空', trigger: 'blur' },
|
|
],
|
|
name: [
|
|
{ required: true, message: '不能为空', trigger: 'blur' },
|
|
],
|
|
},
|
|
form: {
|
|
sort:1,
|
|
groupOriented:1,
|
|
rechargeBalance:'',
|
|
giftBalance:'',
|
|
points:'',
|
|
growthValue:'',
|
|
refuelMoney:'',
|
|
participationNo:0,
|
|
employeeCommission:'1',
|
|
royaltyType:'1',
|
|
resource:'1',
|
|
activeTime:'1',
|
|
activeStatus:'1',
|
|
paymentValue:'1',
|
|
amountCommission:'',
|
|
percentageCommissions:'',
|
|
},
|
|
tableDatas: [],
|
|
formLabelWidth: '160px',
|
|
timer: null,
|
|
|
|
options: [
|
|
{
|
|
value: '选项1',
|
|
label: '黄金糕'
|
|
}, {
|
|
value: '选项2',
|
|
label: '双皮奶'
|
|
}, {
|
|
value: '选项3',
|
|
label: '蚵仔煎'
|
|
}, {
|
|
value: '选项4',
|
|
label: '龙须面'
|
|
}, {
|
|
value: '选项5',
|
|
label: '北京烤鸭'
|
|
}],
|
|
total:0,
|
|
pageNo:1,
|
|
pageSize:10,
|
|
value: '',
|
|
tableData: [
|
|
{
|
|
date: '2016-05-03',
|
|
name: '王小虎',
|
|
province: '上海',
|
|
city: '普陀区',
|
|
address: '上海市普陀区金沙江路 1518 弄',
|
|
zip: 200333
|
|
}, {
|
|
date: '2016-05-02',
|
|
name: '王小虎',
|
|
province: '上海',
|
|
city: '普陀区',
|
|
address: '上海市普陀区金沙江路 1518 弄',
|
|
zip: 200333
|
|
}, {
|
|
date: '2016-05-04',
|
|
name: '王小虎',
|
|
province: '上海',
|
|
city: '普陀区',
|
|
address: '上海市普陀区金沙江路 1518 弄',
|
|
zip: 200333
|
|
}, {
|
|
date: '2016-05-01',
|
|
name: '王小虎',
|
|
province: '上海',
|
|
city: '普陀区',
|
|
address: '上海市普陀区金沙江路 1518 弄',
|
|
zip: 200333
|
|
}, {
|
|
date: '2016-05-08',
|
|
name: '王小虎',
|
|
province: '上海',
|
|
city: '普陀区',
|
|
address: '上海市普陀区金沙江路 1518 弄',
|
|
zip: 200333
|
|
}, {
|
|
date: '2016-05-06',
|
|
name: '王小虎',
|
|
province: '上海',
|
|
city: '普陀区',
|
|
address: '上海市普陀区金沙江路 1518 弄',
|
|
zip: 200333
|
|
}, {
|
|
date: '2016-05-07',
|
|
name: '王小虎',
|
|
province: '上海',
|
|
city: '普陀区',
|
|
address: '上海市普陀区金沙江路 1518 弄',
|
|
zip: 200333
|
|
}]
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getlist()
|
|
},
|
|
methods:{
|
|
|
|
getlist(){
|
|
let data = {
|
|
isonline:this.isonline,
|
|
pageNo:this.pageNo,
|
|
pageSize:this.pageSize,
|
|
}
|
|
getList(data).then(res=>{
|
|
this.tableData = res.data.records
|
|
this.total = res.data.total;
|
|
})
|
|
},
|
|
handleUpdate(data){
|
|
console.log(data)
|
|
this.form = data
|
|
this.dialog = true
|
|
},
|
|
chongzhi(){
|
|
this.form = {
|
|
sort:1,
|
|
groupOriented:1,
|
|
rechargeBalance:'',
|
|
giftBalance:'',
|
|
points:'',
|
|
growthValue:'',
|
|
refuelMoney:'',
|
|
participationNo:0,
|
|
employeeCommission:'1',
|
|
royaltyType:'1',
|
|
resource:'1',
|
|
activeTime:'1',
|
|
activeStatus:'1',
|
|
paymentValue:'1',
|
|
}
|
|
console.log('归零')
|
|
},
|
|
addblock(){
|
|
this.chongzhi()
|
|
console.log(this.from)
|
|
this.dialog = true
|
|
},
|
|
posteid(data){
|
|
eitList(data).then(res=>{
|
|
if (res.code == 200){
|
|
this.$message({
|
|
message: '修改成功',
|
|
type: 'success'
|
|
});
|
|
this.getlist()
|
|
}else {
|
|
this.$message.error('修改失败');
|
|
}
|
|
})
|
|
},
|
|
handleDelete(id){
|
|
deleteList(id).then(res=>{
|
|
|
|
if (res.code == 200){
|
|
this.$message({
|
|
message: '删除成功',
|
|
type: 'success'
|
|
});
|
|
this.getlist()
|
|
}else {
|
|
this.$message.error('删除失败');
|
|
}
|
|
})
|
|
},
|
|
saveblockabb(){
|
|
if(this.form.id){
|
|
eitList(this.form).then(res=>{
|
|
if (res.code == 200){
|
|
this.$message({
|
|
message: '修改成功',
|
|
type: 'success'
|
|
});
|
|
this.getlist()
|
|
}else {
|
|
this.$message.error('修改失败');
|
|
}
|
|
})
|
|
}else{
|
|
addList(this.form).then(res=>{
|
|
if (res.code == 200){
|
|
this.$message({
|
|
message: '新增成功',
|
|
type: 'success'
|
|
});
|
|
this.getlist()
|
|
}else {
|
|
this.$message.error('新增失败');
|
|
}
|
|
})
|
|
|
|
}
|
|
this.dialog = false
|
|
this.chongzhi()
|
|
},
|
|
|
|
|
|
cancelForm() {
|
|
this.loading = false;
|
|
this.dialog = false;
|
|
clearTimeout(this.timer);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.demo-drawer__footer{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.box-popup{
|
|
width: 90%;
|
|
margin: 10px auto;
|
|
}
|
|
.dis-bit{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 15px;
|
|
}
|
|
</style>
|