386 lines
22 KiB
HTML
386 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>绿邻回收 - 全端原型</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<style>
|
||
body {
|
||
background-color: #f0f2f5;
|
||
}
|
||
.mobile-frame {
|
||
width: 375px;
|
||
height: 812px;
|
||
border: 8px solid black;
|
||
border-radius: 40px;
|
||
background-color: #f7f8fa;
|
||
overflow: hidden;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.screen {
|
||
width: 100%;
|
||
flex-grow: 1;
|
||
overflow-y: auto;
|
||
}
|
||
.screen::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.bottom-nav {
|
||
width: 100%;
|
||
height: 60px;
|
||
background-color: white;
|
||
border-top: 1px solid #e5e7eb;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
.nav-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
}
|
||
.nav-item.active {
|
||
color: #28a745;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="w-full flex flex-col items-center p-5">
|
||
|
||
<!-- C端 分组 -->
|
||
<div class="w-full max-w-screen-2xl mb-12">
|
||
<h1 class="text-3xl font-bold text-center mb-6 text-gray-700">C端 (居民端)</h1>
|
||
<div class="flex flex-wrap justify-center gap-5">
|
||
<!-- C端 - 首页 -->
|
||
<div class="mobile-frame">
|
||
<div class="screen p-4">
|
||
<div class="text-center my-8">
|
||
<button class="bg-green-500 text-white rounded-lg shadow-lg w-full py-6">
|
||
<i class="ri-qr-code-line text-6xl"></i>
|
||
<span class="block text-2xl font-bold mt-2">我的卖品码</span>
|
||
</button>
|
||
<p class="text-center text-sm text-gray-500 mt-2">向小站站长出示此码，即可开始回收</p>
|
||
</div>
|
||
<div class="bg-white p-4 rounded-lg shadow mb-4">
|
||
<h3 class="font-bold text-lg mb-2 flex items-center"><i class="ri-price-tag-3-line mr-2 text-green-500"></i>今日回收价</h3>
|
||
<div class="space-y-2 text-lg">
|
||
<div class="flex justify-between"><span>废纸壳</span><span class="font-bold text-green-600">0.85 元/斤</span></div>
|
||
<div class="flex justify-between"><span>塑料瓶</span><span class="font-bold text-green-600">0.10 元/个</span></div>
|
||
<div class="flex justify-between"><span>旧衣物</span><span class="font-bold text-green-600">0.50 元/斤</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white p-4 rounded-lg shadow">
|
||
<h3 class="font-bold text-lg mb-2 flex items-center"><i class="ri-store-2-line mr-2 text-green-500"></i>附近小站</h3>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center">
|
||
<div class="flex-grow">
|
||
<p class="font-bold">社区便民超市</p>
|
||
<p class="text-sm text-gray-500">距离您 200米</p>
|
||
</div>
|
||
<span class="text-sm font-semibold text-green-600 bg-green-100 px-2 py-1 rounded-full">营业中</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="flex-grow">
|
||
<p class="font-bold">好邻居快递驿站</p>
|
||
<p class="text-sm text-gray-500">距离您 500米</p>
|
||
</div>
|
||
<span class="text-sm font-semibold text-gray-500 bg-gray-200 px-2 py-1 rounded-full">休息中</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-nav">
|
||
<div class="nav-item active"><i class="ri-home-4-fill text-2xl"></i><span>首页</span></div>
|
||
<div class="nav-item"><i class="ri-user-fill text-2xl"></i><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- C端 - 我的页面 -->
|
||
<div class="mobile-frame">
|
||
<div class="screen p-4">
|
||
<div class="flex items-center mb-6">
|
||
<img src="https://images.unsplash.com/photo-1529665253569-6d01c0eaf7b6?q=80&w=200&auto=format&fit=crop" class="w-16 h-16 rounded-full object-cover mr-4" alt="avatar">
|
||
<div>
|
||
<h2 class="text-2xl font-bold">王大妈</h2>
|
||
<p class="text-gray-500">欢迎使用绿邻回收</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-green-500 text-white p-6 rounded-lg shadow-lg text-center mb-6">
|
||
<p class="text-lg">我的余额 (元)</p>
|
||
<p class="text-5xl font-bold my-2">128.50</p>
|
||
<!-- V1.1功能，MVP版本中移除 -->
|
||
</div>
|
||
<div class="space-y-3 text-lg">
|
||
<div class="flex justify-between items-center p-4 bg-white rounded-lg shadow-sm">
|
||
<div class="flex items-center"><i class="ri-bill-line mr-3 text-green-500"></i><span>交易记录</span></div>
|
||
<i class="ri-arrow-right-s-line"></i>
|
||
</div>
|
||
<div class="flex justify-between items-center p-4 bg-white rounded-lg shadow-sm">
|
||
<div class="flex items-center"><i class="ri-customer-service-2-line mr-3 text-green-500"></i><span>联系客服</span></div>
|
||
<i class="ri-arrow-right-s-line"></i>
|
||
</div>
|
||
</div>
|
||
<!-- C端图表 -->
|
||
<div class="bg-white p-4 rounded-lg shadow mt-4">
|
||
<h3 class="font-bold text-lg mb-2 flex items-center"><i class="ri-pie-chart-2-line mr-2 text-green-500"></i>我的回收分布</h3>
|
||
<canvas id="cUserChart" height="180"></canvas>
|
||
</div>
|
||
<div class="bg-white p-4 rounded-lg shadow mt-4">
|
||
<h3 class="font-bold text-lg mb-2 flex items-center"><i class="ri-bar-chart-line mr-2 text-green-500"></i>历史收入</h3>
|
||
<canvas id="cHistoryChart" height="180"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-nav">
|
||
<div class="nav-item"><i class="ri-home-4-line text-2xl"></i><span>首页</span></div>
|
||
<div class="nav-item active"><i class="ri-user-fill text-2xl"></i><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- C端 - 交易记录 -->
|
||
<div class="mobile-frame">
|
||
<div class="screen">
|
||
<div class="p-4 bg-white border-b sticky top-0">
|
||
<div class="flex items-center"><i class="ri-arrow-left-s-line text-2xl mr-2"></i><h1 class="font-bold text-xl flex-grow text-center">交易记录</h1></div>
|
||
</div>
|
||
<!-- 列表有数据时 -->
|
||
<div class="p-4 space-y-3">
|
||
<div class="bg-white p-3 rounded-lg shadow-sm">
|
||
<div class="flex justify-between items-center mb-2"><span class="font-bold">社区便民超市</span><span class="text-xl font-bold text-green-600">+4.93</span></div>
|
||
<p class="text-sm text-gray-500">2025-08-15 10:30:45</p>
|
||
<div class="text-sm text-gray-600 mt-2 pt-2 border-t"><p>废纸壳: 5.8斤 x 0.85元/斤</p></div>
|
||
</div>
|
||
<div class="bg-white p-3 rounded-lg shadow-sm">
|
||
<div class="flex justify-between items-center mb-2"><span class="font-bold">好邻居快递驿站</span><span class="text-xl font-bold text-green-600">+12.50</span></div>
|
||
<p class="text-sm text-gray-500">2025-08-14 16:21:10</p>
|
||
<div class="text-sm text-gray-600 mt-2 pt-2 border-t"><p>旧衣物: 25.0斤 x 0.50元/斤</p></div>
|
||
</div>
|
||
</div>
|
||
<!-- 空状态 -->
|
||
<div class="p-4 text-center mt-16">
|
||
<i class="ri-file-text-line text-6xl text-gray-300"></i>
|
||
<p class="mt-4 text-gray-500">您还没有交易记录哦</p>
|
||
<p class="text-sm text-gray-400">快去楼下小站卖一次吧！</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- B端 分组 -->
|
||
<div class="w-full max-w-screen-2xl mb-12 border-t pt-8 mt-8">
|
||
<h1 class="text-3xl font-bold text-center mb-6 text-gray-700">B端 (小站端)</h1>
|
||
<div class="flex flex-wrap justify-center gap-5">
|
||
<!-- B端 - 工作台 -->
|
||
<div class="mobile-frame">
|
||
<div class="screen p-4">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<div><h2 class="text-2xl font-bold">李老板</h2><p class="text-gray-500">社区便民超市站</p></div>
|
||
<i class="ri-logout-box-r-line text-2xl text-gray-500"></i>
|
||
</div>
|
||
<div class="text-center my-8">
|
||
<button class="bg-blue-600 text-white rounded-lg shadow-lg w-full py-6"><i class="ri-scan-2-line text-6xl"></i><span class="block text-2xl font-bold mt-2">开始回收</span></button>
|
||
</div>
|
||
<div class="bg-white p-4 rounded-lg shadow mb-4">
|
||
<h3 class="font-bold text-lg mb-2 flex items-center"><i class="ri-price-tag-3-line mr-2 text-blue-600"></i>今日回收价</h3>
|
||
<div class="space-y-2 text-lg">
|
||
<div class="flex justify-between"><span>废纸壳</span><span class="font-bold text-green-600">0.85 元/斤</span></div>
|
||
<div class="flex justify-between"><span>塑料瓶</span><span class="font-bold text-green-600">0.10 元/个</span></div>
|
||
<div class="flex justify-between"><span>旧衣物</span><span class="font-bold text-green-600">0.50 元/斤</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white p-4 rounded-lg shadow mb-4">
|
||
<h3 class="font-bold text-lg mb-3">今日汇总</h3>
|
||
<div class="grid grid-cols-3 text-center">
|
||
<div><p class="text-2xl font-bold">32</p><p class="text-sm text-gray-500">总单数</p></div>
|
||
<div><p class="text-2xl font-bold">158.7</p><p class="text-sm text-gray-500">总重量 (kg)</p></div>
|
||
<div><p class="text-2xl font-bold text-blue-600">¥245.50</p><p class="text-sm text-gray-500">总金额</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white p-4 rounded-lg shadow">
|
||
<div class="flex justify-between items-center mb-3"><h3 class="font-bold text-lg">库存盘点</h3><span class="text-red-500 font-semibold flex items-center"><i class="ri-error-warning-fill mr-1"></i>库存预警</span></div>
|
||
<div class="space-y-2">
|
||
<div class="flex justify-between items-center"><span>废纸壳</span><div class="w-1/2 bg-gray-200 rounded-full h-2.5"><div class="bg-red-500 h-2.5 rounded-full" style="width: 90%"></div></div><span class="font-bold">90 kg</span></div>
|
||
<div class="flex justify-between items-center"><span>塑料瓶</span><div class="w-1/2 bg-gray-200 rounded-full h-2.5"><div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div></div><span class="font-bold">45 kg</span></div>
|
||
</div>
|
||
<button class="mt-4 w-full bg-blue-100 text-blue-700 font-bold py-3 rounded-lg"><i class="ri-truck-line mr-2"></i>一键通知物流交接</button>
|
||
</div>
|
||
<!-- B端图表 -->
|
||
<div class="bg-white p-4 rounded-lg shadow mt-4">
|
||
<h3 class="font-bold text-lg mb-2 flex items-center"><i class="ri-pie-chart-box-line mr-2 text-blue-600"></i>今日品类分布 (按重量)</h3>
|
||
<canvas id="bCategoryChart" height="180"></canvas>
|
||
</div>
|
||
<div class="bg-white p-4 rounded-lg shadow mt-4">
|
||
<h3 class="font-bold text-lg mb-2 flex items-center"><i class="ri-bar-chart-box-line mr-2 text-blue-600"></i>近7日回收量 (kg)</h3>
|
||
<canvas id="bHistoryChart" height="180"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-nav">
|
||
<div class="nav-item active"><i class="ri-dashboard-fill text-2xl"></i><span>工作台</span></div>
|
||
<div class="nav-item"><i class="ri-bill-fill text-2xl"></i><span>账单</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- B端 - 回收流程 -->
|
||
<div class="mobile-frame">
|
||
<div class="screen p-4 flex flex-col">
|
||
<div class="flex items-center mb-4"><i class="ri-arrow-left-s-line text-2xl mr-2"></i><h1 class="font-bold text-xl flex-grow">回收流程</h1></div>
|
||
<div class="text-center bg-gray-100 p-4 rounded-lg mb-4"><p>已识别用户</p><p class="font-bold text-2xl">王大妈</p></div>
|
||
<div class="mb-4">
|
||
<label class="font-bold text-lg">1. 选择品类</label>
|
||
<div class="grid grid-cols-3 gap-3 mt-2">
|
||
<button class="bg-blue-600 text-white p-4 rounded-lg font-bold">纸壳</button>
|
||
<button class="bg-gray-200 p-4 rounded-lg font-bold">塑料瓶</button>
|
||
<button class="bg-gray-200 p-4 rounded-lg font-bold">旧衣物</button>
|
||
</div>
|
||
</div>
|
||
<div class="mb-4">
|
||
<label class="font-bold text-lg">2. 输入重量 (斤)</label>
|
||
<input type="number" value="5.8" class="text-center text-4xl font-bold w-full mt-2 p-4 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none">
|
||
</div>
|
||
<div class="flex-grow"></div>
|
||
<div class="text-center p-4 bg-white border-t-2">
|
||
<p class="text-gray-600">合计金额</p><p class="text-4xl font-bold text-blue-600 mb-4">¥4.93</p>
|
||
<button class="w-full bg-blue-600 text-white font-bold py-4 rounded-lg text-xl flex items-center justify-center"><i class="ri-volume-up-fill mr-2 text-2xl"></i><span>确认并语音播报</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- B端 - 账单 -->
|
||
<div class="mobile-frame">
|
||
<div class="screen">
|
||
<div class="p-4 bg-white border-b sticky top-0">
|
||
<div class="flex items-center"><i class="ri-arrow-left-s-line text-2xl mr-2"></i><h1 class="font-bold text-xl flex-grow text-center">账单</h1></div>
|
||
</div>
|
||
<div class="p-4">
|
||
<div class="text-center mb-4"><p class="text-gray-500">2025年8月 总收入</p><p class="text-4xl font-bold text-blue-600">¥ 3,450.70</p></div>
|
||
<div class="space-y-3">
|
||
<div class="bg-white p-3 rounded-lg shadow-sm flex justify-between items-center">
|
||
<div><p class="font-bold">8月15日 (今日)</p><p class="text-sm text-gray-500">共 32 笔</p></div>
|
||
<span class="text-xl font-bold">¥245.50</span>
|
||
</div>
|
||
<div class="bg-white p-3 rounded-lg shadow-sm flex justify-between items-center">
|
||
<div><p class="font-bold">8月14日</p><p class="text-sm text-gray-500">共 45 笔</p></div>
|
||
<span class="text-xl font-bold">¥312.80</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- B端 - 物流交接单 -->
|
||
<div class="mobile-frame">
|
||
<div class="screen p-4 flex flex-col items-center">
|
||
<h1 class="font-bold text-2xl mt-4 mb-2">出库交接单</h1>
|
||
<p class="text-gray-500 mb-6">请向物流司机出示此码</p>
|
||
<div class="bg-white p-4 rounded-lg shadow-lg"><img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=STATION_001_OUT_20250815" alt="QR Code"></div>
|
||
<div class="w-full mt-6 p-4 bg-white rounded-lg shadow-sm">
|
||
<h3 class="font-bold text-lg mb-2">待交接物品</h3>
|
||
<div class="space-y-2">
|
||
<div class="flex justify-between"><span>废纸壳</span><span class="font-bold">90 kg</span></div>
|
||
<div class="flex justify-between"><span>塑料瓶</span><span class="font-bold">45 kg</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 物流端 (V1.1功能，MVP版本中移除) -->
|
||
</div>
|
||
|
||
<script>
|
||
// C端图表
|
||
const cUserCtx = document.getElementById('cUserChart').getContext('2d');
|
||
new Chart(cUserCtx, {
|
||
type: 'pie',
|
||
data: {
|
||
labels: ['废纸壳', '旧衣物', '塑料瓶'],
|
||
datasets: [{
|
||
label: '回收分布',
|
||
data: [60, 25, 15],
|
||
backgroundColor: ['#28a745', '#20c997', '#6f42c1'],
|
||
hoverOffset: 4
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: {
|
||
position: 'top',
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
const cHistoryCtx = document.getElementById('cHistoryChart').getContext('2d');
|
||
new Chart(cHistoryCtx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['8/09', '8/10', '8/11', '8/12', '8/13', '8/14', '8/15'],
|
||
datasets: [{
|
||
label: '收入 (元)',
|
||
data: [5.2, 0, 12.5, 8.0, 0, 12.5, 4.93],
|
||
backgroundColor: '#28a745',
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// B端图表
|
||
const bCategoryCtx = document.getElementById('bCategoryChart').getContext('2d');
|
||
new Chart(bCategoryCtx, {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['废纸壳', '塑料瓶', '旧衣物', '其他'],
|
||
datasets: [{
|
||
label: '品类分布',
|
||
data: [90, 45, 20.5, 3.2],
|
||
backgroundColor: ['#0d6efd', '#dc3545', '#ffc107', '#6c757d'],
|
||
hoverOffset: 4
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: {
|
||
position: 'top',
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
const bHistoryCtx = document.getElementById('bHistoryChart').getContext('2d');
|
||
new Chart(bHistoryCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['8/09', '8/10', '8/11', '8/12', '8/13', '8/14', '8/15'],
|
||
datasets: [{
|
||
label: '回收总量 (kg)',
|
||
data: [120, 150, 135, 180, 165, 210, 158.7],
|
||
fill: false,
|
||
borderColor: '#0d6efd',
|
||
tension: 0.1
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true
|
||
}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |