Compare commits
7 Commits
1d6e0fd9ac
...
1a6270b3fe
| Author | SHA1 | Date |
|---|---|---|
 linbin
|
1a6270b3fe | |
|
linbin
|
3a55edbe04 | |
|
linbin
|
f4cb2c9ec7 | |
|
linbin
|
a6f97616ef | |
|
linbin
|
2eccfd69f0 | |
|
linbin
|
c20e28fdca | |
|
linbin
|
5b8ffac16c |
|
|
@ -513,9 +513,9 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="submenu">
|
<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>
|
<span class="submenu-icon"></span>
|
||||||
连锁单位业绩排行榜
|
品牌业绩排行榜
|
||||||
</a>
|
</a>
|
||||||
<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>
|
<span class="submenu-icon"></span>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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>
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
|
|
@ -228,29 +228,155 @@
|
||||||
background: #f8d7da;
|
background: #f8d7da;
|
||||||
color: #721c24;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1 class="page-title">📊 连锁单位业绩排行榜</h1>
|
<h1 class="page-title">📊 xx品牌业绩排行榜</h1>
|
||||||
<p class="page-subtitle">多维度对比连锁市场/店铺经营表现 · 数据更新时间：2024-01-15 10:30</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>
|
||||||
|
|
||||||
<div class="stats-section">
|
<div class="stats-section">
|
||||||
<div class="stats-grid">
|
<div class="stats-grid">
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<h3>连锁单位总数</h3>
|
<h3>品牌单位总数</h3>
|
||||||
<div class="value">28</div>
|
<div class="value">28</div>
|
||||||
<div class="label">家连锁市场/店铺</div>
|
<div class="label">家连锁市场/店铺</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<h3>本月总销售额</h3>
|
<h3>总销售额</h3>
|
||||||
<div class="value">¥856万</div>
|
<div class="value">¥856万</div>
|
||||||
<div class="label">环比上月 +23.5%</div>
|
<div class="label">环比上月 +23.5%</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<h3>本月总订单量</h3>
|
<h3>总订单量</h3>
|
||||||
<div class="value">12,847</div>
|
<div class="value">12,847</div>
|
||||||
<div class="label">环比上月 +18.2%</div>
|
<div class="label">环比上月 +18.2%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -274,7 +400,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="ranking-value">¥128.5万</span>
|
<span class="ranking-value">¥128.5万</span>
|
||||||
<span class="trend-badge trend-up">↑ 32%</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="ranking-item">
|
<li class="ranking-item">
|
||||||
|
|
@ -285,7 +410,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="ranking-value">¥115.2万</span>
|
<span class="ranking-value">¥115.2万</span>
|
||||||
<span class="trend-badge trend-up">↑ 28%</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="ranking-item">
|
<li class="ranking-item">
|
||||||
|
|
@ -296,7 +420,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="ranking-value">¥98.7万</span>
|
<span class="ranking-value">¥98.7万</span>
|
||||||
<span class="trend-badge trend-up">↑ 15%</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="ranking-item">
|
<li class="ranking-item">
|
||||||
|
|
@ -307,7 +430,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="ranking-value">¥87.3万</span>
|
<span class="ranking-value">¥87.3万</span>
|
||||||
<span class="trend-badge trend-up">↑ 22%</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="ranking-item">
|
<li class="ranking-item">
|
||||||
|
|
@ -318,7 +440,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="ranking-value">¥76.8万</span>
|
<span class="ranking-value">¥76.8万</span>
|
||||||
<span class="trend-badge trend-up">↑ 18%</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="ranking-item">
|
<li class="ranking-item">
|
||||||
|
|
@ -329,7 +450,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="ranking-value">¥65.4万</span>
|
<span class="ranking-value">¥65.4万</span>
|
||||||
<span class="trend-badge trend-up">↑ 12%</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="ranking-item">
|
<li class="ranking-item">
|
||||||
|
|
@ -340,7 +460,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="ranking-value">¥58.9万</span>
|
<span class="ranking-value">¥58.9万</span>
|
||||||
<span class="trend-badge trend-up">↑ 25%</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="ranking-item">
|
<li class="ranking-item">
|
||||||
|
|
@ -351,7 +470,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="ranking-value">¥52.3万</span>
|
<span class="ranking-value">¥52.3万</span>
|
||||||
<span class="trend-badge trend-down">↓ 5%</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="ranking-item">
|
<li class="ranking-item">
|
||||||
|
|
@ -362,7 +480,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="ranking-value">¥48.6万</span>
|
<span class="ranking-value">¥48.6万</span>
|
||||||
<span class="trend-badge trend-up">↑ 8%</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="ranking-item">
|
<li class="ranking-item">
|
||||||
|
|
@ -373,7 +490,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="ranking-value">¥42.1万</span>
|
<span class="ranking-value">¥42.1万</span>
|
||||||
<span class="trend-badge trend-up">↑ 10%</span>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -390,15 +506,67 @@
|
||||||
<h2>👥 客户量TOP10排行榜</h2>
|
<h2>👥 客户量TOP10排行榜</h2>
|
||||||
<div class="chart-container" id="customerChart"></div>
|
<div class="chart-container" id="customerChart"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chart-card">
|
|
||||||
<h2>📈 增长率TOP10排行榜</h2>
|
|
||||||
<div class="chart-container" id="growthChart"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<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 orderChart = echarts.init(document.getElementById('orderChart'));
|
||||||
const orderOption = {
|
const orderOption = {
|
||||||
|
|
@ -487,63 +655,10 @@
|
||||||
};
|
};
|
||||||
customerChart.setOption(customerOption);
|
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() {
|
window.addEventListener('resize', function() {
|
||||||
orderChart.resize();
|
orderChart.resize();
|
||||||
customerChart.resize();
|
customerChart.resize();
|
||||||
growthChart.resize();
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
@ -48,6 +48,115 @@
|
||||||
color: #666;
|
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 {
|
.section-title {
|
||||||
color: #262626;
|
color: #262626;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
@ -323,7 +432,25 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1 class="page-title">🎯 品牌分销全景分析</h1>
|
<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>
|
||||||
|
|
||||||
<h2 class="section-title">📊 分销商团队数据</h2>
|
<h2 class="section-title">📊 分销商团队数据</h2>
|
||||||
|
|
@ -359,13 +486,7 @@
|
||||||
<div class="icon">🔥</div>
|
<div class="icon">🔥</div>
|
||||||
<h3>活跃分销商</h3>
|
<h3>活跃分销商</h3>
|
||||||
<div class="value">892</div>
|
<div class="value">892</div>
|
||||||
<div class="sub-value">活跃率 71.5% <span class="trend up">+5.2%</span></div>
|
<div class="sub-value">活跃率 71.5%</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -389,7 +510,7 @@
|
||||||
<h3>分销订单总量</h3>
|
<h3>分销订单总量</h3>
|
||||||
<div class="value">5,682</div>
|
<div class="value">5,682</div>
|
||||||
<div class="sub-value">
|
<div class="sub-value">
|
||||||
占总订单 44.2% <span class="trend up">+3.8%</span>
|
占总订单 44.2%
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
|
|
@ -397,20 +518,20 @@
|
||||||
<h3>分销GMV贡献</h3>
|
<h3>分销GMV贡献</h3>
|
||||||
<div class="value">¥378万</div>
|
<div class="value">¥378万</div>
|
||||||
<div class="sub-value">
|
<div class="sub-value">
|
||||||
占总GMV 44.1% <span class="trend up">+4.2%</span>
|
占总GMV 44.1%
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<div class="icon">👤</div>
|
<div class="icon">👤</div>
|
||||||
<h3>人均分销订单</h3>
|
<h3>人均分销订单</h3>
|
||||||
<div class="value">6.4</div>
|
<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>
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<div class="icon">💵</div>
|
<div class="icon">💵</div>
|
||||||
<h3>人均分销金额</h3>
|
<h3>人均分销金额</h3>
|
||||||
<div class="value">¥4,269</div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -614,6 +735,63 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<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 levelChart = echarts.init(document.getElementById('levelChart'));
|
||||||
const levelOption = {
|
const levelOption = {
|
||||||
|
|
@ -664,7 +842,7 @@
|
||||||
trigger: 'axis'
|
trigger: 'axis'
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['新增分销商', '流失分销商'],
|
data: ['新增分销商'],
|
||||||
top: 10
|
top: 10
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
|
|
@ -695,19 +873,6 @@
|
||||||
{ offset: 1, color: 'rgba(92, 184, 92, 0.05)' }
|
{ 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,6 +48,115 @@
|
||||||
color: #666;
|
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 {
|
.stats-section {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
|
|
@ -319,7 +428,25 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1 class="page-title">🔥 品牌爆款商品榜</h1>
|
<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>
|
||||||
|
|
||||||
<div class="stats-section">
|
<div class="stats-section">
|
||||||
|
|
@ -765,13 +892,62 @@
|
||||||
ratingChart.resize();
|
ratingChart.resize();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 筛选标签交互
|
// 时间筛选功能
|
||||||
document.querySelectorAll('.filter-tag').forEach(tag => {
|
const filterButtons = document.querySelectorAll('.filter-btn');
|
||||||
tag.addEventListener('click', function() {
|
const customDateRange = document.querySelector('.custom-date-range');
|
||||||
document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
|
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');
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -516,11 +516,7 @@
|
||||||
<div class="stat-label">订单完成率</div>
|
<div class="stat-label">订单完成率</div>
|
||||||
<div class="stat-value">32.77%</div>
|
<div class="stat-value">32.77%</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item">
|
</div>
|
||||||
<div class="stat-label">代理商抽成(元)</div>
|
|
||||||
<div class="stat-value">0</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -599,7 +595,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -611,7 +606,6 @@
|
||||||
<td>上海青约300g</td>
|
<td>上海青约300g</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
|
||||||
<td>2</td>
|
<td>2</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+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
|
@ -673,7 +667,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -685,7 +678,6 @@
|
||||||
<td>胡萝卜约500g</td>
|
<td>胡萝卜约500g</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
|
||||||
<td>0.9</td>
|
<td>0.9</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+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
|
@ -747,7 +739,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -759,7 +750,6 @@
|
||||||
<td>商品名称</td>
|
<td>商品名称</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></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+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
|
@ -821,7 +811,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -833,7 +822,6 @@
|
||||||
<td>商品名称</td>
|
<td>商品名称</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></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+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
|
@ -895,7 +883,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -907,7 +894,6 @@
|
||||||
<td>商品名称</td>
|
<td>商品名称</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></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+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
|
|
||||||
|
|
@ -520,18 +520,7 @@
|
||||||
<div class="stat-label">订单金额（元）</div>
|
<div class="stat-label">订单金额（元）</div>
|
||||||
<div class="stat-value">5680.50</div>
|
<div class="stat-value">5680.50</div>
|
||||||
</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-item">
|
||||||
<div class="stat-label">退款金额</div>
|
<div class="stat-label">退款金额</div>
|
||||||
<div class="stat-value">450.30</div>
|
<div class="stat-value">450.30</div>
|
||||||
|
|
@ -540,10 +529,6 @@
|
||||||
<div class="stat-label">订单完成率</div>
|
<div class="stat-label">订单完成率</div>
|
||||||
<div class="stat-value">28.8%</div>
|
<div class="stat-value">28.8%</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-label">代理商抽成(元)</div>
|
|
||||||
<div class="stat-value">0</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -603,7 +588,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -616,7 +600,6 @@
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td>45.0</td>
|
<td>45.0</td>
|
||||||
<td>38.5</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><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -655,7 +638,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -668,7 +650,6 @@
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td>68.0</td>
|
<td>68.0</td>
|
||||||
<td>56.8</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><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -707,7 +688,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -720,7 +700,6 @@
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td>89.9</td>
|
<td>89.9</td>
|
||||||
<td>78.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><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -759,7 +738,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -772,7 +750,6 @@
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td>52.0</td>
|
<td>52.0</td>
|
||||||
<td>45.2</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><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -811,7 +788,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -824,7 +800,6 @@
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td>75.0</td>
|
<td>75.0</td>
|
||||||
<td>68.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><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
||||||
|
|
@ -518,10 +518,6 @@
|
||||||
<div class="stat-label">订单完成率</div>
|
<div class="stat-label">订单完成率</div>
|
||||||
<div class="stat-value">32.77%</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -558,7 +554,7 @@
|
||||||
<td>13818776990</td>
|
<td>13818776990</td>
|
||||||
<td>茅台酱香万家共享(春申路店) 101室</td>
|
<td>茅台酱香万家共享(春申路店) 101室</td>
|
||||||
<td>3.8</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><span class="status-tag status-paid">已支付</span></td>
|
||||||
<td>1001</td>
|
<td>1001</td>
|
||||||
<td>牛牛蔬菜店</td>
|
<td>牛牛蔬菜店</td>
|
||||||
|
|
@ -575,7 +571,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -587,7 +582,6 @@
|
||||||
<td>上海青约300g</td>
|
<td>上海青约300g</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
|
||||||
<td>2</td>
|
<td>2</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+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
|
@ -607,7 +601,7 @@
|
||||||
<td>13818776990</td>
|
<td>13818776990</td>
|
||||||
<td>茅台酱香万家共享(春申路店) 101室</td>
|
<td>茅台酱香万家共享(春申路店) 101室</td>
|
||||||
<td>3.9</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><span class="status-tag status-paid">已支付</span></td>
|
||||||
<td>1002</td>
|
<td>1002</td>
|
||||||
<td>鲜蔬果园店</td>
|
<td>鲜蔬果园店</td>
|
||||||
|
|
@ -624,7 +618,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -636,7 +629,6 @@
|
||||||
<td>胡萝卜约500g</td>
|
<td>胡萝卜约500g</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
|
||||||
<td>0.9</td>
|
<td>0.9</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+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
|
@ -673,7 +665,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -685,7 +676,6 @@
|
||||||
<td>商品名称</td>
|
<td>商品名称</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></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+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
|
@ -705,7 +695,7 @@
|
||||||
<td>13818776990</td>
|
<td>13818776990</td>
|
||||||
<td>瑞星商务中心 201室</td>
|
<td>瑞星商务中心 201室</td>
|
||||||
<td>3.6</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><span class="status-tag status-cancelled">取消</span></td>
|
||||||
<td>1004</td>
|
<td>1004</td>
|
||||||
<td>示例店铺</td>
|
<td>示例店铺</td>
|
||||||
|
|
@ -722,7 +712,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -734,7 +723,6 @@
|
||||||
<td>商品名称</td>
|
<td>商品名称</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></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+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
|
@ -771,7 +759,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -783,7 +770,6 @@
|
||||||
<td>商品名称</td>
|
<td>商品名称</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></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+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
|
|
||||||
|
|
@ -505,10 +505,6 @@
|
||||||
<div class="stat-label">订单完成率</div>
|
<div class="stat-label">订单完成率</div>
|
||||||
<div class="stat-value">32.77%</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -588,7 +584,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -600,7 +595,6 @@
|
||||||
<td>上海青约300g</td>
|
<td>上海青约300g</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
|
||||||
<td>2</td>
|
<td>2</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+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
|
@ -662,7 +656,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -674,7 +667,6 @@
|
||||||
<td>胡萝卜约500g</td>
|
<td>胡萝卜约500g</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
|
||||||
<td>0.9</td>
|
<td>0.9</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+CjxwYXRoIGQ9Ik0xNiAxNkgyNFYyNEgxNlYxNloiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+" class="product-image" alt="商品图片"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
|
@ -736,7 +728,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -748,9 +739,8 @@
|
||||||
<td>商品名称</td>
|
<td>商品名称</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></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>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
@ -810,7 +800,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -822,9 +811,8 @@
|
||||||
<td>商品名称</td>
|
<td>商品名称</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></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>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
@ -884,7 +872,6 @@
|
||||||
<th>商品名称</th>
|
<th>商品名称</th>
|
||||||
<th>商品数量</th>
|
<th>商品数量</th>
|
||||||
<th>商品原价</th>
|
<th>商品原价</th>
|
||||||
<th>商品终价</th>
|
|
||||||
<th>商品订单金额</th>
|
<th>商品订单金额</th>
|
||||||
<th>商品图片</th>
|
<th>商品图片</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -896,9 +883,8 @@
|
||||||
<td>商品名称</td>
|
<td>商品名称</td>
|
||||||
<td>1</td>
|
<td>1</td>
|
||||||
<td></td>
|
<td></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>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
|
||||||
|
|
@ -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
Loading…
Reference in New Issue