| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>叁强鲜配 - 小程序端原型图</title>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@3/lib/index.css" />
- <style>
- * { margin: 0; padding: 0; box-sizing: border-box; }
- body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; background: #f5f5f5; color: #333; }
- /* 手机容器 */
- .phone-container { max-width: 414px; margin: 20px auto; background: #fff; border-radius: 40px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.15); position: relative; }
- .phone-header { height: 44px; background: #fff; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid #eee; }
- .phone-title { font-size: 16px; font-weight: 500; }
- /* 状态栏模拟 */
- .status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 12px; color: #666; }
- .status-time { font-weight: 500; }
- /* 登录页 */
- .login-page { height: 100vh; background: linear-gradient(135deg, #1989fa 0%, #07c160 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; }
- .login-logo { text-align: center; margin-bottom: 60px; }
- .login-logo h1 { font-size: 36px; color: #fff; font-weight: bold; margin-bottom: 8px; }
- .login-logo p { font-size: 14px; color: rgba(255,255,255,0.8); }
- .login-form { background: #fff; border-radius: 24px; padding: 40px 24px; }
- .login-input { width: 100%; height: 48px; background: #f5f5f5; border-radius: 12px; padding: 0 16px; font-size: 15px; margin-bottom: 16px; border: none; outline: none; }
- .login-btn { width: 100%; height: 48px; background: #1989fa; color: #fff; border: none; border-radius: 24px; font-size: 16px; font-weight: 500; cursor: pointer; }
- .login-btn:active { opacity: 0.8; }
- /* 首页通用 */
- .page-header { padding: 24px 20px; color: #fff; }
- .page-header h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
- .page-header p { font-size: 14px; opacity: 0.9; }
- /* 功能卡片 */
- .menu-grid { display: flex; flex-wrap: wrap; padding: 0 10px; }
- .menu-card { width: 44%; background: #fff; border-radius: 16px; padding: 24px 16px; margin: 1%; display: flex; flex-direction: column; align-items: center; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
- .menu-icon { font-size: 40px; margin-bottom: 12px; }
- .menu-text { font-size: 14px; color: #333; }
- /* 通用列表 */
- .list-container { background: #fff; margin: 12px; border-radius: 12px; overflow: hidden; }
- .list-item { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid #f5f5f5; }
- .list-item:last-child { border-bottom: none; }
- .list-item:active { background: #fafafa; }
- .list-icon { font-size: 24px; margin-right: 16px; }
- .list-content { flex: 1; }
- .list-title { font-size: 15px; color: #333; }
- .list-desc { font-size: 13px; color: #999; margin-top: 4px; }
- .list-arrow { color: #ccc; font-size: 14px; }
- /* 状态标签 */
- .status-tag { padding: 4px 10px; border-radius: 4px; font-size: 12px; }
- .status-tag.primary { background: #e6f7ff; color: #1989fa; }
- .status-tag.success { background: #f6ffed; color: #07c160; }
- .status-tag.warning { background: #fff7e6; color: #ff976a; }
- .status-tag.danger { background: #fff1f0; color: #ee0a24; }
- .status-tag.info { background: #f5f5f5; color: #999; }
- /* 底部Tab */
- .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background: #fff; display: flex; border-top: 1px solid #eee; }
- .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: #999; }
- .tab-item.active { color: #1989fa; }
- .tab-icon { font-size: 20px; margin-bottom: 2px; }
- /* 订单卡片 */
- .order-card { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; }
- .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
- .order-no { font-size: 13px; color: #999; }
- .order-status { font-size: 13px; }
- .order-shop { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
- .order-items { font-size: 13px; color: #666; margin-bottom: 12px; }
- .order-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #f5f5f5; }
- .order-amount { font-size: 18px; font-weight: 600; color: #ee0a24; }
- .order-actions { display: flex; gap: 8px; }
- .action-btn { padding: 6px 16px; border-radius: 16px; font-size: 13px; border: 1px solid #1989fa; color: #1989fa; background: #fff; }
- .action-btn.primary { background: #1989fa; color: #fff; }
- /* 价格卡片 */
- .price-card { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; }
- .price-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
- .price-version { font-size: 14px; color: #999; }
- .price-list { display: flex; flex-direction: column; gap: 12px; }
- .price-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f9f9f9; border-radius: 8px; }
- .price-name { font-size: 14px; }
- .price-value { font-size: 16px; font-weight: 600; color: #07c160; }
- /* 任务卡片 */
- .task-card { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; }
- .task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
- .task-no { font-size: 14px; font-weight: 500; }
- .task-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
- .task-row { display: flex; align-items: center; font-size: 14px; color: #666; }
- .task-row .icon { margin-right: 8px; }
- /* 表单 */
- .form-container { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; }
- .form-item { margin-bottom: 16px; }
- .form-label { font-size: 14px; color: #666; margin-bottom: 8px; display: block; }
- .form-input { width: 100%; height: 44px; background: #f5f5f5; border-radius: 8px; padding: 0 16px; font-size: 14px; border: none; }
- /* 退出按钮 */
- .logout-btn { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); width: 200px; height: 44px; background: #fff; color: #666; border: none; border-radius: 22px; font-size: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
- /* 页面切换 */
- .page { display: none; min-height: 100vh; padding-bottom: 60px; }
- .page.active { display: block; }
- /* 原型导航 */
- .prototype-nav { position: fixed; top: 20px; right: 20px; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 100; max-height: 80vh; overflow-y: auto; }
- .prototype-nav h4 { font-size: 13px; color: #999; margin-bottom: 12px; }
- .prototype-nav a { display: block; padding: 8px 12px; color: #333; text-decoration: none; font-size: 13px; border-radius: 6px; margin-bottom: 4px; }
- .prototype-nav a:hover, .prototype-nav a.active { background: #e6f7ff; color: #1989fa; }
- .prototype-nav .role-label { font-size: 12px; color: #1989fa; font-weight: 500; margin-top: 8px; }
- </style>
- </head>
- <body>
- <!-- 原型导航 -->
- <div class="prototype-nav">
- <h4>切换页面</h4>
- <div class="role-label">【小程序端】</div>
- <a href="#" onclick="showPage('login')" class="active">登录页</a>
- <a href="#" onclick="showPage('supplier-home')">供应商-首页</a>
- <a href="#" onclick="showPage('supplier-inquiry')">供应商-询价单</a>
- <a href="#" onclick="showPage('supplier-quotation')">供应商-我的报价</a>
- <a href="#" onclick="showPage('client-home')">客户-首页</a>
- <a href="#" onclick="showPage('client-price')">客户-商品列表</a>
- <a href="#" onclick="showPage('client-order')">客户-我的订单</a>
- <a href="#" onclick="showPage('deliver-home')">配送员-首页</a>
- <a href="#" onclick="showPage('deliver-task')">配送员-配送任务</a>
- </div>
- <!-- 手机容器 -->
- <div class="phone-container" style="height: auto; min-height: 800px;">
- <!-- 登录页 -->
- <div id="login" class="page active">
- <div class="login-page" style="border-radius: 40px;">
- <div class="login-logo">
- <h1>叁强鲜配</h1>
- <p>新鲜配送每一天</p>
- </div>
- <div class="login-form">
- <input type="text" class="login-input" placeholder="请输入用户名" />
- <input type="password" class="login-input" placeholder="请输入密码" />
- <button class="login-btn" onclick="showPage('supplier-home')">登 录</button>
- </div>
- </div>
- </div>
- <!-- 供应商-首页 -->
- <div id="supplier-home" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%);">
- <h2>供应商中心</h2>
- <p>欢迎,张伟(城东区域)</p>
- </div>
- <div class="menu-grid">
- <div class="menu-card" onclick="showPage('supplier-inquiry')">
- <span class="menu-icon">📋</span>
- <span class="menu-text">询价单</span>
- </div>
- <div class="menu-card" onclick="showPage('supplier-quotation')">
- <span class="menu-icon">💰</span>
- <span class="menu-text">我的报价</span>
- </div>
- <div class="menu-card">
- <span class="menu-icon">🚚</span>
- <span class="menu-text">取货任务</span>
- </div>
- <div class="menu-card">
- <span class="menu-icon">📦</span>
- <span class="menu-text">基本信息</span>
- </div>
- </div>
- <div class="list-container">
- <div class="list-item">
- <span class="list-icon">🔔</span>
- <div class="list-content">
- <div class="list-title">待报价询价单</div>
- <div class="list-desc">您有 2 个询价单待报价</div>
- </div>
- <span class="list-arrow">›</span>
- </div>
- <div class="list-item">
- <span class="list-icon">📄</span>
- <div class="list-content">
- <div class="list-title">待取货任务</div>
- <div class="list-desc">您有 3 个待取货任务</div>
- </div>
- <span class="list-arrow">›</span>
- </div>
- </div>
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- <!-- 供应商-询价单 -->
- <div id="supplier-inquiry" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%);">
- <h2>询价单列表</h2>
- </div>
- <div class="list-container">
- <div class="list-item">
- <div class="list-content">
- <div class="list-title">2026年3月第3周询价单</div>
- <div class="list-desc">城东区域 | 发布于 2026-03-17</div>
- </div>
- <span class="status-tag warning">待报价</span>
- </div>
- <div class="list-item">
- <div class="list-content">
- <div class="list-title">2026年3月第2周询价单</div>
- <div class="list-desc">城东区域 | 发布于 2026-03-10</div>
- </div>
- <span class="status-tag success">已报价</span>
- </div>
- <div class="list-item">
- <div class="list-content">
- <div class="list-title">2026年3月第1周询价单</div>
- <div class="list-desc">城东区域 | 发布于 2026-03-03</div>
- </div>
- <span class="status-tag success">已报价</span>
- </div>
- </div>
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- <!-- 供应商-我的报价 -->
- <div id="supplier-quotation" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%);">
- <h2>我的报价</h2>
- </div>
- <div class="list-container">
- <div class="list-item">
- <div class="list-content">
- <div class="list-title">2026年3月第2周询价单</div>
- <div class="list-desc">提交时间:2026-03-12 14:30</div>
- </div>
- <span class="status-tag success">已通过</span>
- </div>
- <div class="list-item">
- <div class="list-content">
- <div class="list-title">2026年3月第1周询价单</div>
- <div class="list-desc">提交时间:2022026-03-05 10:20</div>
- </div>
- <span class="status-tag success">已通过</span>
- </div>
- </div>
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- <!-- 客户-首页 -->
- <div id="client-home" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
- <h2>客户中心</h2>
- <p>欢迎,李娜(城东区域)</p>
- </div>
- <div class="price-card" style="margin-top: -30px;">
- <div class="price-header">
- <span style="font-size:16px;font-weight:600;">今日价格清单</span>
- <span class="status-tag success">最新</span>
- </div>
- <p style="font-size:13px;color:#999;margin-bottom:16px;">版本号:V3 | 生效时间:2026-03-19</p>
- <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f6ffed;border-radius:8px;">
- <span style="font-size:14px;">查看商品详情</span>
- <span style="color:#07c160;">›</span>
- </div>
- </div>
- <div class="menu-grid">
- <div class="menu-card" onclick="showPage('client-price')">
- <span class="menu-icon">📦</span>
- <span class="menu-text">商品列表</span>
- </div>
- <div class="menu-card">
- <span class="menu-icon">🛒</span>
- <span class="menu-text">购物车</span>
- </div>
- <div class="menu-card" onclick="showPage('client-order')">
- <span class="menu-icon">📄</span>
- <span class="menu-text">我的订单</span>
- </div>
- <div class="menu-card">
- <span class="menu-icon">👤</span>
- <span class="menu-text">个人信息</span>
- </div>
- </div>
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- <!-- 客户-商品列表 -->
- <div id="client-price" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
- <h2>商品列表</h2>
- <p>当前价格版本:V3</p>
- </div>
- <div class="price-card">
- <div class="price-list">
- <div class="price-item">
- <span class="price-name">新鲜猪肉</span>
- <span class="price-value">¥25.00/斤</span>
- </div>
- <div class="price-item">
- <span class="price-name">新鲜蔬菜</span>
- <span class="price-value">¥8.00/斤</span>
- </div>
- <div class="price-item">
- <span class="price-name">新鲜水果</span>
- <span class="price-value">¥12.00/斤</span>
- </div>
- <div class="price-item">
- <span class="price-name">鸡蛋</span>
- <span class="price-value">¥6.00/个</span>
- </div>
- <div class="price-item">
- <span class="price-name">大米</span>
- <span class="price-value">¥3.00/斤</span>
- </div>
- </div>
- </div>
- <div style="padding:20px;text-align:center;">
- <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;">加入购物车</button>
- </div>
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- <!-- 客户-我的订单 -->
- <div id="client-order" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
- <h2>我的订单</h2>
- </div>
- <div class="order-card">
- <div class="order-header">
- <span class="order-no">ORD202603190001</span>
- <span class="status-tag warning">待支付</span>
- </div>
- <div class="order-shop">XX餐厅</div>
- <div class="order-items">新鲜猪肉 x10斤、新鲜蔬菜 x20斤...</div>
- <div class="order-footer">
- <span class="order-amount">¥710.00</span>
- <div class="order-actions">
- <button class="action-btn">取消</button>
- <button class="action-btn primary">去支付</button>
- </div>
- </div>
- </div>
- <div class="order-card">
- <div class="order-header">
- <span class="order-no">ORD202603180056</span>
- <span class="status-tag primary">待确认收货</span>
- </div>
- <div class="order-shop">XX餐厅</div>
- <div class="order-items">新鲜猪肉 x10斤、新鲜蔬菜 x20斤...</div>
- <div class="order-footer">
- <span class="order-amount">¥710.00</span>
- <div class="order-actions">
- <button class="action-btn primary">确认收货</button>
- </div>
- </div>
- </div>
- <div class="order-card">
- <div class="order-header">
- <span class="order-no">ORD202603150023</span>
- <span class="status-tag success">已完成</span>
- </div>
- <div class="order-shop">XX餐厅</div>
- <div class="order-items">新鲜猪肉 x10斤、新鲜蔬菜 x20斤...</div>
- <div class="order-footer">
- <span class="order-amount">¥560.00</span>
- <div class="order-actions">
- <button class="action-btn">再次购买</button>
- </div>
- </div>
- </div>
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- <!-- 配送员-首页 -->
- <div id="deliver-home" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%);">
- <h2>配送员中心</h2>
- <p>欢迎,王强(城东区域)</p>
- </div>
- <div class="task-card" style="margin-top: -30px;">
- <div style="display:flex;justify-content:space-around;text-align:center;">
- <div>
- <div style="font-size:28px;font-weight:600;color:#1989fa;">3</div>
- <div style="font-size:13px;color:#999;margin-top:4px;">待取货</div>
- </div>
- <div>
- <div style="font-size:28px;font-weight:600;color:#ff976a;">5</div>
- <div style="font-size:13px;color:#999;margin-top:4px;">配送中</div>
- </div>
- <div>
- <div style="font-size:28px;font-weight:600;color:#07c160;">28</div>
- <div style="font-size:13px;color:#999;margin-top:4px;">已完成</div>
- </div>
- </div>
- </div>
- <div class="menu-grid">
- <div class="menu-card" onclick="showPage('deliver-task')">
- <span class="menu-icon">📋</span>
- <span class="menu-text">待取货</span>
- </div>
- <div class="menu-card">
- <span class="menu-icon">🚚</span>
- <span class="menu-text">配送中</span>
- </div>
- <div class="menu-card">
- <span class="menu-icon">📄</span>
- <span class="menu-text">历史任务</span>
- </div>
- <div class="menu-card">
- <span class="menu-icon">👤</span>
- <span class="menu-text">个人信息</span>
- </div>
- </div>
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- <!-- 配送员-配送任务 -->
- <div id="deliver-task" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%);">
- <h2>待取货任务</h2>
- </div>
- <div class="task-card">
- <div class="task-header">
- <span class="task-no">DLV20260319001</span>
- <span class="status-tag warning">待取货</span>
- </div>
- <div class="task-info">
- <div class="task-row">
- <span class="icon">🏪</span>
- <span>供应商:XX供应商</span>
- </div>
- <div class="task-row">
- <span class="icon">📍</span>
- <span>取货地址:城东区XX路XX号</span>
- </div>
- <div class="task-row">
- <span class="icon">🏠</span>
- <span>送货地址:城东区YY路YY号</span>
- </div>
- <div class="task-row">
- <span class="icon">👤</span>
- <span>客户:XX餐厅 | 13800138001</span>
- </div>
- </div>
- <div style="display:flex;gap:12px;">
- <button class="action-btn" style="flex:1;">查看详情</button>
- <button class="action-btn primary" style="flex:1;">确认取货</button>
- </div>
- </div>
- <div class="task-card">
- <div class="task-header">
- <span class="task-no">DLV20260319002</span>
- <span class="status-tag warning">待取货</span>
- </div>
- <div class="task-info">
- <div class="task-row">
- <span class="icon">🏪</span>
- <span>供应商:YY供应商</span>
- </div>
- <div class="task-row">
- <span class="icon">📍</span>
- <span>取货地址:城西区XX路XX号</span>
- </div>
- <div class="task-row">
- <span class="icon">🏠</span>
- <span>送货地址:城西区YY路YY号</span>
- </div>
- </div>
- <div style="display:flex;gap:12px;">
- <button class="action-btn" style="flex:1;">查看详情</button>
- <button class="action-btn primary" style="flex:1;">确认取货</button>
- </div>
- </div>
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- </div>
- <script>
- function showPage(pageId) {
- document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
- document.getElementById(pageId).classList.add('active');
-
- document.querySelectorAll('.prototype-nav a').forEach(a => a.classList.remove('active'));
- event.target.classList.add('active');
- }
- </script>
- </body>
- </html>
|