Skip to content

H
haoban-3
Commit a2842083 by shaojiawen
Options

update: 活码数据统计/查看记录

parent ca67a4b4
Showing with 719 additions and 11 deletions
src/assets/font/iconfont.css
@font-face {
font-family: "iconfont-hb3"; /* Project id 1628375 */
src: url('iconfont.woff2?t=1656413322466') format('woff2'),
url('iconfont.woff?t=1656413322466') format('woff'),
url('iconfont.ttf?t=1656413322466') format('truetype');
src: url('iconfont.woff2?t=1657093480813') format('woff2'),
url('iconfont.woff?t=1657093480813') format('woff'),
url('iconfont.ttf?t=1657093480813') format('truetype');
}
.iconfont-hb3 {
......@@ -13,8 +13,28 @@
-moz-osx-font-smoothing: grayscale;
}
.iconPlusOutlined:before {
content: "\e61f";
.iconzhibiaoshuoming:before {
content: "\eb57";
}
.iconmore:before {
content: "\ec97";
}
.iconclose1:before {
content: "\e62c";
}
.icontianjia:before {
content: "\e686";
}
.iconliushihuiyuan:before {
content: "\e6ca";
}
.iconxinzengyonghu:before {
content: "\e636";
}
.iconbiaoge-erweima:before {
......
src/assets/font/iconfont.js
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/font/iconfont.json
......@@ -6,11 +6,46 @@
"description": "",
"glyphs": [
{
"icon_id": "20415179",
"name": "PlusOutlined",
"font_class": "PlusOutlined",
"unicode": "e61f",
"unicode_decimal": 58911
"icon_id": "18049658",
"name": "指标说明",
"font_class": "zhibiaoshuoming",
"unicode": "eb57",
"unicode_decimal": 60247
},
{
"icon_id": "28687110",
"name": "more",
"font_class": "more",
"unicode": "ec97",
"unicode_decimal": 60567
},
{
"icon_id": "1457645",
"name": "close",
"font_class": "close1",
"unicode": "e62c",
"unicode_decimal": 58924
},
{
"icon_id": "3978428",
"name": "添加",
"font_class": "tianjia",
"unicode": "e686",
"unicode_decimal": 59014
},
{
"icon_id": "6134651",
"name": "流失会员",
"font_class": "liushihuiyuan",
"unicode": "e6ca",
"unicode_decimal": 59082
},
{
"icon_id": "9012695",
"name": "新增用户",
"font_class": "xinzengyonghu",
"unicode": "e636",
"unicode_decimal": 58934
},
{
"icon_id": "21009399",
......
src/router/actCodeManageRouter/staffActCodeRouter.js
......@@ -5,7 +5,16 @@ const staffActCodeRouter = [
path: '/staffActCode',
name: '员工活码',
component: _import('salesleads/actCodeManage/staffActCode', 'index')
},
{
path: '/actCodeRecord',
name: '查看记录',
component: _import('salesleads/actCodeManage/staffActCode', 'actCodeRecord')
},
{
path: '/actCodeDetail',
name: '活码详情',
component: _import('salesleads/actCodeManage/staffActCode', 'actCodeDetail')
}
];
export default staffActCodeRouter;
src/views/salesleads/actCodeManage/staffActCode/actCodeDetail.vue 0 → 100644
<template>
<div class="app-detail-wrap p-20">
<div class="flex p-b-40">
<img v-if="!singleCode" class="img-200" src="../../../../assets/data/time.png" />
<div class="text-ellipsis-white" :style="singleCode ? 'width:100%;' : 'width: calc(100% - 230px);'">
<div class="p-t-12 flex">
<div class="font-16 line-22 text-ellipsis-white height-22 font-w-500">活码名称活码名称活码名称活999</div>
<el-tag effect="dark" type="success" style="margin-left: 8px;">正常</el-tag>
<!-- 正常success/正常到上限warning/待生效info/已作废danger -->
</div>
<p class="font-14 m-t-10">ID：HM345675432456780</p>
<div class="flex font-14" style="padding-top:20px;">
<div class="flex flex-1">
<div class="font-14 line-22">类 型：</div>
<el-tag>{{ singleCode ? '单人活码' : '多人活码' }}</el-tag>
</div>
<div class="font-14 line-22 flex-1">创建人：达摩管理员</div>
<div class="font-14 line-22 flex-1">创建时间：2022-05-23 11:30:08</div>
</div>
<div class="flex font-14" style="padding-top:15px;">
<div class="font-14 line-22 flex-1">所属分组：分组名称</div>
<div class="flex flex-1">
<div class="font-14 line-22">自动通过好友：</div>
<!-- 已开启/已关闭danger -->
<el-tag>已开启</el-tag>
</div>
<div class="flex flex-1">
<div class="font-14 line-22">活码标签：</div>
<el-tag type="info">标签名称</el-tag>
</div>
</div>
<div v-if="codeStatus != 5" class="flex" style="padding-top:20px;">
<el-button v-if="!singleCode && codeStatus == 1" icon="el-icon-download" type="primary" style="width:120px;margin-right: 12px;" @click="downloadQR">下载二维码</el-button>
<el-button type="primary" plain style="width:98px;" @click="modifyCode">修改</el-button>
<el-button type="danger" plain style="width:98px;margin-left: 20px; border-color: #F5222D;" @click="discardCode">作废</el-button>
</div>
</div>
</div>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="详情信息" name="first">
<act-code-detail-info :brand-id="brandId"></act-code-detail-info>
</el-tab-pane>
<el-tab-pane label="数据统计" name="second">
<act-code-detail-statistics :brand-id="brandId"></act-code-detail-statistics>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import actCodeDetailInfo from './actCodeDetailInfo.vue';
import actCodeDetailStatistics from './actCodeDetailStatistics.vue';
export default {
name: 'actCodeDetail',
components: { actCodeDetailInfo, actCodeDetailStatistics },
props: {
brandId: {
type: String,
default: ''
}
},
data() {
return {
activeName: 'second',
singleCode: false,
codeStatus: 1 // 1为正常 5为已作废
};
},
methods: {
// downloadQR() {},
// modifyCode() {},
// discardCode() {}
}
};
</script>
<style lang="scss" scoped>
.app-detail-wrap {
// height: 100%;
background: #fff;
.p-b-40 {
padding-bottom: 40px;
}
}
.img-200 {
width: 200px;
height: 200px;
border-radius: 8px;
padding-right: 30px;
}
.height-22 {
height: 22px;
}
.line-20 {
line-height: 20px;
}
.text-ellipsis-white {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
src/views/salesleads/actCodeManage/staffActCode/actCodeDetailInfo.vue 0 → 100644
<template>
<div class="app-detail-wrap">
<div v-if="welcomeSpeech">
<div class="title flex">
<div class="blue-block"></div>
<span class="font-w-500">欢迎语</span>
</div>
</div>
<div>
<div class="title flex">
<div class="blue-block"></div>
<span class="font-w-500">使用成员</span>
</div>
<el-table ref="useMemberTableRef" v-loading="loading" :data="useMemberData" tooltip-effect="dark">
<el-table-column prop="" label="导购信息" show-overflow-tooltip min-width="185px">
<template slot-scope="scope">
<p class="line-20 text-ellipsis">{{ scope.row.cardName }}</p>
<p class="color-606266 line-18 text-ellipsis font-12">D3433433456</p>
</template>
</el-table-column>
<el-table-column prop="" label="导购所属门店" show-overflow-tooltip min-width="185px">
<template slot-scope="scope">
<p class="line-20 text-ellipsis">{{ scope.row.cardName }}</p>
<p class="color-606266 line-18 text-ellipsis font-12">D3433433456</p>
</template>
</el-table-column>
<el-table-column prop="" label="企微号" show-overflow-tooltip min-width="185px">
<template slot-scope="scope">
<p class="line-20 text-ellipsis">{{ scope.row.cardName }}</p>
<p class="color-606266 line-18 text-ellipsis font-12">D3433433456</p>
</template>
</el-table-column>
<el-table-column prop="" label="今日已达上限" show-overflow-tooltip min-width="185px">
<template slot-scope="scope">
{{ scope.row.cardName }}
</template>
</el-table-column>
</el-table>
<div class="text-right m-t-24 block" v-if="useMemberData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'act-code-detail-info',
props: {
brandId: {
type: String,
default() {
return '';
}
}
},
data() {
return {
welcomeSpeech: true,
useMemberData: [{ cardName: '电话电话电话' }],
loading: false,
currentPage: 1,
pageSize: 20,
total: 0
};
},
methods: {
/**
* 分页---页码变化
* @param {Number} val
*/
handleSizeChange(val) {
let that = this;
that.currentPage = 1;
that.pageSize = val;
that.getUseTableList();
},
/**
* 分页---当前页变化
* @param {Number} val
*/
handleCurrentChange(val) {
let that = this;
that.currentPage = val;
that.getUseTableList();
},
getUseTableList() {
const that = this;
that.loading = true;
let para = {
// gicEnterpriseId: that.brandId,
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize // 一页显示个数
};
console.log(para);
that.loading = false;
// postRequest('/haoban-app-customer-web/cardCoupon/find-card-page', para)
// .then(res => {
// let resData = res.data;
// that.loading = false;
// if (resData.errorCode == 1) {
// that.tableData = resData.result.list || [];
// that.total = resData.result.pageInfo ? resData.result.pageInfo.total : 0;
// return;
// }
// errMsg.errorMsg(resData);
// })
// .catch(function(error) {
// that.loading = false;
// that.$message.error({
// duration: 1000,
// message: error.message
// });
// });
}
},
mounted() {
let that = this;
// 判断brandId
that.getUseTableList();
}
};
</script>
<style lang="scss" scoped>
.blue-block {
width: 4px;
height: 16px;
background: #2f54eb;
margin: 7px 12px 7px 0;
}
.title {
line-height: 30px;
padding-bottom: 16px;
}
</style>
src/views/salesleads/actCodeManage/staffActCode/actCodeDetailStatistics.vue 0 → 100644
<template>
<div class="app-detail-wrap">
<div>
<div class="flex justify-between title">
<div class="flex">
<div class="blue-block"></div>
<span class="font-w-500">概览</span>
</div>
<div class="flex">
<i class="iconfont-hb3 iconzhibiaoshuoming color-1890ff"></i>
<div class="color-1890ff font-14 p-l-6" @click="explain">指标说明</div>
</div>
</div>
<ul class="flex">
<li class="data-total-cell m-r-22">
<div class="flex p-20">
<div class="icon-background">
<i class="iconfont-hb3 iconxinzengyonghu color-1890ff font-28"></i>
</div>
<div class="m-l-16">
<div class="font-14 color-606266 line-20">新增总人数</div>
<span class="font-30 font-din" style="margin-top:1;">12345</span>
</div>
</div>
</li>
<li class="data-total-cell ">
<div class="flex p-20">
<div class="icon-background" style="background: #d9f3fd;">
<i class="iconfont-hb3 iconxinzengyonghu color-35C4FC font-28"></i>
</div>
<div class="m-l-16">
<div class="font-14 color-606266 line-20">今日新增人数</div>
<span class="font-30 font-din" style="margin-top:1;">520</span>
</div>
</div>
</li>
</ul>
<!-- <el-date-picker class="m-l-10 w-330" style="width: 330px" prefix-icon="el-icon-time" :picker-options="pickerOptions" v-model="conditionObj.dateRange" @change="changeDate" :editable="false" :value-format="'yyyy-MM-dd'" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker> -->
</div>
<div class="flex justify-between title">
<div class="flex">
<div class="blue-block"></div>
<span class="font-w-500">查看明细</span>
</div>
<div class="flex">
<i class="iconfont-hb3 iconzhibiaoshuoming color-1890ff"></i>
<div class="color-1890ff font-14 p-l-6" @click="explain">指标说明</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'act-code-detail-statistics',
props: {
brandId: {
type: String,
default() {
return '';
}
}
},
data() {
return {
welcomeSpeech: false,
useMemberData: [{ cardName: '电话电话电话' }],
loading: false,
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}
],
onPick: ({ maxDate, minDate }) => {
this.choiceDateCopy = [minDate.getTime()];
if (maxDate) {
this.choiceDateCopy = [];
}
},
disabledDate: time => {
if (this.choiceDateCopy.length) {
const one = 365 * 24 * 3600 * 1000;
const minTime = this.choiceDateCopy[0] - one;
const maxTime = this.choiceDateCopy[0] + one;
return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > Date.now() - 8.64e6;
}
return time.getTime() > Date.now() - 8.64e6;
}
}
};
},
methods: {
getUseTableList() {
const that = this;
that.loading = true;
let para = {
// gicEnterpriseId: that.brandId,
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize // 一页显示个数
};
console.log(para);
that.loading = false;
// postRequest('/haoban-app-customer-web/cardCoupon/find-card-page', para)
// .then(res => {
// let resData = res.data;
// that.loading = false;
// if (resData.errorCode == 1) {
// that.tableData = resData.result.list || [];
// that.total = resData.result.pageInfo ? resData.result.pageInfo.total : 0;
// return;
// }
// errMsg.errorMsg(resData);
// })
// .catch(function(error) {
// that.loading = false;
// that.$message.error({
// duration: 1000,
// message: error.message
// });
// });
}
},
mounted() {
let that = this;
// 判断brandId
that.getUseTableList();
}
};
</script>
<style lang="scss" scoped>
.blue-block {
width: 4px;
height: 16px;
background: #2f54eb;
margin: 7px 12px 7px 0;
}
.title {
line-height: 30px;
padding-bottom: 16px;
}
.justify-between {
justify-content: space-between;
}
.data-total-cell {
position: relative;
min-width: 282px;
height: 96px;
background: #ffffff;
box-shadow: 0px 2px 8px 1px rgba(221, 227, 237, 0.34);
border-radius: 10px;
.icon-background {
width: 48px;
height: 48px;
margin: 4px 0;
background: #e7ebfe;
border-radius: 12px;
text-align: center;
line-height: 48px;
}
}
.color-35C4FC {
color: #35c4fc;
}
.font-28 {
font-size: 28px;
}
.line-20 {
line-height: 20px;
}
.m-r-22 {
margin-right: 22px;
}
</style>
src/views/salesleads/actCodeManage/staffActCode/actCodeRecord.vue 0 → 100644
<template>
<section class="common-right-wrap">
<div class="p-20">
<div class="flex m-b-20">
<el-input placeholder="请输入门店名称/code" v-model="searchInputStore" class="m-r-10" style="width: 260px;" @keyup.native="value => toInput(value, searchInputStore)" clearable @clear="clearInput()" prefix-icon="el-icon-search"></el-input>
<el-input placeholder="请输入导购名称/code" v-model="searchInputGuide" style="width: 260px;" @keyup.native="value => toInput(value, searchInputGuide)" clearable @clear="clearInput()" prefix-icon="el-icon-search"></el-input>
</div>
<el-table ref="recordTableRef" v-loading="loading" :data="tableData" tooltip-effect="dark" class="act-code-table" @sort-change="sortChange">
<el-table-column prop="" label="基本信息" show-overflow-tooltip min-width="210px" fixed>
<template>
<div class="flex">
<img class="image-40" src="../../../../assets/data/time.png" />
<div class="p-l-10 line-20" style="width: calc(100% - 50px);">
<div class="flex text-ellipsis">
<span class="text-ellipsis">飞扬飞扬飞扬飞扬飞扬飞扬飞扬</span>
<span class="color-909399 text-ellipsis"> (刘飞扬)</span>
</div>
<p class="font-12">189****5322</p>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="" label="会员卡号" show-overflow-tooltip min-width="126px">
<template slot-scope="scope">
{{ scope.row.cardName }}
</template>
</el-table-column>
<el-table-column prop="" label="会员等级" show-overflow-tooltip min-width="86px">
<template slot-scope="scope">
{{ scope.row.cardName }}
</template>
</el-table-column>
<el-table-column prop="" label="导购信息" show-overflow-tooltip min-width="128px">
<template slot-scope="scope">
<p class="line-20 text-ellipsis">{{ scope.row.cardName }}</p>
<p class="color-606266 line-18 text-ellipsis font-12">DM34344444444DM34344444444</p>
</template>
</el-table-column>
<el-table-column prop="" label="导购所属门店" show-overflow-tooltip min-width="185px">
<template slot-scope="scope">
<p class="line-20 text-ellipsis">{{ scope.row.cardName }}</p>
<p class="color-606266 line-18 text-ellipsis font-12">D3433433456</p>
</template>
</el-table-column>
<el-table-column prop="" label="企微号" show-overflow-tooltip min-width="107px">
<template slot-scope="scope">
<p class="line-20 text-ellipsis">{{ scope.row.cardName }}</p>
<p class="color-606266 line-18 text-ellipsis font-12">D3433433456</p>
</template>
</el-table-column>
<el-table-column prop="" label="添加时间" show-overflow-tooltip min-width="106px" sortable>
<template slot-scope="scope">
<div class="line-20">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="line-20">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column prop="" label="标签" show-overflow-tooltip min-width="144px">
<template slot-scope="scope">
{{ scope.row.cardName }}
</template>
</el-table-column>
<el-table-column prop="" label="关联类型" show-overflow-tooltip min-width="103px">
<template slot-scope="scope">
{{ scope.row.cardName }}
</template>
</el-table-column>
</el-table>
</div>
<div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
</div>
</section>
</template>
<script>
// import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
// import { postRequest } from '@/api/api';
export default {
name: 'actCodeRecord',
components: {},
props: {
actCode: {
type: String,
default: ''
}
},
data() {
return {
loading: false,
searchInputStore: '',
searchInputGuide: '',
tableData: [{ cardName: '常常常常常常常常常常常常常常常常', createTime: 1891282736363 }],
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0,
sortColumn: '',
sortType: ''
// 面包屑
};
},
// watch: {
// brandId(val) {
// if (!!val) {
// this.getTableList();
// }
// }
// },
methods: {
/**
* 输入
*/
toInput: _debounce(function(e, value, type) {
const that = this;
that.currentPage = 1;
that.getTableList();
}, 500),
clearInput() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
/**
* 排序
*/
sortChange(column, prop, order) {
const that = this;
that.sortColumn = column.prop;
that.sortType = column.order == 'ascending' ? 'asc' : 'desc';
that.getTableList();
},
/**
* 分页---页码变化
* @param {Number} val
*/
handleSizeChange(val) {
let that = this;
that.currentPage = 1;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
* @param {Number} val
*/
handleCurrentChange(val) {
let that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 获取列表数据
*/
async getTableList() {
const that = this;
that.loading = true;
let para = {
// gicEnterpriseId: that.brandId,
store: that.searchInputStore || '', // 搜索字段
guide: that.searchInputGuide || '', // 搜索字段
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize // 一页显示个数
};
console.log(para);
that.loading = false;
// postRequest('/haoban-app-customer-web/cardCoupon/find-card-page', para)
// .then(res => {
// let resData = res.data;
// that.loading = false;
// if (resData.errorCode == 1) {
// that.tableData = resData.result.list || [];
// that.total = resData.result.pageInfo ? resData.result.pageInfo.total : 0;
// return;
// }
// errMsg.errorMsg(resData);
// })
// .catch(function(error) {
// that.loading = false;
// that.$message.error({
// duration: 1000,
// message: error.message
// });
// });
}
},
mounted() {
let that = this;
// that.$emit('showTab', '1');
that.getTableList();
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.w-123 {
width: 123px;
}
.p-20 {
padding: 20px;
box-sizing: border-box;
}
.image-40 {
height: 40px;
width: 40px;
border-radius: 20px;
}
.line-20 {
line-height: 20px;
}
</style>
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