316 行
16 KiB
JavaScript
可执行文件
316 行
16 KiB
JavaScript
可执行文件
Vue.component('m-send-coupon', {
|
|
template: `<div v-if="showSendCoupon">
|
|
<!--选择发放类型-->
|
|
<el-dialog :append-to-body="true"
|
|
:visible.sync="showChooseGrantTypeDialog"
|
|
:close-on-click-modal="false"
|
|
:before-close="closeSend"
|
|
custom-class="customer-el-dialog__body"
|
|
width="600px">
|
|
<el-row :gutter="12" style="margin-top: 20px">
|
|
<el-col :span="12">
|
|
<el-card shadow="hover">
|
|
<div slot="header" style="text-align: center">
|
|
<div style="color: #aaa">将会投放给所有符合条件的会员</div>
|
|
</div>
|
|
<div style="text-align: center">
|
|
<el-button type="primary" @click="setGrantType(1)">批量投放</el-button>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-card shadow="hover">
|
|
<div slot="header" style="text-align: center">
|
|
<div style="color: #aaa">指定部分符合条件的会员进行投放</div>
|
|
</div>
|
|
<div style="text-align: center">
|
|
<el-button type="primary" @click="setGrantType(2)">指定投放</el-button>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</el-dialog>
|
|
|
|
<!--批量投放-->
|
|
<common-loading :show="showBatchSendDialog" :message="'发放中...'"></common-loading>
|
|
|
|
<!--指定会员投放-->
|
|
<el-dialog :append-to-body="true"
|
|
:visible.sync="showChooseVipDialog"
|
|
:close-on-click-modal="false"
|
|
title="指定会员投放"
|
|
:before-close="closeSend"
|
|
custom-class="customer-el-dialog__body"
|
|
top="5vh"
|
|
width="90%">
|
|
<el-scrollbar style="height: calc(100vh - 200px);padding-right: 8px">
|
|
<el-form label-width="100px" size="mini" style="padding-left: 20px;">
|
|
<el-form-item :label="(sendForm.batch_type==1?'优惠券':'券包')+'名称:'">
|
|
<template>{{ sendForm.name }}</template>
|
|
</el-form-item>
|
|
<el-form-item label="指定门店:">
|
|
<div style="display: flex;flex-wrap: wrap;">
|
|
<div v-for="val in store_list" class="store">{{ val }}</div>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="指定等级会员:">
|
|
<div style="display: flex;flex-wrap: wrap;">
|
|
<div v-for="val in grade_list" class="store">{{ val }}</div>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="指定会员:">
|
|
<div>
|
|
<el-input v-model="vipForm.search_info"
|
|
@keydown.enter.exact.native.prevent="getGrantVipList(1)"
|
|
placeholder="手机号/实体卡" size="mini" clearable
|
|
style="width: 200px;margin-right: 6px;">
|
|
<el-button slot="append" type="primary" icon="el-icon-search"
|
|
@click="vipPageChange(1)"></el-button>
|
|
</el-input>
|
|
</div>
|
|
<el-table border height="450"
|
|
:data="vipList"
|
|
size="small" :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
|
|
v-loading="loading"
|
|
@selection-change="chooseVipList">
|
|
<el-table-column align="center" type="selection" width="40" fixed="left"></el-table-column>
|
|
<el-table-column align="center" type="index" label="序号" width="50" fixed="left"></el-table-column>
|
|
<el-table-column align="center" prop="store_name" label="门店" min-width="100px"
|
|
show-overflow-tooltip></el-table-column>
|
|
<el-table-column align="center" prop="user_name" label="姓名|昵称" min-width="130px"
|
|
show-overflow-tooltip></el-table-column>
|
|
<el-table-column align="center" prop="vip_name" label="类型" min-width="80px"
|
|
show-overflow-tooltip></el-table-column>
|
|
<el-table-column align="center" prop="mobile_phone" label="手机号" min-width="110px"
|
|
show-overflow-tooltip></el-table-column>
|
|
<el-table-column align="center" prop="card_key" label="实体卡" min-width="100px"
|
|
show-overflow-tooltip></el-table-column>
|
|
<el-table-column align="center" prop="balance" label="余额" min-width="80px"
|
|
show-overflow-tooltip></el-table-column>
|
|
<el-table-column align="center" prop="integral" label="积分" min-width="80px"
|
|
show-overflow-tooltip></el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
@size-change="vipSizeChange"
|
|
@current-change="vipPageChange"
|
|
:current-page="vipForm.page"
|
|
:page-size="vipForm.limit"
|
|
:total="total"
|
|
:pager-count="5"
|
|
:page-sizes="[10,20,30,40,50,60,70,80,90,100]"
|
|
layout="total, sizes, prev, pager, next, jumper">
|
|
</el-pagination>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-scrollbar>
|
|
<div style="text-align: center;padding-top: 10px;border-top: 1px solid #DCDFE6;">
|
|
<el-button @click="closeSend" size="medium">关闭</el-button>
|
|
<el-button type="primary" :disabled="sendLoading" @click="appointPutIn" size="medium">
|
|
<span>发放</span>
|
|
<i v-if="sendLoading" class="el-icon-loading"></i>
|
|
</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
</div>`,
|
|
props: {
|
|
'showSendCoupon': {
|
|
type: Boolean,
|
|
default: false,
|
|
},//是否显示发放优惠券
|
|
'couponData': {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
},
|
|
},//发放的券信息
|
|
'storeId': {
|
|
type: String,
|
|
default: '',
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showChooseGrantTypeDialog: false,//是否显示选择发放类型
|
|
showBatchSendDialog: false,//是否显示批量发放弹框
|
|
showChooseVipDialog: false,//是否显示选择会员列表
|
|
sendForm: {},//优惠券发放条件
|
|
vipList: [], //会员列表
|
|
vipForm: {
|
|
search_info: '',
|
|
page: 1, //会员列表页码
|
|
limit: 10, //会员列表每页读取数量
|
|
},//会员列表搜索内容
|
|
store_list: [],//限制的门店名称列表
|
|
grade_list: [],//限制的会员等级列表
|
|
total: 0, //会员数据总条数
|
|
loading: false, //会员列表loading框显示状态
|
|
sendLoading: false, //投放按钮loading状态
|
|
}
|
|
},
|
|
methods: {
|
|
//取消投放
|
|
closeSend() {
|
|
this.showChooseGrantTypeDialog = false;
|
|
this.showChooseVipDialog = false;
|
|
this.showBatchSendDialog = false;
|
|
this.loading = false;
|
|
this.sendLoading = false;
|
|
this.sendForm = {};
|
|
this.vipList = [];
|
|
this.total = 0;
|
|
this.vipForm = {
|
|
search_info: '',
|
|
page: 1, //会员列表页码
|
|
limit: 10, //会员列表每页读取数量
|
|
};//会员列表搜索内容;
|
|
this.$emit('end');
|
|
},
|
|
//选择发放方式
|
|
setGrantType(grant_type) {
|
|
this.sendForm.grant_type = grant_type;
|
|
if (grant_type == 1) {
|
|
//开始批量投放
|
|
this.$confirm("批量投放将会根据优惠券剩余数量投放给会员，确认投放吗？", "温馨提示", {
|
|
confirmButtonText: '确定',
|
|
type: 'info'
|
|
}).then(() => {
|
|
this.appointPutIn();
|
|
this.showBatchSendDialog = true;
|
|
this.showChooseGrantTypeDialog = false;
|
|
}).catch(() => {
|
|
})
|
|
} else {
|
|
//获取优惠券、券包限制的门店和会员等级
|
|
this.getAppointList();
|
|
//获取优惠券、券包限制的会员列表
|
|
this.showChooseVipDialog = true;
|
|
this.vipPageChange(1);
|
|
this.showChooseGrantTypeDialog = false;
|
|
}
|
|
},
|
|
|
|
//确认投放
|
|
appointPutIn() {
|
|
this.sendLoading = true;
|
|
$.ajax({
|
|
url: '/index.php/Retail/' + (this.storeId ? 'StoreCoupon' : 'Mcoupon') + '/BatchGrantCoupon',
|
|
type: "post",
|
|
data: this.sendForm,
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
if (res.data.vip_count == this.sendForm.limit) {
|
|
this.sendForm.page++;
|
|
this.$nextTick(() => {
|
|
this.appointPutIn();
|
|
})
|
|
} else {
|
|
this.$message.success(res.message);
|
|
//批量投放结束则关闭投放
|
|
this.sendLoading = false;
|
|
if (this.sendForm.grant_type == 1) this.closeSend();
|
|
}
|
|
} else {
|
|
this.$message.error(res.message);
|
|
this.sendLoading = false;
|
|
if (this.sendForm.grant_type == 1) this.closeSend();
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
//指定投放-选择会员
|
|
chooseVipList(data) {
|
|
let arr = [];
|
|
data.forEach((item) => {
|
|
arr.push(item.id);
|
|
});
|
|
this.sendForm.vip_id_arr = arr.join(',');
|
|
},
|
|
|
|
//指定投放-获取优惠券可使用的门店列表和会员等级列表
|
|
getAppointList() {
|
|
$.ajax({
|
|
url: '/index.php/Retail/' + (this.storeId ? 'StoreCoupon' : 'Mcoupon') + '/getAppointList',
|
|
type: "post",
|
|
data: {
|
|
id: this.sendForm.id,
|
|
coupon_type: this.sendForm.batch_type,
|
|
},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.store_list = res.data.store_list;
|
|
this.grade_list = res.data.grade_list;
|
|
} else {
|
|
this.store_list = res.data.store_list;
|
|
this.grade_list = res.data.grade_list;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
//指定投放-会员列表每页数量修改
|
|
vipSizeChange(val) {
|
|
this.vipForm.limit = val;
|
|
this.getGrantVipList();
|
|
},
|
|
|
|
//指定投放-会员列表页码修改
|
|
vipPageChange(val) {
|
|
this.vipForm.page = val;
|
|
this.getGrantVipList();
|
|
},
|
|
|
|
//指定投放-获取指定投放会员列表
|
|
getGrantVipList() {
|
|
this.loading = true;
|
|
$.ajax({
|
|
url: '/index.php/Retail/' + (this.storeId ? 'StoreCoupon' : 'Mcoupon') + '/getStoreGradeVipInfo',
|
|
type: "post",
|
|
data: {
|
|
coupon_type: this.sendForm.batch_type,
|
|
id: this.sendForm.id,
|
|
...this.vipForm,
|
|
},
|
|
success: (res) => {
|
|
this.loading = false;
|
|
if (res.status == 1) {
|
|
this.vipList = res.data.list;
|
|
this.total = res.data.count * 1;
|
|
} else {
|
|
this.vipList = [];
|
|
}
|
|
}
|
|
})
|
|
},
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
watch: {
|
|
couponData: {
|
|
deep: true,
|
|
handler(n, o) {
|
|
console.log(n, o);
|
|
this.sendForm = {
|
|
id: n.id, //优惠券或券包ID
|
|
name: n.name, //优惠券、券包名称
|
|
batch_type: n.batch_type, //1优惠券 2券包
|
|
grant_type: '', //1批量投放 2指定投放
|
|
vip_id_arr: '', //指定投放的会员ID字符串,号拼接集合
|
|
page: 1, //批量投放的页码
|
|
limit: 10, //批量投放时每页投放的会员数量
|
|
};
|
|
if (n.id > 0) {
|
|
this.$nextTick(() => {
|
|
this.showChooseGrantTypeDialog = true;
|
|
})
|
|
}
|
|
let zIndex = [...document.all].reduce((r, e) => Math.max(r, +window.getComputedStyle(e).zIndex || 0), 0);
|
|
console.log(zIndex);
|
|
},
|
|
}
|
|
}
|
|
|
|
});
|