600 行
24 KiB
HTML
可执行文件
600 行
24 KiB
HTML
可执行文件
<!--[1.6.86]-->
|
||
<title>会员分析</title>
|
||
<style>
|
||
.text {
|
||
font-size: 14px;
|
||
display: inline-block;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.el-radio-button__inner {
|
||
margin: 10px 15px 10px 0;
|
||
border-left: 1px solid #dcdfe6;
|
||
}
|
||
|
||
.element {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height .3s;
|
||
}
|
||
|
||
:checked ~ .element {
|
||
max-height: 666px;
|
||
}
|
||
|
||
input[type="checkbox"] {
|
||
position: absolute;
|
||
clip: rect(0 0 0 0);
|
||
}
|
||
|
||
:checked ~ .check-in {
|
||
display: none;
|
||
}
|
||
|
||
.appear {
|
||
height: 48px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cell {
|
||
font-size: 14px
|
||
}
|
||
|
||
body,
|
||
table {
|
||
font-size: 16px;
|
||
}
|
||
|
||
table {
|
||
table-layout: fixed;
|
||
empty-cells: show;
|
||
border-collapse: collapse;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
td {
|
||
height: 30px;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3 {
|
||
font-size: 24px;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.table {
|
||
border: 1px solid #cad9ea;
|
||
color: #666;
|
||
}
|
||
|
||
.table th {
|
||
background-repeat: repeat-x;
|
||
height: 30px;
|
||
}
|
||
|
||
.table td,
|
||
.table th {
|
||
border: 1px solid #cad9ea;
|
||
padding: 0 1em 0;
|
||
}
|
||
|
||
.table tr.alter {
|
||
background-color: #f5fafe;
|
||
}
|
||
|
||
#form .el-form-item__label {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
#form .el-form-item {
|
||
margin-bottom: 0;
|
||
}
|
||
</style>
|
||
|
||
<div id="vipAnalysisApp" v-cloak>
|
||
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
|
||
<el-form-item>
|
||
<el-input v-model="searchForm.search" size="mini" placeholder="请输入会员昵称/手机号"></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-select v-model="searchForm.member_type" placeholder="请选择会员类型" clearable size="mini">
|
||
<el-option label="常规会员" value="3"></el-option>
|
||
<el-option label="PLUS会员" value="2"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-form id="form" label-width="110px">
|
||
<el-form-item label="最近消费时间">
|
||
<el-radio-group v-model="time" size="mini" border @change="changeTime">
|
||
<el-radio-button label="不限时间"></el-radio-button>
|
||
<el-radio-button label="一周内"></el-radio-button>
|
||
<el-radio-button label="两周内"></el-radio-button>
|
||
<el-radio-button label="1个月内"></el-radio-button>
|
||
<el-radio-button label="2个月内"></el-radio-button>
|
||
</el-radio-group>
|
||
<el-button type="text" size="mini" @click="ShowDays = !ShowDays">{{ShowDays?'已选时间':'自定义'}}</el-button>
|
||
<el-date-picker size="mini" v-show="ShowDays" v-model="chooseMonth" type="daterange"
|
||
range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"
|
||
format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" @change="chooseMonthOK"
|
||
:picker-options="pickerOptions0">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="购买次数">
|
||
<el-radio-group v-model="count" size="mini" border @change="BuyCount">
|
||
<el-radio-button label="-1">不限次数</el-radio-button>
|
||
<el-radio-button label="0">0次</el-radio-button>
|
||
<el-radio-button label="1">1次</el-radio-button>
|
||
<el-radio-button label="2">2次</el-radio-button>
|
||
<el-radio-button label="3">3次</el-radio-button>
|
||
</el-radio-group>
|
||
<el-button type="text" size="mini" @click="isShowCount">{{ShowCount?'已选次数':'自定义'}}</el-button>
|
||
<el-input-number v-show="ShowCount" v-model="chooseCount" @change="countChange" :min="1"
|
||
:max="100000" size="mini"></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="类目">
|
||
<el-radio-group v-model="category" size="mini" border @change="ClassChange"
|
||
style="max-width: 640px;vertical-align: top;" :class="{'appear':appear_more}"
|
||
:disabled="count==0?true:false">
|
||
<el-radio-button label="">不限类目</el-radio-button>
|
||
<el-radio-button v-for="(item,index) in categoryList" :label="item.id">{{item.class_name}}
|
||
</el-radio-button>
|
||
</el-radio-group>
|
||
<el-button v-if="categoryList.length>7" type="text" size="mini" @click="appear">{{appear_more?'更多':'收起'}}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="消费金额">
|
||
<el-radio-group v-model="money" size="mini" border @change="chooseMoney"
|
||
:disabled="count==0?true:false">
|
||
<el-radio-button label="0">不限金额</el-radio-button>
|
||
<el-radio-button label="0-500">0-500</el-radio-button>
|
||
<el-radio-button label="500-1000">500-1000</el-radio-button>
|
||
<el-radio-button label="1000-2000">1000-2000</el-radio-button>
|
||
<el-radio-button label="2000-5000">2000-5000</el-radio-button>
|
||
</el-radio-group>
|
||
<el-button type="text" size="mini" @click="isShowMoney">{{ShowMoney?'已选金额':'自定义'}}</el-button>
|
||
<span v-show="ShowMoney">
|
||
<el-input type="number"
|
||
v-model="start_money"
|
||
style="width: 80px;"
|
||
size="mini"
|
||
:min="0"
|
||
:max="end_money?end_money-1:10000000"></el-input> - <el-input type="number"
|
||
v-model="end_money"
|
||
style="width: 80px;"
|
||
size="mini"
|
||
:min="start_money?start_money*1+1:1"
|
||
:max="10000000"></el-input>
|
||
<el-button size="mini" @click="sureMoney">确定</el-button>
|
||
</span>
|
||
</el-form-item>
|
||
<el-form-item label="会员标签">
|
||
<el-radio-group v-model="style" size="mini" border @change="vipLabelChange"
|
||
style="max-width: 640px;vertical-align: top;" :class="{'appear':label_more}">
|
||
<el-radio-button label="">不限标签</el-radio-button>
|
||
<el-radio-button v-for="(item,index) in VipLabel" :label="item.id">{{item.name}}
|
||
</el-radio-button>
|
||
</el-radio-group>
|
||
<el-button v-if="VipLabel.length>6" type="text" size="mini" @click="labelMore">{{label_more?'更多':'收起'}}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<!-- 表格 -->
|
||
<template>
|
||
<el-table :data="tableData" style="width: 100%">
|
||
<el-table-column label="序号" align="center" width="50" 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_amount" label="累计消费金额" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="expense_num" label="累计消费次数" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="expense_last" label="最后消费时间" align="center">
|
||
</el-table-column>
|
||
<el-table-column label="商品类目" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="mini" @click="showClassDialog(scope.row.id)">查看</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
<!-- 分页 -->
|
||
<el-pagination @current-change="CurrentChange" :current-page="CurrentPage" :page-sizes="[10]"
|
||
:page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||
</el-pagination>
|
||
<!-- 购买类目弹框 -->
|
||
<el-dialog title="购买类目" :modal-append-to-body="false" :visible.sync="classDialog" width="60%">
|
||
<el-table :data="classTableData" style="width: 100%">
|
||
<el-table-column label="序号" align="center" width="50">
|
||
<template slot-scope="scope">
|
||
{{scope.$index+1}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="类目名称" prop="name" align="center">
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 分页 -->
|
||
<el-pagination @current-change="classCurrentChange" :current-page="classCurrentPage"
|
||
:page-sizes="[10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
|
||
:total="classtotal">
|
||
</el-pagination>
|
||
</el-dialog>
|
||
</div>
|
||
<script type="text/javaScript">
|
||
var vipAnalysisApp = new Vue({
|
||
el: "#vipAnalysisApp",
|
||
data: function () {
|
||
return {
|
||
searchForm: {
|
||
search: '',
|
||
member_type: '',
|
||
},
|
||
chooseMonth: [], //自定义月份
|
||
chooseCount: '', //自定义次数
|
||
start_money: '', //自定义开始金额
|
||
end_money: '',//自定义结束金额
|
||
time: '不限时间', //消费时间
|
||
count: '-1',
|
||
category: '',
|
||
categoryList: [], //类目表
|
||
money: '0',
|
||
style: '',
|
||
total: 100,
|
||
CurrentPage: 1,
|
||
pagesize: 10,
|
||
classCurrentPage: 1, //类目当前页
|
||
classtotal: 0, //类目总条数
|
||
tableData: [],
|
||
classDialog: false, //类目弹框
|
||
classTableData: [], //类目表
|
||
ShowDays: false,
|
||
ShowCount: false,
|
||
ShowMoney: false,
|
||
times: [],
|
||
VipLabel: [], // 会员标签
|
||
appear_more: true, //控制是否显示
|
||
label_more: true,
|
||
vid: '',// 当前用户id
|
||
pickerOptions0: {
|
||
disabledDate(time) {
|
||
let curDate = (new Date()).getTime();
|
||
let two = 730 * 24 * 3600 * 1000;
|
||
let twoMonths = curDate - two;
|
||
return time.getTime() > Date.now() || time.getTime() < twoMonths;
|
||
}
|
||
},
|
||
}
|
||
},
|
||
created() {
|
||
this.getUserList()
|
||
// 获取商品类目
|
||
this.getGoodsClassSell()
|
||
//获取会员标签
|
||
this.getVipLabel()
|
||
},
|
||
methods: {
|
||
//获取会员标签
|
||
getVipLabel() {
|
||
$.ajax({
|
||
type: 'post',
|
||
url: '/index.php/Retail/VipLabel/getVipLabel',
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.VipLabel = res.data.list
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getGoodsClassSell() {
|
||
$.ajax({
|
||
type: 'post',
|
||
url: '/index.php/Retail/MemberAnalyze/getGoodsClassSell',
|
||
data: {
|
||
page: this.classCurrentPage,
|
||
pageSize: 10
|
||
},
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.categoryList = res.data.list;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取用户列表
|
||
getUserList() {
|
||
$.ajax({
|
||
type: 'post',
|
||
url: '/index.php/Retail/MemberAnalyze/getUserList',
|
||
data: {
|
||
search: this.searchForm.search,
|
||
member_type: this.searchForm.member_type,
|
||
start_time: this.times[0] ? (this.times[0] + ' 00:00:00') : '',
|
||
end_time: this.times[1] ? (this.times[1] + ' 23:59:59') : '',
|
||
expense_num: this.count,
|
||
min_amount: this.money.split('-')[0],
|
||
max_amount: this.money.split('-')[1],
|
||
vip_label: this.style,
|
||
goods_class: this.category,
|
||
page: this.CurrentPage,
|
||
pageSize: this.pagesize
|
||
},
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.tableData = res.data.list;
|
||
this.total = res.data.total ? parseInt(res.data.total) : 0;
|
||
} else {
|
||
this.tableData = [];
|
||
this.total = 0
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取用户类目
|
||
getGoodsClass(id) {
|
||
this.vid = id
|
||
$.ajax({
|
||
type: 'post',
|
||
url: '/index.php/Retail/MemberAnalyze/getGoodsClassByConditions',
|
||
data: {
|
||
vid: id,
|
||
page: this.classCurrentPage,
|
||
pageSize: this.pagesize,
|
||
start_time: this.times[0],
|
||
end_time: this.times[1]
|
||
},
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
this.classTableData = res.data.list;
|
||
this.classtotal = parseInt(res.data.total)
|
||
} else {
|
||
this.classTableData = []
|
||
this.classtotal = 0
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 显示类目弹框
|
||
showClassDialog(id) {
|
||
this.classDialog = true;
|
||
this.classCurrent = 1;
|
||
this.getGoodsClass(id)
|
||
},
|
||
isShowCount() {
|
||
this.ShowCount = !this.ShowCount;
|
||
if (!this.ShowCount) {
|
||
this.chooseCount = 1;
|
||
}
|
||
if (this.ShowCount) {
|
||
this.chooseCount = 1;
|
||
if (this.count < 1) {
|
||
this.count = 1;
|
||
}
|
||
}
|
||
},
|
||
// 选择次数
|
||
countChange() {
|
||
this.count = this.chooseCount
|
||
this.CurrentPage = 1
|
||
this.getUserList()
|
||
},
|
||
sureMoney() {
|
||
this.CurrentPage = 1;
|
||
if (this.start_money == '' || this.start_money == null || this.start_money == undefined) {
|
||
this.$message({
|
||
message: '请输入正确的起始金额',
|
||
type: 'warning'
|
||
});
|
||
return;
|
||
}
|
||
if (this.end_money == '' || this.end_money == null || this.end_money == undefined) {
|
||
this.$message({
|
||
message: '请输入正确的结束金额',
|
||
type: 'warning'
|
||
});
|
||
return;
|
||
}
|
||
if (this.end_money != '' && this.end_money != null && this.end_money != undefined && this.end_money * 1 <= this.start_money * 1) {
|
||
this.$message({
|
||
message: '结束金额必须大于起始金额',
|
||
type: 'warning'
|
||
});
|
||
return;
|
||
}
|
||
this.money = this.start_money + '-' + this.end_money;
|
||
this.getUserList();
|
||
},
|
||
onSubmit() {
|
||
this.CurrentPage = 1
|
||
this.getUserList()
|
||
},
|
||
// 类目显示
|
||
appear() {
|
||
this.appear_more = !this.appear_more
|
||
},
|
||
// 标签显示
|
||
labelMore() {
|
||
this.label_more = !this.label_more
|
||
},
|
||
CurrentChange(val) {
|
||
this.CurrentPage = val;
|
||
this.getUserList()
|
||
},
|
||
// 类目页码改变
|
||
classCurrentChange(val) {
|
||
this.classCurrentPage = val;
|
||
this.getGoodsClass(this.vid)
|
||
},
|
||
// 时间选择
|
||
changeTime() {
|
||
this.ShowDays = false;
|
||
this.chooseMonth = [];
|
||
if (this.time == '不限时间') {
|
||
this.times = []
|
||
}
|
||
// 一个月内
|
||
if (this.time == '1个月内') {
|
||
var month = this.getLastMonth();
|
||
this.times = month
|
||
|
||
}
|
||
if (this.time == '2个月内') {
|
||
var TwoMonth = this.getLastTwoMonth();
|
||
this.times = TwoMonth
|
||
}
|
||
if (this.time == '一周内') {
|
||
var week = this.getLastWeek();
|
||
this.times = week
|
||
}
|
||
if (this.time == '两周内') {
|
||
var twoWeek = this.getLastTwoWeek();
|
||
this.times = twoWeek
|
||
}
|
||
this.CurrentPage = 1
|
||
this.getUserList()
|
||
},
|
||
// 自定义金额
|
||
isShowMoney() {
|
||
this.ShowMoney = !this.ShowMoney
|
||
},
|
||
// 购买次数选择
|
||
BuyCount() {
|
||
this.CurrentPage = 1;
|
||
this.ShowCount = false;
|
||
this.getUserList();
|
||
},
|
||
// 选择金额
|
||
chooseMoney() {
|
||
this.start_money = '';
|
||
this.end_money = '';
|
||
this.CurrentPage = 1;
|
||
this.ShowMoney = false;
|
||
this.getUserList();
|
||
},
|
||
// 选择类目
|
||
ClassChange() {
|
||
this.CurrentPage = 1;
|
||
this.getUserList()
|
||
},
|
||
//选择标签
|
||
vipLabelChange() {
|
||
this.CurrentPage = 1;
|
||
this.getUserList()
|
||
},
|
||
//上个月
|
||
getLastMonth() {
|
||
var end_time = new Date();
|
||
var year = end_time.getFullYear();
|
||
var month = end_time.getMonth() + 1;//0-11表示1-12月
|
||
var day = end_time.getDate();
|
||
var dateObj = [];
|
||
dateObj[1] = year + '-' + month + '-' + day;
|
||
var nowMonthDay = new Date(year, month, 0).getDate(); //当前月的总天数
|
||
if (month - 1 <= 0) { //如果是1月，年数往前推一年
|
||
dateObj[0] = (year - 1) + '-' + 12 + '-' + day;
|
||
} else {
|
||
var lastMonthDay = new Date(year, (parseInt(month) - 1), 0).getDate();
|
||
if (lastMonthDay < day) { //1个月前所在月的总天数小于现在的天日期
|
||
if (day < nowMonthDay) { //当前天日期小于当前月总天数
|
||
dateObj[0] = year + '-' + (month - 1) + '-' + (lastMonthDay - (nowMonthDay - day));
|
||
} else {
|
||
dateObj[0] = year + '-' + (month - 1) + '-' + lastMonthDay;
|
||
}
|
||
} else {
|
||
dateObj[0] = year + '-' + (month - 1) + '-' + day;
|
||
}
|
||
}
|
||
return dateObj;
|
||
},
|
||
//上两个月
|
||
getLastTwoMonth() {
|
||
var end_time = new Date();
|
||
var year = end_time.getFullYear();
|
||
var month = end_time.getMonth() + 1;//0-11表示1-12月
|
||
var day = end_time.getDate();
|
||
var dateObj = [];
|
||
dateObj[1] = year + '-' + month + '-' + day;
|
||
var nowMonthDay = new Date(year, month, 0).getDate(); //当前月的总天数
|
||
if (month - 2 <= 0) { //如果是1月，年数往前推一年
|
||
dateObj[0] = (year - 1) + '-' + 12 + '-' + day;
|
||
} else {
|
||
var lastMonthDay = new Date(year, (parseInt(month) - 2), 0).getDate();
|
||
if (lastMonthDay < day) { //1个月前所在月的总天数小于现在的天日期
|
||
if (day < nowMonthDay) { //当前天日期小于当前月总天数
|
||
dateObj[0] = year + '-' + (month - 2) + '-' + (lastMonthDay - (nowMonthDay - day));
|
||
} else {
|
||
dateObj[0] = year + '-' + (month - 2) + '-' + lastMonthDay;
|
||
}
|
||
} else {
|
||
dateObj[0] = year + '-' + (month - 2) + '-' + day;
|
||
}
|
||
}
|
||
return dateObj;
|
||
},
|
||
// 上一周
|
||
getLastWeek() {
|
||
var end_time = new Date();
|
||
var year = end_time.getFullYear();
|
||
var month = end_time.getMonth() + 1;//0-11表示1-12月
|
||
var day = end_time.getDate();
|
||
var dateObj = []
|
||
dateObj[1] = year + '-' + month + '-' + day;
|
||
if (day - 7 <= 0) { //如果在当月7日之前
|
||
var lastMonthDay = new Date(year, (parseInt(month) - 1), 0).getDate(); //1周前所在月的总天数
|
||
if (month - 1 <= 0) { //如果在当年的1月份
|
||
dateObj[0] = (year - 1) + '-' + 12 + '-' + (31 - (7 - day));
|
||
} else {
|
||
dateObj[0] = year + '-' + (month - 1) + '-' + (lastMonthDay - (7 - day));
|
||
}
|
||
} else {
|
||
dateObj[0] = year + '-' + month + '-' + (day - 7);
|
||
}
|
||
return dateObj;
|
||
},
|
||
//上两周
|
||
getLastTwoWeek() {
|
||
var end_time = new Date();
|
||
var year = end_time.getFullYear();
|
||
var month = end_time.getMonth() + 1;//0-11表示1-12月
|
||
var day = end_time.getDate();
|
||
var dateObj = [];
|
||
dateObj[1] = year + '-' + month + '-' + day;
|
||
if (day - 14 <= 0) { //如果在当月14日之前
|
||
var lastMonthDay = new Date(year, (parseInt(month) - 1), 0).getDate(); //2周前所在月的总天数
|
||
if (month - 1 <= 0) { //如果在当年的1月份
|
||
dateObj[0] = (year - 1) + '-' + 12 + '-' + (31 - (14 - day));
|
||
} else {
|
||
dateObj[0] = year + '-' + (month - 1) + '-' + (lastMonthDay - (14 - day));
|
||
}
|
||
} else {
|
||
dateObj[0] = year + '-' + month + '-' + (day - 14);
|
||
}
|
||
return dateObj;
|
||
},
|
||
// 自定义选择月份
|
||
chooseMonthOK() {
|
||
this.CurrentPage = 1
|
||
this.times = this.chooseMonth
|
||
this.getUserList()
|
||
this.time = ''
|
||
}
|
||
},
|
||
})
|
||
</script> |