Compare commits

...

7 Commits

Author SHA1 Message Date
linbin 1a6270b3fe 综述: 完善订单管理体系和优化页面展示
- 移除品牌市场订单管理和品牌店铺订单管理页面中的商品终价列,简化订单信息展示
- 新增订单详情页面,提供完整的订单状态管理、商品信息展示、操作记录和售后服务功能
- 新增退款审核流程演示页面,实现完整的退款申请处理、审核流程和数据统计管理
- 更新大妈集市原型文件

优化了用户界面,提升了管理功能完整性。
2025-10-10 03:47:20 +08:00
linbin 3a55edbe04 综述: 移除商品终价列显示功能
- 在市场订单管理页面中,移除子表格的商品终价列显示
- 同步移除对应的商品终价字段数据
- 统一优化订单商品信息展示
2025-10-10 02:41:20 +08:00
linbin f4cb2c9ec7 综述: 移除代理商抽成显示功能\n\n- 在品牌市场订单管理页面中,移除代理商抽成相关的统计项显示\n- 在品牌店铺订单管理页面中,移除代理商抽成相关的统计项显示\n- 在市场店铺订单管理页面中,移除代理商抽成相关的统计项显示\n- 在市场订单管理页面中,移除代理商抽成相关的统计项显示\n\n统一移除代理商抽成(元)为0的显示,优化订单统计信息展示 2025-10-10 02:27:41 +08:00
linbin a6f97616ef 综述: 统一店铺订单状态为已完成
- 修改订单状态显示,将"已支付"、"取消"等状态统一为"已完成"
- 移除表格中的"商品终价"列,优化订单信息展示
2025-10-10 02:07:53 +08:00
linbin 2eccfd69f0 综述: 统一店铺订单状态为已完成
- 将订单SO202407190001的店铺订单状态从已支付更新为已完成
- 将订单SO202407190002的店铺订单状态从已支付更新为已完成
- 将订单SO202407180002的店铺订单状态从取消更新为已完成
- 统一所有订单的店铺订单状态显示,便于订单管理和状态追踪
2025-10-10 01:35:28 +08:00
linbin c20e28fdca 综述: 优化品牌分销全景分析页面数据展示
- 删除分销业绩数据中的百分比增长显示,简化数据呈现方式。
- 移除分销订单总量的"+3.8%"增长标识。
- 移除分销GMV贡献的"+4.2%"增长标识。
- 移除人均分销订单的"+0.8"增长数值。
- 移除人均分销金额的"+512"增长数值。
- 保留核心数据和占比信息,提升页面数据的简洁性和可读性。
2025-10-08 17:28:40 +08:00
linbin 5b8ffac16c 综述: 优化品牌数据分析页面功能并更新菜单导航
- 修改主菜单导航链接,将"连锁单位业绩排行榜"更新为"品牌业绩排行榜",更准确地反映页面功能定位。
- 在品牌分销全景分析页面中新增时间筛选功能模块,支持快速选择预设时间范围(今日、昨日、近7天、近30天)和自定义日期范围查询,提升数据分析的灵活性。
- 在品牌爆款商品榜页面中同样新增时间筛选功能,保持界面风格一致性,用户可根据不同时间维度查看商品销售数据。
- 删除原有的连锁单位业绩排行榜文件,替换为新的品牌业绩排行榜页面。
2025-10-08 17:22:58 +08:00
11 changed files with 2452 additions and 182 deletions

View File

@ -513,9 +513,9 @@
</span>
</div>
<div class="submenu">
<a href="#" class="submenu-link" onclick="loadContent('./品牌管理/数据分析/连锁单位业绩排行榜.html', this);" style="padding-left: 70px;">
<a href="#" class="submenu-link" onclick="loadContent('./品牌管理/数据分析/品牌业绩排行榜.html', this);" style="padding-left: 70px;">
<span class="submenu-icon"></span>
连锁单位业绩排行榜
品牌业绩排行榜
</a>
<a href="#" class="submenu-link" onclick="loadContent('./品牌管理/数据分析/品牌爆款商品榜.html', this);" style="padding-left: 70px;">
<span class="submenu-icon"></span>

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>连锁单位业绩排行榜 - 品牌数据中心</title>
<title>xx品牌业绩排行榜 - 品牌数据中心</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
* {
@ -228,29 +228,155 @@
background: #f8d7da;
color: #721c24;
}
.time-filter-section {
background: white;
padding: 20px 24px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.time-filter-container {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.filter-label {
font-size: 14px;
color: #666;
font-weight: 500;
white-space: nowrap;
}
.filter-buttons {
display: flex;
gap: 8px;
align-items: center;
}
.filter-btn {
padding: 8px 16px;
border: 1px solid #d9d9d9;
background: white;
color: #666;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.filter-btn:hover {
border-color: #1890ff;
color: #1890ff;
}
.filter-btn.active {
background: #1890ff;
color: white;
border-color: #1890ff;
}
.custom-btn {
border-style: dashed;
}
.custom-date-range {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.date-input {
padding: 8px 12px;
border: 1px solid #d9d9d9;
border-radius: 6px;
font-size: 14px;
outline: none;
}
.date-input:focus {
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.date-separator {
color: #999;
font-size: 14px;
}
.query-btn {
padding: 8px 16px;
background: #1890ff;
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.query-btn:hover {
background: #40a9ff;
}
@media (max-width: 768px) {
.time-filter-container {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.custom-date-range {
margin-left: 0;
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1 class="page-title">📊 连锁单位业绩排行榜</h1>
<p class="page-subtitle">多维度对比连锁市场/店铺经营表现 · 数据更新时间2024-01-15 10:30</p>
<h1 class="page-title">📊 xx品牌业绩排行榜</h1>
</div>
<div class="time-filter-section">
<div class="time-filter-container">
<div class="filter-label">时间范围:</div>
<div class="filter-buttons">
<button class="filter-btn active" data-range="1">近1天</button>
<button class="filter-btn" data-range="7">近7天</button>
<button class="filter-btn" data-range="30">近30天</button>
<button class="filter-btn custom-btn" data-range="custom">自定义</button>
</div>
<div class="custom-date-range" style="display: none;">
<input type="date" class="date-input" id="startDate">
<span class="date-separator"></span>
<input type="date" class="date-input" id="endDate">
<button class="query-btn" id="customQuery">查询</button>
</div>
</div>
</div>
<div class="stats-section">
<div class="stats-grid">
<div class="stat-item">
<h3>连锁单位总数</h3>
<h3>品牌单位总数</h3>
<div class="value">28</div>
<div class="label">家连锁市场/店铺</div>
</div>
<div class="stat-item">
<h3>本月总销售额</h3>
<h3>总销售额</h3>
<div class="value">¥856万</div>
<div class="label">环比上月 +23.5%</div>
</div>
<div class="stat-item">
<h3>本月总订单量</h3>
<h3>总订单量</h3>
<div class="value">12,847</div>
<div class="label">环比上月 +18.2%</div>
</div>
@ -274,7 +400,6 @@
</div>
<div>
<span class="ranking-value">¥128.5万</span>
<span class="trend-badge trend-up">↑ 32%</span>
</div>
</li>
<li class="ranking-item">
@ -285,7 +410,6 @@
</div>
<div>
<span class="ranking-value">¥115.2万</span>
<span class="trend-badge trend-up">↑ 28%</span>
</div>
</li>
<li class="ranking-item">
@ -296,7 +420,6 @@
</div>
<div>
<span class="ranking-value">¥98.7万</span>
<span class="trend-badge trend-up">↑ 15%</span>
</div>
</li>
<li class="ranking-item">
@ -307,7 +430,6 @@
</div>
<div>
<span class="ranking-value">¥87.3万</span>
<span class="trend-badge trend-up">↑ 22%</span>
</div>
</li>
<li class="ranking-item">
@ -318,7 +440,6 @@
</div>
<div>
<span class="ranking-value">¥76.8万</span>
<span class="trend-badge trend-up">↑ 18%</span>
</div>
</li>
<li class="ranking-item">
@ -329,7 +450,6 @@
</div>
<div>
<span class="ranking-value">¥65.4万</span>
<span class="trend-badge trend-up">↑ 12%</span>
</div>
</li>
<li class="ranking-item">
@ -340,7 +460,6 @@
</div>
<div>
<span class="ranking-value">¥58.9万</span>
<span class="trend-badge trend-up">↑ 25%</span>
</div>
</li>
<li class="ranking-item">
@ -351,7 +470,6 @@
</div>
<div>
<span class="ranking-value">¥52.3万</span>
<span class="trend-badge trend-down">↓ 5%</span>
</div>
</li>
<li class="ranking-item">
@ -362,7 +480,6 @@
</div>
<div>
<span class="ranking-value">¥48.6万</span>
<span class="trend-badge trend-up">↑ 8%</span>
</div>
</li>
<li class="ranking-item">
@ -373,7 +490,6 @@
</div>
<div>
<span class="ranking-value">¥42.1万</span>
<span class="trend-badge trend-up">↑ 10%</span>
</div>
</li>
</ul>
@ -390,15 +506,67 @@
<h2>👥 客户量TOP10排行榜</h2>
<div class="chart-container" id="customerChart"></div>
</div>
<div class="chart-card">
<h2>📈 增长率TOP10排行榜</h2>
<div class="chart-container" id="growthChart"></div>
</div>
</div>
</div>
<script>
// 时间筛选功能
const filterButtons = document.querySelectorAll('.filter-btn');
const customDateRange = document.querySelector('.custom-date-range');
const customQueryBtn = document.getElementById('customQuery');
// 切换按钮状态
filterButtons.forEach(btn => {
btn.addEventListener('click', function() {
// 移除所有按钮的active状态
filterButtons.forEach(b => b.classList.remove('active'));
// 给当前按钮添加active状态
this.classList.add('active');
const range = this.getAttribute('data-range');
if (range === 'custom') {
customDateRange.style.display = 'flex';
} else {
customDateRange.style.display = 'none';
// 这里可以根据选择的日期范围加载数据
loadDataByRange(range);
}
});
});
// 自定义日期查询
customQueryBtn.addEventListener('click', function() {
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
if (!startDate || !endDate) {
alert('请选择开始和结束日期');
return;
}
if (new Date(startDate) > new Date(endDate)) {
alert('开始日期不能晚于结束日期');
return;
}
// 这里可以根据自定义日期范围加载数据
loadCustomData(startDate, endDate);
});
// 根据预设范围加载数据
function loadDataByRange(range) {
console.log('加载近' + range + '天数据');
// 这里可以添加数据加载逻辑
// 例如:更新统计数据、图表数据等
}
// 加载自定义日期范围数据
function loadCustomData(startDate, endDate) {
console.log('加载自定义日期数据:', startDate, '至', endDate);
// 这里可以添加数据加载逻辑
}
// 订单量排行榜
const orderChart = echarts.init(document.getElementById('orderChart'));
const orderOption = {
@ -487,63 +655,10 @@
};
customerChart.setOption(customerOption);
// 增长率排行榜
const growthChart = echarts.init(document.getElementById('growthChart'));
const growthOption = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
name: '环比增长率',
axisLabel: {
formatter: '{value}%'
}
},
yAxis: {
type: 'category',
data: ['石景山(万达)', '西城(金融街)', '大兴(亦庄)', '顺义(空港)', '丰台(科技园)',
'东城(国贸)', '通州(副中心)', '海淀(中关村)', '朝阳(望京)', '昌平(天通苑)'],
axisLabel: {
fontSize: 12
}
},
series: [{
name: '增长率',
type: 'bar',
data: [12, 15, 18, 22, 25, 28, 32, 35, 38, 45],
itemStyle: {
color: function(params) {
const colors = [
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#4facfe' },
{ offset: 1, color: '#00f2fe' }
])
];
return colors[0];
}
},
label: {
show: true,
position: 'right',
formatter: '{c}%'
}
}]
};
growthChart.setOption(growthOption);
// 响应式
window.addEventListener('resize', function() {
orderChart.resize();
customerChart.resize();
growthChart.resize();
});
</script>
</body>

View File

@ -48,6 +48,115 @@
color: #666;
}
.time-filter-section {
background: white;
padding: 20px 24px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.time-filter-container {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.filter-label {
font-size: 14px;
color: #666;
font-weight: 500;
white-space: nowrap;
}
.filter-buttons {
display: flex;
gap: 8px;
align-items: center;
}
.filter-btn {
padding: 8px 16px;
border: 1px solid #d9d9d9;
background: white;
color: #666;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.filter-btn:hover {
border-color: #1890ff;
color: #1890ff;
}
.filter-btn.active {
background: #1890ff;
color: white;
border-color: #1890ff;
}
.custom-btn {
border-style: dashed;
}
.custom-date-range {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.date-input {
padding: 8px 12px;
border: 1px solid #d9d9d9;
border-radius: 6px;
font-size: 14px;
outline: none;
}
.date-input:focus {
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.date-separator {
color: #999;
font-size: 14px;
}
.query-btn {
padding: 8px 16px;
background: #1890ff;
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.query-btn:hover {
background: #40a9ff;
}
@media (max-width: 768px) {
.time-filter-container {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.custom-date-range {
margin-left: 0;
width: 100%;
}
}
.section-title {
color: #262626;
font-size: 20px;
@ -323,7 +432,25 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">🎯 品牌分销全景分析</h1>
<p class="page-subtitle">全方位监控分销推广效果与分销商效能 · 数据更新时间2024-01-15 10:30</p>
<p class="page-subtitle">全方位监控分销推广效果与分销商效能</p>
</div>
<div class="time-filter-section">
<div class="time-filter-container">
<div class="filter-label">时间范围:</div>
<div class="filter-buttons">
<button class="filter-btn active" data-range="1">近1天</button>
<button class="filter-btn" data-range="7">近7天</button>
<button class="filter-btn" data-range="30">近30天</button>
<button class="filter-btn custom-btn" data-range="custom">自定义</button>
</div>
<div class="custom-date-range" style="display: none;">
<input type="date" class="date-input" id="startDate">
<span class="date-separator"></span>
<input type="date" class="date-input" id="endDate">
<button class="query-btn" id="customQuery">查询</button>
</div>
</div>
</div>
<h2 class="section-title">📊 分销商团队数据</h2>
@ -359,13 +486,7 @@
<div class="icon">🔥</div>
<h3>活跃分销商</h3>
<div class="value">892</div>
<div class="sub-value">活跃率 71.5% <span class="trend up">+5.2%</span></div>
</div>
<div class="stat-item">
<div class="icon">📈</div>
<h3>本月流失分销商</h3>
<div class="value">23</div>
<div class="sub-value">流失率 1.8% <span class="trend down">-0.3%</span></div>
<div class="sub-value">活跃率 71.5%</div>
</div>
</div>
</div>
@ -389,7 +510,7 @@
<h3>分销订单总量</h3>
<div class="value">5,682</div>
<div class="sub-value">
占总订单 44.2% <span class="trend up">+3.8%</span>
占总订单 44.2%
</div>
</div>
<div class="stat-item">
@ -397,20 +518,20 @@
<h3>分销GMV贡献</h3>
<div class="value">¥378万</div>
<div class="sub-value">
占总GMV 44.1% <span class="trend up">+4.2%</span>
占总GMV 44.1%
</div>
</div>
<div class="stat-item">
<div class="icon">👤</div>
<h3>人均分销订单</h3>
<div class="value">6.4</div>
<div class="sub-value">单/分销商 <span class="trend up">+0.8</span></div>
<div class="sub-value">单/分销商</div>
</div>
<div class="stat-item">
<div class="icon">💵</div>
<h3>人均分销金额</h3>
<div class="value">¥4,269</div>
<div class="sub-value">元/分销商 <span class="trend up">+512</span></div>
<div class="sub-value">元/分销商</div>
</div>
</div>
</div>
@ -614,6 +735,63 @@
</div>
<script>
// 时间筛选功能
const filterButtons = document.querySelectorAll('.filter-btn');
const customDateRange = document.querySelector('.custom-date-range');
const customQueryBtn = document.getElementById('customQuery');
// 切换按钮状态
filterButtons.forEach(btn => {
btn.addEventListener('click', function() {
// 移除所有按钮的active状态
filterButtons.forEach(b => b.classList.remove('active'));
// 给当前按钮添加active状态
this.classList.add('active');
const range = this.getAttribute('data-range');
if (range === 'custom') {
customDateRange.style.display = 'flex';
} else {
customDateRange.style.display = 'none';
// 这里可以根据选择的日期范围加载数据
loadDataByRange(range);
}
});
});
// 自定义日期查询
customQueryBtn.addEventListener('click', function() {
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
if (!startDate || !endDate) {
alert('请选择开始和结束日期');
return;
}
if (new Date(startDate) > new Date(endDate)) {
alert('开始日期不能晚于结束日期');
return;
}
// 这里可以根据自定义日期范围加载数据
loadCustomData(startDate, endDate);
});
// 根据预设范围加载数据
function loadDataByRange(range) {
console.log('加载近' + range + '天数据');
// 这里可以添加数据加载逻辑
// 例如:更新统计数据、图表数据等
}
// 加载自定义日期范围数据
function loadCustomData(startDate, endDate) {
console.log('加载自定义日期数据:', startDate, '至', endDate);
// 这里可以添加数据加载逻辑
}
// 分销商等级分布饼图
const levelChart = echarts.init(document.getElementById('levelChart'));
const levelOption = {
@ -664,7 +842,7 @@
trigger: 'axis'
},
legend: {
data: ['新增分销商', '流失分销商'],
data: ['新增分销商'],
top: 10
},
grid: {
@ -695,19 +873,6 @@
{ offset: 1, color: 'rgba(92, 184, 92, 0.05)' }
])
}
},
{
name: '流失分销商',
type: 'line',
smooth: true,
data: [15, 18, 22, 19, 25, 23],
itemStyle: { color: '#d9534f' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(217, 83, 79, 0.3)' },
{ offset: 1, color: 'rgba(217, 83, 79, 0.05)' }
])
}
}
]
};

View File

@ -48,6 +48,115 @@
color: #666;
}
.time-filter-section {
background: white;
padding: 20px 24px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.time-filter-container {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.filter-label {
font-size: 14px;
color: #666;
font-weight: 500;
white-space: nowrap;
}
.filter-buttons {
display: flex;
gap: 8px;
align-items: center;
}
.filter-btn {
padding: 8px 16px;
border: 1px solid #d9d9d9;
background: white;
color: #666;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.filter-btn:hover {
border-color: #1890ff;
color: #1890ff;
}
.filter-btn.active {
background: #1890ff;
color: white;
border-color: #1890ff;
}
.custom-btn {
border-style: dashed;
}
.custom-date-range {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.date-input {
padding: 8px 12px;
border: 1px solid #d9d9d9;
border-radius: 6px;
font-size: 14px;
outline: none;
}
.date-input:focus {
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.date-separator {
color: #999;
font-size: 14px;
}
.query-btn {
padding: 8px 16px;
background: #1890ff;
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.query-btn:hover {
background: #40a9ff;
}
@media (max-width: 768px) {
.time-filter-container {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.custom-date-range {
margin-left: 0;
width: 100%;
}
}
.stats-section {
background: white;
padding: 24px;
@ -319,7 +428,25 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">🔥 品牌爆款商品榜</h1>
<p class="page-subtitle">跨所有连锁单位的商品表现排行 · 数据更新时间2024-01-15 10:30</p>
<p class="page-subtitle">跨所有连锁单位的商品表现排行</p>
</div>
<div class="time-filter-section">
<div class="time-filter-container">
<div class="filter-label">时间范围:</div>
<div class="filter-buttons">
<button class="filter-btn active" data-range="1">近1天</button>
<button class="filter-btn" data-range="7">近7天</button>
<button class="filter-btn" data-range="30">近30天</button>
<button class="filter-btn custom-btn" data-range="custom">自定义</button>
</div>
<div class="custom-date-range" style="display: none;">
<input type="date" class="date-input" id="startDate">
<span class="date-separator"></span>
<input type="date" class="date-input" id="endDate">
<button class="query-btn" id="customQuery">查询</button>
</div>
</div>
</div>
<div class="stats-section">
@ -765,13 +892,62 @@
ratingChart.resize();
});
// 筛选标签交互
document.querySelectorAll('.filter-tag').forEach(tag => {
tag.addEventListener('click', function() {
document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
// 时间筛选功能
const filterButtons = document.querySelectorAll('.filter-btn');
const customDateRange = document.querySelector('.custom-date-range');
const customQueryBtn = document.getElementById('customQuery');
// 切换按钮状态
filterButtons.forEach(btn => {
btn.addEventListener('click', function() {
// 移除所有按钮的active状态
filterButtons.forEach(b => b.classList.remove('active'));
// 给当前按钮添加active状态
this.classList.add('active');
const range = this.getAttribute('data-range');
if (range === 'custom') {
customDateRange.style.display = 'flex';
} else {
customDateRange.style.display = 'none';
// 这里可以根据选择的日期范围加载数据
loadDataByRange(range);
}
});
});
// 自定义日期查询
customQueryBtn.addEventListener('click', function() {
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
if (!startDate || !endDate) {
alert('请选择开始和结束日期');
return;
}
if (new Date(startDate) > new Date(endDate)) {
alert('开始日期不能晚于结束日期');
return;
}
// 这里可以根据自定义日期范围加载数据
loadCustomData(startDate, endDate);
});
// 根据预设范围加载数据
function loadDataByRange(range) {
console.log('加载近' + range + '天数据');
// 这里可以添加数据加载逻辑
// 例如:更新统计数据、图表数据等
}
// 加载自定义日期范围数据
function loadCustomData(startDate, endDate) {
console.log('加载自定义日期数据:', startDate, '至', endDate);
// 这里可以添加数据加载逻辑
}
</script>
</body>
</html>

View File

@ -516,10 +516,6 @@
<div class="stat-label">订单完成率</div>
<div class="stat-value">32.77%</div>
</div>
<div class="stat-item">
<div class="stat-label">代理商抽成(元)</div>
<div class="stat-value">0</div>
</div>
</div>
</div>
@ -599,7 +595,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -611,7 +606,6 @@
<td>上海青约300g</td>
<td>1</td>
<td></td>
<td></td>
<td>2</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
@ -673,7 +667,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -685,7 +678,6 @@
<td>胡萝卜约500g</td>
<td>1</td>
<td></td>
<td></td>
<td>0.9</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
@ -747,7 +739,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -759,7 +750,6 @@
<td>商品名称</td>
<td>1</td>
<td></td>
<td></td>
<td>金额</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
@ -821,7 +811,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -833,7 +822,6 @@
<td>商品名称</td>
<td>1</td>
<td></td>
<td></td>
<td>金额</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
@ -895,7 +883,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -907,7 +894,6 @@
<td>商品名称</td>
<td>1</td>
<td></td>
<td></td>
<td>金额</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>

View File

@ -520,18 +520,7 @@
<div class="stat-label">订单金额(元)</div>
<div class="stat-value">5680.50</div>
</div>
<div class="stat-item">
<div class="stat-label">配送费总额(元)</div>
<div class="stat-value">380.20</div>
</div>
<div class="stat-item">
<div class="stat-label">包装费总额(元)</div>
<div class="stat-value">125.50</div>
</div>
<div class="stat-item">
<div class="stat-label">调度费总额(元)</div>
<div class="stat-value">95.80</div>
</div>
<div class="stat-item">
<div class="stat-label">退款金额</div>
<div class="stat-value">450.30</div>
@ -540,10 +529,6 @@
<div class="stat-label">订单完成率</div>
<div class="stat-value">28.8%</div>
</div>
<div class="stat-item">
<div class="stat-label">代理商抽成(元)</div>
<div class="stat-value">0</div>
</div>
</div>
</div>
@ -603,7 +588,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -616,7 +600,6 @@
<td>1</td>
<td>45.0</td>
<td>38.5</td>
<td>38.5</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
</tr>
@ -655,7 +638,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -668,7 +650,6 @@
<td>1</td>
<td>68.0</td>
<td>56.8</td>
<td>56.8</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
</tr>
@ -707,7 +688,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -720,7 +700,6 @@
<td>1</td>
<td>89.9</td>
<td>78.9</td>
<td>78.9</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
</tr>
@ -759,7 +738,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -772,7 +750,6 @@
<td>1</td>
<td>52.0</td>
<td>45.2</td>
<td>45.2</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
</tr>
@ -811,7 +788,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -824,7 +800,6 @@
<td>1</td>
<td>75.0</td>
<td>68.0</td>
<td>68.0</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
</tr>

View File

@ -518,10 +518,6 @@
<div class="stat-label">订单完成率</div>
<div class="stat-value">32.77%</div>
</div>
<div class="stat-item">
<div class="stat-label">代理商抽成(元)</div>
<div class="stat-value">0</div>
</div>
</div>
</div>
@ -558,7 +554,7 @@
<td>13818776990</td>
<td>茅台酱香万家共享(春申路店) 101室</td>
<td>3.8</td>
<td><span class="status-tag status-paid">已支付</span></td>
<td><span class="status-tag status-completed">已完成</span></td>
<td><span class="status-tag status-paid">已支付</span></td>
<td>1001</td>
<td>牛牛蔬菜店</td>
@ -575,7 +571,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -587,7 +582,6 @@
<td>上海青约300g</td>
<td>1</td>
<td></td>
<td></td>
<td>2</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
@ -607,7 +601,7 @@
<td>13818776990</td>
<td>茅台酱香万家共享(春申路店) 101室</td>
<td>3.9</td>
<td><span class="status-tag status-paid">已支付</span></td>
<td><span class="status-tag status-completed">已完成</span></td>
<td><span class="status-tag status-paid">已支付</span></td>
<td>1002</td>
<td>鲜蔬果园店</td>
@ -624,7 +618,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -636,7 +629,6 @@
<td>胡萝卜约500g</td>
<td>1</td>
<td></td>
<td></td>
<td>0.9</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
@ -673,7 +665,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -685,7 +676,6 @@
<td>商品名称</td>
<td>1</td>
<td></td>
<td></td>
<td>金额</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
@ -705,7 +695,7 @@
<td>13818776990</td>
<td>瑞星商务中心 201室</td>
<td>3.6</td>
<td><span class="status-tag status-cancelled">取消</span></td>
<td><span class="status-tag status-completed">已完成</span></td>
<td><span class="status-tag status-cancelled">取消</span></td>
<td>1004</td>
<td>示例店铺</td>
@ -722,7 +712,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -734,7 +723,6 @@
<td>商品名称</td>
<td>1</td>
<td></td>
<td></td>
<td>金额</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
@ -771,7 +759,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -783,7 +770,6 @@
<td>商品名称</td>
<td>1</td>
<td></td>
<td></td>
<td>金额</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>

View File

@ -505,10 +505,6 @@
<div class="stat-label">订单完成率</div>
<div class="stat-value">32.77%</div>
</div>
<div class="stat-item">
<div class="stat-label">代理商抽成(元)</div>
<div class="stat-value">0</div>
</div>
</div>
</div>
@ -588,7 +584,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -600,7 +595,6 @@
<td>上海青约300g</td>
<td>1</td>
<td></td>
<td></td>
<td>2</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
@ -662,7 +656,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -674,7 +667,6 @@
<td>胡萝卜约500g</td>
<td>1</td>
<td></td>
<td></td>
<td>0.9</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
@ -736,7 +728,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -748,9 +739,8 @@
<td>商品名称</td>
<td>1</td>
<td></td>
<td></td>
<td>金额</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyMFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
</tr>
</tbody>
@ -810,7 +800,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -822,9 +811,8 @@
<td>商品名称</td>
<td>1</td>
<td></td>
<td></td>
<td>金额</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyMFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
</tr>
</tbody>
@ -884,7 +872,6 @@
<th>商品名称</th>
<th>商品数量</th>
<th>商品原价</th>
<th>商品终价</th>
<th>商品订单金额</th>
<th>商品图片</th>
<th></th>
@ -896,9 +883,8 @@
<td>商品名称</td>
<td>1</td>
<td></td>
<td></td>
<td>金额</td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyMFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
<td></td>
</tr>
</tbody>

View File

@ -0,0 +1,802 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结算单位订单详情</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1400px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
font-size: 28px;
font-weight: 600;
}
.status-badge {
background: rgba(255,255,255,0.2);
padding: 8px 20px;
border-radius: 20px;
font-size: 14px;
backdrop-filter: blur(10px);
}
.content {
padding: 40px;
}
.section {
margin-bottom: 35px;
padding-bottom: 30px;
border-bottom: 2px solid #f0f0f0;
}
.section:last-child {
border-bottom: none;
}
.section-title {
font-size: 20px;
font-weight: 600;
color: #333;
margin-bottom: 25px;
padding-left: 15px;
border-left: 4px solid #667eea;
}
.info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.info-item {
display: flex;
flex-direction: column;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
transition: all 0.3s ease;
}
.info-item:hover {
background: #e9ecef;
transform: translateY(-2px);
}
.info-label {
font-size: 13px;
color: #6c757d;
margin-bottom: 8px;
font-weight: 500;
}
.info-value {
font-size: 15px;
color: #212529;
font-weight: 600;
}
.info-value.highlight {
color: #667eea;
font-size: 18px;
}
.info-value.money {
color: #e74c3c;
font-size: 18px;
}
/* 收货信息特殊样式 */
.receiver-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 25px;
border-radius: 8px;
margin-bottom: 30px;
}
.receiver-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* 商品表格样式 */
.product-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.product-table thead {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.product-table th {
padding: 15px;
text-align: left;
font-weight: 600;
font-size: 14px;
}
.product-table td {
padding: 15px;
border-bottom: 1px solid #e9ecef;
font-size: 14px;
color: #495057;
}
.product-table tbody tr:hover {
background: #f8f9fa;
}
.product-table tbody tr:last-child td {
border-bottom: none;
}
.product-image {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 状态标签 */
.status-tag {
display: inline-block;
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
}
.status-tag.success {
background: #d4edda;
color: #155724;
}
.status-tag.warning {
background: #fff3cd;
color: #856404;
}
.status-tag.danger {
background: #f8d7da;
color: #721c24;
}
.status-tag.info {
background: #d1ecf1;
color: #0c5460;
}
/* 时间轴样式 */
.timeline {
position: relative;
padding-left: 30px;
}
.timeline-item {
position: relative;
padding-bottom: 20px;
}
.timeline-item:before {
content: '';
position: absolute;
left: -23px;
top: 5px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #667eea;
border: 3px solid white;
box-shadow: 0 0 0 2px #667eea;
}
.timeline-item:after {
content: '';
position: absolute;
left: -18px;
top: 17px;
width: 2px;
height: calc(100% - 5px);
background: #e9ecef;
}
.timeline-item:last-child:after {
display: none;
}
.timeline-time {
font-size: 12px;
color: #6c757d;
margin-bottom: 5px;
}
.timeline-label {
font-size: 14px;
font-weight: 600;
color: #495057;
}
/* 费用汇总卡片 */
.fee-summary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
border-radius: 12px;
margin-top: 20px;
}
.fee-summary-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.fee-summary-item {
text-align: center;
padding: 15px;
background: rgba(255,255,255,0.1);
border-radius: 8px;
backdrop-filter: blur(10px);
}
.fee-summary-label {
font-size: 13px;
margin-bottom: 8px;
opacity: 0.9;
}
.fee-summary-value {
font-size: 24px;
font-weight: 700;
}
.fee-total {
text-align: center;
padding-top: 20px;
border-top: 2px solid rgba(255,255,255,0.2);
}
.fee-total-label {
font-size: 16px;
margin-bottom: 10px;
opacity: 0.9;
}
.fee-total-value {
font-size: 36px;
font-weight: 700;
}
/* 响应式设计 */
@media (max-width: 1200px) {
.info-grid {
grid-template-columns: repeat(2, 1fr);
}
.fee-summary-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.info-grid {
grid-template-columns: 1fr;
}
.receiver-grid {
grid-template-columns: 1fr;
}
.fee-summary-grid {
grid-template-columns: 1fr;
}
.content {
padding: 20px;
}
.product-table {
font-size: 12px;
}
.product-table th,
.product-table td {
padding: 10px;
}
}
/* 打印样式 */
@media print {
body {
background: white;
padding: 0;
}
.container {
box-shadow: none;
}
.info-item:hover {
transform: none;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="header">
<div>
<h1>结算单位订单详情</h1>
<p style="margin-top: 5px; opacity: 0.9; font-size: 14px;">Order Details</p>
</div>
<div class="status-badge">
<span id="orderStatus">已完成</span>
</div>
</div>
<!-- 主体内容 -->
<div class="content">
<!-- 基本订单信息 -->
<div class="section">
<h2 class="section-title">基本信息</h2>
<div class="info-grid">
<div class="info-item">
<span class="info-label">总订单号</span>
<span class="info-value highlight">2024010100001</span>
</div>
<div class="info-item">
<span class="info-label">结算单位订单号</span>
<span class="info-value highlight">UT2024010100001</span>
</div>
<div class="info-item">
<span class="info-label">当日订单序号</span>
<span class="info-value">第 1 单</span>
</div>
<div class="info-item">
<span class="info-label">结算单位类型</span>
<span class="info-value">
<span class="status-tag info">市场经营多订单</span>
</span>
</div>
<div class="info-item">
<span class="info-label">市场名称</span>
<span class="info-value">XX菜市场</span>
</div>
<div class="info-item">
<span class="info-label">店铺名称</span>
<span class="info-value">张三水果店</span>
</div>
<div class="info-item">
<span class="info-label">订单类别</span>
<span class="info-value">
<span class="status-tag success">普通订单</span>
</span>
</div>
<div class="info-item">
<span class="info-label">下单渠道</span>
<span class="info-value">微信小程序</span>
</div>
<div class="info-item">
<span class="info-label">支付方式</span>
<span class="info-value">微信支付</span>
</div>
</div>
</div>
<!-- 费用汇总 -->
<div class="section">
<h2 class="section-title">费用明细</h2>
<div class="fee-summary">
<div class="fee-summary-grid">
<div class="fee-summary-item">
<div class="fee-summary-label">商品金额</div>
<div class="fee-summary-value">¥88.00</div>
</div>
<div class="fee-summary-item">
<div class="fee-summary-label">配送费</div>
<div class="fee-summary-value">¥5.00</div>
</div>
<div class="fee-summary-item">
<div class="fee-summary-label">包装费</div>
<div class="fee-summary-value">¥2.00</div>
</div>
<div class="fee-summary-item">
<div class="fee-summary-label">优惠券减免</div>
<div class="fee-summary-value">-¥10.00</div>
</div>
<div class="fee-summary-item">
<div class="fee-summary-label">会员折扣</div>
<div class="fee-summary-value">-¥5.00</div>
</div>
<div class="fee-summary-item">
<div class="fee-summary-label">平台服务费</div>
<div class="fee-summary-value">¥3.00</div>
</div>
<div class="fee-summary-item">
<div class="fee-summary-label">调度费</div>
<div class="fee-summary-value">¥2.00</div>
</div>
<div class="fee-summary-item">
<div class="fee-summary-label">预计收入</div>
<div class="fee-summary-value">¥75.00</div>
</div>
</div>
<div class="fee-total">
<div class="fee-total-label">顾客实付金额</div>
<div class="fee-total-value">¥80.00</div>
</div>
</div>
<!-- 其他费用信息 -->
<div class="info-grid" style="margin-top: 25px;">
<div class="info-item">
<span class="info-label">分销费用</span>
<span class="info-value money">¥8.00</span>
</div>
<div class="info-item">
<span class="info-label">代理费用</span>
<span class="info-value money">¥5.00</span>
</div>
<div class="info-item">
<span class="info-label">商品总重量</span>
<span class="info-value">3.5 kg</span>
</div>
</div>
</div>
<!-- 收货信息 -->
<div class="section">
<h2 class="section-title">收货信息</h2>
<div class="receiver-section">
<div class="receiver-grid">
<div class="info-item" style="background: white;">
<span class="info-label">收货人</span>
<span class="info-value">李四 (先生)</span>
</div>
<div class="info-item" style="background: white;">
<span class="info-label">联系电话</span>
<span class="info-value">138****8888</span>
</div>
<div class="info-item" style="background: white; grid-column: 1 / -1;">
<span class="info-label">收货地址</span>
<span class="info-value">广东省 深圳市 南山区 科技园小区 5栋201</span>
</div>
<div class="info-item" style="background: white;">
<span class="info-label">地址标签</span>
<span class="info-value">
<span class="status-tag info"></span>
</span>
</div>
<div class="info-item" style="background: white;">
<span class="info-label">经纬度</span>
<span class="info-value">113.9544 / 22.5445</span>
</div>
</div>
</div>
</div>
<!-- 配送信息 -->
<div class="section">
<h2 class="section-title">配送信息</h2>
<div class="info-grid">
<div class="info-item">
<span class="info-label">配送方式</span>
<span class="info-value">
<span class="status-tag info">专员配送</span>
</span>
</div>
<div class="info-item">
<span class="info-label">配送对象</span>
<span class="info-value">专员配送</span>
</div>
<div class="info-item">
<span class="info-label">配送距离</span>
<span class="info-value">3.2 km</span>
</div>
<div class="info-item">
<span class="info-label">预计配送时长</span>
<span class="info-value">30 分钟</span>
</div>
<div class="info-item">
<span class="info-label">配送专员</span>
<span class="info-value">王五</span>
</div>
<div class="info-item">
<span class="info-label">打包专员</span>
<span class="info-value">赵六</span>
</div>
<div class="info-item">
<span class="info-label">客服专员</span>
<span class="info-value">钱七</span>
</div>
<div class="info-item">
<span class="info-label">要求配送时间</span>
<span class="info-value">尽快送达</span>
</div>
<div class="info-item" style="grid-column: 1 / -1;">
<span class="info-label">备注信息</span>
<span class="info-value">请不要按门铃,直接放门口,谢谢!</span>
</div>
</div>
</div>
<!-- 订单状态 -->
<div class="section">
<h2 class="section-title">订单状态</h2>
<div class="info-grid">
<div class="info-item">
<span class="info-label">业务状态</span>
<span class="info-value">
<span class="status-tag success">已完成</span>
</span>
</div>
<div class="info-item">
<span class="info-label">支付状态</span>
<span class="info-value">
<span class="status-tag success">已支付</span>
</span>
</div>
<div class="info-item">
<span class="info-label">结算状态</span>
<span class="info-value">
<span class="status-tag success">已结算</span>
</span>
</div>
<div class="info-item">
<span class="info-label">退款状态</span>
<span class="info-value">
<span class="status-tag success">正常</span>
</span>
</div>
<div class="info-item">
<span class="info-label">支付分组</span>
<span class="info-value">总订单支付</span>
</div>
<div class="info-item">
<span class="info-label">是否已评价</span>
<span class="info-value">
<span class="status-tag success">已评价</span>
</span>
</div>
</div>
</div>
<!-- 时间轴 -->
<div class="section">
<h2 class="section-title">订单时间轴</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-time">2024-01-01 10:00:00</div>
<div class="timeline-label">订单创建</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-01-01 10:01:30</div>
<div class="timeline-label">支付成功</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-01-01 10:02:00</div>
<div class="timeline-label">商家接单</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-01-01 10:15:00</div>
<div class="timeline-label">备餐完成</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-01-01 10:20:00</div>
<div class="timeline-label">完成取货</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-01-01 10:22:00</div>
<div class="timeline-label">开始配送</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-01-01 10:50:00</div>
<div class="timeline-label">确认送达</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-01-01 10:55:00</div>
<div class="timeline-label">用户确认收货</div>
</div>
<div class="timeline-item">
<div class="timeline-time">2024-01-01 11:00:00</div>
<div class="timeline-label">订单完成</div>
</div>
</div>
</div>
<!-- 商品列表 -->
<div class="section">
<h2 class="section-title">订单商品</h2>
<table class="product-table">
<thead>
<tr>
<th>商品图片</th>
<th>商品名称</th>
<th>店铺名称</th>
<th>规格</th>
<th>原价</th>
<th>终价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="https://via.placeholder.com/60" alt="商品图片" class="product-image">
</td>
<td>新鲜苹果</td>
<td>张三水果店</td>
<td>500g/份</td>
<td>¥20.00</td>
<td style="color: #e74c3c; font-weight: 600;">¥18.00</td>
<td>2</td>
<td style="color: #e74c3c; font-weight: 700;">¥36.00</td>
</tr>
<tr>
<td>
<img src="https://via.placeholder.com/60" alt="商品图片" class="product-image">
</td>
<td>新鲜香蕉</td>
<td>张三水果店</td>
<td>1kg/份</td>
<td>¥15.00</td>
<td style="color: #e74c3c; font-weight: 600;">¥13.00</td>
<td>1</td>
<td style="color: #e74c3c; font-weight: 700;">¥13.00</td>
</tr>
<tr>
<td>
<img src="https://via.placeholder.com/60" alt="商品图片" class="product-image">
</td>
<td>进口橙子</td>
<td>张三水果店</td>
<td>1kg/份</td>
<td>¥25.00</td>
<td style="color: #e74c3c; font-weight: 600;">¥20.00</td>
<td>1</td>
<td style="color: #e74c3c; font-weight: 700;">¥20.00</td>
</tr>
<tr>
<td>
<img src="https://via.placeholder.com/60" alt="商品图片" class="product-image">
</td>
<td>新鲜葡萄</td>
<td>张三水果店</td>
<td>500g/份</td>
<td>¥22.00</td>
<td style="color: #e74c3c; font-weight: 600;">¥19.00</td>
<td>1</td>
<td style="color: #e74c3c; font-weight: 700;">¥19.00</td>
</tr>
<tr style="background: #f8f9fa; font-weight: 600;">
<td colspan="6" style="text-align: right; padding-right: 20px;">
商品总计:
</td>
<td>5 件</td>
<td style="color: #e74c3c; font-size: 16px;">¥88.00</td>
</tr>
</tbody>
</table>
</div>
<!-- 其他信息 -->
<div class="section">
<h2 class="section-title">其他信息</h2>
<div class="info-grid">
<div class="info-item">
<span class="info-label">用户ID</span>
<span class="info-value">10001</span>
</div>
<div class="info-item">
<span class="info-label">市场ID</span>
<span class="info-value">1001</span>
</div>
<div class="info-item">
<span class="info-label">店铺ID</span>
<span class="info-value">2001</span>
</div>
<div class="info-item">
<span class="info-label">是否系统自动取消</span>
<span class="info-value"></span>
</div>
<div class="info-item">
<span class="info-label">是否忽略历史备注</span>
<span class="info-value"></span>
</div>
<div class="info-item">
<span class="info-label">优惠券ID</span>
<span class="info-value">CPN20240101001</span>
</div>
</div>
</div>
</div>
</div>
<script>
// 这里可以添加JavaScript来动态加载订单数据
// 示例通过AJAX从后端API获取订单详情并填充页面
// 订单状态映射
const statusMap = {
0: { text: '待支付', className: 'warning' },
1: { text: '待接单', className: 'info' },
2: { text: '待备货', className: 'info' },
3: { text: '待取货', className: 'info' },
4: { text: '待配送', className: 'info' },
5: { text: '配送中', className: 'info' },
6: { text: '已配送', className: 'success' },
8: { text: '已完成', className: 'success' },
'-1': { text: '已取消', className: 'danger' },
'-2': { text: '退款中', className: 'warning' },
'-3': { text: '完全退款', className: 'danger' },
'-4': { text: '部分退款', className: 'warning' }
};
// 示例:更新订单状态
function updateOrderStatus(status) {
const statusInfo = statusMap[status] || { text: '未知状态', className: 'info' };
document.getElementById('orderStatus').textContent = statusInfo.text;
}
// 示例从API加载订单数据
// function loadOrderData(unitOrderNo) {
// fetch(`/api/unit-order/${unitOrderNo}`)
// .then(response => response.json())
// .then(data => {
// // 填充页面数据
// updateOrderStatus(data.status);
// // ... 更新其他字段
// })
// .catch(error => console.error('Error loading order data:', error));
// }
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
console.log('结算单位订单详情页面已加载');
// 可以在这里调用 loadOrderData() 来加载实际数据
});
</script>
</body>
</html>

File diff suppressed because it is too large Load Diff

Binary file not shown.