Skip to content

M
marketing
Commit ca243b07 by chenxin
Options

fix: 扫码营销

parent ede3d071
Showing with 252 additions and 54 deletions
src/assets/style/base/index.scss
......@@ -337,4 +337,60 @@
font-weight: inherit;
padding: 2px 0;
border-bottom: 1px dashed #1890ff;
}
// 仿表格
.imitation-table {
text-align: left;
thead tr {
background: #ebecf0;
color: #303133;
font-size: 14px;
}
thead th {
padding: 0 10px;
height: 48px;
line-height: 48px;
}
tbody {
td {
border-bottom: 1px solid #e4e7ed;
padding: 12px 10px;
vertical-align: middle;
color: #606266;
}
.count {
text-align: center;
border-left: 1px solid #e4e7ed;
}
}
// div的仿表格
.thead {
background: #f1f3f7;
color: #303133;
font-size: 14px;
.el-col {
line-height: 23px;
padding: 12px 10px;
}
}
.tbody {
.td {
border-bottom: 1px solid #e4e7ed;
padding: 12px 10px;
vertical-align: middle;
color: #606266;
&.active, &:hover {
background: #f5f7fa;
}
.el-row {
display: flex;
align-items: center;
}
.el-col {
padding: 0 10px;
line-height: 23px;
}
}
}
}
\ No newline at end of file
src/views/activity/data-view.vue
......@@ -6,13 +6,14 @@
<span style="color:#909399;" class="ml10">* 次日0点后更新当天营销数据统计</span>
</p>
<template v-if="!isHistory">
<div class="bk f1" :class="fade">
<div class="bk f1 big" :class="fade">
<div class="bl-item-01"><span>营销人次</span></div>
<el-row>
<el-col :span="8"><view-item text="昨日" :num="dataView.activityStat.activityMbrCntD"></view-item></el-col>
<el-col :span="8"><view-item text="本月" :num="dataView.activityStat.activityMbrCntM"></view-item></el-col>
<el-col :span="8"><view-item text="累计" :num="dataView.activityStat.activityMbrCntTd" numBlue run></view-item></el-col>
</el-row>
<p class="tips">注：涉及卡券投放，当投放渠道不是在卡券营销中直接投放时，营销次数可能会重复统计</p>
</div>
<div class="bk f2" :class="fade">
<div class="bl-item-02"><span>活动覆盖人数</span></div>
......
src/views/ecm/scan-list.vue
......@@ -9,7 +9,56 @@
<el-button type="primary" @click="$router.push('/scan/add')">新建计划</el-button>
</div>
</div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" element-loading-text="拼命加载中">
<div class="imitation-table drag-table" style="width:100%;">
<el-row class="thead">
<el-col :span="1"></el-col>
<el-col :span="2">优先级</el-col>
<el-col :span="5">封面</el-col>
<el-col :span="5">创建时间</el-col>
<el-col :span="4">启用状态</el-col>
<el-col :span="5">操作</el-col>
</el-row>
<!-- <div> -->
<!-- v-model="tableList" -->
<draggable tag="div" class="tbody" handle=".icon-paixu1" v-bind="dragOptions" @end="onDragEnd">
<transition-group type="transition">
<div class="td" v-for="(item, key) in tableList" :key="item.ecmPlanId" @mouseover="hoverIdx = item.ecmPlanId" @mouseout="hoverIdx = -1" :class="{ active: hoverIdx === item.ecmPlanId }">
<el-row>
<el-col :span="1"><i class="iconfont icon-paixu1 slideIcon place-font-color cursor fz12"></i></el-col>
<el-col :span="2">{{ key + 1 }}</el-col>
<el-col :span="5">
<fill-image :url="item.imageUrl" width="40" height="40" shape="square" />
</el-col>
<el-col :span="5">
<p class="cell-time">
{{ formatDateTimeByType(item.createTime, 'yyyy-MM-dd-HH-mm-ss', true).y }}<br />
<span>{{ formatDateTimeByType(item.createTime, 'yyyy-MM-dd-HH-mm-ss', true).h }}</span>
</p>
</el-col>
<el-col :span="4">
<el-switch @change="changeStatus(item)" :value="Boolean(item.status)" />
</el-col>
<el-col :span="5">
<template v-if="item.canEdit !== false">
<el-button type="text" @click="toRecord(scope.row)">记录</el-button>
<el-button type="text" v-if="item.effectType == 0 || item.effectType == 1" @click="editData(scope.row)">编辑</el-button>
<el-button type="text" v-if="item.effectType == 2" @click="$router.push(`/scan/info/${item.ecmPlanId}`)">详情</el-button>
</template>
<dm-delete v-if="item.effectType !== 2 && item.onlineStatus === 1 && item.canEdit !== false" @confirm="offlineEcmPlan(scope.row)" tips="是否下线该计划?">
<el-button type="text">下线</el-button>
</dm-delete>
<dm-delete v-if="item.putonStatus !== 2 && item.canEdit !== false" @confirm="delData(scope.row)" tips="是否删除该计划?">
<el-button type="text">删除</el-button>
</dm-delete>
</el-col>
</el-row>
</div>
</transition-group>
</draggable>
<div v-if="tableList.length === 0" class="el-table__empty-block" style="width: 100%;"><span class="el-table__empty-text">暂无数据</span></div>
<!-- </div> -->
</div>
<!-- <el-table tooltipEffect="light" :data="tableList" style="width: 100%" element-loading-text="拼命加载中">
<el-table-column label="优先级" type="index" width="80"></el-table-column>
<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">
......@@ -33,12 +82,13 @@
</dm-delete>
</template>
</el-table-column>
</el-table>
</el-table> -->
<!-- 不需要分页，只取前20 -->
<!-- <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> -->
</section>
</template>
<script>
import draggable from 'vuedraggable';
import activitySelect from '@/components/activity-select/index.vue';
import { formatDateTimeByType } from '@/utils/index.js';
import { loadEcmList, deleteEcm, offlineEcmPlan } from '@/service/api/ecmApi.js';
......@@ -48,67 +98,66 @@ export default {
return {
dateTime: [],
listParams: {
effectType: '', // 全部失效的默认值是-1,提交时判断''改为-1
marketingType: '',
marketingActivityId: '',
onlineStatus: '',
onlineStatus: '', // onlineStatus字段：不填为有效记录 2：历史记录
searchName: '',
currentPage: 1,
pageSize: 20,
showSelfFlag: ''
showSelfFlag: '',
effectAction: 'scanning' // 新增字段：effectAction 当effectAction=scanning时 按level_sort倒序
},
total: 0,
loading: false,
tableHeader: [
{ label: '计划名称', prop: 'ecmPlanName', minWidth: '160', align: 'left' },
{
label: '创建时间',
prop: 'createTime',
minWidth: '120',
align: 'left',
formatter(row) {
const date = formatDateTimeByType(row.createTime, 'yyyy-MM-dd-HH-mm-ss', true);
return date.y + '\n' + date.h;
}
},
{
label: '状态',
prop: 'onlineStatus',
width: '160',
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: 'createTime',
minWidth: '120',
align: 'left',
formatter(row) {
const date = formatDateTimeByType(row.createTime, 'yyyy-MM-dd-HH-mm-ss', true);
return date.y + '\n' + date.h;
}
},
{ label: '合计营销次数', prop: 'timesForPeople', width: '160', align: 'left' }
],
// tableHeader: [
// { label: '计划名称', prop: 'ecmPlanName', minWidth: '160', align: 'left' },
// {
// label: '创建时间',
// prop: 'createTime',
// minWidth: '120',
// align: 'left',
// formatter(row) {
// const date = formatDateTimeByType(row.createTime, 'yyyy-MM-dd-HH-mm-ss', true);
// return date.y + '\n' + date.h;
// }
// },
// {
// label: '状态',
// prop: 'onlineStatus',
// width: '160',
// 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: 'createTime',
// minWidth: '120',
// align: 'left',
// formatter(row) {
// const date = formatDateTimeByType(row.createTime, 'yyyy-MM-dd-HH-mm-ss', true);
// return date.y + '\n' + date.h;
// }
// },
// { label: '合计营销次数', prop: 'timesForPeople', width: '160', align: 'left' }
// ],
tableList: []
};
},
components: {
activitySelect
activitySelect,
draggable
},
created() {
this.getTableList();
......@@ -116,6 +165,7 @@ export default {
this.$store.commit('mutations_breadcrumb', [{ name: '扫码营销', path: '' }, { name: '营销计划', path: '/scan' }]); // eslint-disable-line
},
methods: {
formatDateTimeByType,
search() {
this.listParams.currentPage = 1;
this.getTableList();
......@@ -186,6 +236,19 @@ export default {
} catch (err) {
this.$tips({ type: 'error', message: '下线失败!' });
}
},
// 拖拽结束
onDragEnd(data) {
// 提交
// this.loading = true;
}
},
computed: {
dragOptions() {
return {
animation: 300,
ghostClass: 'ghost'
};
}
}
};
......
static/fonts/iconfont.css
This source diff could not be displayed because it is too large. You can view the blob instead.
static/fonts/iconfont.js
This source diff could not be displayed because it is too large. You can view the blob instead.
static/fonts/iconfont.json
......@@ -6,6 +6,83 @@
"description": "",
"glyphs": [
{
"icon_id": "16041446",
"name": "排序",
"font_class": "paixu1",
"unicode": "e64f",
"unicode_decimal": 58959
},
{
"icon_id": "12577879",
"name": "图片",
"font_class": "tupian-copy",
"unicode": "e64c",
"unicode_decimal": 58956
},
{
"icon_id": "17614018",
"name": "绘制热区",
"font_class": "huizhirequ",
"unicode": "e64d",
"unicode_decimal": 58957
},
{
"icon_id": "17682067",
"name": "热区绘制",
"font_class": "requhuizhi",
"unicode": "e64e",
"unicode_decimal": 58958
},
{
"icon_id": "17675917",
"name": "视频流量",
"font_class": "shipinliuliang",
"unicode": "eb4d",
"unicode_decimal": 60237
},
{
"icon_id": "10501417",
"name": "图标_图片空间",
"font_class": "tubiao_tupiankongjian",
"unicode": "e656",
"unicode_decimal": 58966
},
{
"icon_id": "5722952",
"name": "视频",
"font_class": "video1",
"unicode": "e64b",
"unicode_decimal": 58955
},
{
"icon_id": "12472553",
"name": "开卡",
"font_class": "kaika",
"unicode": "e716",
"unicode_decimal": 59158
},
{
"icon_id": "12987636",
"name": "订单",
"font_class": "dingdan1",
"unicode": "e64a",
"unicode_decimal": 58954
},
{
"icon_id": "12996480",
"name": "会员数量",
"font_class": "huiyuanshuliang",
"unicode": "e6e2",
"unicode_decimal": 59106
},
{
"icon_id": "8922363",
"name": "好友",
"font_class": "haoyou",
"unicode": "e649",
"unicode_decimal": 58953
},
{
"icon_id": "3824532",
"name": "兑换记录",
"font_class": "duihuanjilu",
......
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