414 行
19 KiB
HTML
可执行文件
414 行
19 KiB
HTML
可执行文件
<!--[1.6.48]-->
|
|
<title>会员统计</title>
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
|
|
.el-header {
|
|
background-color: #B3C0D1;
|
|
color: #333;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
}
|
|
|
|
.el-aside {
|
|
background-color: #D3DCE6;
|
|
color: #333;
|
|
text-align: center;
|
|
line-height: 200px;
|
|
}
|
|
|
|
.cell {
|
|
font-size: 14px
|
|
}
|
|
</style>
|
|
<div id="vipAcountApp" v-cloak>
|
|
<template>
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="活跃会员统计" name="first">
|
|
<div id="active_vip" style="width: 660px;height:400px;margin: 0 auto;"></div>
|
|
<!-- 表格 -->
|
|
<el-table :data="ActivetableData" style="width: 100%" align="center">
|
|
<el-table-column label="序号" align="center">
|
|
<template slot-scope="scope">
|
|
{{scope.$index+1}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="姓名/昵称" align="center">
|
|
<template slot-scope="scope">
|
|
<p>{{scope.row.name?scope.row.name:'--'}}|{{scope.row.nickname?scope.row.nickname:'--'}}
|
|
</p>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="mobile_phone" label="手机号" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="vip_type" label="会员类型" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="vip_lv" label="会员等级" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="expense_last" label="最后活跃时间" align="center">
|
|
<template slot-scope="scope">
|
|
<p>{{scope.row.expense_last?scope.row.expense_last:'----'}}</p>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<el-pagination @current-change="ActiveCurrentChange" :current-page="ActiveCurrentPage"
|
|
:page-sizes="[10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
|
|
:total="Activetotal">
|
|
</el-pagination>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="沉睡会员统计" name="second">
|
|
<div id="sleep_vip" style="width: 660px;height:400px;margin: 0 auto;"></div>
|
|
<!-- 表格 -->
|
|
<el-table :data="SleeptableData" style="width: 100%" align="center">
|
|
<el-table-column label="序号" align="center">
|
|
<template slot-scope="scope">
|
|
{{scope.$index+1}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="姓名/昵称" align="center">
|
|
<template slot-scope="scope">
|
|
<p>{{scope.row.name?scope.row.name:'--'}}|{{scope.row.nickname?scope.row.nickname:'--'}}
|
|
</p>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="mobile_phone" label="手机号" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="vip_type" label="会员类型" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="vip_lv" label="会员等级" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="expense_last" label="最后活跃时间" align="center">
|
|
<template slot-scope="scope">
|
|
<p>{{scope.row.expense_last?scope.row.expense_last:'----'}}</p>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<el-pagination @current-change="SleepCurrentChange" :current-page="SleepCurrentPage" :page-sizes="[10]"
|
|
:page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
|
|
:total="Sleeptotal">
|
|
</el-pagination>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="会员生日统计" name="third">
|
|
<div id="birth_vip" style="width: 660px;height:400px;margin: 0 auto;"></div>
|
|
<!-- 表格 -->
|
|
<el-table :data="BirthtableData" style="width: 100%" align="center">
|
|
<el-table-column label="序号" align="center">
|
|
<template slot-scope="scope">
|
|
{{scope.$index+1}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="姓名/昵称" align="center">
|
|
<template slot-scope="scope">
|
|
<p>{{scope.row.name?scope.row.name:'--'}}|{{scope.row.nickname?scope.row.nickname:'--'}}
|
|
</p>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="mobile_phone" label="手机号" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="vip_type" label="会员类型" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="vip_lv" label="会员等级" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="expense_last" label="最后活跃时间" align="center">
|
|
<template slot-scope="scope">
|
|
<p>{{scope.row.expense_last?scope.row.expense_last:'----'}}</p>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<el-pagination @current-change="BirthCurrentChange" :current-page="BirthCurrentPage" :page-sizes="[10]"
|
|
:page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
|
|
:total="Birthtotal">
|
|
</el-pagination>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</template>
|
|
</div>
|
|
<script type="text/javascript" charset="utf-8" src="/Public/echarts-pie/echarts.min.js"></script>
|
|
<script type="text/javaScript">
|
|
var vipAcountApp = new Vue({
|
|
el: "#vipAcountApp",
|
|
data: function () {
|
|
|
|
return {
|
|
activeName: 'first',
|
|
ActivetableData: [], // 活跃会员
|
|
SleeptableData: [], //沉睡会员
|
|
BirthtableData: [], //生日会员
|
|
ActiveCurrentPage: 1,
|
|
SleepCurrentPage: 1,
|
|
BirthCurrentPage: 1,
|
|
Activetotal: 0,// 活跃会员
|
|
Sleeptotal: 0,
|
|
Birthtotal: 0,
|
|
pagesize: 10,
|
|
activeVip: [],
|
|
birthData: [],
|
|
sleepData: [],
|
|
paramList: {}, //饼状图参数
|
|
}
|
|
},
|
|
created() {
|
|
//获取活跃会员
|
|
this.getActiveUserBread()
|
|
},
|
|
methods: {
|
|
// 活跃会员
|
|
getActiveUserBread() {
|
|
var that = this;
|
|
$.ajax({
|
|
type: 'post',
|
|
url: '/index.php/Retail/MemberAnalyze/getActiveUserBread',
|
|
success: res => {
|
|
|
|
if (res.status == 1) {
|
|
console.log(res);
|
|
|
|
that.activeVip = res.data
|
|
// 活跃会员
|
|
var active_vip = echarts.init(document.getElementById('active_vip'));
|
|
var option_active = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b} : {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
bottom: 10,
|
|
left: 'center',
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '65%',
|
|
center: ['50%', '50%'],
|
|
label: {
|
|
normal: {
|
|
formatter: '{b} ({d}%) {c}人',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: 15
|
|
}
|
|
}
|
|
},
|
|
selectedMode: 'single',
|
|
data: this.activeVip,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
},
|
|
}
|
|
}
|
|
]
|
|
};
|
|
active_vip.setOption(option_active);
|
|
active_vip.on('click', that.getActiveUser);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 获取活跃会员
|
|
getActiveUser(param) {
|
|
console.log(param);
|
|
|
|
if (param.name != this.paramList.name) {
|
|
this.paramList = param
|
|
this.ActiveCurrentPage = 1
|
|
}
|
|
$.ajax({
|
|
type: 'post',
|
|
url: '/index.php/Retail/MemberAnalyze/getActiveUserByMonth',
|
|
data: {
|
|
timestamp: param.name,
|
|
page: this.ActiveCurrentPage,
|
|
pageSize: this.pagesize
|
|
},
|
|
success: res => {
|
|
this.ActivetableData = res.data.list;
|
|
this.Activetotal = res.data.total ? parseInt(res.data.total) : 0;
|
|
|
|
}
|
|
})
|
|
},
|
|
// 获取沉睡会员
|
|
getSleepUserBread() {
|
|
var that = this;
|
|
$.ajax({
|
|
type: 'post',
|
|
url: '/index.php/Retail/MemberAnalyze/getActiveUserBread',
|
|
data: {
|
|
type: 1
|
|
},
|
|
success: res => {
|
|
if (res.status == 1) {
|
|
that.sleepData = res.data;
|
|
var sleep_vip = echarts.init(document.getElementById('sleep_vip'));
|
|
// 沉睡会员
|
|
var option_sleep = {
|
|
legend: {
|
|
bottom: 10,
|
|
left: 'center',
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '65%',
|
|
center: ['50%', '50%'],
|
|
label: {
|
|
normal: {
|
|
formatter: '{b} ({d}%) {c}人',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: 15
|
|
}
|
|
}
|
|
},
|
|
selectedMode: 'single',
|
|
data: that.sleepData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
sleep_vip.setOption(option_sleep);
|
|
sleep_vip.on("click", that.sleepTable);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 沉睡会员列表
|
|
sleepTable(param) {
|
|
if (param.name != this.paramList.name) {
|
|
this.paramList = param;
|
|
this.SleepCurrentPage = 1;
|
|
}
|
|
$.ajax({
|
|
type: 'post',
|
|
url: '/index.php/Retail/MemberAnalyze/getActiveUserByMonth',
|
|
data: {
|
|
type: 1,
|
|
timestamp: param.name,
|
|
page: this.SleepCurrentPage,
|
|
pageSize: this.pagesize
|
|
},
|
|
success: res => {
|
|
console.log(res.data.list);
|
|
this.SleeptableData = res.data.list;
|
|
this.Sleeptotal = res.data.total ? parseInt(res.data.total) : 0;
|
|
console.log(this.total);
|
|
}
|
|
})
|
|
},
|
|
// 获取生日会员
|
|
getBirthUserBread() {
|
|
var that = this;
|
|
$.ajax({
|
|
type: 'post',
|
|
url: '/index.php/Retail/MemberAnalyze/getBirthUserBread',
|
|
success: res => {
|
|
if (res.status == 1) {
|
|
that.birthData = res.data;
|
|
var birth_vip = echarts.init(document.getElementById('birth_vip'));
|
|
//生日会员
|
|
var option_birth = {
|
|
legend: {
|
|
bottom: 10,
|
|
left: 'center',
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '65%',
|
|
center: ['50%', '50%'],
|
|
label: {
|
|
normal: {
|
|
formatter: '{b} ({d}%) {c}人',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: 15
|
|
}
|
|
}
|
|
},
|
|
selectedMode: 'single',
|
|
data: that.birthData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
birth_vip.setOption(option_birth);
|
|
birth_vip.on("click", that.birthTable);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 生日会员信息
|
|
birthTable(param) {
|
|
console.log(param);
|
|
|
|
if (param.name != this.paramList.name)
|
|
this.paramList = param
|
|
$.ajax({
|
|
type: 'post',
|
|
url: '/index.php/Retail/MemberAnalyze/getActiveUserByBirth',
|
|
data: {
|
|
type: param.dataIndex + 1,
|
|
page: this.BirthCurrentPage,
|
|
pageSize: this.pagesize
|
|
},
|
|
success: res => {
|
|
if (res.status == 1) {
|
|
console.log(this.tableData)
|
|
this.BirthtableData = res.data.list;
|
|
this.Birthtotal = res.data.total ? parseInt(res.data.total) : 0
|
|
}
|
|
}
|
|
})
|
|
},
|
|
handleClick(tab) {
|
|
if (tab.index == 1) {
|
|
this.SleeptableData = [];
|
|
this.Sleeptotal = 0;
|
|
this.CurrentPage = 1;
|
|
this.getSleepUserBread()
|
|
} else if (tab.index == 2) {
|
|
this.BirthtableData = [];
|
|
this.Birthtotal = 0;
|
|
this.CurrentPage = 1;
|
|
this.getBirthUserBread()
|
|
} else {
|
|
this.ActivetableData = [];
|
|
this.Activetotal = 0;
|
|
this.CurrentPage = 1;
|
|
}
|
|
},
|
|
ActiveCurrentChange(val) {
|
|
this.ActiveCurrentPage = val;
|
|
this.getActiveUser(this.paramList)
|
|
},
|
|
SleepCurrentChange(val) {
|
|
this.SleepCurrentPage = val;
|
|
this.sleepTable(this.paramList)
|
|
},
|
|
BirthCurrentChange(val) {
|
|
this.BirthCurrentPage = val;
|
|
this.birthTable(this.paramList)
|
|
},
|
|
},
|
|
})
|
|
</script> |