811 lines
41 KiB
Vue
811 lines
41 KiB
Vue
<template>
|
||
<section class="content">
|
||
<div class="box box-primary">
|
||
<div class="box-body">
|
||
<!-- Content Header (Page header) -->
|
||
<section class="content-header">
|
||
<h1 id="itemTitle"></h1>
|
||
<a href="javascript:void()" class="opt-show-intro">说明></a>
|
||
</section>
|
||
<div id="toolbar">
|
||
<div class="col-lg-12">
|
||
<div class="col-sm-8">
|
||
<label for="query-groupSelector" class="col-sm-2 control-label">选择查询团队:</label>
|
||
<div class="col-sm-4">
|
||
<select name="query-teamSelector"
|
||
onchange="initTeamSelector(this.options[this.selectedIndex].value, this.name)"
|
||
id="query-groupSelector" class="form-control" data-btn-class="btn-warning">
|
||
</select>
|
||
</div>
|
||
<label for="query-teamSelector" class="col-sm-2 control-label">选择查询小组:</label>
|
||
<div class="col-sm-4">
|
||
<select name="teamSelector" id="query-teamSelector" class="form-control"
|
||
data-btn-class="btn-warning">
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-12">
|
||
<div class="col-sm-5">
|
||
<label for="startTime" class="col-sm-6 control-label">选择被邀请用户的新增时间范围:</label>
|
||
<div class="col-sm-5">
|
||
<input type="text" class="input-sm form-control" name="startTime" id="startTime">
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-3">
|
||
<label for="endTime" class="col-sm-4 control-label">--</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="input-sm form-control" name="endTime" id="endTime">
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-default js-quick-search js-quick-search-1" data-days="1">
|
||
昨天
|
||
</button>
|
||
<button class="btn btn-default js-quick-search js-quick-search-7" data-days="7">
|
||
最近7天
|
||
</button>
|
||
<button class="btn btn-default js-quick-search js-quick-search-30" data-days="30">
|
||
最近30天
|
||
</button>
|
||
</div>
|
||
<div class="col-lg-12">
|
||
<div class="col-sm-5">
|
||
<label for="chargeStartTime" class="col-sm-6 control-label">选择被邀请用户的充值时间范围:</label>
|
||
<div class="col-sm-5">
|
||
<input type="text" class="input-sm form-control" name="chargeStartTime"
|
||
id="chargeStartTime">
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-3">
|
||
<label for="chargeEndTime" class="col-sm-4 control-label">--</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="input-sm form-control" name="chargeEndTime" id="chargeEndTime">
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-default js-quick-search_a js-quick-search-1" data-days="1">
|
||
昨天
|
||
</button>
|
||
<button class="btn btn-default js-quick-search_a js-quick-search-7" data-days="7">
|
||
最近7天
|
||
</button>
|
||
<button class="btn btn-default js-quick-search_a js-quick-search-30" data-days="30">
|
||
最近30天
|
||
</button>
|
||
</div>
|
||
<div class="col-sm-12">
|
||
<button id="btnSearch" class="btn btn-default">
|
||
<i class="glyphicon glyphicon-search"></i>查询
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- .content -->
|
||
<div id="group-table-div" style="display: none;">
|
||
<h3 id="group-tableTitle">团队统计</h3>
|
||
<div id="group-table"></div>
|
||
<button type="button" class="btn btn-primary" id="exportGroupDetail">导出团队明细</button>
|
||
</div>
|
||
<div>
|
||
<h3 id="tableTitle"></h3>
|
||
<div id="table"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
<!--说明modal-->
|
||
<div class="modal fade" id="introModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
||
aria-hidden="true">×</span>
|
||
</button>
|
||
<h4 class="modal-title" id="introModalTitle">统计说明</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
分组统计展示每个小组的整体数据，按不同的小组分别显示，查询前需要：<br />
|
||
1）输入查询的小组：非必填，不填写展示全部小组<br />
|
||
2）选择被邀请用户的新增时间范围：指的是被邀请的人新增的时间段，非必填，不填写展示截止到目前的全部数据<br />
|
||
3）选择被邀请用户的充值时间范围：指的是被邀请的人的充值行为发生的时间段，非必填，不填写展示截止到目前的全部数据<br />
|
||
表格按照选取的被邀请用户新增时间展示累计新增用户数<br />
|
||
表头说明：<br />
|
||
--新增用户数：该小组在所设置的被邀请用户新增时间范围内所引入的新用户数量<br />
|
||
--新增充值人数：该小组满足新增时间筛选的新增用户，在所设置的充值时间范围内发生首次充值的人数<br />
|
||
--付费转化：付费转化=表格显示的新增充值人数/表格显示的新增用户数<br />
|
||
--充值次数：该小组满足新增时间筛选的新增用户，在所设置的充值时间范围内发生的累计充值次数<br />
|
||
--充值金额：该小组满足新增时间筛选的新增用户，在所设置的充值时间范围内发生的累计充值金额<br />
|
||
--送礼金额：该小组满足新增时间筛选的新增用户，截止到目前时刻的送礼金额
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="teamDetailModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
||
aria-hidden="true">×</span>
|
||
</button>
|
||
<h4 class="modal-title" id="teamDetailModalTitle">分组明细</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="teamDetaillTable"></div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" id="exportTeamDetail">导出</button>
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="userDetailModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
||
aria-hidden="true">×</span>
|
||
</button>
|
||
<h4 class="modal-title" id="userDetailModalTitle">分组明细</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="userDetaillTable"></div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" id="exportUserDetail">导出</button>
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||
import { formatTime, cleanArray } from '@/utils/maintainer';
|
||
|
||
const TEAM_ROLE = {
|
||
"1": '组员',
|
||
"2": '组长',
|
||
"3": '团长',
|
||
};
|
||
let flowTeams;
|
||
let flowTeamsMap = {};
|
||
|
||
let flowGroups = [];
|
||
let flowGroupsMap = {};
|
||
const groupTeamIds = [];
|
||
export default {
|
||
name: "FlowTeamStatisticView",
|
||
setup() {
|
||
// 初始化小组选择器
|
||
function initTeamSelector(groupId, childrenSelectId) {
|
||
const options = ['<option value="">全部</option>'];
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/flowTeam/listTeamByGroupId.action",
|
||
data: {
|
||
groupId: groupId
|
||
},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success) {
|
||
// 清空数组
|
||
groupTeamIds.length = 0;
|
||
for (let i = 0; i < json.data.length; i++) {
|
||
const flowTeam = json.data[i];
|
||
//拼接成多个<option><option/>
|
||
options.push('<option value="' + flowTeam.teamId + '">' + flowTeam.teamName + '</option>')
|
||
groupTeamIds.push(flowTeam.teamId);
|
||
}
|
||
$('#' + `${childrenSelectId}`).html(options.join(' '));
|
||
}
|
||
}
|
||
});
|
||
}
|
||
window.initTeamSelector = initTeamSelector;
|
||
return {
|
||
initTeamSelector
|
||
};
|
||
},
|
||
created() {
|
||
this.$nextTick(function () {
|
||
this.initData();
|
||
});
|
||
},
|
||
methods: {
|
||
initData() {
|
||
$(function () {
|
||
// 加载流量团队配置
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/flowTeam/listTeam.action",
|
||
dataType: "json",
|
||
async: false,
|
||
success: function (json) {
|
||
if (json.success) {
|
||
if (json.data) {
|
||
flowTeams = json.data;
|
||
for (let i = 0; i < flowTeams.length; i++) {
|
||
const flowTeam = flowTeams[i];
|
||
flowTeamsMap[flowTeam.teamId] = flowTeam;
|
||
}
|
||
} else {
|
||
flowTeams = [];
|
||
flowTeamsMap = {};
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// 加载流量团队配置
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/flowteam/group/listGroupByPage",
|
||
data: {
|
||
page: 1,
|
||
pageSize: 2147483647,
|
||
groupName: ''
|
||
},
|
||
dataType: "json",
|
||
async: false,
|
||
success: function (json) {
|
||
console.log("init group success", json);
|
||
flowGroups = json.rows;
|
||
if (flowGroups.length > 0) {
|
||
for (let i = 0; i < flowGroups.length; i++) {
|
||
const flowGroup = flowGroups[i];
|
||
flowGroupsMap[flowGroup.groupId] = flowGroup;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
let listQueryParams = {};
|
||
let teamDetailQueryParams = {};
|
||
let userDetailQueryParams = {};
|
||
let groupDetailQueryParams = {};
|
||
let detailTeamId;
|
||
$('.js-quick-search').on('click', function () {
|
||
$('.js-quick-search').removeClass('active')
|
||
$(this).addClass('active');
|
||
setSearchTimeUseQuickWay($(this));
|
||
});
|
||
|
||
$('.js-quick-search_a').on('click', function () {
|
||
$('.js-quick-search_a').removeClass('active')
|
||
$(this).addClass('active');
|
||
setChargeSearchTimeUseQuickWay($(this));
|
||
});
|
||
|
||
// 展示说明
|
||
$('.opt-show-intro').on('click', function () {
|
||
$('#introModal').modal('show');
|
||
});
|
||
|
||
// 初始化团队选择器
|
||
function initGroupSelector() {
|
||
debugger;
|
||
const options = [];
|
||
options.push('<option value="">选择团队</option>')
|
||
for (var i = 0; i < flowGroups.length; i++) {
|
||
var item = flowGroups[i];
|
||
//拼接成多个<option><option/>
|
||
options.push('<option value="' + item.groupId + '">' + item.groupName + '</option>')
|
||
}
|
||
$("#query-groupSelector").html(options.join(' '));
|
||
}
|
||
|
||
initGroupSelector();
|
||
|
||
function setSearchTimeUseQuickWay(quickDom) {
|
||
const days = quickDom.attr("data-days");
|
||
const today = new Date(new Date().setHours(0, 0, 0, 0));
|
||
const todayStr = formatTime(today);
|
||
const startTime = formatTime(new Date(today.getTime() - days * 24 * 60 * 60 * 1000));
|
||
|
||
$('#startTime').val(startTime);
|
||
$('#endTime').val(todayStr);
|
||
}
|
||
|
||
function setChargeSearchTimeUseQuickWay(quickDom) {
|
||
const days = quickDom.attr("data-days");
|
||
const today = new Date(new Date().setHours(0, 0, 0, 0));
|
||
const todayStr = formatTime(today);
|
||
const startTime = formatTime(new Date(today.getTime() - days * 24 * 60 * 60 * 1000));
|
||
|
||
$('#chargeStartTime').val(startTime);
|
||
$('#chargeEndTime').val(todayStr);
|
||
}
|
||
|
||
const quickDom = $('.js-quick-search-7');
|
||
quickDom.addClass('active');
|
||
setSearchTimeUseQuickWay(quickDom);
|
||
|
||
// 查询刷新
|
||
$('#btnSearch').on('click', function () {
|
||
const groupId = $('#query-groupSelector').val();
|
||
if (!groupId) {
|
||
$("#tipMsg").text("请先选择需要查询的团队");
|
||
$("#tipModal").modal('show');
|
||
return;
|
||
}
|
||
$('#table').bootstrapTable('destroy');
|
||
$('#table').bootstrapTable({
|
||
columns: [
|
||
{
|
||
field: 'teamId', title: '组名', align: 'center', width: '5%',
|
||
formatter: function (val, row, index) {
|
||
const team = flowTeamsMap[val];
|
||
if (team) {
|
||
return team.teamName;
|
||
} else {
|
||
return '-'
|
||
}
|
||
}
|
||
},
|
||
{ field: 'memberCount', title: '当前成员数', align: 'center', width: '10%' },
|
||
{ field: 'teamLeaders', title: '组长', align: 'center', width: '10%', valign: 'center' },
|
||
{ field: 'newUserCount', title: '新增用户数', align: 'center', width: '5%', },
|
||
{ field: 'newChargeUserCount', title: '新增充值人数', align: 'center', width: '5%', },
|
||
{ field: 'chargeRate', title: '付费转化', align: 'center', width: '5%', },
|
||
{ field: 'chargeCount', title: '充值次数', align: 'center', width: '5%', },
|
||
{ field: 'chargeMoney', title: '充值金额(美元)', align: 'center', width: '5%', },
|
||
{ field: 'sendGiftMony', title: '送礼钻石数', align: 'center', width: '5%', },
|
||
{ field: 'giveCount', title: '累计收到转赠次数', align: 'center', width: '5%', },
|
||
{ field: 'giveMoney', title: '累计收到转赠金额', align: 'center', width: '5%', },
|
||
{ field: 'arpu', title: 'Arpu', align: 'center', width: '5%', },
|
||
{ field: 'twoRemainCount', title: '次留', align: 'center', width: '5%', },
|
||
{ field: 'sevenRemainCount', title: '七留', align: 'center', width: '5%', },
|
||
{ field: 'thirtyRemainCount', title: '月留', align: 'center', width: '5%', },
|
||
{
|
||
field: 'teamId',
|
||
title: '操作',
|
||
align: 'center',
|
||
width: '10%',
|
||
formatter: function (val, row, index) {
|
||
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-show-team-detail" data-teamId=' + val + '>' +
|
||
'查看明细</button>' +
|
||
' <button class="btn btn-sm btn-primary opt-exprot-user-detail-of-team" data-teamId=' + val +
|
||
'>导出明细</button>';
|
||
}
|
||
}
|
||
],
|
||
undefinedText: 0,
|
||
cache: false,
|
||
striped: true,
|
||
showRefresh: false,
|
||
pageSize: 20,
|
||
pagination: true,
|
||
pageList: [20, 50, 100, 200, 300, 500],
|
||
search: false,
|
||
sidePagination: "client", //表示服务端请求
|
||
queryParamsType: "undefined",
|
||
method: 'post',
|
||
queryParams: function queryParams(params) { //设置查询参数
|
||
const groupId = $('#query-groupSelector').val();
|
||
const teamId = $('#query-teamSelector').val();
|
||
const app = $('#appSelector').val();
|
||
var param = {
|
||
startDate: $('#startTime').val(),
|
||
endDate: $('#endTime').val(),
|
||
chargeStartTime: $('#chargeStartTime').val(),
|
||
chargeEndTime: $('#chargeEndTime').val()
|
||
};
|
||
listQueryParams = param;
|
||
groupDetailQueryParams = param;
|
||
if (groupId) {
|
||
groupDetailQueryParams.groupId = groupId;
|
||
}
|
||
if (teamId) {
|
||
param.teamId = teamId;
|
||
}
|
||
if (app) {
|
||
param.app = app;
|
||
}
|
||
if (groupId && !teamId) {
|
||
param.teamIds = groupTeamIds;
|
||
} else {
|
||
$('#group-table-div').attr("style", "display: none;");
|
||
}
|
||
return param;
|
||
},
|
||
// toolbar: '#toolbar',
|
||
url: '/admin/flowTeam/listStatisticSummary.action',
|
||
onLoadSuccess: function (json) { //加载成功时执行
|
||
console.log("table load success");
|
||
if ($('#query-groupSelector').val() && !$('#query-teamSelector').val()) {
|
||
setTableTitle($('#query-groupSelector').val(), $('#query-teamSelector').val());
|
||
// 组合数据
|
||
calTeamTotal(json)
|
||
showGroupTable();
|
||
}
|
||
},
|
||
onLoadError: function () { //加载失败时执行
|
||
console.log("table load fail");
|
||
}
|
||
});
|
||
});
|
||
|
||
function setTableTitle(groupId, teamId) {
|
||
let group = flowGroupsMap[groupId];
|
||
let teamDesc = '小组明细';
|
||
if (teamId) {
|
||
let team = flowTeamsMap[teamId];
|
||
teamDesc = team.teamName + teamDesc;
|
||
}
|
||
$('#tableTitle').html(group.groupName + '团队' + teamDesc);
|
||
}
|
||
|
||
let groupDataList = [];
|
||
function calTeamTotal(data) {
|
||
groupDataList.length = 0;
|
||
console.log('json', data)
|
||
const groupData = {};
|
||
let tmemberCount = 0;
|
||
let tnewUserCount = 0;
|
||
let tnewChargeUserCount = 0;
|
||
let tchargeCount = 0;
|
||
let tchargeMoney = 0;
|
||
let tsendGiftMony = 0;
|
||
let tgiveCount = 0;
|
||
let tgiveMoney = 0;
|
||
for (let i = 0; i < data.length; i++) {
|
||
const team = data[i]
|
||
tmemberCount += team.memberCount;
|
||
tnewUserCount += team.newUserCount;
|
||
tnewChargeUserCount += team.newChargeUserCount;
|
||
tchargeCount += team.chargeCount;
|
||
tchargeMoney += team.chargeMoney;
|
||
tsendGiftMony += team.sendGiftMony;
|
||
tgiveCount += team.giveCount;
|
||
tgiveMoney += team.giveMoney;
|
||
}
|
||
groupData.groupId = $('#query-groupSelector').val();
|
||
groupData.tmemberCount = tmemberCount;
|
||
groupData.tnewUserCount = tnewUserCount;
|
||
groupData.tnewChargeUserCount = tnewChargeUserCount;
|
||
groupData.tchargeRate = ((tnewChargeUserCount / tnewUserCount) * 100).toFixed(2) + '%';
|
||
groupData.tchargeCount = tchargeCount;
|
||
groupData.tchargeMoney = tchargeMoney;
|
||
groupData.tsendGiftMony = tsendGiftMony;
|
||
groupData.tgiveCount = tgiveCount;
|
||
groupData.tgiveMoney = tgiveMoney;
|
||
groupData.tarpu = (tchargeMoney / tnewUserCount).toFixed(2);
|
||
groupDataList.push(groupData);
|
||
}
|
||
|
||
|
||
// 查询并展示团队统计数据表格
|
||
function showGroupTable() {
|
||
console.log('groupDataList', groupDataList)
|
||
$('#group-table-div').attr("style", "display:block;");
|
||
$('#group-table').bootstrapTable('destroy');
|
||
$('#group-table').bootstrapTable({
|
||
columns: [
|
||
{
|
||
field: 'groupId', title: '团队名称', align: 'center', width: '5%',
|
||
formatter: function (val, row, index) {
|
||
const group = flowGroupsMap[val];
|
||
if (group) {
|
||
return group.groupName;
|
||
} else {
|
||
return '-'
|
||
}
|
||
}
|
||
},
|
||
{ field: 'tmemberCount', title: '团队成员数', align: 'center', width: '10%' },
|
||
{ field: 'tnewUserCount', title: '新增用户数', align: 'center', width: '5%', },
|
||
{ field: 'tnewChargeUserCount', title: '新增充值人数', align: 'center', width: '5%', },
|
||
{ field: 'tchargeRate', title: '付费转化', align: 'center', width: '5%', },
|
||
{ field: 'tchargeCount', title: '充值次数', align: 'center', width: '5%', },
|
||
{ field: 'tchargeMoney', title: '充值金额(美元)', align: 'center', width: '5%', },
|
||
{ field: 'tsendGiftMony', title: '送礼钻石数', align: 'center', width: '5%', },
|
||
{ field: 'tgiveCount', title: '累计收到转赠次数', align: 'center', width: '5%', },
|
||
{ field: 'tgiveMoney', title: '累计收到转赠金额', align: 'center', width: '5%', },
|
||
{ field: 'tarpu', title: 'Arpu', align: 'center', width: '5%', },
|
||
],
|
||
// height: 100,
|
||
data: groupDataList,
|
||
undefinedText: 0,
|
||
cache: false,
|
||
striped: true,
|
||
showRefresh: false,
|
||
pagination: false,
|
||
search: false,
|
||
});
|
||
}
|
||
|
||
var startTime = $('#startTime').datepicker({
|
||
format: 'yyyy-mm-dd 00:00:00',
|
||
autoclose: true
|
||
});
|
||
|
||
var endTime = $('#endTime').datepicker({
|
||
format: 'yyyy-mm-dd 00:00:00',
|
||
autoclose: true
|
||
});
|
||
|
||
var chargeStart = $('#chargeStartTime').datepicker({
|
||
format: 'yyyy-mm-dd 00:00:00',
|
||
autoclose: true
|
||
});
|
||
|
||
var chargeEnd = $('#chargeEndTime').datepicker({
|
||
format: 'yyyy-mm-dd 00:00:00',
|
||
autoclose: true
|
||
});
|
||
|
||
$('#addUploadBtn').on('click', function () {
|
||
if ($('#addUploadFile').val() == '') {
|
||
$('#tipMsg').text('上传图片为空');
|
||
$('#tipModal').modal('show');
|
||
return;
|
||
}
|
||
var options = {
|
||
type: 'post',
|
||
url: '/admin/upload/img',
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
if (res.path) {
|
||
$('#addActPic').val(res.path);
|
||
$('#addImgUrl').attr('src', res.path);
|
||
console.log(res.path);
|
||
} else {
|
||
$('#tipMsg').text(res.msg);
|
||
$('#tipModal').modal('show');
|
||
}
|
||
}
|
||
}
|
||
$('#addForm').ajaxSubmit(options);
|
||
})
|
||
|
||
//新建标签
|
||
$("#btnAdd").click(function () {
|
||
$("#id").val("");
|
||
$("#modal_name").val("");
|
||
$("#modal_seq").val("");
|
||
$("#modal_status").val("");
|
||
$("#modal_type").val("");
|
||
$("#modal_istop").val("");
|
||
$("#modal_description").val("");
|
||
$('#addActPic').val('');
|
||
$('#addUploadFile').val('');
|
||
$('#addImgUrl').attr('src', '');
|
||
$("#roomTagModal").modal('show');
|
||
});
|
||
|
||
$("#add").click(function () {
|
||
var id = $("#id").val();
|
||
var name = $("#modal_name").val();
|
||
var seq = $("#modal_seq").val();
|
||
var status = $("#modal_status").val();
|
||
var type = $("#modal_type").val();
|
||
var istop = $("#modal_istop").val();
|
||
var pict = $("#addActPic").val();
|
||
var description = $("#modal_description").val();
|
||
|
||
if (type != 3 && (pict == null || pict == '')) {
|
||
$("#tipMsg").text("保存失败，请先上传图片！");
|
||
$("#tipModal").modal('show');
|
||
return;
|
||
}
|
||
|
||
if ($("#addForm").validationEngine('validate')) {
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/roomtag/saveRoomTag.action",
|
||
data: {
|
||
id: id,
|
||
name: name,
|
||
seq: seq,
|
||
status: status,
|
||
type: type,
|
||
istop: istop,
|
||
pict: pict,
|
||
description: description
|
||
},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success == 'true') {
|
||
$("#tipMsg").text("保存成功");
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh("#table");
|
||
$("#roomTagModal").modal('hide');
|
||
} else {
|
||
$("#tipMsg").text("保存失败." + json.msg);
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh("#table");
|
||
$("#roomTagModal").modal('hide');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
});
|
||
|
||
$("#table").on("click", '.opt-show-team-detail', function () {
|
||
var teamId = $(this).attr("data-teamId");
|
||
$('#teamDetailModal #teamDetailModalTitle').text(`${flowTeamsMap[teamId].teamName} ${listQueryParams.startDate} ${listQueryParams.endDate} 明细`)
|
||
$('#teamDetaillTable').bootstrapTable('destroy');
|
||
$('#teamDetaillTable').bootstrapTable({
|
||
columns: [
|
||
{
|
||
field: 'memberName', title: '成员名', align: 'center', width: '5%'
|
||
},
|
||
{
|
||
field: 'teamRole', title: '职务', align: 'center', width: '5%',
|
||
formatter: function (val, row, index) {
|
||
const teamRole = TEAM_ROLE[val];
|
||
if (teamRole) {
|
||
return teamRole;
|
||
} else {
|
||
return '-'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
field: 'memberStatus', title: '成员状态', align: 'center', width: '5%',
|
||
formatter: function (val, row, index) {
|
||
if (val == 1) {
|
||
return `<span class="text-success">生效</span>`;
|
||
} else {
|
||
return `<span style="color: grey">无效</span>`;
|
||
}
|
||
}
|
||
},
|
||
{ field: 'newUserCount', title: '新增用户', align: 'center', width: '5%', },
|
||
{ field: 'newChargeUserCount', title: '新增充值', align: 'center', width: '5%', },
|
||
{ field: 'chargeRate', title: '付费转化', align: 'center', width: '5%', },
|
||
{ field: 'chargeCount', title: '充值次数', align: 'center', width: '5%', },
|
||
{ field: 'chargeMoney', title: '充值金额(美元)', align: 'center', width: '5%', },
|
||
{ field: 'sendGiftMony', title: '送礼钻石数', align: 'center', width: '5%', },
|
||
{ field: 'arpu', title: 'Arpu', align: 'center', width: '5%', },
|
||
{
|
||
field: 'memberId',
|
||
title: '操作',
|
||
align: 'center',
|
||
width: '10%',
|
||
formatter: function (val, row, index) {
|
||
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-show-user-detail" data-teamId=' + teamId + ' data-memberId=' + val + ' data-memberName=' + row.memberName + '>' +
|
||
'查看个人明细</button>';
|
||
}
|
||
}
|
||
],
|
||
undefinedText: 0,
|
||
cache: false,
|
||
striped: true,
|
||
showRefresh: false,
|
||
pageSize: 20,
|
||
pagination: true,
|
||
pageList: [20, 50, 100, 200, 300, 500],
|
||
search: false,
|
||
sidePagination: "client", //表示服务端请求
|
||
queryParamsType: "undefined",
|
||
queryParams: function queryParams(params) { //设置查询参数
|
||
var param = {
|
||
...listQueryParams,
|
||
teamId,
|
||
};
|
||
param.teamIds = '';
|
||
teamDetailQueryParams = param;
|
||
detailTeamId = teamId;
|
||
return param;
|
||
},
|
||
url: '/admin/flowTeam/listFlowTeamStatisticDetails.action',
|
||
onLoadSuccess: function () { //加载成功时执行
|
||
$("#teamDetailModal").modal('show');
|
||
},
|
||
onLoadError: function () { //加载失败时执行
|
||
console.log("load fail");
|
||
}
|
||
});
|
||
});
|
||
|
||
$("#teamDetaillTable").on("click", '.opt-show-user-detail', function () {
|
||
var teamId = $(this).attr("data-teamId");
|
||
var memberId = $(this).attr("data-memberId");
|
||
var memberName = $(this).attr("data-memberName");
|
||
$('#userDetailModal #userDetailModalTitle').text(`${flowTeamsMap[teamId].teamName} ${memberName} ${listQueryParams.startDate} ${listQueryParams.endDate} 明细`)
|
||
$('#userDetaillTable').bootstrapTable('destroy');
|
||
$('#userDetaillTable').bootstrapTable({
|
||
columns: [
|
||
{ field: 'inviteCode', title: '邀请码', align: 'center', width: '5%' },
|
||
{ field: 'userErbanNo', title: '被邀请用户id', align: 'center', width: '5%' },
|
||
{ field: 'userNickName', title: '被邀请用户昵称', align: 'center', width: '5%' },
|
||
{ field: 'registerIp', title: '被邀请用户注册ip', align: 'center', width: '5%' },
|
||
{ field: 'phone', title: '被邀请用户手机号', align: 'center', width: '5%' },
|
||
{ field: 'teamMemberName', title: '引入人', align: 'center', width: '5%' },
|
||
{ field: 'signUpTime', title: '新增日期', align: 'center', width: '5%' },
|
||
{ field: 'chargeCount', title: '充值次数', align: 'center', width: '5%' },
|
||
{ field: 'chargeMoney', title: '充值金额（美元）', align: 'center', width: '5%' },
|
||
{ field: 'totalSendGiftMoney', title: '送礼钻石数', align: 'center', width: '5%' },
|
||
{ field: 'totalBackbagSendGiftMoney', title: '送礼背包钻石数', align: 'center', width: '5%' },
|
||
{ field: 'totalNoBackbagSendGiftMoney', title: '送礼非背包钻石数', align: 'center', width: '5%' },
|
||
],
|
||
undefinedText: 0,
|
||
cache: false,
|
||
striped: true,
|
||
showRefresh: false,
|
||
pageSize: 20,
|
||
pagination: true,
|
||
pageList: [20, 50, 100, 200, 300, 500],
|
||
search: false,
|
||
sidePagination: "client", //表示服务端请求
|
||
queryParamsType: "undefined",
|
||
queryParams: function queryParams(params) { //设置查询参数
|
||
var param = {
|
||
...listQueryParams,
|
||
memberId,
|
||
teamId: detailTeamId,
|
||
};
|
||
param.teamIds = '';
|
||
userDetailQueryParams = param;
|
||
return param;
|
||
},
|
||
url: '/admin/flowTeam/listUserStatisticDetails.action',
|
||
onLoadSuccess: function () { //加载成功时执行
|
||
$("#userDetailModal").modal('show');
|
||
},
|
||
onLoadError: function () { //加载失败时执行
|
||
console.log("load fail");
|
||
}
|
||
});
|
||
});
|
||
|
||
function param(json) {
|
||
if (!json) return ''
|
||
return cleanArray(Object.keys(json).map(key => {
|
||
if (json[key] === undefined) return ''
|
||
return encodeURIComponent(key) + '=' +
|
||
encodeURIComponent(json[key])
|
||
})).join('&')
|
||
}
|
||
|
||
$("#table").on("click", '.opt-exprot-user-detail-of-team', function () {
|
||
var teamId = $(this).attr("data-teamId");
|
||
var queryParams = {
|
||
...listQueryParams,
|
||
teamId,
|
||
}
|
||
window.location.href = '/admin/flowTeam/exportuserStatisticDetailOfTeam?' + param(queryParams);
|
||
})
|
||
|
||
$("#exportTeamDetail").on("click", function () {
|
||
window.location.href = '/admin/flowTeam/exportTeamStatisticDetails?' + param(teamDetailQueryParams);
|
||
});
|
||
|
||
$("#exportUserDetail").on("click", function () {
|
||
window.location.href = '/admin/flowTeam/exportUserStatisticDetails?' + param(userDetailQueryParams);
|
||
});
|
||
|
||
// 团队明细导出
|
||
$("#exportGroupDetail").on("click", function () {
|
||
window.location.href = '/admin/flowTeam/exportUserStatisticDetails?' + param(groupDetailQueryParams);
|
||
});
|
||
});
|
||
}
|
||
},
|
||
unmounted() {
|
||
$('#table').bootstrapTable('destroy');
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
#teamDetailModal .modal-dialog,
|
||
#userDetailModal .modal-dialog {
|
||
width: 50%;
|
||
}
|
||
|
||
#introModal .modal-dialog {
|
||
width: 60%;
|
||
}
|
||
</style> |