yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 小票双版本重构为临时用户版与会员用户版，样式统一

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
zhangyan
2026-08-07 11:50:48 +08:00
co-authored by Claude Opus 4.6
parent 7187a9cfd7
commit 56d5aa29ba
2 changed files with 84 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
other-module/canteen-device/checkout-device/09-receipt-preview.html
+72 -40
View File
@@ -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 += '<tr>'
+ '<td>' + it.name + '</td>'
+ '<td>' + (isV2 ? '¥' : '') + it.price.toFixed(2) + '</td>'
+ '<td>' + it.weight + (isV2 ? 'g' : '') + '</td>'
+ '<td>' + (isV2 ? '¥' : '') + subtotal.toFixed(2) + '</td>'
+ '<td>' + it.price.toFixed(2) + '</td>'
+ '<td>' + it.weight + '</td>'
+ '<td>' + subtotal.toFixed(2) + '</td>'
+ '</tr>';
});
});
@@ -501,12 +530,12 @@
/* 构建完整小票纸张HTML */
function buildReceiptPaper(isV2) {
var itemsHtml = buildItemsHtml(isV2);
var itemsHtml = buildItemsHtml();
var discountRow = order.discount > 0
? '<div class="receipt-row"><span class="receipt-row__label">优惠</span><span class="receipt-row__value">-¥' + order.discount.toFixed(2) + '</span></div>'
: '';
/* 营养得分: 82分统一显示为"继续努力" */
var scoreText = order.nutrition.score === 82 ? '继续努力' : order.nutrition.score;
/* 营养得分: 82分显示"加油，继续努力！" */
var scoreText = order.nutrition.score === 82 ? '加油，继续努力！' : order.nutrition.score;
return ''
+ '<div class="receipt-paper">'
@@ -527,8 +556,8 @@
+ '</div>'
+ '<div class="receipt-divider"></div>'
/* 消费明细表 */
+ '<table class="receipt-table">'
+ '<thead><tr><th>餐品</th><th>单价/100g' + (isV2 ? '' : '(元)') + '</th><th>取用量(g)</th><th>小计</th></tr></thead>'
+ '<table class="receipt-table receipt-table--v1">'
+ '<thead><tr><th>餐品</th><th>单价/100g<br>(元)</th><th>取用量<br>(g)</th><th>小计<br>(元)</th></tr></thead>'
+ '<tbody>' + itemsHtml + '</tbody>'
+ '</table>'
+ '<div class="receipt-divider"></div>'
@@ -550,17 +579,20 @@
: '')
+ '</div>'
+ '<div class="receipt-divider"></div>'
/* 营养摄入摘要 */
+ '<div class="receipt-nutrition-title">- - - ' + (isV2 ? '营养素摄入量 / 餐' : '营养摄入摘要') + ' - - -</div>'
+ '<div class="receipt-nutrition-grid">'
+ '<div class="nutrition-item"><div class="nutrition-item__label">热量</div><div class="nutrition-item__value">' + order.nutrition.calories + '<small>kcal</small></div></div>'
+ '<div class="nutrition-item"><div class="nutrition-item__label">蛋白质</div><div class="nutrition-item__value">' + order.nutrition.protein + '<small>g</small></div></div>'
+ '<div class="nutrition-item"><div class="nutrition-item__label">脂肪</div><div class="nutrition-item__value">' + order.nutrition.fat + '<small>g</small></div></div>'
+ '<div class="nutrition-item"><div class="nutrition-item__label">碳水</div><div class="nutrition-item__value">' + order.nutrition.carb + '<small>g</small></div></div>'
+ '</div>'
/* 营养成分表 */
+ '<div class="receipt-nutrition-title">- - - 营养成分表 - - -</div>'
+ '<table class="receipt-nutrition-table">'
+ '<thead><tr><th>项目</th><th>本餐</th><th>' + (isV2 ? '个人<br>营养素参考值%' : '营养素参考值%') + '</th></tr></thead>'
+ '<tbody>'
+ '<tr><td>热量</td><td>' + order.nutrition.calories + '<small>kcal</small></td><td>' + order.nutrition.nrv.calories + '%</td></tr>'
+ '<tr><td>蛋白质</td><td>' + order.nutrition.protein + '<small>g</small></td><td>' + order.nutrition.nrv.protein + '%</td></tr>'
+ '<tr><td>脂肪</td><td>' + order.nutrition.fat + '<small>g</small></td><td>' + order.nutrition.nrv.fat + '%</td></tr>'
+ '<tr><td>碳水</td><td>' + order.nutrition.carb + '<small>g</small></td><td>' + order.nutrition.nrv.carb + '%</td></tr>'
+ '</tbody>'
+ '</table>'
+ '<div class="receipt-score">'
+ '<span class="receipt-score__label">营养得分</span>'
+ '<span class="receipt-score__value' + (scoreText === '继续努力' ? ' receipt-score__value--text' : '') + '">' + scoreText + '</span>'
+ '<span class="receipt-score__value' + (typeof scoreText === 'string' ? ' receipt-score__value--text' : '') + '">' + scoreText + '</span>'
+ '</div>'
+ '<div class="receipt-divider"></div>'
/* 二维码 */
@@ -589,11 +621,11 @@
var html = ''
+ '<div class="receipt-compare">'
+ '<div class="receipt-compare__col">'
+ '<div class="receipt-compare__label">版本一（价格不含¥ · 重量不含g）</div>'
+ '<div class="receipt-compare__label">临时用户版</div>'
+ buildReceiptPaper(false)
+ '</div>'
+ '<div class="receipt-compare__col">'
+ '<div class="receipt-compare__label">版本二（价格含¥ · 重量含g）</div>'
+ '<div class="receipt-compare__label">会员用户版</div>'
+ buildReceiptPaper(true)
+ '</div>'
+ '</div>';
other-module/canteen-device/checkout-device/doc/CHANGELOG.md
+12
View File
@@ -17,6 +17,18 @@
- `05-orders.html` 订单列表「打印」操作按钮
- `06-order-detail.html` 订单详情「重新打印小票」按钮
## 2026-08-07 | 小票双版本重构：临时用户版 vs 会员用户版
### 变更
- `09-receipt-preview.html` 双版本重构
- 版本一 → **临时用户版**，版本二 → **会员用户版**
- 两版样式完全统一，仅标签和 NRV% 表头不同（会员用户版显示"个人<br>营养素参考值%"）
- 餐厅名称改为"数味健康餐厅"
- 消费明细表头改双行：单价/100g(元)、取用量(g)、小计(元) 单位换行居中
- 营养区改为三列表格（项目/本餐/营养素参考值%），含 NRV 数据
- 营养标题改为"营养成分表"，得分改为"加油，继续努力！"
- 全局字号统一为两种：餐厅名称 14px，其余 11px
## 2026-08-05 | 小票双版本对比展示与格式优化
### 变更