统一框架.html 46 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923
  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. /* 手机容器 */
  12. .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; }
  13. /* 状态栏模拟 */
  14. .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; }
  15. /* 登录页 */
  16. .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; }
  17. .login-logo { text-align: center; margin-bottom: 60px; }
  18. .login-logo h1 { font-size: 36px; color: #fff; font-weight: bold; margin-bottom: 8px; }
  19. .login-logo p { font-size: 14px; color: rgba(255,255,255,0.8); }
  20. .login-form { background: #fff; border-radius: 24px; padding: 40px 24px; }
  21. .login-input { width: 100%; height: 48px; background: #f5f5f5; border-radius: 12px; padding: 0 16px; font-size: 15px; margin-bottom: 16px; border: none; outline: none; }
  22. .login-btn { width: 100%; height: 48px; background: #1989fa; color: #fff; border: none; border-radius: 24px; font-size: 16px; font-weight: 500; cursor: pointer; }
  23. .login-btn:active { opacity: 0.8; }
  24. /* 首页通用 */
  25. .page-header { padding: 24px 20px; color: #fff; }
  26. .page-header h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
  27. .page-header p { font-size: 14px; opacity: 0.9; }
  28. /* 功能卡片 */
  29. .menu-grid { display: flex; flex-wrap: wrap; padding: 0 10px; }
  30. .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; }
  31. .menu-card:active { background: #fafafa; }
  32. .menu-icon { font-size: 40px; margin-bottom: 12px; }
  33. .menu-text { font-size: 14px; color: #333; }
  34. /* 通用列表 */
  35. .list-container { background: #fff; margin: 12px; border-radius: 12px; overflow: hidden; }
  36. .list-item { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
  37. .list-item:last-child { border-bottom: none; }
  38. .list-item:active { background: #fafafa; }
  39. .list-icon { font-size: 24px; margin-right: 16px; }
  40. .list-content { flex: 1; }
  41. .list-title { font-size: 15px; color: #333; }
  42. .list-desc { font-size: 13px; color: #999; margin-top: 4px; }
  43. .list-arrow { color: #ccc; font-size: 14px; }
  44. /* 状态标签 */
  45. .status-tag { padding: 4px 10px; border-radius: 4px; font-size: 12px; }
  46. .status-tag.primary { background: #e6f7ff; color: #1989fa; }
  47. .status-tag.success { background: #f6ffed; color: #07c160; }
  48. .status-tag.warning { background: #fff7e6; color: #ff976a; }
  49. .status-tag.danger { background: #fff1f0; color: #ee0a24; }
  50. .status-tag.info { background: #f5f5f5; color: #999; }
  51. /* 退出按钮 */
  52. .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; }
  53. /* 页面切换 */
  54. .page { display: none; min-height: 100vh; padding-bottom: 60px; }
  55. .page.active { display: block; }
  56. /* 原型导航 */
  57. .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; }
  58. .prototype-nav h4 { font-size: 13px; color: #999; margin-bottom: 12px; }
  59. .prototype-nav a { display: block; padding: 8px 12px; color: #333; text-decoration: none; font-size: 12px; border-radius: 6px; margin-bottom: 4px; }
  60. .prototype-nav a:hover, .prototype-nav a.active { background: #e6f7ff; color: #1989fa; }
  61. .prototype-nav .role-label { font-size: 12px; color: #1989fa; font-weight: 500; margin-top: 8px; margin-bottom: 4px; }
  62. /* 统计卡片 */
  63. .stats-row { display: flex; justify-content: space-around; padding: 20px; background: #fff; margin: 12px; border-radius: 12px; }
  64. .stats-item { text-align: center; }
  65. .stats-num { font-size: 28px; font-weight: 600; }
  66. .stats-label { font-size: 12px; color: #999; margin-top: 4px; }
  67. /* 订单卡片 */
  68. .order-card { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; }
  69. .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  70. .order-no { font-size: 13px; color: #999; }
  71. .order-shop { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
  72. .order-items { font-size: 13px; color: #666; margin-bottom: 12px; }
  73. .order-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #f5f5f5; }
  74. .order-amount { font-size: 18px; font-weight: 600; color: #ee0a24; }
  75. .action-btn { padding: 6px 16px; border-radius: 16px; font-size: 13px; border: 1px solid #1989fa; color: #1989fa; background: #fff; cursor: pointer; }
  76. .action-btn.primary { background: #1989fa; color: #fff; }
  77. /* 任务卡片 */
  78. .task-card { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; }
  79. .task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  80. .task-no { font-size: 14px; font-weight: 500; }
  81. .task-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
  82. .task-row { display: flex; align-items: center; font-size: 14px; color: #666; }
  83. .task-row .icon { margin-right: 8px; }
  84. /* 价格卡片 */
  85. .price-card { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; }
  86. .price-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
  87. .price-version { font-size: 14px; color: #999; }
  88. .price-list { display: flex; flex-direction: column; gap: 12px; }
  89. .price-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f9f9f9; border-radius: 8px; }
  90. .price-name { font-size: 14px; }
  91. .price-value { font-size: 16px; font-weight: 600; color: #07c160; }
  92. /* 表单 */
  93. .form-container { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; }
  94. .form-item { margin-bottom: 16px; }
  95. .form-label { font-size: 14px; color: #666; margin-bottom: 8px; display: block; }
  96. .form-input { width: 100%; height: 44px; background: #f5f5f5; border-radius: 8px; padding: 0 16px; font-size: 14px; border: none; }
  97. /* 详情卡片 */
  98. .detail-card { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; }
  99. .detail-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
  100. .detail-row:last-child { border-bottom: none; }
  101. .detail-label { color: #999; font-size: 14px; }
  102. .detail-value { color: #333; font-size: 14px; font-weight: 500; }
  103. /* 商品项 */
  104. .product-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
  105. .product-item:last-child { border-bottom: none; }
  106. .product-name { font-size: 14px; }
  107. .product-action { display: flex; align-items: center; gap: 8px; }
  108. .product-input { width: 80px; height: 32px; border: 1px solid #ddd; border-radius: 4px; padding: 0 8px; text-align: right; }
  109. /* 购物车 */
  110. .cart-item { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; display: flex; gap: 12px; }
  111. .cart-checkbox { width: 20px; height: 20px; border: 2px solid #1989fa; border-radius: 50%; margin-top: 20px; }
  112. .cart-img { width: 80px; height: 80px; background: #f5f5f5; border-radius: 8px; }
  113. .cart-info { flex: 1; }
  114. .cart-name { font-size: 15px; margin-bottom: 8px; }
  115. .cart-price { color: #ee0a24; font-size: 16px; font-weight: 600; }
  116. .cart-quantity { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
  117. .quantity-btn { width: 28px; height: 28px; border: 1px solid #ddd; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
  118. .quantity-num { font-size: 16px; min-width: 30px; text-align: center; }
  119. .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); }
  120. .cart-total { font-size: 18px; }
  121. .cart-total span { color: #ee0a24; font-weight: 600; }
  122. .cart-settle { background: #1989fa; color: #fff; padding: 12px 32px; border-radius: 24px; border: none; font-size: 15px; }
  123. /* 个人资料 */
  124. .profile-card { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; display: flex; align-items: center; }
  125. .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; }
  126. .profile-info h3 { font-size: 18px; margin-bottom: 4px; }
  127. .profile-info p { font-size: 14px; color: #999; }
  128. /* 上传 */
  129. .upload-box { border: 2px dashed #ddd; border-radius: 8px; padding: 30px; text-align: center; color: #999; cursor: pointer; }
  130. .upload-box:active { border-color: #1989fa; color: #1989fa; }
  131. /* 角色选择 */
  132. .role-select { display: flex; gap: 12px; margin-bottom: 24px; }
  133. .role-option { flex: 1; padding: 16px; border: 2px solid #eee; border-radius: 12px; text-align: center; cursor: pointer; }
  134. .role-option.selected { border-color: #1989fa; background: #e6f7ff; }
  135. .role-option .icon { font-size: 32px; margin-bottom: 8px; }
  136. .role-option .text { font-size: 14px; color: #333; }
  137. </style>
  138. </head>
  139. <body>
  140. <!-- 原型导航 -->
  141. <div class="prototype-nav">
  142. <h4>切换页面</h4>
  143. <a href="#" onclick="showPage('login')" class="active">登录页</a>
  144. <div class="role-label">【供应商端】</div>
  145. <a href="#" onclick="showPage('supplier-home')">供应商-首页</a>
  146. <a href="#" onclick="showPage('supplier-inquiry')">供应商-询价单列表</a>
  147. <a href="#" onclick="showPage('supplier-inquiry-detail')">供应商-询价详情</a>
  148. <a href="#" onclick="showPage('supplier-quotation')">供应商-我的报价</a>
  149. <div class="role-label">【客户端】</div>
  150. <a href="#" onclick="showPage('client-home')">客户-首页</a>
  151. <a href="#" onclick="showPage('client-price')">客户-商品列表</a>
  152. <a href="#" onclick="showPage('client-cart')">客户-购物车</a>
  153. <a href="#" onclick="showPage('client-order')">客户-我的订单</a>
  154. <a href="#" onclick="showPage('client-order-detail')">客户-订单详情</a>
  155. <a href="#" onclick="showPage('client-profile')">客户-个人信息</a>
  156. <div class="role-label">【配送员端】</div>
  157. <a href="#" onclick="showPage('deliver-home')">配送员-首页</a>
  158. <a href="#" onclick="showPage('deliver-task')">配送员-待取货</a>
  159. <a href="#" onclick="showPage('deliver-delivering')">配送员-配送中</a>
  160. <a href="#" onclick="showPage('deliver-task-detail')">配送员-任务详情</a>
  161. </div>
  162. <div class="phone-container">
  163. <!-- 登录页 -->
  164. <div id="login" class="page active">
  165. <div class="login-page" style="border-radius: 40px;">
  166. <div class="login-logo">
  167. <h1>叁强鲜配</h1>
  168. <p>新鲜配送每一天</p>
  169. </div>
  170. <!-- 角色选择演示 -->
  171. <div style="text-align:center;margin-bottom:20px;">
  172. <p style="color:rgba(255,255,255,0.8);font-size:14px;margin-bottom:12px;">选择登录角色演示:</p>
  173. <div class="role-select">
  174. <div class="role-option selected" onclick="selectRole('supplier', this)">
  175. <div class="icon">🏪</div>
  176. <div class="text">供应商</div>
  177. </div>
  178. <div class="role-option" onclick="selectRole('client', this)">
  179. <div class="icon">👤</div>
  180. <div class="text">客户</div>
  181. </div>
  182. <div class="role-option" onclick="selectRole('deliver', this)">
  183. <div class="icon">🚚</div>
  184. <div class="text">配送员</div>
  185. </div>
  186. </div>
  187. </div>
  188. <div class="login-form">
  189. <input type="text" class="login-input" placeholder="请输入用户名" />
  190. <input type="password" class="login-input" placeholder="请输入密码" />
  191. <button class="login-btn" onclick="login()">登 录</button>
  192. </div>
  193. </div>
  194. </div>
  195. <!-- ========== 供应商端 ========== -->
  196. <!-- 供应商-首页 -->
  197. <div id="supplier-home" class="page">
  198. <div class="page-header" style="background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%);">
  199. <h2>供应商中心</h2>
  200. <p>欢迎,张伟(城东区域)</p>
  201. </div>
  202. <div class="stats-row" style="margin-top:-30px;">
  203. <div class="stats-item">
  204. <div class="stats-num" style="color:#ff976a;">2</div>
  205. <div class="stats-label">待报价</div>
  206. </div>
  207. <div class="stats-item">
  208. <div class="stats-num" style="color:#07c160;">5</div>
  209. <div class="stats-label">已报价</div>
  210. </div>
  211. <div class="stats-item">
  212. <div class="stats-num" style="color:#1989fa;">3</div>
  213. <div class="stats-label">待取货</div>
  214. </div>
  215. </div>
  216. <div class="menu-grid">
  217. <div class="menu-card" onclick="showPage('supplier-inquiry')">
  218. <span class="menu-icon">📋</span>
  219. <span class="menu-text">询价单</span>
  220. </div>
  221. <div class="menu-card" onclick="showPage('supplier-quotation')">
  222. <span class="menu-icon">💰</span>
  223. <span class="menu-text">我的报价</span>
  224. </div>
  225. <div class="menu-card">
  226. <span class="menu-icon">🚚</span>
  227. <span class="menu-text">取货任务</span>
  228. </div>
  229. <div class="menu-card">
  230. <span class="menu-icon">📦</span>
  231. <span class="menu-text">基本信息</span>
  232. </div>
  233. </div>
  234. <div class="list-container">
  235. <div class="list-item" onclick="showPage('supplier-inquiry')">
  236. <span class="list-icon">🔔</span>
  237. <div class="list-content">
  238. <div class="list-title">待报价询价单</div>
  239. <div class="list-desc">您有 2 个询价单待报价</div>
  240. </div>
  241. <span class="list-arrow">›</span>
  242. </div>
  243. <div class="list-item">
  244. <span class="list-icon">📄</span>
  245. <div class="list-content">
  246. <div class="list-title">待取货任务</div>
  247. <div class="list-desc">您有 3 个待取货任务</div>
  248. </div>
  249. <span class="list-arrow">›</span>
  250. </div>
  251. </div>
  252. <div style="text-align:center;padding:20px;">
  253. <button class="logout-btn" onclick="showPage('login')">退出登录</button>
  254. </div>
  255. </div>
  256. <!-- 供应商-询价单列表 -->
  257. <div id="supplier-inquiry" class="page">
  258. <div class="page-header" style="background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%);">
  259. <h2>询价单列表</h2>
  260. </div>
  261. <div class="list-container">
  262. <div class="list-item" onclick="showPage('supplier-inquiry-detail')">
  263. <div class="list-content">
  264. <div class="list-title">2026年3月第3周询价单</div>
  265. <div class="list-desc">城东区域 | 发布于 2026-03-17</div>
  266. </div>
  267. <span class="status-tag warning">待报价</span>
  268. </div>
  269. <div class="list-item">
  270. <div class="list-content">
  271. <div class="list-title">2026年3月第2周询价单</div>
  272. <div class="list-desc">城东区域 | 发布于 2026-03-10</div>
  273. </div>
  274. <span class="status-tag success">已报价</span>
  275. </div>
  276. </div>
  277. <div style="text-align:center;padding:20px;">
  278. <button class="logout-btn" onclick="showPage('login')">退出登录</button>
  279. </div>
  280. </div>
  281. <!-- 供应商-询价详情 -->
  282. <div id="supplier-inquiry-detail" class="page">
  283. <div class="page-header" style="background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%);">
  284. <h2>询价单详情</h2>
  285. </div>
  286. <div class="detail-card">
  287. <div class="detail-row">
  288. <span class="detail-label">询价单</span>
  289. <span class="detail-value">2026年3月第3周询价单</span>
  290. </div>
  291. <div class="detail-row">
  292. <span class="detail-label">区域</span>
  293. <span class="detail-value">城东区域</span>
  294. </div>
  295. <div class="detail-row">
  296. <span class="detail-label">发布时间</span>
  297. <span class="detail-value">2026-03-17 10:00</span>
  298. </div>
  299. <div class="detail-row">
  300. <span class="detail-label">截止时间</span>
  301. <span class="detail-value">2026-03-19 18:00</span>
  302. </div>
  303. </div>
  304. <div class="detail-card">
  305. <div style="font-size:15px;font-weight:600;margin-bottom:12px;">询价商品清单</div>
  306. <div class="product-item">
  307. <span class="product-name">新鲜猪肉</span>
  308. <div class="product-action">
  309. <input type="text" class="product-input" placeholder="报价" />
  310. <span>元/斤</span>
  311. </div>
  312. </div>
  313. <div class="product-item">
  314. <span class="product-name">新鲜蔬菜</span>
  315. <div class="product-action">
  316. <input type="text" class="product-input" placeholder="报价" />
  317. <span>元/斤</span>
  318. </div>
  319. </div>
  320. <div class="product-item">
  321. <span class="product-name">新鲜水果</span>
  322. <div class="product-action">
  323. <input type="text" class="product-input" placeholder="报价" />
  324. <span>元/斤</span>
  325. </div>
  326. </div>
  327. </div>
  328. <div style="padding: 20px;">
  329. <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;">提交报价</button>
  330. </div>
  331. <div style="text-align:center;padding-bottom:20px;">
  332. <button class="logout-btn" onclick="showPage('supplier-inquiry')">返回</button>
  333. </div>
  334. </div>
  335. <!-- 供应商-我的报价 -->
  336. <div id="supplier-quotation" class="page">
  337. <div class="page-header" style="background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%);">
  338. <h2>我的报价</h2>
  339. </div>
  340. <div class="list-container">
  341. <div class="list-item">
  342. <div class="list-content">
  343. <div class="list-title">2026年3月第2周询价单</div>
  344. <div class="list-desc">提交时间:2026-03-12 14:30</div>
  345. </div>
  346. <span class="status-tag success">已通过</span>
  347. </div>
  348. <div class="list-item">
  349. <div class="list-content">
  350. <div class="list-title">2026年3月第1周询价单</div>
  351. <div class="list-desc">提交时间:2026-03-05 10:20</div>
  352. </div>
  353. <span class="status-tag success">已通过</span>
  354. </div>
  355. </div>
  356. <div style="text-align:center;padding:20px;">
  357. <button class="logout-btn" onclick="showPage('login')">退出登录</button>
  358. </div>
  359. </div>
  360. <!-- ========== 客户端 ========== -->
  361. <!-- 客户-首页 -->
  362. <div id="client-home" class="page">
  363. <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
  364. <h2>客户中心</h2>
  365. <p>欢迎,李娜(城东区域)</p>
  366. </div>
  367. <div class="price-card" style="margin-top:-30px;">
  368. <div class="price-header">
  369. <span style="font-size:16px;font-weight:600;">今日价格清单</span>
  370. <span class="status-tag success">最新</span>
  371. </div>
  372. <p style="font-size:13px;color:#999;margin-bottom:16px;">版本号:V3 | 生效时间:2026-03-19</p>
  373. <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f6ffed;border-radius:8px;cursor:pointer;" onclick="showPage('client-price')">
  374. <span style="font-size:14px;">查看商品详情</span>
  375. <span style="color:#07c160;">›</span>
  376. </div>
  377. </div>
  378. <div class="menu-grid">
  379. <div class="menu-card" onclick="showPage('client-price')">
  380. <span class="menu-icon">📦</span>
  381. <span class="menu-text">商品列表</span>
  382. </div>
  383. <div class="menu-card" onclick="showPage('client-cart')">
  384. <span class="menu-icon">🛒</span>
  385. <span class="menu-text">购物车</span>
  386. </div>
  387. <div class="menu-card" onclick="showPage('client-order')">
  388. <span class="menu-icon">📄</span>
  389. <span class="menu-text">我的订单</span>
  390. </div>
  391. <div class="menu-card" onclick="showPage('client-profile')">
  392. <span class="menu-icon">👤</span>
  393. <span class="menu-text">个人信息</span>
  394. </div>
  395. </div>
  396. <div style="text-align:center;padding:20px;">
  397. <button class="logout-btn" onclick="showPage('login')">退出登录</button>
  398. </div>
  399. </div>
  400. <!-- 客户-商品列表 -->
  401. <div id="client-price" class="page">
  402. <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
  403. <h2>商品列表</h2>
  404. <p>当前价格版本:V3</p>
  405. </div>
  406. <div class="price-card">
  407. <div class="price-list">
  408. <div class="price-item">
  409. <span class="price-name">新鲜猪肉</span>
  410. <span class="price-value">¥25.00/斤</span>
  411. </div>
  412. <div class="price-item">
  413. <span class="price-name">新鲜蔬菜</span>
  414. <span class="price-value">¥8.00/斤</span>
  415. </div>
  416. <div class="price-item">
  417. <span class="price-name">新鲜水果</span>
  418. <span class="price-value">¥12.00/斤</span>
  419. </div>
  420. <div class="price-item">
  421. <span class="price-name">鸡蛋</span>
  422. <span class="price-value">¥6.00/个</span>
  423. </div>
  424. <div class="price-item">
  425. <span class="price-name">大米</span>
  426. <span class="price-value">¥3.00/斤</span>
  427. </div>
  428. </div>
  429. </div>
  430. <div style="padding:20px;">
  431. <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;" onclick="showPage('client-cart')">加入购物车</button>
  432. </div>
  433. <div style="text-align:center;padding-bottom:20px;">
  434. <button class="logout-btn" onclick="showPage('client-home')">返回</button>
  435. </div>
  436. </div>
  437. <!-- 客户-购物车 -->
  438. <div id="client-cart" class="page">
  439. <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
  440. <h2>购物车</h2>
  441. </div>
  442. <div class="cart-item">
  443. <div class="cart-checkbox"></div>
  444. <div class="cart-img"></div>
  445. <div class="cart-info">
  446. <div class="cart-name">新鲜猪肉</div>
  447. <div class="cart-price">¥25.00/斤</div>
  448. <div class="cart-quantity">
  449. <div class="quantity-btn">-</div>
  450. <div class="quantity-num">10</div>
  451. <div class="quantity-btn">+</div>
  452. </div>
  453. </div>
  454. </div>
  455. <div class="cart-item">
  456. <div class="cart-checkbox"></div>
  457. <div class="cart-img"></div>
  458. <div class="cart-info">
  459. <div class="cart-name">新鲜蔬菜</div>
  460. <div class="cart-price">¥8.00/斤</div>
  461. <div class="cart-quantity">
  462. <div class="quantity-btn">-</div>
  463. <div class="quantity-num">20</div>
  464. <div class="quantity-btn">+</div>
  465. </div>
  466. </div>
  467. </div>
  468. <div class="cart-footer">
  469. <div class="cart-total">合计:<span>¥410.00</span></div>
  470. <button class="cart-settle">去结算</button>
  471. </div>
  472. <div style="text-align:center;padding:20px;">
  473. <button class="logout-btn" onclick="showPage('client-home')">返回</button>
  474. </div>
  475. </div>
  476. <!-- 客户-我的订单 -->
  477. <div id="client-order" class="page">
  478. <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
  479. <h2>我的订单</h2>
  480. </div>
  481. <div class="order-card">
  482. <div class="order-header">
  483. <span class="order-no">ORD202603190001</span>
  484. <span class="status-tag warning">待支付</span>
  485. </div>
  486. <div class="order-shop">XX餐厅</div>
  487. <div class="order-items">新鲜猪肉 x10斤、新鲜蔬菜 x20斤...</div>
  488. <div class="order-footer">
  489. <span class="order-amount">¥710.00</span>
  490. <div class="order-actions">
  491. <button class="action-btn">取消</button>
  492. <button class="action-btn primary">去支付</button>
  493. </div>
  494. </div>
  495. </div>
  496. <div class="order-card">
  497. <div class="order-header">
  498. <span class="order-no">ORD202603180056</span>
  499. <span class="status-tag primary">待确认收货</span>
  500. </div>
  501. <div class="order-shop">XX餐厅</div>
  502. <div class="order-items">新鲜猪肉 x10斤、新鲜蔬菜 x20斤...</div>
  503. <div class="order-footer">
  504. <span class="order-amount">¥710.00</span>
  505. <div class="order-actions">
  506. <button class="action-btn primary" onclick="showPage('client-order-detail')">确认收货</button>
  507. </div>
  508. </div>
  509. </div>
  510. <div class="order-card">
  511. <div class="order-header">
  512. <span class="order-no">ORD202603150023</span>
  513. <span class="status-tag success">已完成</span>
  514. </div>
  515. <div class="order-shop">XX餐厅</div>
  516. <div class="order-items">新鲜猪肉 x10斤、新鲜蔬菜 x20斤...</div>
  517. <div class="order-footer">
  518. <span class="order-amount">¥560.00</span>
  519. <div class="order-actions">
  520. <button class="action-btn">再次购买</button>
  521. </div>
  522. </div>
  523. </div>
  524. <div style="text-align:center;padding:20px;">
  525. <button class="logout-btn" onclick="showPage('login')">退出登录</button>
  526. </div>
  527. </div>
  528. <!-- 客户-订单详情 -->
  529. <div id="client-order-detail" class="page">
  530. <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
  531. <h2>订单详情</h2>
  532. </div>
  533. <div class="detail-card">
  534. <div class="detail-row">
  535. <span class="detail-label">订单编号</span>
  536. <span class="detail-value">ORD202603180056</span>
  537. </div>
  538. <div class="detail-row">
  539. <span class="detail-label">订单状态</span>
  540. <span class="detail-value"><span class="status-tag primary">待确认收货</span></span>
  541. </div>
  542. <div class="detail-row">
  543. <span class="detail-label">下单时间</span>
  544. <span class="detail-value">2026-03-18 16:45:30</span>
  545. </div>
  546. </div>
  547. <div class="detail-card">
  548. <div class="detail-row">
  549. <span class="detail-label">联系人</span>
  550. <span class="detail-value">张三</span>
  551. </div>
  552. <div class="detail-row">
  553. <span class="detail-label">联系电话</span>
  554. <span class="detail-value">13800138001</span>
  555. </div>
  556. <div class="detail-row">
  557. <span class="detail-label">配送地址</span>
  558. <span class="detail-value">城东区XX路XX号</span>
  559. </div>
  560. </div>
  561. <div class="detail-card">
  562. <div style="font-size:15px;font-weight:600;margin-bottom:12px;">商品明细</div>
  563. <div class="detail-row">
  564. <span class="detail-label">新鲜猪肉 x 10斤</span>
  565. <span class="detail-value">¥250.00</span>
  566. </div>
  567. <div class="detail-row">
  568. <span class="detail-label">新鲜蔬菜 x 20斤</span>
  569. <span class="detail-value">¥160.00</span>
  570. </div>
  571. <div class="detail-row" style="border-top:1px solid #eee;padding-top:12px;margin-top:12px;">
  572. <span class="detail-label" style="font-weight:600;">订单金额</span>
  573. <span class="detail-value" style="color:#ee0a24;font-weight:600;">¥410.00</span>
  574. </div>
  575. </div>
  576. <div style="padding: 20px;display:flex;gap:12px;">
  577. <button class="action-btn" style="flex:1;">申请退款</button>
  578. <button class="action-btn primary" style="flex:1;">确认收货</button>
  579. </div>
  580. <div style="text-align:center;padding-bottom:20px;">
  581. <button class="logout-btn" onclick="showPage('client-order')">返回</button>
  582. </div>
  583. </div>
  584. <!-- 客户-个人信息 -->
  585. <div id="client-profile" class="page">
  586. <div class="page-header" style="background: linear-gradient(135deg, #07c160 0%, #1989fa 100%);">
  587. <h2>个人信息</h2>
  588. </div>
  589. <div class="profile-card">
  590. <div class="profile-avatar">李</div>
  591. <div class="profile-info">
  592. <h3>李娜</h3>
  593. <p>客户 | 城东区域</p>
  594. </div>
  595. </div>
  596. <div class="list-container">
  597. <div class="list-item">
  598. <div class="list-content">
  599. <div class="list-title">手机号</div>
  600. <div class="list-desc">13800138002</div>
  601. </div>
  602. </div>
  603. <div class="list-item">
  604. <div class="list-content">
  605. <div class="list-title">店铺名称</div>
  606. <div class="list-desc">XX餐厅</div>
  607. </div>
  608. </div>
  609. <div class="list-item">
  610. <div class="list-content">
  611. <div class="list-title">配送地址</div>
  612. <div class="list-desc">城东区XX路XX号</div>
  613. </div>
  614. </div>
  615. <div class="list-item">
  616. <div class="list-content">
  617. <div class="list-title">修改密码</div>
  618. </div>
  619. <span class="list-arrow">›</span>
  620. </div>
  621. </div>
  622. <div style="text-align:center;padding:20px;">
  623. <button class="logout-btn" onclick="showPage('login')">退出登录</button>
  624. </div>
  625. </div>
  626. <!-- ========== 配送员端 ========== -->
  627. <!-- 配送员-首页 -->
  628. <div id="deliver-home" class="page">
  629. <div class="page-header" style="background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%);">
  630. <h2>配送员中心</h2>
  631. <p>欢迎,王强(城东区域)</p>
  632. </div>
  633. <div class="task-card" style="margin-top:-30px;">
  634. <div style="display:flex;justify-content:space-around;text-align:center;">
  635. <div>
  636. <div style="font-size:28px;font-weight:600;color:#1989fa;">3</div>
  637. <div style="font-size:13px;color:#999;margin-top:4px;">待取货</div>
  638. </div>
  639. <div>
  640. <div style="font-size:28px;font-weight:600;color:#ff976a;">5</div>
  641. <div style="font-size:13px;color:#999;margin-top:4px;">配送中</div>
  642. </div>
  643. <div>
  644. <div style="font-size:28px;font-weight:600;color:#07c160;">28</div>
  645. <div style="font-size:13px;color:#999;margin-top:4px;">已完成</div>
  646. </div>
  647. </div>
  648. </div>
  649. <div class="menu-grid">
  650. <div class="menu-card" onclick="showPage('deliver-task')">
  651. <span class="menu-icon">📋</span>
  652. <span class="menu-text">待取货</span>
  653. </div>
  654. <div class="menu-card" onclick="showPage('deliver-delivering')">
  655. <span class="menu-icon">🚚</span>
  656. <span class="menu-text">配送中</span>
  657. </div>
  658. <div class="menu-card">
  659. <span class="menu-icon">📄</span>
  660. <span class="menu-text">历史任务</span>
  661. </div>
  662. <div class="menu-card">
  663. <span class="menu-icon">👤</span>
  664. <span class="menu-text">个人信息</span>
  665. </div>
  666. </div>
  667. <div style="text-align:center;padding:20px;">
  668. <button class="logout-btn" onclick="showPage('login')">退出登录</button>
  669. </div>
  670. </div>
  671. <!-- 配送员-待取货 -->
  672. <div id="deliver-task" class="page">
  673. <div class="page-header" style="background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%);">
  674. <h2>待取货任务</h2>
  675. </div>
  676. <div class="task-card">
  677. <div class="task-header">
  678. <span class="task-no">DLV20260319001</span>
  679. <span class="status-tag warning">待取货</span>
  680. </div>
  681. <div class="task-info">
  682. <div class="task-row">
  683. <span class="icon">🏪</span>
  684. <span>供应商:XX供应商</span>
  685. </div>
  686. <div class="task-row">
  687. <span class="icon">📍</span>
  688. <span>取货地址:城东区XX路XX号</span>
  689. </div>
  690. <div class="task-row">
  691. <span class="icon">🏠</span>
  692. <span>送货地址:城东区YY路YY号</span>
  693. </div>
  694. </div>
  695. <div style="display:flex;gap:12px;">
  696. <button class="action-btn" style="flex:1;" onclick="showPage('deliver-task-detail')">查看详情</button>
  697. <button class="action-btn primary" style="flex:1;">确认取货</button>
  698. </div>
  699. </div>
  700. <div class="task-card">
  701. <div class="task-header">
  702. <span class="task-no">DLV20260319002</span>
  703. <span class="status-tag warning">待取货</span>
  704. </div>
  705. <div class="task-info">
  706. <div class="task-row">
  707. <span class="icon">🏪</span>
  708. <span>供应商:YY供应商</span>
  709. </div>
  710. <div class="task-row">
  711. <span class="icon">📍</span>
  712. <span>取货地址:城西区XX路XX号</span>
  713. </div>
  714. </div>
  715. <div style="display:flex;gap:12px;">
  716. <button class="action-btn" style="flex:1;">查看详情</button>
  717. <button class="action-btn primary" style="flex:1;">确认取货</button>
  718. </div>
  719. </div>
  720. <div style="text-align:center;padding:20px;">
  721. <button class="logout-btn" onclick="showPage('deliver-home')">返回</button>
  722. </div>
  723. </div>
  724. <!-- 配送员-配送中 -->
  725. <div id="deliver-delivering" class="page">
  726. <div class="page-header" style="background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%);">
  727. <h2>配送中任务</h2>
  728. </div>
  729. <div class="task-card">
  730. <div class="task-header">
  731. <span class="task-no">DLV20260318056</span>
  732. <span class="status-tag primary">配送中</span>
  733. </div>
  734. <div class="task-info">
  735. <div class="task-row">
  736. <span class="icon">🏪</span>
  737. <span>供应商:XX供应商</span>
  738. </div>
  739. <div class="task-row">
  740. <span class="icon">🏠</span>
  741. <span>送货地址:城东区YY路YY号</span>
  742. </div>
  743. <div class="task-row">
  744. <span class="icon">👤</span>
  745. <span>客户:XX餐厅 | 13800138001</span>
  746. </div>
  747. </div>
  748. <div style="display:flex;gap:12px;">
  749. <button class="action-btn" style="flex:1;">查看详情</button>
  750. <button class="action-btn primary" style="flex:1;">确认送达</button>
  751. </div>
  752. </div>
  753. <div style="text-align:center;padding:20px;">
  754. <button class="logout-btn" onclick="showPage('deliver-home')">返回</button>
  755. </div>
  756. </div>
  757. <!-- 配送员-任务详情 -->
  758. <div id="deliver-task-detail" class="page">
  759. <div class="page-header" style="background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%);">
  760. <h2>任务详情</h2>
  761. </div>
  762. <div class="detail-card">
  763. <div class="detail-row">
  764. <span class="detail-label">配送单号</span>
  765. <span class="detail-value">DLV20260319001</span>
  766. </div>
  767. <div class="detail-row">
  768. <span class="detail-label">任务状态</span>
  769. <span class="detail-value"><span class="status-tag warning">待取货</span></span>
  770. </div>
  771. <div class="detail-row">
  772. <span class="detail-label">订单编号</span>
  773. <span class="detail-value">ORD202603190001</span>
  774. </div>
  775. </div>
  776. <div class="detail-card">
  777. <div style="font-size:15px;font-weight:600;margin-bottom:12px;">取货信息</div>
  778. <div class="detail-row">
  779. <span class="detail-label">供应商</span>
  780. <span class="detail-value">XX供应商</span>
  781. </div>
  782. <div class="detail-row">
  783. <span class="detail-label">取货地址</span>
  784. <span class="detail-value">城东区XX路XX号</span>
  785. </div>
  786. <div class="detail-row">
  787. <span class="detail-label">联系人</span>
  788. <span class="detail-value">张老板 | 13900001111</span>
  789. </div>
  790. </div>
  791. <div class="detail-card">
  792. <div style="font-size:15px;font-weight:600;margin-bottom:12px;">送货信息</div>
  793. <div class="detail-row">
  794. <span class="detail-label">客户</span>
  795. <span class="detail-value">XX餐厅</span>
  796. </div>
  797. <div class="detail-row">
  798. <span class="detail-label">送货地址</span>
  799. <span class="detail-value">城东区YY路YY号</span>
  800. </div>
  801. <div class="detail-row">
  802. <span class="detail-label">联系人</span>
  803. <span class="detail-value">李女士 | 13800138002</span>
  804. </div>
  805. </div>
  806. <div class="detail-card">
  807. <div style="font-size:15px;font-weight:600;margin-bottom:12px;">商品明细</div>
  808. <div class="detail-row">
  809. <span class="detail-label">新鲜猪肉</span>
  810. <span class="detail-value">10斤</span>
  811. </div>
  812. <div class="detail-row">
  813. <span class="detail-label">新鲜蔬菜</span>
  814. <span class="detail-value">20斤</span>
  815. </div>
  816. </div>
  817. <div class="form-container">
  818. <div class="form-item">
  819. <label class="form-label">取货备注</label>
  820. <input type="text" class="form-input" placeholder="请输入备注(选填)" />
  821. </div>
  822. <div class="form-item">
  823. <label class="form-label">取货凭证</label>
  824. <div class="upload-box">点击上传图片</div>
  825. </div>
  826. </div>
  827. <div style="padding: 20px;">
  828. <button class="action-btn primary" style="width:100%;height:44px;border-radius:22px;">确认取货</button>
  829. </div>
  830. <div style="text-align:center;padding-bottom:20px;">
  831. <button class="logout-btn" onclick="showPage('deliver-task')">返回</button>
  832. </div>
  833. </div>
  834. </div>
  835. <script>
  836. let currentRole = 'supplier';
  837. function selectRole(role, element) {
  838. currentRole = role;
  839. document.querySelectorAll('.role-option').forEach(el => el.classList.remove('selected'));
  840. element.classList.add('selected');
  841. }
  842. function login() {
  843. showPage(currentRole + '-home');
  844. }
  845. function showPage(pageId) {
  846. document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  847. document.getElementById(pageId).classList.add('active');
  848. document.querySelectorAll('.prototype-nav a').forEach(a => a.classList.remove('active'));
  849. event.target.classList.add('active');
  850. }
  851. </script>
  852. </body>
  853. </html>