Skip to content

M
marketing
Commit c47883b4 by chenxin
Options

feat:3.0定制化： 销毁和短信导入

parent f39d536d
Showing with 507 additions and 0 deletions
src/assets/style/base/reset.scss
......@@ -168,9 +168,15 @@ a:hover {
.mr20{
margin-right: 20px!important;
}
.mb15{
margin-bottom: 15px!important;
}
.mb20{
margin-bottom: 20px!important;
}
.mb30{
margin-bottom: 20px!important;
}
.mb40{
margin-bottom: 40px!important;
}
......@@ -211,6 +217,9 @@ a:hover {
.w150{
width: 150px!important;
}
.w160{
width: 160px!important;
}
.w200{
width: 200px!important;
}
......
src/router/modules/card.js
......@@ -168,6 +168,14 @@ export default {
meta: {
path: '/card/check'
}
},
{
path: 'destroy',
name: '卡券销毁',
component: () => import(/* webpackChunkName: "card" */ '../../views/card/destroy-list.vue'),
meta: {
path: '/card/destroy'
}
}
]
};
src/router/modules/message.js
......@@ -62,6 +62,32 @@ export default {
meta: {
path: '/message/record'
}
},
{
path: 'import-send',
name: '导入发送列表',
component: () => import(/* webpackChunkName: "message" */ '../../views/message/importSendList.vue'),
meta: {
path: '/message/importSend'
}
},
{
path: 'import-send/add',
name: '手工导入群发',
component: () => import(/* webpackChunkName: "message" */ '../../views/message/importSendForm.vue'),
meta: {
type: 'add',
path: '/message/importSend'
}
},
{
path: 'import-send/info/:id',
name: '手工导入群发详情',
component: () => import(/* webpackChunkName: "message" */ '../../views/message/importSendForm.vue'),
meta: {
type: 'info',
path: '/message/importSend'
}
}
]
};
src/views/card/destroy-list.vue 0 → 100644
<template>
<section class="dm-wrap">
<div class="pb22 clearfix">
<el-date-picker class="w400" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker>
<el-select class="dm-select w160" v-model="listParams.cardType" clearable placeholder="所有销毁方式" @change="refresh">
<el-option v-for="(item, index) in destoryType" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-input v-model="listParams.searchParam" class="w300" placeholder="请输入卡券名称名称" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<el-button class="fr" type="danger" @click="visible = true">卡券销毁</el-button>
</div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading">
<el-table-column :show-overflow-tooltip="true" min-width="120" align="left" prop="cardName" label="卡券名称"></el-table-column>
<el-table-column :show-overflow-tooltip="true" width="100" align="left" prop="createTime" label="销毁时间">
<template slot-scope="scope">
<p class="cell-time">
{{ formatDateTimeByType(scope.row.createTime, 'yyyy-MM-dd-HH-mm', true).y }}<br />
<span>{{ formatDateTimeByType(scope.row.createTime, 'yyyy-MM-dd-HH-mm', true).h }}</span>
</p>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" min-width="120" align="left" prop="orderNumber" label="销毁方式">
<template slot-scope="scope">
<p class="gray">{{ scope.row.orderNumber || '--' }}</p>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" min-width="120" align="left" prop="cardName" label="计划销毁数量"></el-table-column>
<el-table-column :show-overflow-tooltip="true" width="100" align="left" prop="createTime" label="销毁结果">
<template>
<p>成功：<span style="color:#52C41A;">1000</span></p>
<p>失败：<span style="color:#F5222D;">0</span></p>
</template>
</el-table-column>
<el-table-column label="操作" align="left" width="120px" fixed="right">
<template>
<el-button type="text">导出结果</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
<vue-gic-export-excel :dialogVisible.sync="dialogVisible" :dataArr="tableList" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel>
<destory-dialog :show.sync="visible" />
</section>
</template>
<script>
import { coupcardCheckList, exportCoupcardCheckExcel } from '@/service/api/cardApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
import destoryDialog from './partials/destory-dialog';
import talbeMethods from '@/mixins/tableMethods.js';
import filterAvater from '@/mixins/filterAvater.js';
export default {
name: 'destory-list',
mixins: [talbeMethods, filterAvater],
data() {
return {
formatDateTimeByType,
visible: false,
dateTime: [],
listParams: {
beginTime: '',
endTime: '',
searchParam: '',
currentPage: 1,
pageSize: 20
},
destoryType: [{ value: 0, label: '抵金券' }, { value: 1, label: '折扣券' }, { value: 2, label: '兑换券' }], // eslint-disable-line
total: 0,
loading: false,
tableList: [],
projectName: 'marketing', // 当前项目名
dialogVisible: false,
excelUrl: '', // 下载数据的地址
params: {} // 传递的参数
};
},
created() {
this.getTableList();
this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '卡券营销', path: '' }, { name: '卡券销毁', path: '' }]); // eslint-disable-line
},
components: {
destoryDialog
},
methods: {
// 加载列表
async getTableList() {
return;
this.loading = true;
this.dataTimeFormat();
try {
let res = await coupcardCheckList(this.listParams);
this.tableList = res.result.result || [];
this.total = res.result.totalCount || 0;
} catch (err) {
this.$tips({ type: 'error', message: '加载列表失败' });
}
this.loading = false;
},
// 导出列表
exportExcel() {
this.dialogVisible = true;
this.excelUrl = exportCoupcardCheckExcel;
this.dataTimeFormat();
this.params = {
searchParam: this.listParams.searchParam,
beginTime: this.listParams.beginTime,
endTime: this.listParams.endTime,
requestProject: 'marketing'
};
},
/**-------辅助方法---------- */
dataTimeFormat() {
if (this.dateTime) {
this.listParams.beginTime = formatDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
this.listParams.endTime = formatDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
} else {
this.listParams.beginTime = '';
this.listParams.endTime = '';
}
}
}
};
</script>
src/views/card/partials/destory-dialog.vue 0 → 100644
<template>
<el-dialog title="卡券销毁" :visible.sync="show" width="600px" :before-close="close">
<el-alert title="卡券销毁将不可撤回，请注意确认操作。" type="warning" class="pb10" :closable="false" />
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="pt20">
<el-form-item label="选择卡券" prop="cardId">
<el-button v-show="!ruleForm.cardId" @click="showCardDialog = true">选择卡券</el-button>
<div v-show="ruleForm.cardId">
{{ ruleForm.cardName }}
<el-button type="text" @click="cleanCard" class="ml10">删除</el-button>
</div>
</el-form-item>
<el-form-item label="销毁方式" prop="type">
<el-radio-group v-model="ruleForm.type">
<el-radio :label="0">全部销毁</el-radio>
<el-radio :label="1">部分销毁</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="导入券码文件" prop="fileId">
<div>
<el-button icon="el-icon-upload2" class="dash-btn">点击上传</el-button>
<el-button type="text" class="ml10">点击下载文件模板</el-button>
</div>
<p style="margin-top:8px;color:#909399;font-size:12px;line-height:1;">券码数量单次最多不超过5000条</p>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="submit">确认销毁</el-button>
</span>
<vue-gic-card :showCardDialog="showCardDialog" @selectCard="selectCard" :cardLimit="3" :cardType="null"></vue-gic-card>
</el-dialog>
</template>
<script>
export default {
name: 'destory-dialog',
props: {
show: {
type: Boolean,
default: false
}
},
data() {
return {
loading: false,
showCardDialog: false,
ruleForm: {
cardId: '',
cardName: '',
type: 0,
fileId: ''
},
rules: {
cardId: [{ required: true, message: '请选择卡券', trigger: 'change' }],
type: [{ required: true, message: '请选择销毁方式', trigger: 'change' }],
fileId: [{ required: true, message: '请上传文件', trigger: 'change' }]
}
};
},
methods: {
close() {
this.$refs.ruleForm.resetFields();
this.$emit('update:show', false);
},
submit() {
this.$refs.ruleForm.validate(valid => {
if (!valid) {
return;
}
});
},
cleanCard() {
this.ruleForm.cardId = '';
this.ruleForm.cardName = '';
this.$refs.ruleForm.validateField('cardId');
},
//选择卡券后置
selectCard(val) {
if (val) {
this.ruleForm.cardId = val.coupCardId;
this.ruleForm.cardName = val.cardName;
this.$refs.ruleForm.validateField('cardId');
}
this.showCardDialog = false;
}
}
};
</script>
<style lang="scss" scoped>
.dash-btn {
width: 174px;
border-style: dashed;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
}
</style>
src/views/message/importSendForm.vue 0 → 100644
<template>
<div class="dm-wrap" :loading="loading">
<p class="title mb30">手工导入群发</p>
<el-form ref="form" :model="ruleForm" label-width="120px" :rules="rules">
<el-form-item label="营销场景">
<span v-if="isInfo">{{ ruleForm.sceneSettingName }}</span>
<el-select v-else class="w250" v-model="ruleForm.sceneSettingId" placeholder="选择营销场景">
<el-option v-for="item in sceneSettingIdOptions" :key="item.sceneSettingId" :label="item.sceneName" :value="item.sceneSettingId"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发送时间">
<el-select class="w250" v-model="ruleForm.sendType">
<el-option v-for="(v, i) in sendTypeOptions" :key="i" :value="v.value" :label="v.label"></el-option>
</el-select>
<el-date-picker class="w250" v-if="ruleForm.sendType" v-model="ruleForm.sendTime" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"></el-date-picker>
</el-form-item>
<el-form-item label="上传文件">
<div>
<el-button icon="el-icon-upload2" class="dash-btn">点击上传</el-button>
<el-button type="text" class="ml10">点击下载文件模板</el-button>
</div>
<p style="margin-top:8px;color:#909399;font-size:12px;line-height:1;">券码数量单次最多不超过5000条</p>
</el-form-item>
</el-form>
<p class="title mb15 mt40">短信模板设置</p>
<div class="dm-title__label--tips"><i class="el-icon-warning pr8 blue"></i>短信运营商限制：为避免骚扰用户，营销短信只允许在8点到22点发送</div>
<sms-temp pbSize="pb15" :activeId.sync="ruleForm.smsTemplateId" @emitSmsItemInfo="onSmsItemInfo"></sms-temp>
<div class="text-center">
<el-button type="primary">新建群发</el-button>
<el-button>返回</el-button>
</div>
</div>
</template>
<script>
import smsTemp from '@/components/libs/smsTemp';
import { formatDateTimeByType } from '@/utils/index.js';
import { sceneSettingList } from '@/service/api/wechatApi.js';
export default {
name: 'import-send-form',
data() {
return {
loading: false,
ruleForm: {
sceneSettingName: '',
sceneSettingId: '',
sendTime: '',
sendType: 0,
smsTemplateId: ''
},
rules: {},
sceneSettingIdOptions: [],
sendTypeOptions: [{ value: 0, label: '立即发送' }, { value: 1, label: '选择时间发送' }], // eslint-disable-line
isAdd: this.$route.meta.type === 'add',
isInfo: this.$route.meta.type === 'info'
};
},
components: {
smsTemp
},
methods: {
formatDateTimeByType,
onSmsItemInfo(val) {
this.smsType = val.type;
console.log(val);
},
async sceneSettingList() {
let res = await sceneSettingList();
this.sceneSettingIdOptions = res.result || [];
}
},
mounted() {
this.sceneSettingList();
},
created() {
this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '短信营销', path: '' }, { name: this.info ? '手工导入群发详情' : '新建导入群发', path: '' }]); // eslint-disable-line
}
};
</script>
<style lang="scss" scoped>
.mt40 {
margin-top: 40px;
}
.title {
font-size: 16px;
font-weight: 500;
color: rgba(48, 49, 51, 1);
line-height: 22px;
}
.dash-btn {
width: 174px;
border-style: dashed;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
}
</style>
src/views/message/importSendList.vue 0 → 100644
<template>
<section class="dm-wrap">
<div class="pb22 clearfix">
<span>创建时间</span><el-date-picker class="w400 ml10" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker> <span class="ml20">发送时间</span><el-date-picker class="w400 ml10" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker>
<el-button class="fr" type="primary" @click="$router.push('/message/import-send/add')">导入群发</el-button>
</div>
<div class="pb22 clearfix">
<el-select class="dm-select w160" v-model="listParams.status" clearable placeholder="所有状态" @change="refresh">
<el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-input v-model="listParams.searchParam" class="w300" placeholder="请输入模板名称" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading">
<el-table-column :show-overflow-tooltip="true" min-width="120" align="left" prop="cardName" label="模板名称"></el-table-column>
<el-table-column :show-overflow-tooltip="true" width="100" align="left" prop="createTime" label="创建时间">
<template slot-scope="scope">
<p class="cell-time">
{{ formatDateTimeByType(scope.row.createTime, 'yyyy-MM-dd-HH-mm', true).y }}<br />
<span>{{ formatDateTimeByType(scope.row.createTime, 'yyyy-MM-dd-HH-mm', true).h }}</span>
</p>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" width="100" align="left" prop="createTime" label="发送时间">
<template slot-scope="scope">
<p class="cell-time">
{{ formatDateTimeByType(scope.row.createTime, 'yyyy-MM-dd-HH-mm', true).y }}<br />
<span>{{ formatDateTimeByType(scope.row.createTime, 'yyyy-MM-dd-HH-mm', true).h }}</span>
</p>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" min-width="120" align="left" prop="cardName" label="模板内容"></el-table-column>
<el-table-column :show-overflow-tooltip="true" min-width="120" align="left" prop="cardName" label="计划人数"></el-table-column>
<el-table-column :show-overflow-tooltip="true" min-width="120" align="left" prop="cardName" label="送达人数"></el-table-column>
<el-table-column :show-overflow-tooltip="true" min-width="120" align="left" prop="cardName" label="计费人数"></el-table-column>
<el-table-column :show-overflow-tooltip="true" min-width="120" align="left" prop="orderNumber" label="状态">
<template slot-scope="scope">
<span v-html="filterStatus(scope.row)"></span>
</template>
</el-table-column>
<el-table-column label="操作" align="left" width="120px" fixed="right">
<template>
<el-button type="text" @click="$router.push('/message/import-send/info/123')">详情</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
<vue-gic-export-excel :dialogVisible.sync="dialogVisible" :dataArr="tableList" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel>
</section>
</template>
<script>
import { coupcardCheckList, exportCoupcardCheckExcel } from '@/service/api/cardApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
import talbeMethods from '@/mixins/tableMethods.js';
import filterAvater from '@/mixins/filterAvater.js';
export default {
name: 'destory-list',
mixins: [talbeMethods, filterAvater],
data() {
return {
formatDateTimeByType,
dateTime: [],
listParams: {
beginTime: '',
endTime: '',
searchParam: '',
currentPage: 1,
pageSize: 20
},
status: [{ value: 0, label: '抵金券' }, { value: 1, label: '折扣券' }, { value: 2, label: '兑换券' }], // eslint-disable-line
total: 0,
loading: false,
tableList: [],
projectName: 'marketing', // 当前项目名
dialogVisible: false,
excelUrl: '', // 下载数据的地址
params: {} // 传递的参数
};
},
created() {
this.getTableList();
this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '短信营销', path: '' }, { name: '导入发送列表', path: '' }]); // eslint-disable-line
},
methods: {
// 列表状态过滤器
// 8.优惠券状态（0：删除，1：正常，2：失效，3：已发放，4：已领取，5：已使用，6：已到期,7:已销毁, 8:已占用）
filterStatus(row) {
let _content = '';
if (row.status == 0) {
_content = `<div class="dm-status--info">已删除</div>`;
} else if (row.status == 1) {
_content = `<div class="dm-status--primary">正常</div>`;
} else if (row.status == 2) {
_content = `<div class="dm-status--info">已失效</div>`;
} else if (row.status == 3) {
_content = `<div class="dm-status--primary">已发放</div>`;
} else if (row.status == 4) {
_content = `<div class="dm-status--success">已领取</div>`;
} else if (row.status == 5) {
_content = `<div class="dm-status--success">已使用</div>`;
} else if (row.status == 6) {
_content = `<div class="dm-status--info">已到期</div>`;
} else if (row.status == 7) {
_content = `<div class="dm-status--info">已销毁</div>`;
} else if (row.status == 8) {
_content = `<div class="dm-status--info">已占用</div>`;
}
return _content;
},
// 加载列表
async getTableList() {
return;
this.loading = true;
this.dataTimeFormat();
try {
let res = await coupcardCheckList(this.listParams);
this.tableList = res.result.result || [];
this.total = res.result.totalCount || 0;
} catch (err) {
this.$tips({ type: 'error', message: '加载列表失败' });
}
this.loading = false;
},
// 导出列表
exportExcel() {
this.dialogVisible = true;
this.excelUrl = exportCoupcardCheckExcel;
this.dataTimeFormat();
this.params = {
searchParam: this.listParams.searchParam,
beginTime: this.listParams.beginTime,
endTime: this.listParams.endTime,
requestProject: 'marketing'
};
},
/**-------辅助方法---------- */
dataTimeFormat() {
if (this.dateTime) {
this.listParams.beginTime = formatDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
this.listParams.endTime = formatDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
} else {
this.listParams.beginTime = '';
this.listParams.endTime = '';
}
}
}
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment