Compare commits
No commits in common. "1a6270b3fe03ed884bacd25de73a8b1b97ded8ae" and "1d6e0fd9ac080687c789b1dc3ea11f00327d9058" have entirely different histories.
1a6270b3fe
...
1d6e0fd9ac
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -47,115 +47,6 @@
|
|||
font-size: 14px;
|
||||
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;
|
||||
|
|
@ -432,25 +323,7 @@
|
|||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">🎯 品牌分销全景分析</h1>
|
||||
<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>
|
||||
<p class="page-subtitle">全方位监控分销推广效果与分销商效能 · 数据更新时间：2024-01-15 10:30</p>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">📊 分销商团队数据</h2>
|
||||
|
|
@ -486,7 +359,13 @@
|
|||
<div class="icon">🔥</div>
|
||||
<h3>活跃分销商</h3>
|
||||
<div class="value">892</div>
|
||||
<div class="sub-value">活跃率 71.5%</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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -510,7 +389,7 @@
|
|||
<h3>分销订单总量</h3>
|
||||
<div class="value">5,682</div>
|
||||
<div class="sub-value">
|
||||
占总订单 44.2%
|
||||
占总订单 44.2% <span class="trend up">+3.8%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
|
|
@ -518,20 +397,20 @@
|
|||
<h3>分销GMV贡献</h3>
|
||||
<div class="value">¥378万</div>
|
||||
<div class="sub-value">
|
||||
占总GMV 44.1%
|
||||
占总GMV 44.1% <span class="trend up">+4.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="icon">👤</div>
|
||||
<h3>人均分销订单</h3>
|
||||
<div class="value">6.4</div>
|
||||
<div class="sub-value">单/分销商</div>
|
||||
<div class="sub-value">单/分销商 <span class="trend up">+0.8</span></div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="icon">💵</div>
|
||||
<h3>人均分销金额</h3>
|
||||
<div class="value">¥4,269</div>
|
||||
<div class="sub-value">元/分销商</div>
|
||||
<div class="sub-value">元/分销商 <span class="trend up">+512</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -735,63 +614,6 @@
|
|||
</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 = {
|
||||
|
|
@ -842,7 +664,7 @@
|
|||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['新增分销商'],
|
||||
data: ['新增分销商', '流失分销商'],
|
||||
top: 10
|
||||
},
|
||||
grid: {
|
||||
|
|
@ -873,6 +695,19 @@
|
|||
{ 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)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -48,115 +48,6 @@
|
|||
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;
|
||||
|
|
@ -428,25 +319,7 @@
|
|||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">🔥 品牌爆款商品榜</h1>
|
||||
<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>
|
||||
<p class="page-subtitle">跨所有连锁单位的商品表现排行 · 数据更新时间：2024-01-15 10:30</p>
|
||||
</div>
|
||||
|
||||
<div class="stats-section">
|
||||
|
|
@ -892,62 +765,13 @@
|
|||
ratingChart.resize();
|
||||
});
|
||||
|
||||
// 时间筛选功能
|
||||
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状态
|
||||
// 筛选标签交互
|
||||
document.querySelectorAll('.filter-tag').forEach(tag => {
|
||||
tag.addEventListener('click', function() {
|
||||
document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('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>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>xx品牌业绩排行榜 - 品牌数据中心</title>
|
||||
<title>连锁单位业绩排行榜 - 品牌数据中心</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
|
|
@ -228,155 +228,29 @@
|
|||
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">📊 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>
|
||||
<h1 class="page-title">📊 连锁单位业绩排行榜</h1>
|
||||
<p class="page-subtitle">多维度对比连锁市场/店铺经营表现 · 数据更新时间：2024-01-15 10:30</p>
|
||||
</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>
|
||||
|
|
@ -400,6 +274,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<span class="ranking-value">¥128.5万</span>
|
||||
<span class="trend-badge trend-up">↑ 32%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ranking-item">
|
||||
|
|
@ -410,6 +285,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<span class="ranking-value">¥115.2万</span>
|
||||
<span class="trend-badge trend-up">↑ 28%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ranking-item">
|
||||
|
|
@ -420,6 +296,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<span class="ranking-value">¥98.7万</span>
|
||||
<span class="trend-badge trend-up">↑ 15%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ranking-item">
|
||||
|
|
@ -430,6 +307,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<span class="ranking-value">¥87.3万</span>
|
||||
<span class="trend-badge trend-up">↑ 22%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ranking-item">
|
||||
|
|
@ -440,6 +318,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<span class="ranking-value">¥76.8万</span>
|
||||
<span class="trend-badge trend-up">↑ 18%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ranking-item">
|
||||
|
|
@ -450,6 +329,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<span class="ranking-value">¥65.4万</span>
|
||||
<span class="trend-badge trend-up">↑ 12%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ranking-item">
|
||||
|
|
@ -460,6 +340,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<span class="ranking-value">¥58.9万</span>
|
||||
<span class="trend-badge trend-up">↑ 25%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ranking-item">
|
||||
|
|
@ -470,6 +351,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<span class="ranking-value">¥52.3万</span>
|
||||
<span class="trend-badge trend-down">↓ 5%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ranking-item">
|
||||
|
|
@ -480,6 +362,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<span class="ranking-value">¥48.6万</span>
|
||||
<span class="trend-badge trend-up">↑ 8%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ranking-item">
|
||||
|
|
@ -490,6 +373,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<span class="ranking-value">¥42.1万</span>
|
||||
<span class="trend-badge trend-up">↑ 10%</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -506,67 +390,15 @@
|
|||
<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 = {
|
||||
|
|
@ -655,10 +487,63 @@
|
|||
};
|
||||
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>
|
||||
|
|
@ -516,7 +516,11 @@
|
|||
<div class="stat-label">订单完成率</div>
|
||||
<div class="stat-value">32.77%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">代理商抽成(元)</div>
|
||||
<div class="stat-value">0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -595,6 +599,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -606,6 +611,7 @@
|
|||
<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>
|
||||
|
|
@ -667,6 +673,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -678,6 +685,7 @@
|
|||
<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>
|
||||
|
|
@ -739,6 +747,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -750,6 +759,7 @@
|
|||
<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>
|
||||
|
|
@ -811,6 +821,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -822,6 +833,7 @@
|
|||
<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>
|
||||
|
|
@ -883,6 +895,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -894,6 +907,7 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -520,7 +520,18 @@
|
|||
<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>
|
||||
|
|
@ -529,6 +540,10 @@
|
|||
<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>
|
||||
|
||||
|
|
@ -588,6 +603,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -600,6 +616,7 @@
|
|||
<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>
|
||||
|
|
@ -638,6 +655,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -650,6 +668,7 @@
|
|||
<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>
|
||||
|
|
@ -688,6 +707,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -700,6 +720,7 @@
|
|||
<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>
|
||||
|
|
@ -738,6 +759,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -750,6 +772,7 @@
|
|||
<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>
|
||||
|
|
@ -788,6 +811,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -800,6 +824,7 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -518,6 +518,10 @@
|
|||
<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>
|
||||
|
||||
|
|
@ -554,7 +558,7 @@
|
|||
<td>13818776990</td>
|
||||
<td>茅台酱香万家共享(春申路店) 101室</td>
|
||||
<td>3.8</td>
|
||||
<td><span class="status-tag status-completed">已完成</span></td>
|
||||
<td><span class="status-tag status-paid">已支付</span></td>
|
||||
<td><span class="status-tag status-paid">已支付</span></td>
|
||||
<td>1001</td>
|
||||
<td>牛牛蔬菜店</td>
|
||||
|
|
@ -571,6 +575,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -582,6 +587,7 @@
|
|||
<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>
|
||||
|
|
@ -601,7 +607,7 @@
|
|||
<td>13818776990</td>
|
||||
<td>茅台酱香万家共享(春申路店) 101室</td>
|
||||
<td>3.9</td>
|
||||
<td><span class="status-tag status-completed">已完成</span></td>
|
||||
<td><span class="status-tag status-paid">已支付</span></td>
|
||||
<td><span class="status-tag status-paid">已支付</span></td>
|
||||
<td>1002</td>
|
||||
<td>鲜蔬果园店</td>
|
||||
|
|
@ -618,6 +624,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -629,6 +636,7 @@
|
|||
<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>
|
||||
|
|
@ -665,6 +673,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -676,6 +685,7 @@
|
|||
<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>
|
||||
|
|
@ -695,7 +705,7 @@
|
|||
<td>13818776990</td>
|
||||
<td>瑞星商务中心 201室</td>
|
||||
<td>3.6</td>
|
||||
<td><span class="status-tag status-completed">已完成</span></td>
|
||||
<td><span class="status-tag status-cancelled">取消</span></td>
|
||||
<td><span class="status-tag status-cancelled">取消</span></td>
|
||||
<td>1004</td>
|
||||
<td>示例店铺</td>
|
||||
|
|
@ -712,6 +722,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -723,6 +734,7 @@
|
|||
<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>
|
||||
|
|
@ -759,6 +771,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -770,6 +783,7 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -505,6 +505,10 @@
|
|||
<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>
|
||||
|
||||
|
|
@ -584,6 +588,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -595,6 +600,7 @@
|
|||
<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>
|
||||
|
|
@ -656,6 +662,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -667,6 +674,7 @@
|
|||
<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>
|
||||
|
|
@ -728,6 +736,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -739,8 +748,9 @@
|
|||
<td>商品名称</td>
|
||||
<td>1</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>金额</td>
|
||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyMFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -800,6 +810,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -811,8 +822,9 @@
|
|||
<td>商品名称</td>
|
||||
<td>1</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>金额</td>
|
||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyMFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -872,6 +884,7 @@
|
|||
<th>商品名称</th>
|
||||
<th>商品数量</th>
|
||||
<th>商品原价</th>
|
||||
<th>商品终价</th>
|
||||
<th>商品订单金额</th>
|
||||
<th>商品图片</th>
|
||||
<th></th>
|
||||
|
|
@ -883,8 +896,9 @@
|
|||
<td>商品名称</td>
|
||||
<td>1</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>金额</td>
|
||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyMFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||
<td><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -1,802 +0,0 @@
|
|||
<!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
Loading…
Reference in New Issue