更多页面.html 42 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>叁强鲜配 - 小程序端(更多页面)</title>
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@3/lib/index.css" />
  8. <style>
  9. * { margin: 0; padding: 0; box-sizing: border-box; }
  10. body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; background: #f5f5f5; color: #333; }
  11. .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); }
  12. .page { display: none; min-height: 100vh; padding-bottom: 60px; }
  13. .page.active { display: block; }
  14. .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; }
  15. .prototype-nav h4 { font-size: 13px; color: #999; margin-bottom: 12px; }
  16. .prototype-nav a { display: block; padding: 8px 12px; color: #333; text-decoration: none; font-size: 13px; border-radius: 6px; margin-bottom: 4px; }
  17. .prototype-nav a:hover, .prototype-nav a.active { background: #e6f7ff; color: #1989fa; }
  18. .prototype-nav .role-label { font-size: 12px; color: #1989fa; font-weight: 500; margin-top: 8px; }
  19. .page-header { padding: 24px 20px; color: #fff; }
  20. .page-header h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
  21. .status-tag { padding: 4px 10px; border-radius: 4px; font-size: 12px; }
  22. .status-tag.primary { background: #e6f7ff; color: #1989fa; }
  23. .status-tag.success { background: #f6ffed; color: #07c160; }
  24. .status-tag.warning { background: #fff7e6; color: #ff976a; }
  25. .status-tag.danger { background: #fff1f0; color: #ee0a24; }
  26. .list-container { background: #fff; margin: 12px; border-radius: 12px; overflow: hidden; }
  27. .list-item { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid #f5f5f5; }
  28. .list-item:last-child { border-bottom: none; }
  29. .list-content { flex: 1; }
  30. .list-title { font-size: 15px; color: #333; }
  31. .list-desc { font-size: 13px; color: #999; margin-top: 4px; }
  32. .task-card { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; }
  33. .task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  34. .task-no { font-size: 14px; font-weight: 500; }
  35. .task-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
  36. .task-row { display: flex; align-items: flex-start; font-size: 14px; color: #666; }
  37. .task-row .icon { margin-right: 8px; min-width: 20px; }
  38. .action-btn { padding: 8px 20px; border-radius: 20px; font-size: 14px; border: 1px solid #1989fa; color: #1989fa; background: #fff; }
  39. .action-btn.primary { background: #1989fa; color: #fff; }
  40. .detail-card { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; }
  41. .detail-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
  42. .detail-row:last-child { border-bottom: none; }
  43. .detail-label { color: #999; font-size: 14px; }
  44. .detail-value { color: #333; font-size: 14px; font-weight: 500; }
  45. .form-container { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; }
  46. .form-item { margin-bottom: 16px; }
  47. .form-label { font-size: 14px; color: #666; margin-bottom: 8px; display: block; }
  48. .form-input { width: 100%; height: 44px; background: #f5f5f5; border-radius: 8px; padding: 0 16px; font-size: 14px; border: none; }
  49. .upload-box { border: 2px dashed #ddd; border-radius: 8px; padding: 30px; text-align: center; color: #999; }
  50. .upload-box:active { border-color: #1989fa; color: #1989fa; }
  51. .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); }
  52. .profile-card { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; display: flex; align-items: center; }
  53. .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; }
  54. .profile-info h3 { font-size: 18px; margin-bottom: 4px; }
  55. .profile-info p { font-size: 14px; color: #999; }
  56. .inquiry-detail { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; }
  57. .inquiry-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
  58. .inquiry-title { font-size: 16px; font-weight: 600; }
  59. .product-list { margin-top: 16px; }
  60. .product-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
  61. .product-item:last-child { border-bottom: none; }
  62. .product-name { font-size: 14px; }
  63. .product-action { display: flex; align-items: center; gap: 8px; }
  64. .product-input { width: 80px; height: 32px; border: 1px solid #ddd; border-radius: 4px; padding: 0 8px; text-align: right; }
  65. .cart-item { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; display: flex; gap: 12px; }
  66. .cart-checkbox { width: 20px; height: 20px; border: 2px solid #1989fa; border-radius: 50%; margin-top: 20px; }
  67. .cart-img { width: 80px; height: 80px; background: #f5f5f5; border-radius: 8px; }
  68. .cart-info { flex: 1; }
  69. .cart-name { font-size: 15px; margin-bottom: 8px; }
  70. .cart-price { color: #ee0a24; font-size: 16px; font-weight: 600; }
  71. .cart-quantity { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
  72. .quantity-btn { width: 28px; height: 28px; border: 1px solid #ddd; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
  73. .quantity-num { font-size: 16px; min-width: 30px; text-align: center; }
  74. .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); }
  75. .cart-total { font-size: 18px; }
  76. .cart-total span { color: #ee0a24; font-weight: 600; }
  77. .cart-settle { background: #1989fa; color: #fff; padding: 12px 32px; border-radius: 24px; border: none; font-size: 15px; }
  78. /* 地址管理样式 */
  79. .address-card { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; }
  80. .address-main { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
  81. .address-info { flex: 1; }
  82. .address-name { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
  83. .address-name span { font-size: 12px; color: #999; margin-left: 8px; }
  84. .address-detail { font-size: 14px; color: #666; }
  85. .address-actions { display: flex; gap: 16px; }
  86. .address-action { font-size: 13px; color: #666; }
  87. .address-action.danger { color: #ee0a24; }
  88. /* 取货详情样式 */
  89. .pickup-card { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; }
  90. .pickup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  91. .pickup-title { font-size: 16px; font-weight: 600; }
  92. .pickup-list { margin-top: 12px; }
  93. .pickup-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
  94. .pickup-item:last-child { border-bottom: none; }
  95. .pickup-product { font-size: 14px; }
  96. .pickup-qty { font-size: 14px; color: #666; }
  97. /* 数据统计样式 */
  98. .stat-card { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; }
  99. .stat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
  100. .stat-title { font-size: 15px; font-weight: 600; }
  101. .stat-tabs { display: flex; gap: 8px; }
  102. .stat-tab { padding: 4px 12px; font-size: 12px; border-radius: 4px; color: #666; }
  103. .stat-tab.active { background: #1989fa; color: #fff; }
  104. .stat-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
  105. .chart-item { background: #f8f9fa; border-radius: 8px; padding: 16px; text-align: center; }
  106. .chart-value { font-size: 24px; font-weight: 600; color: #1989fa; }
  107. .chart-label { font-size: 12px; color: #999; margin-top: 4px; }
  108. .stat-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
  109. .stat-table th { background: #f5f7fa; padding: 10px 8px; font-size: 12px; color: #666; text-align: left; }
  110. .stat-table td { padding: 10px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #f5f5f5; }
  111. /* 历史任务样式 */
  112. .history-card { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; }
  113. .history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  114. .history-date { font-size: 14px; color: #999; }
  115. .history-list { display: flex; flex-direction: column; gap: 8px; }
  116. .history-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f8f9fa; border-radius: 8px; }
  117. .history-info { flex: 1; }
  118. .history-title { font-size: 14px; margin-bottom: 4px; }
  119. .history-desc { font-size: 12px; color: #999; }
  120. .history-status { font-size: 12px; }
  121. /* 空状态样式 */
  122. .empty-state { text-align: center; padding: 60px 20px; }
  123. .empty-icon { font-size: 48px; color: #ddd; margin-bottom: 16px; }
  124. .empty-text { font-size: 14px; color: #999; }
  125. </style>
  126. </head>
  127. <body>
  128. <!-- 原型导航 -->
  129. <div class="prototype-nav">
  130. <h4>切换页面</h4>
  131. <div class="role-label">【高优先级】</div>
  132. <a href="#" onclick="showPage('client-cart')">客户-购物车</a>
  133. <a href="#" onclick="showPage('client-address')">客户-地址管理</a>
  134. <a href="#" onclick="showPage('supplier-pickup-detail')">供应商-取货详情</a>
  135. <div class="role-label">【中优先级】</div>
  136. <a href="#" onclick="showPage('admin-statistics')">运营-数据统计</a>
  137. <a href="#" onclick="showPage('deliver-history')">配送员-历史任务</a>
  138. <div class="role-label">【其他页面】</div>
  139. <a href="#" onclick="showPage('supplier-inquiry-detail')">供应商-询价详情</a>
  140. <a href="#" onclick="showPage('supplier-quote-form')">供应商-报价提交</a>
  141. <a href="#" onclick="showPage('client-order-detail')">客户-订单详情</a>
  142. <a href="#" onclick="showPage('client-profile')">客户-个人信息</a>
  143. <a href="#" onclick="showPage('deliver-task-detail')">配送员-任务详情</a>
  144. </div>
  145. <div class="phone-container">
  146. <!-- 客户-购物车 -->
  147. <div id="client-cart" class="page active">
  148. <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
  149. <h2>购物车</h2>
  150. </div>
  151. <div class="cart-item">
  152. <div class="cart-checkbox"></div>
  153. <div class="cart-img"></div>
  154. <div class="cart-info">
  155. <div class="cart-name">新鲜猪肉</div>
  156. <div class="cart-price">¥25.00/斤</div>
  157. <div class="cart-quantity">
  158. <div class="quantity-btn">-</div>
  159. <div class="quantity-num">10</div>
  160. <div class="quantity-btn">+</div>
  161. </div>
  162. </div>
  163. </div>
  164. <div class="cart-item">
  165. <div class="cart-checkbox"></div>
  166. <div class="cart-img"></div>
  167. <div class="cart-info">
  168. <div class="cart-name">新鲜蔬菜</div>
  169. <div class="cart-price">¥8.00/斤</div>
  170. <div class="cart-quantity">
  171. <div class="quantity-btn">-</div>
  172. <div class="quantity-num">20</div>
  173. <div class="quantity-btn">+</div>
  174. </div>
  175. </div>
  176. </div>
  177. <div class="cart-footer">
  178. <div class="cart-total">合计:<span>¥410.00</span></div>
  179. <button class="cart-settle">去结算</button>
  180. </div>
  181. </div>
  182. <!-- 供应商-询价详情 -->
  183. <div id="supplier-inquiry-detail" class="page">
  184. <div class="page-header" style="background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%);">
  185. <h2>询价单详情</h2>
  186. </div>
  187. <div class="inquiry-detail">
  188. <div class="inquiry-header">
  189. <span class="inquiry-title">2026年3月第3周询价单</span>
  190. <span class="status-tag warning">待报价</span>
  191. </div>
  192. <div class="detail-row">
  193. <span class="detail-label">区域</span>
  194. <span class="detail-value">城东区域</span>
  195. </div>
  196. <div class="detail-row">
  197. <span class="detail-label">发布时间</span>
  198. <span class="detail-value">2026-03-17 10:00</span>
  199. </div>
  200. <div class="detail-row">
  201. <span class="detail-label">截止时间</span>
  202. <span class="detail-value">2026-03-19 18:00</span>
  203. </div>
  204. </div>
  205. <div class="inquiry-detail">
  206. <div class="inquiry-title">询价商品清单</div>
  207. <div class="product-list">
  208. <div class="product-item">
  209. <span class="product-name">新鲜猪肉</span>
  210. <div class="product-action">
  211. <input type="text" class="product-input" placeholder="报价" />
  212. <span>元/斤</span>
  213. </div>
  214. </div>
  215. <div class="product-item">
  216. <span class="product-name">新鲜蔬菜</span>
  217. <div class="product-action">
  218. <input type="text" class="product-input" placeholder="报价" />
  219. <span>元/斤</span>
  220. </div>
  221. </div>
  222. <div class="product-item">
  223. <span class="product-name">新鲜水果</span>
  224. <div class="product-action">
  225. <input type="text" class="product-input" placeholder="报价" />
  226. <span>元/斤</span>
  227. </div>
  228. </div>
  229. <div class="product-item">
  230. <span class="product-name">鸡蛋</span>
  231. <div class="product-action">
  232. <input type="text" class="product-input" placeholder="报价" />
  233. <span>元/个</span>
  234. </div>
  235. </div>
  236. </div>
  237. </div>
  238. <div style="padding: 20px;">
  239. <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;">提交报价</button>
  240. </div>
  241. </div>
  242. <!-- 供应商-报价提交 -->
  243. <div id="supplier-quote-form" class="page">
  244. <div class="page-header" style="background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%);">
  245. <h2>提交报价</h2>
  246. </div>
  247. <div class="inquiry-detail">
  248. <div class="inquiry-title">2026年3月第3周询价单</div>
  249. <div class="detail-row">
  250. <span class="detail-label">区域</span>
  251. <span class="detail-value">城东区域</span>
  252. </div>
  253. <div class="detail-row">
  254. <span class="detail-label">询价商品</span>
  255. <span class="detail-value">8种商品</span>
  256. </div>
  257. </div>
  258. <div class="form-container">
  259. <div class="form-item">
  260. <label class="form-label">报价金额(元)</label>
  261. <input type="text" class="form-input" placeholder="请输入总报价" />
  262. </div>
  263. <div class="form-item">
  264. <label class="form-label">报价说明</label>
  265. <input type="text" class="form-input" placeholder="请输入报价说明(选填)" />
  266. </div>
  267. </div>
  268. <div style="padding: 20px;">
  269. <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;">确认提交</button>
  270. </div>
  271. </div>
  272. <!-- 客户-订单详情 -->
  273. <div id="client-order-detail" class="page">
  274. <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
  275. <h2>订单详情</h2>
  276. </div>
  277. <div class="detail-card">
  278. <div class="detail-row">
  279. <span class="detail-label">订单编号</span>
  280. <span class="detail-value">ORD202603190001</span>
  281. </div>
  282. <div class="detail-row">
  283. <span class="detail-label">订单状态</span>
  284. <span class="detail-value"><span class="status-tag warning">待支付</span></span>
  285. </div>
  286. <div class="detail-row">
  287. <span class="detail-label">下单时间</span>
  288. <span class="detail-value">2026-03-19 10:23:45</span>
  289. </div>
  290. </div>
  291. <div class="detail-card">
  292. <div class="detail-row">
  293. <span class="detail-label">联系人</span>
  294. <span class="detail-value">张三</span>
  295. </div>
  296. <div class="detail-row">
  297. <span class="detail-label">联系电话</span>
  298. <span class="detail-value">13800138001</span>
  299. </div>
  300. <div class="detail-row">
  301. <span class="detail-label">配送地址</span>
  302. <span class="detail-value">城东区XX路XX号</span>
  303. </div>
  304. </div>
  305. <div class="detail-card">
  306. <div class="detail-title" style="font-size:15px;font-weight:600;margin-bottom:12px;">商品明细</div>
  307. <div class="detail-row">
  308. <span class="detail-label">新鲜猪肉 x 10斤</span>
  309. <span class="detail-value">¥250.00</span>
  310. </div>
  311. <div class="detail-row">
  312. <span class="detail-label">新鲜蔬菜 x 20斤</span>
  313. <span class="detail-value">¥160.00</span>
  314. </div>
  315. <div class="detail-row" style="border-top:1px solid #eee;padding-top:12px;margin-top:12px;">
  316. <span class="detail-label" style="font-weight:600;">订单金额</span>
  317. <span class="detail-value" style="color:#ee0a24;font-weight:600;">¥410.00</span>
  318. </div>
  319. </div>
  320. <div style="padding: 20px;display:flex;gap:12px;">
  321. <button class="action-btn" style="flex:1;">取消订单</button>
  322. <button class="action-btn primary" style="flex:1;">去支付</button>
  323. </div>
  324. </div>
  325. <!-- 客户-个人信息 -->
  326. <div id="client-profile" class="page">
  327. <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
  328. <h2>个人信息</h2>
  329. </div>
  330. <div class="profile-card">
  331. <div class="profile-avatar">李</div>
  332. <div class="profile-info">
  333. <h3>李娜</h3>
  334. <p>客户 | 城东区域</p>
  335. </div>
  336. </div>
  337. <div class="list-container">
  338. <div class="list-item">
  339. <div class="list-content">
  340. <div class="list-title">手机号</div>
  341. <div class="list-desc">13800138002</div>
  342. </div>
  343. </div>
  344. <div class="list-item">
  345. <div class="list-content">
  346. <div class="list-title">店铺名称</div>
  347. <div class="list-desc">XX餐厅</div>
  348. </div>
  349. </div>
  350. <div class="list-item">
  351. <div class="list-content">
  352. <div class="list-title">配送地址</div>
  353. <div class="list-desc">城东区XX路XX号</div>
  354. </div>
  355. </div>
  356. </div>
  357. <div style="padding: 20px;">
  358. <button class="action-btn" style="width:100%;height:44px;border-radius:22px;">修改信息</button>
  359. </div>
  360. </div>
  361. <!-- 配送员-任务详情 -->
  362. <div id="deliver-task-detail" class="page">
  363. <div class="page-header" style="background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%);">
  364. <h2>任务详情</h2>
  365. </div>
  366. <div class="detail-card">
  367. <div class="detail-row">
  368. <span class="detail-label">配送单号</span>
  369. <span class="detail-value">DLV20260319001</span>
  370. </div>
  371. <div class="detail-row">
  372. <span class="detail-label">任务状态</span>
  373. <span class="detail-value"><span class="status-tag warning">待取货</span></span>
  374. </div>
  375. <div class="detail-row">
  376. <span class="detail-label">订单编号</span>
  377. <span class="detail-value">ORD202603190001</span>
  378. </div>
  379. </div>
  380. <div class="detail-card">
  381. <div class="detail-title" style="font-size:15px;font-weight:600;margin-bottom:12px;">取货信息</div>
  382. <div class="detail-row">
  383. <span class="detail-label">供应商</span>
  384. <span class="detail-value">XX供应商</span>
  385. </div>
  386. <div class="detail-row">
  387. <span class="detail-label">取货地址</span>
  388. <span class="detail-value">城东区XX路XX号</span>
  389. </div>
  390. <div class="detail-row">
  391. <span class="detail-label">联系人</span>
  392. <span class="detail-value">张老板 | 13900001111</span>
  393. </div>
  394. </div>
  395. <div class="detail-card">
  396. <div class="detail-title" style="font-size:15px;font-weight:600;margin-bottom:12px;">送货信息</div>
  397. <div class="detail-row">
  398. <span class="detail-label">客户</span>
  399. <span class="detail-value">XX餐厅</span>
  400. </div>
  401. <div class="detail-row">
  402. <span class="detail-label">送货地址</span>
  403. <span class="detail-value">城东区YY路YY号</span>
  404. </div>
  405. <div class="detail-row">
  406. <span class="detail-label">联系人</span>
  407. <span class="detail-value">李女士 | 13800138002</span>
  408. </div>
  409. </div>
  410. <div class="detail-card">
  411. <div class="detail-title" style="font-size:15px;font-weight:600;margin-bottom:12px;">商品明细</div>
  412. <div class="detail-row">
  413. <span class="detail-label">新鲜猪肉</span>
  414. <span class="detail-value">10斤</span>
  415. </div>
  416. <div class="detail-row">
  417. <span class="detail-label">新鲜蔬菜</span>
  418. <span class="detail-value">20斤</span>
  419. </div>
  420. </div>
  421. <div class="form-container">
  422. <div class="form-item">
  423. <label class="form-label">取货备注</label>
  424. <input type="text" class="form-input" placeholder="请输入备注(选填)" />
  425. </div>
  426. <div class="form-item">
  427. <label class="form-label">取货凭证</label>
  428. <div class="upload-box">点击上传图片</div>
  429. </div>
  430. </div>
  431. <div style="padding: 20px;">
  432. <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;">确认取货</button>
  433. </div>
  434. </div>
  435. <!-- 客户-地址管理 -->
  436. <div id="client-address" class="page">
  437. <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
  438. <h2>地址管理</h2>
  439. </div>
  440. <div class="address-card">
  441. <div class="address-main">
  442. <div class="address-info">
  443. <div class="address-name">李女士 <span class="status-tag success" style="padding:2px 6px;">默认</span></div>
  444. <div class="address-detail">13800138002</div>
  445. <div class="address-detail" style="margin-top:4px;">城东区XX路XX号XX栋XX室</div>
  446. </div>
  447. </div>
  448. <div class="address-actions">
  449. <span class="address-action">编辑</span>
  450. <span class="address-action danger">删除</span>
  451. </div>
  452. </div>
  453. <div class="address-card">
  454. <div class="address-main">
  455. <div class="address-info">
  456. <div class="address-name">李娜</div>
  457. <div class="address-detail">13900000001</div>
  458. <div class="address-detail" style="margin-top:4px;">城东区YY路YY号YY栋YY室</div>
  459. </div>
  460. </div>
  461. <div class="address-actions">
  462. <span class="address-action">编辑</span>
  463. <span class="address-action">设为默认</span>
  464. <span class="address-action danger">删除</span>
  465. </div>
  466. </div>
  467. <div class="address-card">
  468. <div class="address-main">
  469. <div class="address-info">
  470. <div class="address-name">公司地址</div>
  471. <div class="address-detail">13800138002</div>
  472. <div class="address-detail" style="margin-top:4px;">城东区ZZ路ZZ号</div>
  473. </div>
  474. </div>
  475. <div class="address-actions">
  476. <span class="address-action">编辑</span>
  477. <span class="address-action">设为默认</span>
  478. <span class="address-action danger">删除</span>
  479. </div>
  480. </div>
  481. <div style="padding: 20px;">
  482. <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;">添加新地址</button>
  483. </div>
  484. </div>
  485. <!-- 供应商-取货详情 -->
  486. <div id="supplier-pickup-detail" class="page">
  487. <div class="page-header" style="background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%);">
  488. <h2>取货详情</h2>
  489. </div>
  490. <div class="pickup-card">
  491. <div class="pickup-header">
  492. <span class="pickup-title">待取货订单</span>
  493. <span class="status-tag warning">3单待取</span>
  494. </div>
  495. </div>
  496. <div class="pickup-card">
  497. <div class="pickup-header">
  498. <span class="pickup-title">订单号:ORD20260319001</span>
  499. <span class="status-tag primary">待分配</span>
  500. </div>
  501. <div class="detail-row">
  502. <span class="detail-label">客户</span>
  503. <span class="detail-value">XX餐厅</span>
  504. </div>
  505. <div class="detail-row">
  506. <span class="detail-label">配送地址</span>
  507. <span class="detail-value">城东区XX路XX号</span>
  508. </div>
  509. <div class="detail-row">
  510. <span class="detail-label">联系人</span>
  511. <span class="detail-value">李女士 13800138002</span>
  512. </div>
  513. <div class="pickup-list">
  514. <div class="pickup-item">
  515. <span class="pickup-product">新鲜猪肉</span>
  516. <span class="pickup-qty">x 10斤</span>
  517. </div>
  518. <div class="pickup-item">
  519. <span class="pickup-product">新鲜蔬菜</span>
  520. <span class="pickup-qty">x 20斤</span>
  521. </div>
  522. </div>
  523. <div style="margin-top:12px;display:flex;gap:8px;">
  524. <button class="action-btn" style="flex:1;padding:8px;">标记已取</button>
  525. <button class="action-btn primary" style="flex:1;padding:8px;">查看详情</button>
  526. </div>
  527. </div>
  528. <div class="pickup-card">
  529. <div class="pickup-header">
  530. <span class="pickup-title">订单号:ORD20260319002</span>
  531. <span class="status-tag info">配送中</span>
  532. </div>
  533. <div class="detail-row">
  534. <span class="detail-label">客户</span>
  535. <span class="detail-value">YY餐厅</span>
  536. </div>
  537. <div class="detail-row">
  538. <span class="detail-label">配送地址</span>
  539. <span class="detail-value">城东区YY路YY号</span>
  540. </div>
  541. <div class="detail-row">
  542. <span class="detail-label">联系人</span>
  543. <span class="detail-value">王先生 13900000001</span>
  544. </div>
  545. <div class="pickup-list">
  546. <div class="pickup-item">
  547. <span class="pickup-product">新鲜水果</span>
  548. <span class="pickup-qty">x 15斤</span>
  549. </div>
  550. </div>
  551. <div style="margin-top:12px;display:flex;gap:8px;">
  552. <button class="action-btn primary" style="flex:1;padding:8px;">查看配送</button>
  553. </div>
  554. </div>
  555. <div class="pickup-card">
  556. <div class="pickup-header">
  557. <span class="pickup-title">订单号:ORD20260319003</span>
  558. <span class="status-tag warning">待取货</span>
  559. </div>
  560. <div class="detail-row">
  561. <span class="detail-label">客户</span>
  562. <span class="detail-value">ZZ店铺</span>
  563. </div>
  564. <div class="detail-row">
  565. <span class="detail-label">配送地址</span>
  566. <span class="detail-value">城东区ZZ路ZZ号</span>
  567. </div>
  568. <div class="detail-row">
  569. <span class="detail-label">联系人</span>
  570. <span class="detail-value">张老板 13700000001</span>
  571. </div>
  572. <div class="pickup-list">
  573. <div class="pickup-item">
  574. <span class="pickup-product">鸡蛋</span>
  575. <span class="pickup-qty">x 50个</span>
  576. </div>
  577. <div class="pickup-item">
  578. <span class="pickup-product">新鲜蔬菜</span>
  579. <span class="pickup-qty">x 30斤</span>
  580. </div>
  581. </div>
  582. <div style="margin-top:12px;display:flex;gap:8px;">
  583. <button class="action-btn" style="flex:1;padding:8px;">标记已取</button>
  584. <button class="action-btn primary" style="flex:1;padding:8px;">查看详情</button>
  585. </div>
  586. </div>
  587. </div>
  588. <!-- 运营-数据统计 -->
  589. <div id="admin-statistics" class="page">
  590. <div class="page-header" style="background: linear-gradient(135deg, #1989fa 0%, #07c160 100%);">
  591. <h2>数据统计</h2>
  592. </div>
  593. <div class="stat-card">
  594. <div class="stat-header">
  595. <span class="stat-title">今日概况</span>
  596. <div class="stat-tabs">
  597. <span class="stat-tab active">今日</span>
  598. <span class="stat-tab">本周</span>
  599. <span class="stat-tab">本月</span>
  600. </div>
  601. </div>
  602. <div class="stat-charts">
  603. <div class="chart-item">
  604. <div class="chart-value">¥12,580</div>
  605. <div class="chart-label">今日销售额</div>
  606. </div>
  607. <div class="chart-item">
  608. <div class="chart-value" style="color:#07c160;">156</div>
  609. <div class="chart-label">今日订单</div>
  610. </div>
  611. <div class="chart-item">
  612. <div class="chart-value" style="color:#ff976a;">89</div>
  613. <div class="chart-label">待配送</div>
  614. </div>
  615. <div class="chart-item">
  616. <div class="chart-value" style="color:#ee0a24;">12</div>
  617. <div class="chart-label">异常订单</div>
  618. </div>
  619. </div>
  620. </div>
  621. <div class="stat-card">
  622. <div class="stat-title" style="margin-bottom:12px;">各区域销售排行</div>
  623. <table class="stat-table">
  624. <thead>
  625. <tr>
  626. <th>排名</th>
  627. <th>区域</th>
  628. <th>订单数</th>
  629. <th>销售额</th>
  630. </tr>
  631. </thead>
  632. <tbody>
  633. <tr>
  634. <td style="color:#ee0a24;font-weight:600;">1</td>
  635. <td>城东区域</td>
  636. <td>58</td>
  637. <td>¥4,580</td>
  638. </tr>
  639. <tr>
  640. <td style="color:#ff976a;font-weight:600;">2</td>
  641. <td>城西区域</td>
  642. <td>45</td>
  643. <td>¥3,280</td>
  644. </tr>
  645. <tr>
  646. <td style="color:#1989fa;font-weight:600;">3</td>
  647. <td>城南区域</td>
  648. <td>32</td>
  649. <td>¥2,650</td>
  650. </tr>
  651. <tr>
  652. <td>4</td>
  653. <td>城北区域</td>
  654. <td>21</td>
  655. <td>¥2,070</td>
  656. </tr>
  657. </tbody>
  658. </table>
  659. </div>
  660. <div class="stat-card">
  661. <div class="stat-title" style="margin-bottom:12px;">供应商报价统计</div>
  662. <table class="stat-table">
  663. <thead>
  664. <tr>
  665. <th>供应商</th>
  666. <th>报价次数</th>
  667. <th>中标率</th>
  668. </tr>
  669. </thead>
  670. <tbody>
  671. <tr>
  672. <td>XX供应商</td>
  673. <td>28次</td>
  674. <td style="color:#07c160;">72%</td>
  675. </tr>
  676. <tr>
  677. <td>YY供应商</td>
  678. <td>22次</td>
  679. <td style="color:#07c160;">65%</td>
  680. </tr>
  681. <tr>
  682. <td>ZZ供应商</td>
  683. <td>18次</td>
  684. <td style="color:#07c160;">58%</td>
  685. </tr>
  686. </tbody>
  687. </table>
  688. </div>
  689. </div>
  690. <!-- 配送员-历史任务 -->
  691. <div id="deliver-history" class="page">
  692. <div class="page-header" style="background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%);">
  693. <h2>历史任务</h2>
  694. </div>
  695. <div style="padding:12px;">
  696. <div class="stat-tabs" style="justify-content:center;gap:16px;">
  697. <span class="stat-tab active">全部</span>
  698. <span class="stat-tab">已完成</span>
  699. <span class="stat-tab">已取消</span>
  700. </div>
  701. </div>
  702. <div class="history-card">
  703. <div class="history-header">
  704. <span class="history-date">2026年3月18日</span>
  705. <span class="status-tag success">已完成</span>
  706. </div>
  707. <div class="history-list">
  708. <div class="history-item">
  709. <div class="history-info">
  710. <div class="history-title">ORD20260318001 - XX餐厅</div>
  711. <div class="history-desc">城东区XX路XX号 | 新鲜猪肉、新鲜蔬菜</div>
  712. </div>
  713. <span class="history-status">¥410.00</span>
  714. </div>
  715. <div class="history-item">
  716. <div class="history-info">
  717. <div class="history-title">ORD20260318002 - YY餐厅</div>
  718. <div class="history-desc">城东区YY路YY号 | 新鲜水果、鸡蛋</div>
  719. </div>
  720. <span class="history-status">¥285.00</span>
  721. </div>
  722. </div>
  723. </div>
  724. <div class="history-card">
  725. <div class="history-header">
  726. <span class="history-date">2026年3月17日</span>
  727. <span class="status-tag success">已完成</span>
  728. </div>
  729. <div class="history-list">
  730. <div class="history-item">
  731. <div class="history-info">
  732. <div class="history-title">ORD20260317001 - ZZ店铺</div>
  733. <div class="history-desc">城东区ZZ路ZZ号 | 新鲜猪肉、鸡蛋</div>
  734. </div>
  735. <span class="history-status">¥320.00</span>
  736. </div>
  737. <div class="history-item">
  738. <div class="history-info">
  739. <div class="history-title">ORD20260317002 - AA餐厅</div>
  740. <div class="history-desc">城东区AA路AA号 | 新鲜蔬菜、新鲜水果</div>
  741. </div>
  742. <span class="history-status">¥198.00</span>
  743. </div>
  744. </div>
  745. </div>
  746. <div class="history-card">
  747. <div class="history-header">
  748. <span class="history-date">2026年3月15日</span>
  749. <span class="status-tag info">已取消</span>
  750. </div>
  751. <div class="history-list">
  752. <div class="history-item">
  753. <div class="history-info">
  754. <div class="history-title">ORD20260315001 - BB店铺</div>
  755. <div class="history-desc">城东区BB路BB号 | 新鲜猪肉(客户取消)</div>
  756. </div>
  757. <span class="history-status" style="color:#999;">¥0.00</span>
  758. </div>
  759. </div>
  760. </div>
  761. <div class="empty-state" style="margin-top:20px;">
  762. <div class="empty-icon">📦</div>
  763. <div class="empty-text">没有更多历史任务了</div>
  764. </div>
  765. </div>
  766. </div>
  767. <script>
  768. function showPage(pageId) {
  769. document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  770. document.getElementById(pageId).classList.add('active');
  771. document.querySelectorAll('.prototype-nav a').forEach(a => a.classList.remove('active'));
  772. event.target.classList.add('active');
  773. }
  774. </script>
  775. </body>
  776. </html>