| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842 |
- <!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); }
- .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; }
-
- .page-header { padding: 24px 20px; color: #fff; }
- .page-header h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
- .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; }
-
- .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-content { flex: 1; }
- .list-title { font-size: 15px; color: #333; }
- .list-desc { font-size: 13px; color: #999; margin-top: 4px; }
-
- .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: flex-start; font-size: 14px; color: #666; }
- .task-row .icon { margin-right: 8px; min-width: 20px; }
- .action-btn { padding: 8px 20px; border-radius: 20px; font-size: 14px; border: 1px solid #1989fa; color: #1989fa; background: #fff; }
- .action-btn.primary { background: #1989fa; color: #fff; }
-
- .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; }
-
- .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; }
-
- .upload-box { border: 2px dashed #ddd; border-radius: 8px; padding: 30px; text-align: center; color: #999; }
- .upload-box:active { border-color: #1989fa; color: #1989fa; }
-
- .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); }
-
- .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; }
-
- .inquiry-detail { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; }
- .inquiry-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
- .inquiry-title { font-size: 16px; font-weight: 600; }
- .product-list { margin-top: 16px; }
- .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 { position: fixed; bottom: 50px; left: 0; right: 0; 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; }
-
- /* 地址管理样式 */
- .address-card { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; }
- .address-main { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
- .address-info { flex: 1; }
- .address-name { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
- .address-name span { font-size: 12px; color: #999; margin-left: 8px; }
- .address-detail { font-size: 14px; color: #666; }
- .address-actions { display: flex; gap: 16px; }
- .address-action { font-size: 13px; color: #666; }
- .address-action.danger { color: #ee0a24; }
-
- /* 取货详情样式 */
- .pickup-card { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; }
- .pickup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
- .pickup-title { font-size: 16px; font-weight: 600; }
- .pickup-list { margin-top: 12px; }
- .pickup-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
- .pickup-item:last-child { border-bottom: none; }
- .pickup-product { font-size: 14px; }
- .pickup-qty { font-size: 14px; color: #666; }
-
- /* 数据统计样式 */
- .stat-card { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; }
- .stat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
- .stat-title { font-size: 15px; font-weight: 600; }
- .stat-tabs { display: flex; gap: 8px; }
- .stat-tab { padding: 4px 12px; font-size: 12px; border-radius: 4px; color: #666; }
- .stat-tab.active { background: #1989fa; color: #fff; }
- .stat-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
- .chart-item { background: #f8f9fa; border-radius: 8px; padding: 16px; text-align: center; }
- .chart-value { font-size: 24px; font-weight: 600; color: #1989fa; }
- .chart-label { font-size: 12px; color: #999; margin-top: 4px; }
- .stat-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
- .stat-table th { background: #f5f7fa; padding: 10px 8px; font-size: 12px; color: #666; text-align: left; }
- .stat-table td { padding: 10px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #f5f5f5; }
-
- /* 历史任务样式 */
- .history-card { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; }
- .history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
- .history-date { font-size: 14px; color: #999; }
- .history-list { display: flex; flex-direction: column; gap: 8px; }
- .history-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f8f9fa; border-radius: 8px; }
- .history-info { flex: 1; }
- .history-title { font-size: 14px; margin-bottom: 4px; }
- .history-desc { font-size: 12px; color: #999; }
- .history-status { font-size: 12px; }
-
- /* 空状态样式 */
- .empty-state { text-align: center; padding: 60px 20px; }
- .empty-icon { font-size: 48px; color: #ddd; margin-bottom: 16px; }
- .empty-text { font-size: 14px; color: #999; }
- </style>
- </head>
- <body>
- <!-- 原型导航 -->
- <div class="prototype-nav">
- <h4>切换页面</h4>
- <div class="role-label">【高优先级】</div>
- <a href="#" onclick="showPage('client-cart')">客户-购物车</a>
- <a href="#" onclick="showPage('client-address')">客户-地址管理</a>
- <a href="#" onclick="showPage('supplier-pickup-detail')">供应商-取货详情</a>
- <div class="role-label">【中优先级】</div>
- <a href="#" onclick="showPage('admin-statistics')">运营-数据统计</a>
- <a href="#" onclick="showPage('deliver-history')">配送员-历史任务</a>
- <div class="role-label">【其他页面】</div>
- <a href="#" onclick="showPage('supplier-inquiry-detail')">供应商-询价详情</a>
- <a href="#" onclick="showPage('supplier-quote-form')">供应商-报价提交</a>
- <a href="#" onclick="showPage('client-order-detail')">客户-订单详情</a>
- <a href="#" onclick="showPage('client-profile')">客户-个人信息</a>
- <a href="#" onclick="showPage('deliver-task-detail')">配送员-任务详情</a>
- </div>
- <div class="phone-container">
- <!-- 客户-购物车 -->
- <div id="client-cart" class="page active">
- <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>
- <!-- 供应商-询价详情 -->
- <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="inquiry-detail">
- <div class="inquiry-header">
- <span class="inquiry-title">2026年3月第3周询价单</span>
- <span class="status-tag warning">待报价</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="inquiry-detail">
- <div class="inquiry-title">询价商品清单</div>
- <div class="product-list">
- <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 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>
-
- <div style="padding: 20px;">
- <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;">提交报价</button>
- </div>
- </div>
- <!-- 供应商-报价提交 -->
- <div id="supplier-quote-form" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%);">
- <h2>提交报价</h2>
- </div>
- <div class="inquiry-detail">
- <div class="inquiry-title">2026年3月第3周询价单</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">8种商品</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>
- <input type="text" class="form-input" placeholder="请输入报价说明(选填)" />
- </div>
- </div>
-
- <div style="padding: 20px;">
- <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;">确认提交</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">ORD202603190001</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">2026-03-19 10:23:45</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 class="detail-title" 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>
- <!-- 客户-个人信息 -->
- <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>
-
- <div style="padding: 20px;">
- <button class="action-btn" style="width:100%;height:44px;border-radius:22px;">修改信息</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 class="detail-title" 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 class="detail-title" 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 class="detail-title" 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>
- <!-- 客户-地址管理 -->
- <div id="client-address" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
- <h2>地址管理</h2>
- </div>
-
- <div class="address-card">
- <div class="address-main">
- <div class="address-info">
- <div class="address-name">李女士 <span class="status-tag success" style="padding:2px 6px;">默认</span></div>
- <div class="address-detail">13800138002</div>
- <div class="address-detail" style="margin-top:4px;">城东区XX路XX号XX栋XX室</div>
- </div>
- </div>
- <div class="address-actions">
- <span class="address-action">编辑</span>
- <span class="address-action danger">删除</span>
- </div>
- </div>
-
- <div class="address-card">
- <div class="address-main">
- <div class="address-info">
- <div class="address-name">李娜</div>
- <div class="address-detail">13900000001</div>
- <div class="address-detail" style="margin-top:4px;">城东区YY路YY号YY栋YY室</div>
- </div>
- </div>
- <div class="address-actions">
- <span class="address-action">编辑</span>
- <span class="address-action">设为默认</span>
- <span class="address-action danger">删除</span>
- </div>
- </div>
-
- <div class="address-card">
- <div class="address-main">
- <div class="address-info">
- <div class="address-name">公司地址</div>
- <div class="address-detail">13800138002</div>
- <div class="address-detail" style="margin-top:4px;">城东区ZZ路ZZ号</div>
- </div>
- </div>
- <div class="address-actions">
- <span class="address-action">编辑</span>
- <span class="address-action">设为默认</span>
- <span class="address-action danger">删除</span>
- </div>
- </div>
-
- <div style="padding: 20px;">
- <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;">添加新地址</button>
- </div>
- </div>
- <!-- 供应商-取货详情 -->
- <div id="supplier-pickup-detail" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%);">
- <h2>取货详情</h2>
- </div>
-
- <div class="pickup-card">
- <div class="pickup-header">
- <span class="pickup-title">待取货订单</span>
- <span class="status-tag warning">3单待取</span>
- </div>
- </div>
-
- <div class="pickup-card">
- <div class="pickup-header">
- <span class="pickup-title">订单号:ORD20260319001</span>
- <span class="status-tag primary">待分配</span>
- </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">李女士 13800138002</span>
- </div>
- <div class="pickup-list">
- <div class="pickup-item">
- <span class="pickup-product">新鲜猪肉</span>
- <span class="pickup-qty">x 10斤</span>
- </div>
- <div class="pickup-item">
- <span class="pickup-product">新鲜蔬菜</span>
- <span class="pickup-qty">x 20斤</span>
- </div>
- </div>
- <div style="margin-top:12px;display:flex;gap:8px;">
- <button class="action-btn" style="flex:1;padding:8px;">标记已取</button>
- <button class="action-btn primary" style="flex:1;padding:8px;">查看详情</button>
- </div>
- </div>
-
- <div class="pickup-card">
- <div class="pickup-header">
- <span class="pickup-title">订单号:ORD20260319002</span>
- <span class="status-tag info">配送中</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">客户</span>
- <span class="detail-value">YY餐厅</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">王先生 13900000001</span>
- </div>
- <div class="pickup-list">
- <div class="pickup-item">
- <span class="pickup-product">新鲜水果</span>
- <span class="pickup-qty">x 15斤</span>
- </div>
- </div>
- <div style="margin-top:12px;display:flex;gap:8px;">
- <button class="action-btn primary" style="flex:1;padding:8px;">查看配送</button>
- </div>
- </div>
-
- <div class="pickup-card">
- <div class="pickup-header">
- <span class="pickup-title">订单号:ORD20260319003</span>
- <span class="status-tag warning">待取货</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">客户</span>
- <span class="detail-value">ZZ店铺</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">配送地址</span>
- <span class="detail-value">城东区ZZ路ZZ号</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">联系人</span>
- <span class="detail-value">张老板 13700000001</span>
- </div>
- <div class="pickup-list">
- <div class="pickup-item">
- <span class="pickup-product">鸡蛋</span>
- <span class="pickup-qty">x 50个</span>
- </div>
- <div class="pickup-item">
- <span class="pickup-product">新鲜蔬菜</span>
- <span class="pickup-qty">x 30斤</span>
- </div>
- </div>
- <div style="margin-top:12px;display:flex;gap:8px;">
- <button class="action-btn" style="flex:1;padding:8px;">标记已取</button>
- <button class="action-btn primary" style="flex:1;padding:8px;">查看详情</button>
- </div>
- </div>
- </div>
- <!-- 运营-数据统计 -->
- <div id="admin-statistics" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #1989fa 0%, #07c160 100%);">
- <h2>数据统计</h2>
- </div>
-
- <div class="stat-card">
- <div class="stat-header">
- <span class="stat-title">今日概况</span>
- <div class="stat-tabs">
- <span class="stat-tab active">今日</span>
- <span class="stat-tab">本周</span>
- <span class="stat-tab">本月</span>
- </div>
- </div>
- <div class="stat-charts">
- <div class="chart-item">
- <div class="chart-value">¥12,580</div>
- <div class="chart-label">今日销售额</div>
- </div>
- <div class="chart-item">
- <div class="chart-value" style="color:#07c160;">156</div>
- <div class="chart-label">今日订单</div>
- </div>
- <div class="chart-item">
- <div class="chart-value" style="color:#ff976a;">89</div>
- <div class="chart-label">待配送</div>
- </div>
- <div class="chart-item">
- <div class="chart-value" style="color:#ee0a24;">12</div>
- <div class="chart-label">异常订单</div>
- </div>
- </div>
- </div>
-
- <div class="stat-card">
- <div class="stat-title" style="margin-bottom:12px;">各区域销售排行</div>
- <table class="stat-table">
- <thead>
- <tr>
- <th>排名</th>
- <th>区域</th>
- <th>订单数</th>
- <th>销售额</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td style="color:#ee0a24;font-weight:600;">1</td>
- <td>城东区域</td>
- <td>58</td>
- <td>¥4,580</td>
- </tr>
- <tr>
- <td style="color:#ff976a;font-weight:600;">2</td>
- <td>城西区域</td>
- <td>45</td>
- <td>¥3,280</td>
- </tr>
- <tr>
- <td style="color:#1989fa;font-weight:600;">3</td>
- <td>城南区域</td>
- <td>32</td>
- <td>¥2,650</td>
- </tr>
- <tr>
- <td>4</td>
- <td>城北区域</td>
- <td>21</td>
- <td>¥2,070</td>
- </tr>
- </tbody>
- </table>
- </div>
-
- <div class="stat-card">
- <div class="stat-title" style="margin-bottom:12px;">供应商报价统计</div>
- <table class="stat-table">
- <thead>
- <tr>
- <th>供应商</th>
- <th>报价次数</th>
- <th>中标率</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>XX供应商</td>
- <td>28次</td>
- <td style="color:#07c160;">72%</td>
- </tr>
- <tr>
- <td>YY供应商</td>
- <td>22次</td>
- <td style="color:#07c160;">65%</td>
- </tr>
- <tr>
- <td>ZZ供应商</td>
- <td>18次</td>
- <td style="color:#07c160;">58%</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <!-- 配送员-历史任务 -->
- <div id="deliver-history" class="page">
- <div class="page-header" style="background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%);">
- <h2>历史任务</h2>
- </div>
-
- <div style="padding:12px;">
- <div class="stat-tabs" style="justify-content:center;gap:16px;">
- <span class="stat-tab active">全部</span>
- <span class="stat-tab">已完成</span>
- <span class="stat-tab">已取消</span>
- </div>
- </div>
-
- <div class="history-card">
- <div class="history-header">
- <span class="history-date">2026年3月18日</span>
- <span class="status-tag success">已完成</span>
- </div>
- <div class="history-list">
- <div class="history-item">
- <div class="history-info">
- <div class="history-title">ORD20260318001 - XX餐厅</div>
- <div class="history-desc">城东区XX路XX号 | 新鲜猪肉、新鲜蔬菜</div>
- </div>
- <span class="history-status">¥410.00</span>
- </div>
- <div class="history-item">
- <div class="history-info">
- <div class="history-title">ORD20260318002 - YY餐厅</div>
- <div class="history-desc">城东区YY路YY号 | 新鲜水果、鸡蛋</div>
- </div>
- <span class="history-status">¥285.00</span>
- </div>
- </div>
- </div>
-
- <div class="history-card">
- <div class="history-header">
- <span class="history-date">2026年3月17日</span>
- <span class="status-tag success">已完成</span>
- </div>
- <div class="history-list">
- <div class="history-item">
- <div class="history-info">
- <div class="history-title">ORD20260317001 - ZZ店铺</div>
- <div class="history-desc">城东区ZZ路ZZ号 | 新鲜猪肉、鸡蛋</div>
- </div>
- <span class="history-status">¥320.00</span>
- </div>
- <div class="history-item">
- <div class="history-info">
- <div class="history-title">ORD20260317002 - AA餐厅</div>
- <div class="history-desc">城东区AA路AA号 | 新鲜蔬菜、新鲜水果</div>
- </div>
- <span class="history-status">¥198.00</span>
- </div>
- </div>
- </div>
-
- <div class="history-card">
- <div class="history-header">
- <span class="history-date">2026年3月15日</span>
- <span class="status-tag info">已取消</span>
- </div>
- <div class="history-list">
- <div class="history-item">
- <div class="history-info">
- <div class="history-title">ORD20260315001 - BB店铺</div>
- <div class="history-desc">城东区BB路BB号 | 新鲜猪肉(客户取消)</div>
- </div>
- <span class="history-status" style="color:#999;">¥0.00</span>
- </div>
- </div>
- </div>
-
- <div class="empty-state" style="margin-top:20px;">
- <div class="empty-icon">📦</div>
- <div class="empty-text">没有更多历史任务了</div>
- </div>
- </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>
|