571 lines
22 KiB
HTML
Executable File
571 lines
22 KiB
HTML
Executable File
{include file="Public:header2"/}
|
||
<body>
|
||
<div class="layui-fluid">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">
|
||
<span class="layui-breadcrumb">
|
||
<a href="{:url('/admin/user')}">用户管理</a>
|
||
<a><cite>余额流水明细</cite></a>
|
||
</span>
|
||
<span class="user-info">当前用户：{$nickname}</span>
|
||
</div>
|
||
|
||
<!-- 搜索表单 -->
|
||
<div class="layui-form layui-card-header layuiadmin-card-header-auto" id="searchForm">
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">变化时间</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" id="timerange" name="timerange" class="layui-input" placeholder="选择时间范围">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">类型</label>
|
||
<div class="layui-input-inline">
|
||
<select name="type" id="type">
|
||
<option value="">全部类型</option>
|
||
<option value="1">后台充值</option>
|
||
<option value="2">在线充值</option>
|
||
<option value="3">抽赏消费</option>
|
||
<option value="4">背包回收</option>
|
||
<option value="5">推荐奖励</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">变化类型</label>
|
||
<div class="layui-input-inline">
|
||
<select name="change_type" id="change_type">
|
||
<option value="">全部</option>
|
||
<option value="add">收入</option>
|
||
<option value="sub">消耗</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">备注内容</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="content" id="content" placeholder="请输入备注内容关键词" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<button class="layui-btn layuiadmin-btn-useradmin" id="searchBtn">
|
||
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i> 搜索
|
||
</button>
|
||
<button class="layui-btn layui-btn-primary" id="resetBtn">
|
||
<i class="layui-icon layui-icon-refresh"></i> 重置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据表格 -->
|
||
<div class="layui-card-body">
|
||
<!-- 时间线视图 -->
|
||
<div id="timeline-container">
|
||
<ul class="layui-timeline" id="money-timeline">
|
||
<!-- 时间线内容将通过JavaScript动态生成 -->
|
||
<li class="layui-timeline-item">
|
||
<i class="layui-icon layui-timeline-axis"></i>
|
||
<div class="layui-timeline-content layui-text">
|
||
<div class="layui-timeline-title">加载中...</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<!-- 分页控件 -->
|
||
<div id="timeline-page" class="layui-box layui-laypage layui-laypage-default"></div>
|
||
</div>
|
||
|
||
<!-- 表格视图（默认隐藏） -->
|
||
<div id="table-container" style="display: none;">
|
||
<table id="money-detail-table" lay-filter="money-detail-table"></table>
|
||
</div>
|
||
|
||
<!-- 视图切换按钮 -->
|
||
<div class="view-toggle-container">
|
||
<button class="layui-btn layui-btn-primary layui-btn-sm" id="toggleViewBtn">
|
||
<i class="layui-icon"></i> 切换视图
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 金额模板 -->
|
||
<script type="text/html" id="moneyTpl">
|
||
{{# if(d.change_money > 0) { }}
|
||
<span class="money-add">+{{d.change_money}}</span>
|
||
{{# } else { }}
|
||
<span class="money-sub">{{d.change_money}}</span>
|
||
{{# } }}
|
||
</script>
|
||
|
||
<!-- 类型模板 -->
|
||
<script type="text/html" id="typeTpl">
|
||
{{# if(d.type == 1) { }}
|
||
<span class="type-badge type-1">后台充值</span>
|
||
{{# } else if(d.type == 2) { }}
|
||
<span class="type-badge type-2">在线充值</span>
|
||
{{# } else if(d.type == 3) { }}
|
||
<span class="type-badge type-3">抽赏消费</span>
|
||
{{# } else if(d.type == 4) { }}
|
||
<span class="type-badge type-4">背包回收</span>
|
||
{{# } else if(d.type == 5) { }}
|
||
<span class="type-badge type-5">推荐奖励</span>
|
||
{{# } else { }}
|
||
<span class="type-badge">其他({{d.type}})</span>
|
||
{{# } }}
|
||
</script>
|
||
|
||
{include file="Public:footer"/}
|
||
<script>
|
||
layui.use(['table', 'form', 'laydate'], function(){
|
||
var table = layui.table;
|
||
var form = layui.form;
|
||
var laydate = layui.laydate;
|
||
var $ = layui.$;
|
||
|
||
// 初始化日期范围选择器
|
||
laydate.render({
|
||
elem: '#timerange',
|
||
type: 'datetime',
|
||
range: true,
|
||
format: 'yyyy-MM-dd HH:mm:ss'
|
||
});
|
||
|
||
// 初始化表格
|
||
table.render({
|
||
elem: '#money-detail-table',
|
||
url: '{:url("/admin/user_money_detail_data")}',
|
||
where: {
|
||
user_id: '{$user_id}'
|
||
},
|
||
cols: [[
|
||
{field: 'id', title: 'ID', width: 80, sort: true},
|
||
{field: 'change_money', title: '变化金额', width: 120, templet: '#moneyTpl', sort: true},
|
||
{field: 'money', title: '剩余金额', width: 120},
|
||
{field: 'type', title: '消耗类型', width: 120, templet: '#typeTpl'},
|
||
{field: 'content', title: '描述', width: 200},
|
||
{field: 'other', title: '备注', width: 200},
|
||
{field: 'addtime', title: '添加时间', width: 180, templet: function(d){
|
||
return layui.util.toDateString(d.addtime * 1000, 'yyyy-MM-dd HH:mm:ss');
|
||
}, sort: true}
|
||
]],
|
||
page: true,
|
||
limit: 50,
|
||
limits: [20, 50, 100, 200],
|
||
height: 'full-220'
|
||
});
|
||
|
||
// 搜索按钮事件
|
||
$('#searchBtn').on('click', function(){
|
||
var timerange = $('#timerange').val();
|
||
var startTime = '';
|
||
var endTime = '';
|
||
if(timerange) {
|
||
var times = timerange.split(' - ');
|
||
startTime = times[0];
|
||
endTime = times[1];
|
||
}
|
||
|
||
// 执行搜索
|
||
table.reload('money-detail-table', {
|
||
where: {
|
||
user_id: '{$user_id}',
|
||
start_time: startTime,
|
||
end_time: endTime,
|
||
type: $('#type').val(),
|
||
change_type: $('#change_type').val(),
|
||
content: $('#content').val()
|
||
},
|
||
page: {
|
||
curr: 1
|
||
}
|
||
});
|
||
});
|
||
|
||
// 重置按钮事件
|
||
$('#resetBtn').on('click', function(){
|
||
$('#searchForm')[0].reset();
|
||
form.render();
|
||
|
||
// 重新加载表格
|
||
table.reload('money-detail-table', {
|
||
where: {
|
||
user_id: '{$user_id}'
|
||
},
|
||
page: {
|
||
curr: 1
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
{include file="Public:footer"/}
|
||
<script>
|
||
layui.use(['table', 'form', 'laydate', 'laypage', 'util'], function(){
|
||
var table = layui.table;
|
||
var form = layui.form;
|
||
var laydate = layui.laydate;
|
||
var laypage = layui.laypage;
|
||
var util = layui.util;
|
||
var $ = layui.$;
|
||
|
||
// 当前视图状态：timeline 或 table
|
||
var currentView = 'timeline';
|
||
var currentPage = 1;
|
||
var itemsPerPage = 20;
|
||
var totalItems = 0;
|
||
var currentData = [];
|
||
var currentFilter = {
|
||
user_id: '{$user_id}'
|
||
};
|
||
|
||
// 初始化日期范围选择器
|
||
laydate.render({
|
||
elem: '#timerange',
|
||
type: 'datetime',
|
||
range: true,
|
||
format: 'yyyy-MM-dd HH:mm:ss'
|
||
});
|
||
|
||
// 加载时间线数据
|
||
function loadTimelineData(filter, page, limit) {
|
||
// 显示加载中
|
||
$('#money-timeline').html('<li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><div class="layui-timeline-title">加载中...</div></div></li>');
|
||
|
||
// 发送请求获取数据
|
||
$.ajax({
|
||
url: '{:url("/admin/user_money_detail_data")}',
|
||
type: 'GET',
|
||
data: {
|
||
...filter,
|
||
page: page,
|
||
limit: limit
|
||
},
|
||
success: function(res) {
|
||
if (res.code === 0) {
|
||
currentData = res.data;
|
||
totalItems = res.count;
|
||
renderTimeline(res.data);
|
||
renderPagination(res.count, page, limit);
|
||
} else {
|
||
layer.msg(res.msg || '加载数据失败', {icon: 2});
|
||
}
|
||
},
|
||
error: function() {
|
||
layer.msg('网络错误，请稍后重试', {icon: 2});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 渲染时间线
|
||
function renderTimeline(data) {
|
||
if (!data || data.length === 0) {
|
||
$('#money-timeline').html('<li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><div class="layui-timeline-title">暂无数据</div></div></li>');
|
||
return;
|
||
}
|
||
|
||
var html = '';
|
||
data.forEach(function(item) {
|
||
// 根据金额变化设置不同的颜色和图标
|
||
var colorClass = item.change_money > 0 ? 'timeline-add' : 'timeline-sub';
|
||
var icon = item.change_money > 0 ? '' : '';
|
||
|
||
// 获取类型标签
|
||
var typeLabel = getTypeLabel(item.type);
|
||
|
||
html += `
|
||
<li class="layui-timeline-item ${colorClass}">
|
||
<i class="layui-icon layui-timeline-axis">${icon}</i>
|
||
<div class="layui-timeline-content layui-text">
|
||
<h3 class="layui-timeline-title">${util.toDateString(item.addtime * 1000, 'yyyy-MM-dd HH:mm:ss')}</h3>
|
||
<div class="timeline-card">
|
||
<div class="timeline-item">
|
||
<span class="timeline-label">变化金额：</span>
|
||
<span class="timeline-value ${item.change_money > 0 ? 'money-add' : 'money-sub'}">${item.change_money > 0 ? '+' + item.change_money : item.change_money}</span>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<span class="timeline-label">剩余金额：</span>
|
||
<span class="timeline-value">${item.money}</span>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<span class="timeline-label">类型：</span>
|
||
<span class="timeline-value">${typeLabel}</span>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<span class="timeline-label">描述：</span>
|
||
<span class="timeline-value">${item.content || '-'}</span>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<span class="timeline-label">备注：</span>
|
||
<span class="timeline-value">${item.other || '-'}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
`;
|
||
});
|
||
|
||
$('#money-timeline').html(html);
|
||
}
|
||
|
||
// 渲染分页
|
||
function renderPagination(count, currentPage, limit) {
|
||
laypage.render({
|
||
elem: 'timeline-page',
|
||
count: count,
|
||
curr: currentPage,
|
||
limit: limit,
|
||
limits: [10, 20, 50, 100],
|
||
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
|
||
jump: function(obj, first) {
|
||
if (!first) {
|
||
currentPage = obj.curr;
|
||
itemsPerPage = obj.limit;
|
||
loadTimelineData(currentFilter, obj.curr, obj.limit);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 获取类型标签HTML
|
||
function getTypeLabel(type) {
|
||
var typeMap = {
|
||
1: '<span class="type-badge type-1">后台充值</span>',
|
||
2: '<span class="type-badge type-2">在线充值</span>',
|
||
3: '<span class="type-badge type-3">抽赏消费</span>',
|
||
4: '<span class="type-badge type-4">背包回收</span>',
|
||
5: '<span class="type-badge type-5">推荐奖励</span>'
|
||
};
|
||
|
||
return typeMap[type] || `<span class="type-badge">其他(${type})</span>`;
|
||
}
|
||
|
||
// 初始化表格
|
||
var tableIns = table.render({
|
||
elem: '#money-detail-table',
|
||
url: '{:url("/admin/user_money_detail_data")}',
|
||
where: {
|
||
user_id: '{$user_id}'
|
||
},
|
||
cols: [[
|
||
{field: 'id', title: 'ID', width: 80, sort: true},
|
||
{field: 'change_money', title: '变化金额', width: 120, templet: '#moneyTpl', sort: true},
|
||
{field: 'money', title: '剩余金额', width: 120},
|
||
{field: 'type', title: '消耗类型', width: 120, templet: '#typeTpl'},
|
||
{field: 'content', title: '描述', width: 200},
|
||
{field: 'other', title: '备注', width: 200},
|
||
{field: 'addtime', title: '添加时间', width: 180, templet: function(d){
|
||
return util.toDateString(d.addtime * 1000, 'yyyy-MM-dd HH:mm:ss');
|
||
}, sort: true}
|
||
]],
|
||
page: true,
|
||
limit: itemsPerPage,
|
||
limits: [10, 20, 50, 100, 200],
|
||
height: 'full-220'
|
||
});
|
||
|
||
// 搜索按钮事件
|
||
$('#searchBtn').on('click', function(){
|
||
var timerange = $('#timerange').val();
|
||
var startTime = '';
|
||
var endTime = '';
|
||
if(timerange) {
|
||
var times = timerange.split(' - ');
|
||
startTime = times[0];
|
||
endTime = times[1];
|
||
}
|
||
|
||
// 更新当前筛选条件
|
||
currentFilter = {
|
||
user_id: '{$user_id}',
|
||
start_time: startTime,
|
||
end_time: endTime,
|
||
type: $('#type').val(),
|
||
change_type: $('#change_type').val(),
|
||
content: $('#content').val()
|
||
};
|
||
|
||
// 根据当前视图执行搜索
|
||
if (currentView === 'table') {
|
||
// 执行表格搜索
|
||
tableIns.reload({
|
||
where: currentFilter,
|
||
page: {
|
||
curr: 1
|
||
}
|
||
});
|
||
} else {
|
||
// 执行时间线搜索
|
||
currentPage = 1;
|
||
loadTimelineData(currentFilter, 1, itemsPerPage);
|
||
}
|
||
});
|
||
|
||
// 重置按钮事件
|
||
$('#resetBtn').on('click', function(){
|
||
$('#searchForm')[0].reset();
|
||
form.render();
|
||
|
||
// 重置筛选条件
|
||
currentFilter = {
|
||
user_id: '{$user_id}'
|
||
};
|
||
|
||
// 根据当前视图重新加载数据
|
||
if (currentView === 'table') {
|
||
// 重新加载表格
|
||
tableIns.reload({
|
||
where: currentFilter,
|
||
page: {
|
||
curr: 1
|
||
}
|
||
});
|
||
} else {
|
||
// 重新加载时间线
|
||
currentPage = 1;
|
||
loadTimelineData(currentFilter, 1, itemsPerPage);
|
||
}
|
||
});
|
||
|
||
// 视图切换按钮事件
|
||
$('#toggleViewBtn').on('click', function() {
|
||
if (currentView === 'timeline') {
|
||
// 切换到表格视图
|
||
$('#timeline-container').hide();
|
||
$('#table-container').show();
|
||
currentView = 'table';
|
||
$(this).html('<i class="layui-icon"></i> 切换到时间线视图');
|
||
|
||
// 刷新表格以适应新的大小
|
||
tableIns.resize();
|
||
} else {
|
||
// 切换到时间线视图
|
||
$('#table-container').hide();
|
||
$('#timeline-container').show();
|
||
currentView = 'timeline';
|
||
$(this).html('<i class="layui-icon"></i> 切换到表格视图');
|
||
}
|
||
});
|
||
|
||
// 初始加载时间线数据
|
||
loadTimelineData(currentFilter, currentPage, itemsPerPage);
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.layui-card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.user-info {
|
||
font-weight: bold;
|
||
color: #1E9FFF;
|
||
}
|
||
|
||
.money-add {
|
||
color: #FF5722;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.money-sub {
|
||
color: #009688;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.type-badge {
|
||
display: inline-block;
|
||
padding: 2px 5px;
|
||
border-radius: 2px;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.type-1 {
|
||
background-color: #FF5722;
|
||
}
|
||
|
||
.type-2 {
|
||
background-color: #FFB800;
|
||
}
|
||
|
||
.type-3 {
|
||
background-color: #009688;
|
||
}
|
||
|
||
.type-4 {
|
||
background-color: #1E9FFF;
|
||
}
|
||
|
||
.type-5 {
|
||
background-color: #5FB878;
|
||
}
|
||
|
||
/* 时间线相关样式 */
|
||
.timeline-card {
|
||
background-color: #f9f9f9;
|
||
border-radius: 4px;
|
||
padding: 15px;
|
||
margin-top: 10px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.timeline-item {
|
||
margin-bottom: 8px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.timeline-label {
|
||
color: #666;
|
||
font-weight: bold;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.timeline-value {
|
||
color: #333;
|
||
}
|
||
|
||
/* 收入项目样式 */
|
||
.timeline-add .layui-timeline-axis {
|
||
color: #FF5722;
|
||
background-color: #fff;
|
||
border-color: #FF5722;
|
||
}
|
||
|
||
/* 支出项目样式 */
|
||
.timeline-sub .layui-timeline-axis {
|
||
color: #009688;
|
||
background-color: #fff;
|
||
border-color: #009688;
|
||
}
|
||
|
||
/* 时间线标题 */
|
||
.layui-timeline-title {
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
/* 分页区域样式 */
|
||
#timeline-page {
|
||
margin-top: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 视图切换按钮容器 */
|
||
.view-toggle-container {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
z-index: 999;
|
||
}
|
||
|
||
.view-toggle-container .layui-btn {
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||
}
|
||
</style>
|
||
</body>
|
||
</html> |