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

refactor: 收银台原型调整 — 副屏删除支付引导页 + 收银员屏「打印小票」改为「小票预览」

Browse Source 
- 删除 user-03-paying.html(副屏支付引导页,产品确认不再需要)
- 重命名 user-04-success.html → user-03-success.html,序号顺延
- 重命名 09-print-receipt.html → 09-receipt-preview.html,页面标题统一改为「小票预览」
- 同步更新 index.html 导航卡片及 02/04/05/06 各页跳转引用

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
fengpu
2026-08-07 08:39:23 +08:00
co-authored by Claude Opus 4.7
parent 51661ab127
commit 7187a9cfd7
9 changed files with 26 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files
other-module/canteen-device/checkout-device/02-standby.html
+1 -1
View File
@@ -448,7 +448,7 @@
<div class="entry-card__desc">今日数据可视化</div>
</div>
</a>
<a class="entry-card" href="09-print-receipt.html">
<a class="entry-card" href="09-receipt-preview.html">
<div class="entry-card__icon entry-card__icon--gold">&#x1F5A8;&#xFE0F;</div>
<div class="entry-card__text">
<div class="entry-card__title">小票打印</div>
other-module/canteen-device/checkout-device/04-pay-success.html
+1 -1
View File
@@ -385,7 +385,7 @@
<a class="btn btn--primary" href="02-standby.html" style="grid-column:1 / -1;">
&#x1F6CD;&#xFE0F; 开始下一单
</a>
<a class="btn btn--gold" href="09-print-receipt.html">
<a class="btn btn--gold" href="09-receipt-preview.html">
&#x1F5A8;&#xFE0F; 重打小票
</a>
<a class="btn btn--ghost" href="06-order-detail.html">
other-module/canteen-device/checkout-device/05-orders.html
+1 -1
View File
@@ -559,7 +559,7 @@
var actions = o.status === 'refunded'
? '<a class="action-btn" href="' + detailHref + '">详情</a>'
: '<a class="action-btn" href="' + detailHref + '">详情</a>'
+ '<a class="action-btn action-btn--gold" href="09-print-receipt.html?id=' + o.id + '">打印</a>'
+ '<a class="action-btn action-btn--gold" href="09-receipt-preview.html?id=' + o.id + '">打印</a>'
+ '<a class="action-btn action-btn--danger" href="' + refundHref + '">去退款</a>';
return '<div class="order-row' + refundedClass + '" onclick="window.location.href=\'' + detailHref + '\'">'
other-module/canteen-device/checkout-device/06-order-detail.html
+1 -1
View File
@@ -697,7 +697,7 @@
<div id="normalActions">
<div class="card__title" style="font-size:12px;color:rgba(255,255,255,0.55);letter-spacing:1px;margin-bottom:10px;">订单操作</div>
<div class="btn-group">
<button class="btn btn--gold" onclick="window.location.href='09-print-receipt.html'">
<button class="btn btn--gold" onclick="window.location.href='09-receipt-preview.html'">
&#x1F5A8;&#xFE0F; 重新打印小票
</button>
<button class="btn btn--ghost" onclick="alert('已发起补齐明细流程')">
other-module/canteen-device/checkout-device/09-print-receipt.html → other-module/canteen-device/checkout-device/09-receipt-preview.html
+2 -2
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, initial-scale=1.0">
<title>结算设备 - 打印小票预览 | 蚁熊智能餐养平台</title>
<title>结算设备 - 小票预览 | 蚁熊智能餐养平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 外层视口:全屏深色背景,承载居中 PAD 外壳 */
@@ -413,7 +413,7 @@
<!-- 顶部导航 -->
<div class="top-bar">
<a class="back-btn" href="index.html">&#x25C0; 返回主页</a>
<span class="top-bar__title">打印小票预览</span>
<span class="top-bar__title">小票预览</span>
<span class="top-bar__meta" id="topMeta">2026-08-03</span>
</div>
other-module/canteen-device/checkout-device/doc/CHANGELOG.md
+17
View File
@@ -1,5 +1,22 @@
# 结算设备 CHANGELOG
## 2026-08-07 | 副屏支付引导删除 + 收银员屏小票预览改名
### 变更
- 删除 `user-03-paying.html`(用户屏 U03「支付引导」页面,产品确认不再需要)
- 重命名 `user-04-success.html` → `user-03-success.html`,序号顺延为 U03
- 重命名 `09-print-receipt.html` → `09-receipt-preview.html`,菜单/页面标题统一改为「小票预览」
- `<title>` 与顶栏标题"打印小票预览"统一改为"小票预览"
- 底部按钮"打印小票"文案保留(属于点击触发的实际动作语义)
- `index.html` 导航页同步更新
- 用户屏区:删除 U03 支付引导卡片,U04 支付成功顺延为 U03
- 收银员屏区:09 卡片标题改为「小票预览」,链接指向新文件名
- 同步更新其他页面对 `09-print-receipt.html` 的跳转引用
- `02-standby.html` 待机页入口卡片
- `04-pay-success.html` 支付成功页「重打小票」按钮
- `05-orders.html` 订单列表「打印」操作按钮
- `06-order-detail.html` 订单详情「重新打印小票」按钮
## 2026-08-05 | 小票双版本对比展示与格式优化
### 变更
other-module/canteen-device/checkout-device/index.html
+3 -11
View File
@@ -217,16 +217,8 @@
<div class="card__desc">同步商品列表 + 营养摘要</div>
</div>
</a>
<a class="card" href="user-03-paying.html">
<a class="card" href="user-03-success.html">
<span class="card__status card__status--done">U03</span>
<div class="card__icon">&#x1F4F1;</div>
<div class="card__body">
<div class="card__title">支付引导</div>
<div class="card__desc">4 种支付方式引导切换</div>
</div>
</a>
<a class="card" href="user-04-success.html">
<span class="card__status card__status--done">U04</span>
<div class="card__icon">&#x2705;</div>
<div class="card__body">
<div class="card__title">支付成功</div>
@@ -311,11 +303,11 @@
<div class="card__desc">漏记添加 / 多记删除</div>
</div>
</a>
<a class="card" href="09-print-receipt.html">
<a class="card" href="09-receipt-preview.html">
<span class="card__status card__status--done">09</span>
<div class="card__icon">&#x1F5A8;&#xFE0F;</div>
<div class="card__body">
<div class="card__title">打印小票</div>
<div class="card__title">小票预览</div>
<div class="card__desc">餐后小票预览与打印</div>
</div>
</a>
other-module/canteen-device/checkout-device/user-03-paying.html
-210
View File
@@ -1,210 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, initial-scale=1.0">
<title>用户屏 - 支付引导 | 蚁熊智能餐养平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
background: #05080f;
color: #fff;
min-height: 100vh;
min-width: 1280px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.device-frame {
width: 1280px;
height: 720px;
background: linear-gradient(180deg, #0e1326 0%, #1a2b4a 50%, #0e1326 100%);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
position: relative;
display: flex;
flex-direction: column;
}
/* 顶部金额条 */
.header {
padding: 24px 36px 20px;
background: rgba(26, 43, 74, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.header__left { display: flex; align-items: baseline; gap: 12px; }
.header__label {
font-size: 14px;
color: rgba(255, 255, 255, 0.55);
}
.header__amount {
font-size: 42px;
font-weight: 700;
color: #0AC4A8;
font-family: Menlo, Consolas, monospace;
line-height: 1;
}
.header__right {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(74, 144, 217, 0.15);
border: 1px solid rgba(74, 144, 217, 0.35);
border-radius: 18px;
font-size: 13px;
color: #60a5fa;
font-weight: 600;
}
.header__right__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #52c41a;
box-shadow: 0 0 8px #52c41a;
animation: pulse 1.2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
/* 主体 */
.body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 60px;
overflow: hidden;
}
/* 支付方式面板 */
.pay-panel {
width: 100%;
max-width: 720px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
/* 支付图标动画区 */
.pay-icon-area {
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(74, 144, 217, 0.25), rgba(74, 144, 217, 0.05) 70%);
border: 2px solid rgba(74, 144, 217, 0.35);
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 0 60px rgba(74, 144, 217, 0.25);
}
/* 外圈呼吸 */
.pay-icon-area::before {
content: "";
position: absolute;
inset: -20px;
border-radius: 50%;
border: 1px solid rgba(74, 144, 217, 0.2);
animation: ripple 2s ease-out infinite;
}
.pay-icon-area::after {
content: "";
position: absolute;
inset: -40px;
border-radius: 50%;
border: 1px solid rgba(74, 144, 217, 0.1);
animation: ripple 2s ease-out infinite;
animation-delay: 0.7s;
}
@keyframes ripple {
0% { opacity: 1; transform: scale(0.8); }
100% { opacity: 0; transform: scale(1.2); }
}
.pay-icon-area__icon {
font-size: 100px;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}
/* 支付状态文字 */
.pay-status { display: flex; flex-direction: column; gap: 10px; }
.pay-status__title {
font-size: 36px;
font-weight: 700;
color: #fff;
letter-spacing: 2px;
}
.pay-status__hint {
font-size: 16px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.6;
}
/* 额度提示(在线支付/餐券) */
.pay-method-tip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
background: rgba(82, 196, 26, 0.1);
border: 1px solid rgba(82, 196, 26, 0.3);
border-radius: 22px;
font-size: 13px;
color: #4ade80;
}
</style>
</head>
<body>
<div class="device-frame">
<!-- 顶部金额条 -->
<div class="header">
<div class="header__left">
<span class="header__label">应付金额</span>
<span class="header__amount">¥41.60</span>
</div>
<div class="header__right">
<span class="header__right__dot"></span>
<span>等待支付中</span>
</div>
</div>
<!-- 主体 -->
<div class="body">
<!-- 当前支付方式:在线支付(扫码) -->
<div class="pay-panel" id="payPanel">
<div class="pay-icon-area">
<span class="pay-icon-area__icon" id="payIcon">&#x1F4F1;</span>
</div>
<div class="pay-status">
<div class="pay-status__title" id="payTitle">请出示付款码</div>
<div class="pay-status__hint" id="payHint">
打开微信/支付宝,将付款码对准扫码器
</div>
</div>
<div class="pay-method-tip" id="payTip">
&#x1F4F1; 支持微信 / 支付宝 / 银联云闪付
</div>
</div>
</div>
</div>
</body>
</html>
other-module/canteen-device/checkout-device/user-04-success.html → other-module/canteen-device/checkout-device/user-03-success.html
View File