diff --git a/other-module/canteen-device/checkout-device/09-receipt-preview.html b/other-module/canteen-device/checkout-device/09-receipt-preview.html index b3ec17e..56f7c9a 100644 --- a/other-module/canteen-device/checkout-device/09-receipt-preview.html +++ b/other-module/canteen-device/checkout-device/09-receipt-preview.html @@ -142,7 +142,6 @@ font-family: -apple-system, "Microsoft YaHei", sans-serif; } .receipt-sub { - font-size: 10px; color: #666; line-height: 1.5; } @@ -164,7 +163,6 @@ display: flex; justify-content: space-between; align-items: baseline; - font-size: 11px; } .receipt-row__label { color: #666; } .receipt-row__value { color: #1a1a2e; font-weight: 600; } @@ -173,7 +171,6 @@ .receipt-table { width: 100%; border-collapse: collapse; - font-size: 11px; font-family: Menlo, Consolas, monospace; } .receipt-table th { @@ -186,6 +183,10 @@ .receipt-table th:nth-child(2), .receipt-table th:nth-child(3), .receipt-table th:nth-child(4) { text-align: right; } + /* 版本一:固定列宽对齐 */ + .receipt-table--v1 { + table-layout: fixed; + } .receipt-table td { padding: 3px 0; color: #1a1a2e; @@ -196,7 +197,6 @@ .receipt-table td:nth-child(4) { text-align: right; } .receipt-table td:nth-child(2) { color: #666; } .receipt-zone-header td { - font-size: 11px; font-weight: 600; color: #333; padding: 6px 0 2px; @@ -211,12 +211,10 @@ gap: 3px; } .receipt-amount__payable { - font-size: 13px; font-weight: 700; color: #1a1a2e; } .receipt-amount__paid { - font-size: 12px; font-weight: 600; color: #1a1a2e; } @@ -224,7 +222,6 @@ /* 营养摄入摘要 */ .receipt-nutrition-title { text-align: center; - font-size: 10px; color: #666; margin-bottom: 6px; } @@ -234,6 +231,48 @@ gap: 4px; margin-bottom: 6px; } + .receipt-nutrition-grid--2col { + grid-template-columns: repeat(2, 1fr); + } + /* 营养摘要三列表格(版本一:项目/每100克/NRV%) */ + .receipt-nutrition-table { + width: 100%; + border-collapse: collapse; + margin-bottom: 6px; + } + .receipt-nutrition-table th { + font-weight: 600; + color: #666; + padding: 3px 2px; + border-bottom: 1px solid #999; + text-align: center; + white-space: nowrap; + } + .receipt-nutrition-table th:first-child { + text-align: left; + } + .receipt-nutrition-table th:last-child { + text-align: right; + } + .receipt-nutrition-table td { + padding: 3px 2px; + color: #1a1a2e; + text-align: center; + font-weight: 600; + } + .receipt-nutrition-table td:first-child { + text-align: left; + color: #666; + font-weight: 400; + } + .receipt-nutrition-table td:last-child { + text-align: right; + } + .receipt-nutrition-table td small { + font-weight: 400; + color: #999; + margin-left: 1px; + } .nutrition-item { text-align: center; padding: 4px 2px; @@ -241,17 +280,14 @@ border-radius: 3px; } .nutrition-item__label { - font-size: 9px; color: #999; margin-bottom: 2px; } .nutrition-item__value { - font-size: 12px; font-weight: 700; color: #1a1a2e; } .nutrition-item__value small { - font-size: 9px; font-weight: 400; color: #999; margin-left: 1px; @@ -266,17 +302,14 @@ border: 1px solid #ddd; } .receipt-score__label { - font-size: 10px; color: #333; font-weight: 600; } .receipt-score__value { - font-size: 16px; font-weight: 700; color: #1a1a2e; } .receipt-score__value--text { - font-size: 12px; } /* 双二维码并排 */ @@ -298,13 +331,11 @@ height: 72px; } .receipt-qr--dual .receipt-qr__text { - font-size: 9px; color: #666; text-align: center; font-weight: 600; } .receipt-qr--dual .receipt-qr__sub { - font-size: 8px; color: #999; text-align: center; line-height: 1.3; @@ -316,14 +347,12 @@ padding: 4px 0; } .receipt-footer__line1 { - font-size: 11px; font-weight: 600; color: #1a1a2e; margin-bottom: 2px; font-family: -apple-system, "Microsoft YaHei", sans-serif; } .receipt-footer__line2 { - font-size: 10px; color: #999; } @@ -453,13 +482,13 @@ ], total: 35.50, discount: 3.00, payable: 32.50, paid: 32.50, payType: '会员支付', payMethod: '人脸支付', balance: 1280.50, - nutrition: { calories: 685, protein: 28, fat: 18, carb: 95, score: 82 }, + nutrition: { calories: 685, protein: 28, fat: 18, carb: 95, score: 82, nrv: { calories: 34, protein: 47, fat: 30, carb: 32 } }, printed: true }; /* 食堂抬头 */ var canteenInfo = { - name: '数味餐厅', + name: '数味健康餐厅', address: '陕西省西安市浐灞生态区欧亚大道3639号', phone: '023-7788-XXXX' }; @@ -476,8 +505,8 @@ zones[it.zone].push(it); }); - /* 构建商品行HTML - 版本一:价格不含¥,重量不含g; 版本二:价格含¥,重量含g */ - function buildItemsHtml(isV2) { + /* 构建商品行HTML */ + function buildItemsHtml() { var html = ''; zoneOrder.forEach(function(zoneName) { var zoneItems = zones[zoneName]; @@ -490,9 +519,9 @@ var subtotal = it.weight / 100 * it.price; html += '' + '' + it.name + '' - + '' + (isV2 ? '¥' : '') + it.price.toFixed(2) + '' - + '' + it.weight + (isV2 ? 'g' : '') + '' - + '' + (isV2 ? '¥' : '') + subtotal.toFixed(2) + '' + + '' + it.price.toFixed(2) + '' + + '' + it.weight + '' + + '' + subtotal.toFixed(2) + '' + ''; }); }); @@ -501,12 +530,12 @@ /* 构建完整小票纸张HTML */ function buildReceiptPaper(isV2) { - var itemsHtml = buildItemsHtml(isV2); + var itemsHtml = buildItemsHtml(); var discountRow = order.discount > 0 ? '
优惠-¥' + order.discount.toFixed(2) + '
' : ''; - /* 营养得分: 82分统一显示为"继续努力" */ - var scoreText = order.nutrition.score === 82 ? '继续努力' : order.nutrition.score; + /* 营养得分: 82分显示"加油,继续努力!" */ + var scoreText = order.nutrition.score === 82 ? '加油,继续努力!' : order.nutrition.score; return '' + '
' @@ -527,8 +556,8 @@ + '
' + '
' /* 消费明细表 */ - + '' - + '' + + '
餐品单价/100g' + (isV2 ? '' : '(元)') + '取用量(g)小计
' + + '' + '' + itemsHtml + '' + '
餐品单价/100g
(元)
取用量
(g)
小计
(元)
' + '
' @@ -550,17 +579,20 @@ : '') + '' + '
' - /* 营养摄入摘要 */ - + '
- - - ' + (isV2 ? '营养素摄入量 / 餐' : '营养摄入摘要') + ' - - -
' - + '
' - + '
热量
' + order.nutrition.calories + 'kcal
' - + '
蛋白质
' + order.nutrition.protein + 'g
' - + '
脂肪
' + order.nutrition.fat + 'g
' - + '
碳水
' + order.nutrition.carb + 'g
' - + '
' + /* 营养成分表 */ + + '
- - - 营养成分表 - - -
' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '
项目本餐' + (isV2 ? '个人
营养素参考值%' : '营养素参考值%') + '
热量' + order.nutrition.calories + 'kcal' + order.nutrition.nrv.calories + '%
蛋白质' + order.nutrition.protein + 'g' + order.nutrition.nrv.protein + '%
脂肪' + order.nutrition.fat + 'g' + order.nutrition.nrv.fat + '%
碳水' + order.nutrition.carb + 'g' + order.nutrition.nrv.carb + '%
' + '
' + '营养得分' - + '' + scoreText + '' + + '' + scoreText + '' + '
' + '
' /* 二维码 */ @@ -589,11 +621,11 @@ var html = '' + '
' + '
' - + '
版本一(价格不含¥ · 重量不含g)
' + + '
临时用户版
' + buildReceiptPaper(false) + '
' + '
' - + '
版本二(价格含¥ · 重量含g)
' + + '
会员用户版
' + buildReceiptPaper(true) + '
' + '
'; diff --git a/other-module/canteen-device/checkout-device/doc/CHANGELOG.md b/other-module/canteen-device/checkout-device/doc/CHANGELOG.md index 5b5c386..b3baa81 100644 --- a/other-module/canteen-device/checkout-device/doc/CHANGELOG.md +++ b/other-module/canteen-device/checkout-device/doc/CHANGELOG.md @@ -17,6 +17,18 @@ - `05-orders.html` 订单列表「打印」操作按钮 - `06-order-detail.html` 订单详情「重新打印小票」按钮 +## 2026-08-07 | 小票双版本重构:临时用户版 vs 会员用户版 + +### 变更 +- `09-receipt-preview.html` 双版本重构 + - 版本一 → **临时用户版**,版本二 → **会员用户版** + - 两版样式完全统一,仅标签和 NRV% 表头不同(会员用户版显示"个人
营养素参考值%") + - 餐厅名称改为"数味健康餐厅" + - 消费明细表头改双行:单价/100g(元)、取用量(g)、小计(元) 单位换行居中 + - 营养区改为三列表格(项目/本餐/营养素参考值%),含 NRV 数据 + - 营养标题改为"营养成分表",得分改为"加油,继续努力!" + - 全局字号统一为两种:餐厅名称 14px,其余 11px + ## 2026-08-05 | 小票双版本对比展示与格式优化 ### 变更