Skip to content

M
marketing
Commit 5a74bd4f by caoyanzhi
Options

update: 智能营销菜单调整

parent 50553ab3
Showing with 103 additions and 112 deletions
src/assets/style/base/index.scss
......@@ -41,8 +41,10 @@
font-size: 16px;
font-weight: 500;
color: #303133;
line-height: 22px;
width: calc(100% + 32px);
line-height: 40px;
height: 40px;
width: 100%;
box-sizing: border-box;
&::before {
content: '';
display: inline-block;
......@@ -52,6 +54,12 @@
height: 16px;
background: #1890ff;
}
&.border-top {
border-top: 1px solid #E4E7ED;;
}
&.border-bottom {
border-bottom: 1px solid #E4E7ED;;
}
&--tips {
padding:8px 16px;
border:1px solid #91d5ff;
......
src/views/ecm/batch-list.vue
<template>
<section class="dm-wrap" v-loading="loading">
<div class="page-tip">历史数据限制：2018年11月15日之前的历史营销计划，没有详细数据</div>
<div class="pb22 clearfix">
<el-date-picker class="w250" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="search"></el-date-picker>
<el-select class="dm-select" clearable v-model="listParams.type" placeholder="选择上线状态" @change="search">
......@@ -150,23 +151,6 @@ export default {
}
});
this.ecmBatchSendInfos();
this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '智能营销', path: '/ecm' }, { name: this.$route.query.name + ' - 批次提交日志', path: '' }]); // eslint-disable-line
},
mounted() {
this.$store.commit(
'mutations_layoutTips',
`<div class="layout--tips">
<i class="el-icon-info"></i>
历史数据限制：2018年11月15日之前的历史营销计划，没有详细数据
</div>
`
);
// setTimeout(_ => {
// this.$store.commit('mutations_layoutTips', '');
// }, 5000);
},
beforeDestroy() {
this.$store.commit('mutations_layoutTips', '');
},
computed: {
showTypeOptions() {
......
src/views/ecm/current-list.vue
<template>
<section v-loading="loading">
<div class="dm-wrap clearfix">
<div class="page-tip">历史数据限制：2018年11月15日之前的历史营销计划，没有详细数据</div>
<el-date-picker class="w250" v-model="dateTime" :clearable="false" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="search"></el-date-picker>
<el-select class="dm-select" clearable v-model="listParams.success" placeholder="所有条件" @change="search">
<el-option v-for="(v, i) in successOptions" :key="i" :label="v.label" :value="v.value"></el-option>
......@@ -198,26 +199,12 @@ export default {
effectType: 0
};
},
mounted() {
if (!this.isComponet) {
this.$store.commit('mutations_layoutTips', `<div class="layout--tips"><i class="el-icon-info"></i>历史数据限制：2018年11月15日之前的历史营销计划，没有详细数据</div>`);
// setTimeout(_ => {
// this.$store.commit('mutations_layoutTips', '');
// }, 5000);
}
},
async created() {
this.effectType = this.$route.query.effectType;
await this.ecmCurrentSendInfos();
this.$nextTick(_ => {
this.$refs.multipleTable.toggleAllSelection();
});
if (!this.isComponet) {
this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '智能营销', path: '/ecm' }, { name: this.$route.query.name + ' - 提交日志', path: '' }]); // eslint-disable-line
}
},
beforeDestroy() {
this.$store.commit('mutations_layoutTips', '');
},
methods: {
formatDateTimeByType,
......
src/views/ecm/form.js
......@@ -1378,12 +1378,6 @@ export default {
props: ['ppp']
});
new Profile().$mount('#mount-point');
this.$store.commit(
'mutations_layoutTips',
`<div class="layout--tips">
<i class="el-icon-info"></i>营销对象为所有会员，包括微信会员、POS会员以及微信粉丝。
</div>`
);
this.gicPaymentList();
},
created() {
......@@ -1396,16 +1390,7 @@ export default {
getXsxsFalg().then(res => {
this.xsxsFlag = res.result;
});
// 设置面包屑
let breadcrumbName = '智能营销编辑';
if (this.isAdd) {
breadcrumbName = '智能营销新增';
}
this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '智能营销', path: '/ecm' }, { name: breadcrumbName, path: '' }]); // eslint-disable-line
this.listTemplateVariables();
this.getCardManualSetting();
},
beforeDestroy() {
this.$store.commit('mutations_layoutTips', '');
}
};
src/views/ecm/form.vue
......@@ -3,7 +3,8 @@
<el-form class="content" ref="form" :model="form" label-width="110px" :rules="rules" v-loading="loading" element-loading-text="拼命加载中">
<!-- 计划内容设置 -->
<section class="dm-form__wrap">
<h3 class="dm-title__label">计划内容设置</h3>
<div class="page-tip">营销对象为所有客户，包括非会员和会员(微信会员、POS会员)</div>
<h3 class="dm-title__label border-bottom">计划内容设置</h3>
<el-form-item label="计划名称" prop="ecmPlanName">
<dm-input class="w400" :maxlength="30" v-model="form.ecmPlanName" :disabled="!isAdd"></dm-input>
</el-form-item>
......@@ -100,7 +101,7 @@
</section>
<!-- 消费触发配置 -->
<section class="dm-form__wrap" v-if="form.effectType == 0 && form.effectAction === 'consume'">
<h3 class="dm-title__label">
<h3 class="dm-title__label border-bottom">
消费触发配置
</h3>
<p class="fz14 gray ml10">同时满足以下条件即可触发</p>
......@@ -266,7 +267,7 @@
</section>
<!-- 会员卡升/降级触发设置 -->
<section class="dm-form__wrap" v-if="form.effectType == 0 && (form.effectAction === 'degrade' || form.effectAction === 'upgrade')">
<h3 class="dm-title__label">会员卡{{ form.effectAction === 'degrade' ? '降' : '升' }}级触发设置</h3>
<h3 class="dm-title__label border-bottom">会员卡{{ form.effectAction === 'degrade' ? '降' : '升' }}级触发设置</h3>
<el-form-item prop="gradeIds" :label="`会员卡${form.effectAction === 'degrade' ? '降' : '升'}级至`">
<el-select :disabled="!isAdd" v-model="form.gradeIds" multiple placeholder="请选择" class="w300">
<el-option v-for="v in gradeList" :key="v.gradeId" :label="v.gradeName" :value="v.gradeId" :disabled="v.disabled"></el-option>
......@@ -275,7 +276,7 @@
</section>
<!-- 储值触发配置 -->
<section class="dm-form__wrap" v-if="form.effectType == 0 && form.effectAction === 'stored'">
<h3 class="dm-title__label">
<h3 class="dm-title__label border-bottom">
储值触发配置
<i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
<span class="gray fz13">仅适用于线下单笔充值场景；消费、退款等不会触发</span>
......@@ -299,7 +300,7 @@
</section>
<!-- 营销次数配置 重复 -->
<section class="dm-form__wrap" v-if="form.effectType == 1">
<h3 class="dm-title__label">
<h3 class="dm-title__label border-bottom">
营销次数配置
<i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
<span class="gray fz13">设置本营销计划对同个会员的触发次数</span>
......@@ -312,7 +313,7 @@
</section>
<!-- 营销次数配置 实时触点 -->
<section class="dm-form__wrap" v-if="form.effectType == 0 && ['consume', 'upgrade', 'degrade', 'stored'].includes(form.effectAction)">
<h3 class="dm-title__label">
<h3 class="dm-title__label border-bottom">
营销次数配置
<i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
<span class="gray fz13">设置本营销计划对同个会员的触发次数</span>
......@@ -342,7 +343,7 @@
<!-- 有效时间 -->
<section class="dm-form__wrap" v-if="form.effectType == 0 || form.effectType == 1">
<h3 class="dm-title__label">
<h3 class="dm-title__label border-bottom">
有效时间
<i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
<span class="gray fz13">活动持续时间最长为31天</span>
......@@ -360,7 +361,7 @@
</section>
<!-- 人群筛选器 -->
<section class="dm-form__wrap">
<h3 class="dm-title__label">
<h3 class="dm-title__label border-bottom">
适用人群
<i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
<span class="gray fz13">适用人群创建后不支持修改</span>
......@@ -385,8 +386,8 @@
</section>
<!-- 营销事件组件 -->
<section class="dm-form__wrap">
<h3 class="dm-title__label" style="margin-right:32px">
<div>营销事件</div>
<h3 class="dm-title__label border-bottom">营销事件</h3>
<div style="margin-bottom: 20px">
<div class="layout--tips mt10" style="display:inline-block;min-width:1280px" v-if="form.effectType == 1 || form.effectType == 2">
<!-- <i class="el-icon-info inline-block"></i> -->
<div class="layout--tips__content">
......@@ -417,7 +418,8 @@
消费触发模式下，消费触发模式选择「按照当天消费累计触发」时，仅允许添加1个“积分”事件，且计划开始后，不允许修改营销事件；
</div>
</div>
</h3>
</div>
<!-- 只有实时才是单图文 -->
<marketing-event :effectType="form.effectType" :readOnly="isInfo || onlineStatus == 2 || (form.consum_type == 2 && isEdit)" :show-delete-tooltip="isEdit && analyseConfig.open_flag == 1" show-out-coupon-icon ref="marketingEvent" @has-card="hasCard" v-if="ecmPlanId" :singleFlag="form.effectType === 0" :integralMultiple="form.effectAction === 'consume' && form.consum_type != 2" :ecmPlanId="ecmPlanId" :isSupportVar="form.effectType === 0" :code="code" :enabledMessageState="enabledMessageState" :cardLimitType="-1" :use-stored="useStoredFlag && ['consume', 'stored'].includes(form.effectAction) && form.effectType == 0 && form.consum_type == 1" :use-qfxx="form.effectType !== 0" :consumType="form.consum_type"> </marketing-event>
<!-- 只有非实时&&选择卡券了展示提示 -->
......@@ -430,7 +432,7 @@
</section>
<!-- 只有存在卡券的情况下出现卡券通知方式 -->
<section class="dm-form__wrap" v-if="currentCard.comName">
<h3 class="dm-title__label">卡券通知方式配置</h3>
<h3 class="dm-title__label border-bottom">卡券通知方式配置</h3>
<el-form-item label="通知方式" class="is-required" prop="cardNoticeType">
<el-radio v-model="form.cardNoticeType" :label="0"
>不通知
......@@ -505,7 +507,7 @@
</section>
<!-- 营销分析设置 -->
<section class="dm-form__wrap" v-if="xsxsFlag == 1">
<h3 class="dm-title__label">
<h3 class="dm-title__label border-bottom">
<span class="inline-block mr10">营销分析设置</span>
<span class="gray fz12">开启后，可用于统计这次营销计划的触达转化收益情况。</span>
<!-- <el-switch :disabled="!isAdd" v-model="analyseConfig.open_flag" :active-value="1" :inactive-value="0" @change="onChangeAnalyseConfig($event, true)"></el-switch> -->
......@@ -573,10 +575,10 @@
</div>
</section>
<!-- 操作区 -->
<div class="btn-wrap_fixed" :class="{ on: asideShow }">
<dm-form-bottom>
<el-button type="primary" @click="submit('form')" v-if="!isInfo">保 存</el-button>
<el-button @click="$router.go(-1)">返 回</el-button>
</div>
</dm-form-bottom>
<!-- 变量弹窗 -->
<var-dialog :options="options" :show.sync="varDialogShow" @get-data="insetVar"></var-dialog>
<!-- 模板消息修改弹窗 -->
......
src/views/ecm/list.vue
<template>
<section class="dm-wrap" v-loading="loading">
<h3 class="dm-title__label">
计划列表
<span class="intro_wrap" @click="drawer = true"><i class="iconfont icon-zhibiaoshuoming introlIcon" alt="" /><span class="intro">指标说明</span></span>
</h3>
<div class="pb22 clearfix">
<el-input v-model="listParams.searchName" class="w250" placeholder="输入计划名称" clearable @change="search"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<span style="margin:0 10px">时效</span>
......@@ -142,9 +146,11 @@
</el-table-column>
</el-table>
<dm-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"></dm-pagination>
<description :drawer.sync="drawer" :contentTitle="contentTitle" />
</section>
</template>
<script>
import description from '@/views/ecm/touch-components/description.vue';
import activitySelect from '@/components/activity-select/index.vue';
import { loadEcmList, deleteEcm, offlineEcmPlan, getUseStoredFalg, getXsxsFalg } from '@/service/api/ecmApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
......@@ -154,6 +160,7 @@ export default {
name: 'ecm-list',
data() {
return {
drawer: false,
showSearch: false,
dateTime: null,
formatDateTimeByType,
......@@ -301,7 +308,8 @@ export default {
};
},
components: {
activitySelect
activitySelect,
description
},
beforeRouteLeave(to, from, next) {
const paths = ['/ecm/copy', '/ecm/edit', '/ecm/oncelist', '/ecm/currentlist', '/ecm/batchlist', '/ecm/touch', '/ecm/info'];
......@@ -313,13 +321,6 @@ export default {
}
next();
},
activated() {
this.$store.commit('aside_handler', false);
this.$store.commit('mutations_breadcrumb', [
{ name: '营销管理', path: '' },
{ name: '智能营销', path: '/ecm' }
]); // eslint-disable-line
},
created() {
this.setXsxsFlag();
getUseStoredFalg().then(res => {
......@@ -328,11 +329,6 @@ export default {
}
});
this.loadEcmList();
this.$store.commit('aside_handler', false);
this.$store.commit('mutations_breadcrumb', [
{ name: '营销管理', path: '' },
{ name: '智能营销', path: '/ecm' }
]); // eslint-disable-line
},
methods: {
resetFilter() {
......@@ -489,6 +485,10 @@ export default {
}
},
computed: {
contentTitle() {
const name = (this.$route.meta && this.$route.meta.aliasName) || this.$route.name; // 有些params跳转的需要用到route.name 这种情况如果meta中有aliasName，优先aliasName
return name;
},
resetDisable() {
return !this.listParams.searchName && this.listParams.effectType === '' && !this.listParams.marketingType && this.listParams.onlineStatus === '' && !this.dateTime && !this.listParams.marketingActivityId && !this.listParams.showSelfFlag;
},
......@@ -512,6 +512,26 @@ export default {
</script>
<style lang="scss" scoped>
.intro_wrap {
float: right;
display: inline-flex;
align-items: center;
.introlIcon {
color: #1890ff;
font-size: 16px;
margin-right: 5px;
}
.intro {
width: 64px;
height: 22px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1890ff;
line-height: 22px;
cursor: pointer;
}
}
.el-icon-refresh {
color: #909399;
cursor: pointer;
......
src/views/ecm/operator-log.vue
......@@ -47,11 +47,6 @@ export default {
};
},
mounted() {
this.$store.commit('mutations_breadcrumb', [
{ name: '营销管理', path: '' },
{ name: '智能营销', path: '/ecm' },
{ name: '操作日志', path: '' }
]);
this.getList();
},
methods: {
......
src/views/ecm/touch-clue.vue
......@@ -113,27 +113,17 @@ export default {
};
},
mounted() {
const planName = this.$route.query.planName;
const planId = this.$route.query.id;
const createTime = this.$route.query.createTime;
const effectType = this.$route.query.effectType;
let name;
this.type = this.$route.query.type;
this.getMarketList();
if (this.type == '计划整体') {
name = '计划整体效果详情';
this.componensList = marketList;
} else if (this.type == '话务') {
name = '话务详情';
this.componensList = phoneTaskList;
} else if (this.type == '群发转话务') {
name = '话务详情';
this.componensList = batchToTelList;
} else if (this.type == '群发') {
name = '群发任务详情';
this.componensList = batchTaskList;
}
this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '智能营销', path: '/ecm' }, { name: `${planName} - 触达效果`, path: `/ecm/touch/${planId}?name=${planName}&&createTime=${createTime}&&effectType=${effectType}` }, { name }]); // eslint-disable-line
},
methods: {
handleSizeChange(val) {
......
src/views/ecm/touch-effect.vue
<template>
<div class="touch" v-loading="loading">
<div class="dm-wrap effect">
<div class="title">
<h2>计划整体效果</h2>
<el-button type="primary" class="detail" @click="toClue('计划整体')"><i class="iconfont icon-chakanxiangqing"></i>查看详情</el-button>
<div class="page-title touch-title">
每日上午更新昨日数据
<span class="intro_wrap" @click="drawer = true"><i class="iconfont icon-zhibiaoshuoming introlIcon" alt="" /><span class="intro">指标说明</span></span>
</div>
<h3 class="dm-title__label">
计划整体效果
<el-button type="primary" class="detail" @click="toClue('计划整体')"><i class="iconfont icon-chakanxiangqing"></i>查看详情</el-button>
</h3>
<touch-charts :type="0" :createTime="$route.query.createTime" />
<market-list v-if="marketListData.length" :isRepeat="isRepeat" :data="marketListData" :isReference="isReference" :batchNum="batchNum" :batchTimes="batchTime" @toClue="toClue" />
</div>
......@@ -14,9 +18,11 @@
<phone-traffic v-if="findTypeIsExist(4)" :data="findTypeObj(optionsList, 4)" @toClue="toClue" />
<short-msg v-if="findTypeIsExist(5)" :data="findTypeObj(optionsList, 5)" />
<wechat v-if="(findTypeIsExist(6) || findTypeIsExist(7)) && getTouchTypeFlag" :custom-service-data="findTypeObj(optionsList, 6)" :batch-data="findTypeObj(optionsList, 7)" :touch-type="touchType" />
<description :drawer.sync="drawer" :contentTitle="contentTitle" />
</div>
</template>
<script>
import description from '@/views/ecm/touch-components/description.vue';
import marketList from '@/views/ecm/touch-components/market-list.vue';
import touchCharts from '@/views/ecm/touch-components/touch-charts.vue';
import cardProfit from '@/views/ecm/touch-components/card/card-profit.vue';
......@@ -30,6 +36,7 @@ export default {
name: 'ecm',
data() {
return {
drawer: false,
loading: false,
ecmPlanId: '',
marketListData: [],
......@@ -45,6 +52,7 @@ export default {
};
},
components: {
description,
marketList,
touchCharts,
cardProfit,
......@@ -56,8 +64,6 @@ export default {
},
mounted() {
this.ecmPlanId = this.$route.params.id;
let planName = this.$route.query.name;
this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '智能营销', path: '/ecm' }, { name: `${planName} - 触达效果` }]); // eslint-disable-line
this.getOtherList();
this.getMarketList();
this.getTouchConfig();
......@@ -70,9 +76,6 @@ export default {
// this.getCardLeadTable();
this.getTouchTypeList();
},
beforeDestroy() {
this.$store.commit('mutations_layoutTips', '');
},
methods: {
toClue(type) {
let planName = this.$route.query.name;
......@@ -156,6 +159,10 @@ export default {
}
},
computed: {
contentTitle() {
const name = (this.$route.meta && this.$route.meta.aliasName) || this.$route.name; // 有些params跳转的需要用到route.name 这种情况如果meta中有aliasName，优先aliasName
return name;
},
findTypeObj() {
return (arr, type) => {
return arr.find(el => el.type == type); // {} 或 undefined
......@@ -171,23 +178,36 @@ export default {
</script>
<style lang="scss" scoped>
.effect {
padding: 25px 20px 27px !important;
padding: 0 20px 27px !important;
margin-bottom: 10px !important;
.title {
padding: 0 37px 0 12px;
margin-bottom: 37px;
display: flex;
align-items: center;
justify-content: space-between;
h2 {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 700;
color: #303133;
line-height: 22px;
.touch-title {
margin-bottom: 21px;
height: 56px;
line-height: 56px;
border-bottom: 1px solid #e4e7ed;
.intro_wrap {
float: right;
display: inline-flex;
align-items: center;
.introlIcon {
color: #1890ff;
font-size: 16px;
margin-right: 5px;
}
.intro {
width: 64px;
height: 22px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1890ff;
line-height: 22px;
cursor: pointer;
}
}
}
.detail {
float: right;
padding: 0 10px;
background: rgba(24, 144, 255, 0.1);
border-radius: 4px;
......
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