| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923 |
- <!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; min-height: 850px; }
-
- /* 状态栏模拟 */
- .status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 12px; color: #666; border-bottom: 1px solid #eee; }
-
- /* 登录页 */
- .login-page { height: 100vh; min-height: 850px; 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); cursor: pointer; }
- .menu-card:active { background: #fafafa; }
- .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; cursor: pointer; }
- .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; }
-
- /* 退出按钮 */
- .logout-btn { 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); cursor: pointer; }
-
- /* 页面切换 */
- .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; width: 180px; }
- .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: 12px; 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; margin-bottom: 4px; }
-
- /* 统计卡片 */
- .stats-row { display: flex; justify-content: space-around; padding: 20px; background: #fff; margin: 12px; border-radius: 12px; }
- .stats-item { text-align: center; }
- .stats-num { font-size: 28px; font-weight: 600; }
- .stats-label { font-size: 12px; color: #999; margin-top: 4px; }
-
- /* 订单卡片 */
- .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-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; }
- .action-btn { padding: 6px 16px; border-radius: 16px; font-size: 13px; border: 1px solid #1989fa; color: #1989fa; background: #fff; cursor: pointer; }
- .action-btn.primary { background: #1989fa; color: #fff; }
-
- /* 任务卡片 */
- .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; }
-
- /* 价格卡片 */
- .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; }
-
- /* 表单 */
- .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; }
-
- /* 详情卡片 */
- .detail-card { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; }
- .detail-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
- .detail-row:last-child { border-bottom: none; }
- .detail-label { color: #999; font-size: 14px; }
- .detail-value { color: #333; font-size: 14px; font-weight: 500; }
-
- /* 商品项 */
- .product-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
- .product-item:last-child { border-bottom: none; }
- .product-name { font-size: 14px; }
- .product-action { display: flex; align-items: center; gap: 8px; }
- .product-input { width: 80px; height: 32px; border: 1px solid #ddd; border-radius: 4px; padding: 0 8px; text-align: right; }
-
- /* 购物车 */
- .cart-item { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; display: flex; gap: 12px; }
- .cart-checkbox { width: 20px; height: 20px; border: 2px solid #1989fa; border-radius: 50%; margin-top: 20px; }
- .cart-img { width: 80px; height: 80px; background: #f5f5f5; border-radius: 8px; }
- .cart-info { flex: 1; }
- .cart-name { font-size: 15px; margin-bottom: 8px; }
- .cart-price { color: #ee0a24; font-size: 16px; font-weight: 600; }
- .cart-quantity { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
- .quantity-btn { width: 28px; height: 28px; border: 1px solid #ddd; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
- .quantity-num { font-size: 16px; min-width: 30px; text-align: center; }
-
- .cart-footer { background: #fff; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
- .cart-total { font-size: 18px; }
- .cart-total span { color: #ee0a24; font-weight: 600; }
- .cart-settle { background: #1989fa; color: #fff; padding: 12px 32px; border-radius: 24px; border: none; font-size: 15px; }
-
- /* 个人资料 */
- .profile-card { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; display: flex; align-items: center; }
- .profile-avatar { width: 60px; height: 60px; border-radius: 50%; background: #1989fa; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 16px; }
- .profile-info h3 { font-size: 18px; margin-bottom: 4px; }
- .profile-info p { font-size: 14px; color: #999; }
-
- /* 上传 */
- .upload-box { border: 2px dashed #ddd; border-radius: 8px; padding: 30px; text-align: center; color: #999; cursor: pointer; }
- .upload-box:active { border-color: #1989fa; color: #1989fa; }
-
- /* 角色选择 */
- .role-select { display: flex; gap: 12px; margin-bottom: 24px; }
- .role-option { flex: 1; padding: 16px; border: 2px solid #eee; border-radius: 12px; text-align: center; cursor: pointer; }
- .role-option.selected { border-color: #1989fa; background: #e6f7ff; }
- .role-option .icon { font-size: 32px; margin-bottom: 8px; }
- .role-option .text { font-size: 14px; color: #333; }
- </style>
- </head>
- <body>
- <!-- 原型导航 -->
- <div class="prototype-nav">
- <h4>切换页面</h4>
- <a href="#" onclick="showPage('login')" class="active">登录页</a>
-
- <div class="role-label">【供应商端】</div>
- <a href="#" onclick="showPage('supplier-home')">供应商-首页</a>
- <a href="#" onclick="showPage('supplier-inquiry')">供应商-询价单列表</a>
- <a href="#" onclick="showPage('supplier-inquiry-detail')">供应商-询价详情</a>
- <a href="#" onclick="showPage('supplier-quotation')">供应商-我的报价</a>
-
- <div class="role-label">【客户端】</div>
- <a href="#" onclick="showPage('client-home')">客户-首页</a>
- <a href="#" onclick="showPage('client-price')">客户-商品列表</a>
- <a href="#" onclick="showPage('client-cart')">客户-购物车</a>
- <a href="#" onclick="showPage('client-order')">客户-我的订单</a>
- <a href="#" onclick="showPage('client-order-detail')">客户-订单详情</a>
- <a href="#" onclick="showPage('client-profile')">客户-个人信息</a>
-
- <div class="role-label">【配送员端】</div>
- <a href="#" onclick="showPage('deliver-home')">配送员-首页</a>
- <a href="#" onclick="showPage('deliver-task')">配送员-待取货</a>
- <a href="#" onclick="showPage('deliver-delivering')">配送员-配送中</a>
- <a href="#" onclick="showPage('deliver-task-detail')">配送员-任务详情</a>
- </div>
- <div class="phone-container">
-
- <!-- 登录页 -->
- <div id="login" class="page active">
- <div class="login-page" style="border-radius: 40px;">
- <div class="login-logo">
- <h1>叁强鲜配</h1>
- <p>新鲜配送每一天</p>
- </div>
-
- <!-- 角色选择演示 -->
- <div style="text-align:center;margin-bottom:20px;">
- <p style="color:rgba(255,255,255,0.8);font-size:14px;margin-bottom:12px;">选择登录角色演示:</p>
- <div class="role-select">
- <div class="role-option selected" onclick="selectRole('supplier', this)">
- <div class="icon">🏪</div>
- <div class="text">供应商</div>
- </div>
- <div class="role-option" onclick="selectRole('client', this)">
- <div class="icon">👤</div>
- <div class="text">客户</div>
- </div>
- <div class="role-option" onclick="selectRole('deliver', this)">
- <div class="icon">🚚</div>
- <div class="text">配送员</div>
- </div>
- </div>
- </div>
-
- <div class="login-form">
- <input type="text" class="login-input" placeholder="请输入用户名" />
- <input type="password" class="login-input" placeholder="请输入密码" />
- <button class="login-btn" onclick="login()">登 录</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="stats-row" style="margin-top:-30px;">
- <div class="stats-item">
- <div class="stats-num" style="color:#ff976a;">2</div>
- <div class="stats-label">待报价</div>
- </div>
- <div class="stats-item">
- <div class="stats-num" style="color:#07c160;">5</div>
- <div class="stats-label">已报价</div>
- </div>
- <div class="stats-item">
- <div class="stats-num" style="color:#1989fa;">3</div>
- <div class="stats-label">待取货</div>
- </div>
- </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" onclick="showPage('supplier-inquiry')">
- <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>
- <div style="text-align:center;padding:20px;">
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- </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" onclick="showPage('supplier-inquiry-detail')">
- <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>
- <div style="text-align:center;padding:20px;">
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- </div>
- <!-- 供应商-询价详情 -->
- <div id="supplier-inquiry-detail" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%);">
- <h2>询价单详情</h2>
- </div>
- <div class="detail-card">
- <div class="detail-row">
- <span class="detail-label">询价单</span>
- <span class="detail-value">2026年3月第3周询价单</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">区域</span>
- <span class="detail-value">城东区域</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">发布时间</span>
- <span class="detail-value">2026-03-17 10:00</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">截止时间</span>
- <span class="detail-value">2026-03-19 18:00</span>
- </div>
- </div>
-
- <div class="detail-card">
- <div style="font-size:15px;font-weight:600;margin-bottom:12px;">询价商品清单</div>
- <div class="product-item">
- <span class="product-name">新鲜猪肉</span>
- <div class="product-action">
- <input type="text" class="product-input" placeholder="报价" />
- <span>元/斤</span>
- </div>
- </div>
- <div class="product-item">
- <span class="product-name">新鲜蔬菜</span>
- <div class="product-action">
- <input type="text" class="product-input" placeholder="报价" />
- <span>元/斤</span>
- </div>
- </div>
- <div class="product-item">
- <span class="product-name">新鲜水果</span>
- <div class="product-action">
- <input type="text" class="product-input" placeholder="报价" />
- <span>元/斤</span>
- </div>
- </div>
- </div>
-
- <div style="padding: 20px;">
- <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;">提交报价</button>
- </div>
- <div style="text-align:center;padding-bottom:20px;">
- <button class="logout-btn" onclick="showPage('supplier-inquiry')">返回</button>
- </div>
- </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">提交时间:2026-03-05 10:20</div>
- </div>
- <span class="status-tag success">已通过</span>
- </div>
- </div>
- <div style="text-align:center;padding:20px;">
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- </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;cursor:pointer;" onclick="showPage('client-price')">
- <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" onclick="showPage('client-cart')">
- <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" onclick="showPage('client-profile')">
- <span class="menu-icon">👤</span>
- <span class="menu-text">个人信息</span>
- </div>
- </div>
- <div style="text-align:center;padding:20px;">
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- </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;">
- <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;" onclick="showPage('client-cart')">加入购物车</button>
- </div>
- <div style="text-align:center;padding-bottom:20px;">
- <button class="logout-btn" onclick="showPage('client-home')">返回</button>
- </div>
- </div>
- <!-- 客户-购物车 -->
- <div id="client-cart" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
- <h2>购物车</h2>
- </div>
-
- <div class="cart-item">
- <div class="cart-checkbox"></div>
- <div class="cart-img"></div>
- <div class="cart-info">
- <div class="cart-name">新鲜猪肉</div>
- <div class="cart-price">¥25.00/斤</div>
- <div class="cart-quantity">
- <div class="quantity-btn">-</div>
- <div class="quantity-num">10</div>
- <div class="quantity-btn">+</div>
- </div>
- </div>
- </div>
-
- <div class="cart-item">
- <div class="cart-checkbox"></div>
- <div class="cart-img"></div>
- <div class="cart-info">
- <div class="cart-name">新鲜蔬菜</div>
- <div class="cart-price">¥8.00/斤</div>
- <div class="cart-quantity">
- <div class="quantity-btn">-</div>
- <div class="quantity-num">20</div>
- <div class="quantity-btn">+</div>
- </div>
- </div>
- </div>
-
- <div class="cart-footer">
- <div class="cart-total">合计:<span>¥410.00</span></div>
- <button class="cart-settle">去结算</button>
- </div>
- <div style="text-align:center;padding:20px;">
- <button class="logout-btn" onclick="showPage('client-home')">返回</button>
- </div>
- </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" onclick="showPage('client-order-detail')">确认收货</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>
- <div style="text-align:center;padding:20px;">
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- </div>
- <!-- 客户-订单详情 -->
- <div id="client-order-detail" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
- <h2>订单详情</h2>
- </div>
-
- <div class="detail-card">
- <div class="detail-row">
- <span class="detail-label">订单编号</span>
- <span class="detail-value">ORD202603180056</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">订单状态</span>
- <span class="detail-value"><span class="status-tag primary">待确认收货</span></span>
- </div>
- <div class="detail-row">
- <span class="detail-label">下单时间</span>
- <span class="detail-value">2026-03-18 16:45:30</span>
- </div>
- </div>
-
- <div class="detail-card">
- <div class="detail-row">
- <span class="detail-label">联系人</span>
- <span class="detail-value">张三</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">联系电话</span>
- <span class="detail-value">13800138001</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">配送地址</span>
- <span class="detail-value">城东区XX路XX号</span>
- </div>
- </div>
-
- <div class="detail-card">
- <div style="font-size:15px;font-weight:600;margin-bottom:12px;">商品明细</div>
- <div class="detail-row">
- <span class="detail-label">新鲜猪肉 x 10斤</span>
- <span class="detail-value">¥250.00</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">新鲜蔬菜 x 20斤</span>
- <span class="detail-value">¥160.00</span>
- </div>
- <div class="detail-row" style="border-top:1px solid #eee;padding-top:12px;margin-top:12px;">
- <span class="detail-label" style="font-weight:600;">订单金额</span>
- <span class="detail-value" style="color:#ee0a24;font-weight:600;">¥410.00</span>
- </div>
- </div>
-
- <div style="padding: 20px;display:flex;gap:12px;">
- <button class="action-btn" style="flex:1;">申请退款</button>
- <button class="action-btn primary" style="flex:1;">确认收货</button>
- </div>
- <div style="text-align:center;padding-bottom:20px;">
- <button class="logout-btn" onclick="showPage('client-order')">返回</button>
- </div>
- </div>
- <!-- 客户-个人信息 -->
- <div id="client-profile" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
- <h2>个人信息</h2>
- </div>
-
- <div class="profile-card">
- <div class="profile-avatar">李</div>
- <div class="profile-info">
- <h3>李娜</h3>
- <p>客户 | 城东区域</p>
- </div>
- </div>
-
- <div class="list-container">
- <div class="list-item">
- <div class="list-content">
- <div class="list-title">手机号</div>
- <div class="list-desc">13800138002</div>
- </div>
- </div>
- <div class="list-item">
- <div class="list-content">
- <div class="list-title">店铺名称</div>
- <div class="list-desc">XX餐厅</div>
- </div>
- </div>
- <div class="list-item">
- <div class="list-content">
- <div class="list-title">配送地址</div>
- <div class="list-desc">城东区XX路XX号</div>
- </div>
- </div>
- <div class="list-item">
- <div class="list-content">
- <div class="list-title">修改密码</div>
- </div>
- <span class="list-arrow">›</span>
- </div>
- </div>
-
- <div style="text-align:center;padding:20px;">
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- </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" onclick="showPage('deliver-delivering')">
- <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 style="text-align:center;padding:20px;">
- <button class="logout-btn" onclick="showPage('login')">退出登录</button>
- </div>
- </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>
- <div style="display:flex;gap:12px;">
- <button class="action-btn" style="flex:1;" onclick="showPage('deliver-task-detail')">查看详情</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>
- <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 style="text-align:center;padding:20px;">
- <button class="logout-btn" onclick="showPage('deliver-home')">返回</button>
- </div>
- </div>
- <!-- 配送员-配送中 -->
- <div id="deliver-delivering" 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">DLV20260318056</span>
- <span class="status-tag primary">配送中</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>送货地址:城东区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 style="text-align:center;padding:20px;">
- <button class="logout-btn" onclick="showPage('deliver-home')">返回</button>
- </div>
- </div>
- <!-- 配送员-任务详情 -->
- <div id="deliver-task-detail" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%);">
- <h2>任务详情</h2>
- </div>
-
- <div class="detail-card">
- <div class="detail-row">
- <span class="detail-label">配送单号</span>
- <span class="detail-value">DLV20260319001</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">任务状态</span>
- <span class="detail-value"><span class="status-tag warning">待取货</span></span>
- </div>
- <div class="detail-row">
- <span class="detail-label">订单编号</span>
- <span class="detail-value">ORD202603190001</span>
- </div>
- </div>
-
- <div class="detail-card">
- <div style="font-size:15px;font-weight:600;margin-bottom:12px;">取货信息</div>
- <div class="detail-row">
- <span class="detail-label">供应商</span>
- <span class="detail-value">XX供应商</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">取货地址</span>
- <span class="detail-value">城东区XX路XX号</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">联系人</span>
- <span class="detail-value">张老板 | 13900001111</span>
- </div>
- </div>
-
- <div class="detail-card">
- <div style="font-size:15px;font-weight:600;margin-bottom:12px;">送货信息</div>
- <div class="detail-row">
- <span class="detail-label">客户</span>
- <span class="detail-value">XX餐厅</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">送货地址</span>
- <span class="detail-value">城东区YY路YY号</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">联系人</span>
- <span class="detail-value">李女士 | 13800138002</span>
- </div>
- </div>
-
- <div class="detail-card">
- <div style="font-size:15px;font-weight:600;margin-bottom:12px;">商品明细</div>
- <div class="detail-row">
- <span class="detail-label">新鲜猪肉</span>
- <span class="detail-value">10斤</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">新鲜蔬菜</span>
- <span class="detail-value">20斤</span>
- </div>
- </div>
-
- <div class="form-container">
- <div class="form-item">
- <label class="form-label">取货备注</label>
- <input type="text" class="form-input" placeholder="请输入备注(选填)" />
- </div>
- <div class="form-item">
- <label class="form-label">取货凭证</label>
- <div class="upload-box">点击上传图片</div>
- </div>
- </div>
-
- <div style="padding: 20px;">
- <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;">确认取货</button>
- </div>
- <div style="text-align:center;padding-bottom:20px;">
- <button class="logout-btn" onclick="showPage('deliver-task')">返回</button>
- </div>
- </div>
- </div>
- <script>
- let currentRole = 'supplier';
-
- function selectRole(role, element) {
- currentRole = role;
- document.querySelectorAll('.role-option').forEach(el => el.classList.remove('selected'));
- element.classList.add('selected');
- }
-
- function login() {
- showPage(currentRole + '-home');
- }
-
- 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>
|