Skip to content

M
marketing
Commit f0b159f7 by zhangmeng
Options

提交迭代

parent 34b64c75
Showing with 211 additions and 146 deletions
src/service/api/ecmApi.js
......@@ -5,8 +5,8 @@ const PREFIX = 'api-marketing/';
import config from '@/config';
export const url = config.api + PREFIX;
//智能营销--ECM营销引擎分页列表
export const loadEcmList = (params) => requests(PREFIX + 'page-ecm-list', params);
//智能营销--ECM营销引擎分页列表 TODO
export const loadEcmList = (params) => requests(PREFIX + 'deprecate/page-ecm-list', params);
//智能营销--ECM营销引擎-- 删除
export const deleteEcm = (params) => requests(PREFIX + 'delete-ecm', params);
......
src/test/dmMarketing/api.js
......@@ -148,8 +148,12 @@ export const updateImgName = (params) => requests( PREFIX + 'update-marketing-we
//素材库--图片--新建图片分组
export const addGroupService = (params) => requests( PREFIX + 'save-marketing-wechat-image-group', params);
// 智能营销--ECM营销引擎-- 新建/修改 --回显营销事件类型详情 TODO
export const getMarketingTypeDetails = (params) => requests( PREFIX + 'deprecate/get-marketing-type-details', params);
// 智能营销--新增/修改营销事件类型
export const saveUpdateMarketingType = (params) => requests( PREFIX + 'deprecate/save-update-marketing-type', params);
src/test/dmMarketing/components/item-img-text.vue
<template>
<div class="inline-block">
<div class="dm-imgText__item__wrap" @mouseover="maskShow = true" @mouseout="maskShow = false">
<div class="dm-imgText__item__wrap" >
<div v-for="(v,i) in item.itemList" :key="i">
<div v-show="maskShow" class="dm-imgText__item__mask" @click="window.open(v.mediaUrl)"></div>
<div class="dm-imgText__item" v-if="i === 0">
<div class="dm-imgText__item" v-if="i === 0" @mouseover="v.maskShow = true" @mouseout="v.maskShow = false">
<div v-show="v.maskShow" class="dm-imgText__item__mask" @click="window.open(v.mediaUrl)">预览文章</div>
<p class="ellipsis-l2">{{v.titleName}}</p>
<img :src="v.qcloudImageUrl || loadErrorImg" alt="" srcset="">
<p class="ellipsis fz13 gray-color">{{v.remark}}</p>
</div>
<div class="dm-imgText__item__other clearfix" v-else>
<div class="dm-imgText__item__other clearfix" v-else @mouseover="v.maskShow = true" @mouseout="v.maskShow = false">
<div v-show="v.maskShow" class="dm-imgText__item__other__mask" @click="window.open(v.mediaUrl)">预览文章</div>
<img :src="v.qcloudImageUrl || loadErrorImg" alt="" srcset="">
<p class="ellipsis-l2">{{v.titleName}}</p>
</div>
......@@ -37,6 +38,13 @@ export default {
}
}
},
created() {
if (this.item.itemList instanceof Array) {
this.item.itemList.forEach(v => {
v.maskShow = false
})
}
},
methods:{
del() {
this.$emit('del');
......
src/test/dmMarketing/components/item-text.vue
......@@ -21,7 +21,7 @@ export default {
this.$emit('del');
},
edit() {
this.$emit('edit',this.item);
this.$emit('edit');
}
}
}
......
src/test/dmMarketing/components/lib-app.vue
......@@ -159,11 +159,12 @@ export default {
addItem() {
let sendData = {
comName:'item-app',
imageUrl:this.imageUrl,
imageMediaId:this.imageMediaId,
wechatContent:this.wechatContent,
text:this.form.text,
url:this.form.url
title:this.form.text,
// imageUrl:this.imageUrl,
mediaId:this.imageMediaId,
pagePath:JSON.stringify(this.wechatContent),
// text:this.form.text,
// url:this.form.url
}
if (!sendData.text) {
this.$tips({type:'warning',message:'简介未填写'});
......@@ -178,6 +179,7 @@ export default {
return;
}
this.$emit('sendItem',sendData);
this.close();
},
close() {
this.$emit('update:show',false);
......
src/test/dmMarketing/components/lib-card.vue
......@@ -113,6 +113,7 @@ export default {
return;
}
this.$emit('sendItem',this.selectedData);
this.close();
},
add() {
winodw.open('/marketing/#/card/add');
......
src/test/dmMarketing/components/lib-img-item.vue deleted 100644 → 0
<template>
<label :name="imgData" class="dm-img-item" :class="{'active':active === imgData.imageId}">
<div class="dm-img-item_top">
<img :src="imgData.qcloudImageUrl" alt="" srcset="">
</div>
<div class="dm-img-item_center">
<el-checkbox :label="imgData">{{imgData.imageTitle}}</el-checkbox>
</div>
</label>
</template>
<script>
export default {
props:{
imgData:{
type:Object,
default:() => {
return {
qcloudImageUrl:'',
imageId:'',
imageTitle:''
}
}
}
},
data() {
return {
active:''
}
},
methods:{
}
}
</script>
<style lang="scss" scoped>
@import '../../../assets/style/base/var.scss';
@import '../../../assets/style/mixin/index.scss';
.dm-img-item{
width: 168px;
margin: 20px 10px 0 10px;
float: left;
border: 1px solid #e4e7ed;
border-radius: 2px;
overflow: hidden;
cursor: pointer;
&:hover{
border: 1px solid #1890ff;
}
&_top{
width: 168px;
height: 168px;
position: relative;
img{
width: 100%;
height: 100%;
}
}
&_center{
border-top:1px solid $border-color;
height: 32px;
display: flex;
justify-content: left;
align-items: center;
padding-left: 10px;
/deep/ .el-checkbox__label{
@include ellipsis(130px);
vertical-align: middle;
padding-left: 10px;
}
}
&_bottom{
border-top:1px solid $border-color;
height: 32px;
display: flex;
justify-content: space-around;
align-items: center;
background: $gray-color;
}
}
</style>
src/test/dmMarketing/components/lib-img-text.vue
......@@ -96,6 +96,7 @@ export default {
return;
}
this.$emit('sendItem',this.selectedData);
this.close();
},
close() {
this.$emit('update:show',false);
......
src/test/dmMarketing/components/lib-img.vue
......@@ -17,8 +17,15 @@
</label>
</div>
</div>
<el-checkbox-group v-loading="loading" v-model="selectedData" :max="1" class="clearfix img-item__wrap">
<img-item v-for="(v,i) in imgList" :key="i" :imgData="v" @click.native.stop.prevent="rowClick(v)"></img-item>
<el-checkbox-group v-loading="loading" v-model="selectedId" :max="1" class="clearfix img-item__wrap">
<label :name="v.imageId" class="dm-img-item" v-for="(v,i) in imgList" :key="i" :item="v" @click.stop.prevent="rowClick(v)">
<div class="dm-img-item_top">
<img :src="v.qcloudImageUrl" alt="" srcset="">
</div>
<div class="dm-img-item_center">
<el-checkbox :label="v.imageId">{{v.imageTitle}}</el-checkbox>
</div>
</label>
</el-checkbox-group>
<el-pagination v-show="imgList.length" background class="dm-pagination imglib-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
</article>
......@@ -30,7 +37,6 @@
</el-dialog>
</template>
<script>
import imgItem from './lib-img-item'
import {loadImgList,addGroupService} from '../api.js';
export default {
name:'lib-img',
......@@ -49,11 +55,12 @@ export default {
imgList:[],
listParams:{
currentPage:1,
pageSize:10,
pageSize:12,
wechatImageGroupId:''
},
total:0,
selectedData:{},
selectedId:[],
groupsList:[],
groupsMoveList:[],
loading:true,
......@@ -62,9 +69,6 @@ export default {
fileList: [],
}
},
components: {
imgItem
},
methods:{
handleSizeChange(val) {
this.listParams.pageSize = val;
......@@ -151,6 +155,7 @@ export default {
},
rowClick(row) {
row.comName = 'item-img';
this.selectedId = [row.imageId];
this.selectedData = row;
},
addItem() {
......@@ -159,6 +164,7 @@ export default {
return;
}
this.$emit('sendItem',this.selectedData);
this.close();
}
}
}
......@@ -250,5 +256,52 @@ export default {
.imglib-pagination{
padding-right:20px;
}
.dm-img-item{
width: 168px;
margin: 20px 10px 0 10px;
float: left;
border: 1px solid #e4e7ed;
border-radius: 2px;
overflow: hidden;
cursor: pointer;
&:hover{
border: 1px solid #1890ff;
}
&_top{
width: 168px;
height: 168px;
position: relative;
img{
width: 100%;
height: 100%;
}
}
&_center{
border-top:1px solid #e4e7ed;
height: 32px;
display: flex;
justify-content: left;
align-items: center;
padding-left: 10px;
/deep/ .el-checkbox__label{
text-overflow: ellipsis;
overflow: hidden;
max-width: 130px;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
padding-left: 10px;
}
}
&_bottom{
border-top:1px solid #e4e7ed;
height: 32px;
display: flex;
justify-content: space-around;
align-items: center;
background: #f4f5f9;
}
}
</style>
src/test/dmMarketing/components/lib-sms.vue
......@@ -87,6 +87,7 @@ export default {
return;
}
this.$emit('sendItem',this.selectedData);
this.close();
},
close() {
this.$emit('update:show',false);
......
src/test/dmMarketing/components/lib-tel.vue
......@@ -56,6 +56,7 @@ export default {
return;
}
this.$emit('sendItem',this.form);
this.close();
},
}
}
......
src/test/dmMarketing/components/lib-text.vue
......@@ -148,31 +148,28 @@
nextValue:'',
textNum:0,
textLength:10
textLength:10,
isEdit:false
}
},
watch:{
item:function(val){
console.log(val)
// var idx = val.lastIndexOf('###');
// if(idx>0){
// this.textarea=val.substring(0,idx);
// }else{
// this.textarea=val
// }
// this.$nextTick(_ => {
this.textarea=val.textarea;
show(val) {
if (val && this.item.comName === 'item-text') {
this.isEdit = true;
let copyObj = JSON.parse(JSON.stringify(this.item))
// console.log(this.item)
this.textarea = copyObj.textarea;
var reg = /<a\s+href=['"]([^"]*)['"].*?[^>]*>(.*?)<\/a>/g;
if(reg.exec(this.textarea)!=null){
this.cancelLink=true;
this.cancelLink = true;
}
// })
}
} else {
this.isEdit = false;
}
}
},
created(){
// console.log(this.$parent.oldTextarea);
var val = this.$parent.oldTextarea;
this.textarea=val;
......@@ -445,9 +442,17 @@
this.$tips({type:'warning',message:'请输入内容'});
return;
}
this.$emit('sendItem',this.xcxUrlObj)
if (this.isEdit) {
this.$emit('editItem',JSON.parse(JSON.stringify(this.xcxUrlObj)))
} else {
this.$emit('sendItem',JSON.parse(JSON.stringify(this.xcxUrlObj)))
}
this.close();
},
close() {
this.$nextTick(_ => {
this.textarea = '';
})
this.$emit('update:show',false);
},
}
......
src/test/dmMarketing/index.vue
......@@ -13,7 +13,7 @@
<!-- 组件 区域 -->
<div class="dm-marketing__content__item" v-for="(v,i) in list" :key="i">
<i class="dm-marketing__content--index">{{i+1}}</i>
<component :is="v.comName" :item="v.item" @del="delItem(i)" @edit="editItem"></component>
<component :is="v.comName" :item="v.item" @del="delItem(i)" @edit="editItem(i)"></component>
</div>
</div>
</div>
......@@ -22,12 +22,12 @@
<opt @addItem="addItem" :options="options" v-if="optShow" style="margin:20px 0 0 15px;"></opt>
</transition>
<!-- 弹窗 -->
<component :is="dialogType" @sendItem="pushItemToList" :item="currentItem" :show.sync="dialogShow"></component>
<component :is="dialogType" @sendItem="pushItemToList" @editItem="editItemList" :item="currentItem" :show.sync="dialogShow"></component>
</section>
</template>
<script>
import { getMarketingEvent } from './api.js';
import { getMarketingEvent,getMarketingTypeDetails,saveUpdateMarketingType } from './api.js';
import opt from './components/opt.vue';
// 页面item组件
import itemImgText from './components/item-img-text.vue';
......@@ -59,6 +59,12 @@ const allOptions = [
];
export default {
name:'dm-marketing',
props:{
comId:{
type:String,
default:''
}
},
components:{
'opt': opt,
'item-img-text': itemImgText,
......@@ -92,6 +98,7 @@ export default {
options:[],
maxEventCount:0, //item最大数
currentItem:{},
currentIndex:0,
optShow: false
}
},
......@@ -110,17 +117,41 @@ export default {
this.options.push(v);
}
})
this.getMarketingTypeDetails();
} else {
this.$message({type:'warning',message:'组件初始化失败'});
}
console.log(res);
})
},
getMarketingTypeDetails() {
getMarketingTypeDetails({ecmPlanId:'ff80808166817b0501669f9546db011f'}).then(res => {
if (res.errorCode === 0) {
this.list = [];
let result = res.result || [];
// 七种类型 处理
result.map(v => {
switch (v.marketingType) {
case 'teletext': // 1 图文
break;
}
})
console.log(res);
}
});
},
pushItemToList(val) {
this.currentItem = val;
this.list.push({comName:val.comName,item:val});
this.dialogShow = false;
console.log(val)
saveUpdateMarketingType({marketingType:''}).then(res => {
});
},
editItemList(val) {
this.$set(this.list,this.currentIndex,{comName:val.comName,item:val})
},
addItem(v) {
if (this.isOverMaxCount()) {
......@@ -128,18 +159,20 @@ export default {
return;
}
this.dialogType = 'lib-' + v.value;
this.currentItem = {};
this.dialogShow = true;
},
delItem(index) {
this.list.splice(index,1);
},
editItem(val) {
this.dialogType = 'lib-' + val.comName.slice(5);
this.dialogShow = true;
editItem(index) {
this.currentIndex = index;
this.currentItem = this.list[index].item;
console.log(index,this.currentItem,this.list.map(v => v.item.textarea))
this.dialogType = 'lib-' + this.list[index].comName.slice(5);
this.$nextTick(_ => {
this.currentItem = val;
this.dialogShow = true;
})
console.log(val)
},
isOverMaxCount() {
return this.list.length >= this.maxEventCount;
......
src/test/dmMarketing/style/index.css
......@@ -201,12 +201,31 @@
top: 0;
left: 0;
width: 320px;
height: 290px;
height: 100%;
border-radius:4px;
background: rgba(0,0,0,0.5);
text-align: center;
color: #fff;
line-height: 290px;
cursor: pointer;
z-index:9;
}
.dm-imgText__item__other__mask {
position: absolute;
top: 0;
left: 0;
width: 320px;
height: 100%;
border-radius:4px;
background: rgba(0,0,0,0.5);
text-align: center;
color: #fff;
line-height: 290px;
cursor: pointer;
z-index:9;
}
.dm-imgText__item{
position: relative;
padding:15px;
}
.dm-imgText__item > img{
......@@ -216,6 +235,7 @@
margin: 20px 0 20px;
}
.dm-imgText__item__other{
position: relative;
border-top: 1px solid #E4E7ED;
padding:15px;
}
......
src/views/ecm/list.vue
......@@ -8,24 +8,32 @@
<el-option v-for="(v,i) in marketingTypeOptions" :key="i" :label="v.label" :value="v.value"></el-option>
</el-select>
<el-select class="dm-select" clearable v-model="listParams.sceneSettingId" placeholder="选择营销场景" @change="search">
<el-option v-for="item in sceneSettingIdOptions" :key="item.sceneSettingId" :label="item.sceneName" :value="item.sceneSettingId"></el-option>
<el-option v-for="(v,i) in sceneSettingIdOptions" :key="v.sceneSettingId" :label="v.sceneName" :value="v.sceneSettingId"></el-option>
</el-select>
<el-select class="dm-select" clearable v-model="listParams.onlineStatus" placeholder="选择上线状态" @change="search">
<el-option v-for="(v,i) in onlineOptions" :key="i" :label="v.label" :value="v.value"></el-option>
</el-select>
<el-input v-model="listParams.searchName" class="w200" placeholder="输入计划名称" clearable @change="search"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<el-button class="fr" type="primary" @click="$router.push('/ecm/add')">新建计划</el-button>
</div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" >
<el-table-column v-for="(v,i) in tableHeader" :fixed="v.fixed" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="i" :prop="v.prop" :label="v.label" :formatter="v.formatter"></el-table-column>
<el-table-column label="状态" align="left" min-width="150px" prop="planInfo">
<template slot-scope="scope" >
<span type="text" >{{scope.row.planInfo || '--'}}</span>
<el-table-column v-for="(v,i) in tableHeader" :fixed="v.fixed" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="i" :prop="v.prop" :label="v.label" :formatter="v.formatter">
<template slot-scope="scope">
<span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
<span v-else>{{scope.row[v.prop]}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="left" width="120px" fixed="right">
<el-table-column label="操作" align="left" width="220" fixed="right">
<template slot-scope="scope" >
<dm-delete v-if="scope.row.onlineStatus === 1" @confirm="delData(scope.row)" tips="是否下线该计划?">
<el-button type="text">下线</el-button>
</dm-delete>
<el-button type="text" @click="editData(scope.row)">编辑</el-button>
<dm-delete v-if="scope.row.putonStatus !== 2" @confirm="delData(scope.row)" tips="是否删除该计划?">
<el-button type="text">删除</el-button>
</dm-delete>
<el-button type="text" @click="editData(scope.row)">记录</el-button>
</template>
</el-table-column>
......@@ -42,12 +50,14 @@ export default {
data () {
return {
effectTypeOption:[{value:-1,label:'所有时效'},{value:0,label:'实时'},{value:1,label:'定时'}],
onlineOptions:[{value:'',label:'所有上线状态'},{value:0,label:'待上线'},{value:1,label:'已上线'},{value:2,label:'已下线'}],
sceneSettingIdOptions:[],
marketingTypeOptions,
listParams:{
effectType:-1,
marketingType:'',
sceneSettingId:'',
onlineStatus:'',
searchName:'',
currentPage:1,
pageSize:20
......@@ -56,20 +66,27 @@ export default {
loading:false,
tableHeader:[
{label:'计划名称',prop:'ecmPlanName',minWidth:'120',align:'left',fixed:'left'},
{label:'时效',prop:'effectType',width:'120',align:'left',formatter:function(row){
return row.effectType?('每天'+row.effectTime+':00'):'实时'
{label:'时效',prop:'effectType',width:'120',align:'left',formatter(row){
return row.effectType?(`<span><i class="el-icon-time fz18 vertical-middle"></i><span class="vertical-middle"> 每天${row.effectTime}:00</span></span>`):'实时'
}},
{label:'营销方式',prop:'marketingType',width:'120',align:'left',formatter:function(row){
let result = '';
marketingTypeOptions.forEach(v => {
if (v.value === row.marketingType) {
result = v.label
}
})
{label:'营销方式',prop:'marketingType',minWidth:'120',align:'left'},
{label:'营销场景',prop:'sceneSettingName',width:'120',align:'left'},
{label:'营销人次',prop:'timesForPeople',width:'120',align:'left'},
{label:'上线状态',prop:'onlineStatus',width:'120',align:'left',formatter(row){
let result = '--';
switch (row.onlineStatus) {
case 0:
result = '<span class="dm-status--primary">待上线</span>';
break;
case 1:
result = '<span class="dm-status--success">已上线</span>';
break;
case 2:
result = '<span class="dm-status--info">已下线</span>';
break;
}
return result;
}},
{label:'营销场景',prop:'sceneSettingName',width:'100',align:'left'},
{label:'营销人次',prop:'timesForPeople',width:'80',align:'left'}
],
tableList:[]
}
......
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