feat: 毛菜验收秤PAD外壳改造 + 后厨补餐屏首版设计 + 配送H5流程降噪 + 营养档案检索录入强化
- 毛菜验收秤全页面 PAD 居中外壳(grid方案) + 验收列表动态列(有订单10列/无订单8列) + 返回导航referer统一 - 加工提示屏更名后厨补餐屏并完成首版设计(16格菜品余量监控四态看板 + 补餐/食谱来源标签) - 配送H5: 移除派单倒计时与异常按钮; 配送中页新增商家联系条/备注展示/清单卡片化 - 营养管理: 餐品库高级搜索+筛选汇总条+操作历史; 食材录入改行内选择器+净菜包毛利率; 食材详情操作历史; 进货明细补金额单价 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
fengpu
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
44e7f322ff
commit
b4dfe31b25
@@ -0,0 +1,33 @@
|
||||
# 餐厅终端设备模块变更日志
|
||||
|
||||
## 2026-08-14 · 毛菜验收秤 PAD 外壳改造 + 后厨补餐屏首版设计
|
||||
|
||||
### 变更一:毛菜验收秤全页面 PAD 居中外壳改造(`raw-veg-inspection-scale/` 全部 9 页)
|
||||
- 涉及页面:`00-login.html`、`00-welcome.html`、`01-verify-inspection.html`、`02-settings.html`、`03-verify-history.html`、`04-ingredient-sampling.html`、`05-sampling-history.html`、`index.html`
|
||||
- 统一采用「全屏深色画布(#05080f) + 居中 PAD 外壳(.device-frame 1280×720)」模式:
|
||||
- `body { display: grid; place-items: center; padding: 20px; min-width: 1320px; min-height: 760px }`
|
||||
- 外壳带 24px 圆角、深色投影与 1px 描边,还原 PAD 硬件外观
|
||||
- 内部 `calc(100vh - X)` 高度全部改为 `calc(100% - X)`,与外壳尺寸解耦
|
||||
- **居中方案用 grid 不用 flex**:flex 容器下 device-frame 主轴 hypothetical size 会被错误估算(1280 被算成 1648),导致内容反向偏移出横向滚动条;grid 方案在所有页面稳定(详见记忆 decisions.md「餐厅终端设备 PAD 居中外壳设计模式」)
|
||||
|
||||
### 变更二:毛菜验收秤验收页列表动态列(`01-verify-inspection.html`)
|
||||
- 食材验收列表表头与列宽由 `renderFoodList` 按"有订单/无订单"动态渲染:
|
||||
- 有订单(10 列):食材/采购规格/采购量/采购单价(只读)/采购单金额(只读)/实收规格/实收量/实收单价/实收总价/操作
|
||||
- 无订单(8 列):食材/采购规格/采购量/实收规格/实收量/实收单价/实收总价/操作
|
||||
- 采购单价为数据字典值,只读展示(灰字),不可编辑
|
||||
|
||||
### 变更三:返回导航统一"从哪里来回哪里去"
|
||||
- `00-welcome.html` 跳转内页时统一携带 `referer` 参数
|
||||
- 各内页返回按钮优先读取 `referer` 参数 → `document.referrer` → 兜底 `index.html`;顶部返回按钮与底部返回链接共用同一逻辑
|
||||
|
||||
### 变更四:模块导航页入口统一(`raw-veg-inspection-scale/index.html`)
|
||||
- 所有功能卡片(验收操作/食材采样/采样历史/验收记录/设置)统一指向 `00-login.html`,强制先登录再进入功能页
|
||||
|
||||
### 变更五:加工提示屏更名为后厨补餐屏并完成首版设计(`processing-prompt-screen/index.html`)
|
||||
- 模块更名:「加工提示屏」→「后厨补餐屏」,定位调整为"菜品余量监控与补餐任务提示看板"
|
||||
- 首版设计内容:
|
||||
- 顶部栏:餐次时段(午餐时段 10:30-13:30)+ 就餐状态标签 + 日期时钟
|
||||
- 左侧 16 格菜品余量监控网格:每卡展示菜名/余量kg/余量进度条/已取量,四态色编码(充足绿/偏低金/告急红/无数据灰)+ 图例
|
||||
- 菜品来源标签:补餐(红「补」)/ 食谱(蓝「谱」)双色标识
|
||||
- 同步采用 PAD 居中外壳(grid 居中方案)
|
||||
- `canteen-device/index.html` 导航卡片同步更名、更新图标与描述
|
||||
@@ -223,10 +223,10 @@
|
||||
<div class="card__desc">净菜暂存与保鲜存储</div>
|
||||
</a>
|
||||
<a class="card" href="processing-prompt-screen/index.html">
|
||||
<span class="card__status card__status--none">无需设计</span>
|
||||
<div class="card__icon">📺</div>
|
||||
<div class="card__name">加工提示屏</div>
|
||||
<div class="card__desc">加工流程提示与操作指引</div>
|
||||
<span class="card__status card__status--design">待产品设计</span>
|
||||
<div class="card__icon">🍲</div>
|
||||
<div class="card__name">后厨补餐屏</div>
|
||||
<div class="card__desc">菜品余量监控与补餐任务提示看板</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,32 +3,728 @@
|
||||
<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 外壳 */
|
||||
body {
|
||||
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
background: #0e1326; color: #fff; width: 1280px; height: 720px; overflow: hidden;
|
||||
background: #05080f;
|
||||
color: #fff;
|
||||
min-height: 100vh;
|
||||
min-width: 1280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
/* PAD 设备外壳 */
|
||||
.device-frame {
|
||||
width: 1280px;
|
||||
height: 720px;
|
||||
background: #0e1326;
|
||||
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;
|
||||
}
|
||||
|
||||
/* ===== 顶部栏 ===== */
|
||||
.top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 52px;
|
||||
background: #1a2b4a;
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.top-bar__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
min-width: 280px;
|
||||
}
|
||||
.top-bar__left .icon { font-size: 16px; }
|
||||
.top-bar__title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.top-bar__title .title-icon {
|
||||
color: #60a5fa;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.top-bar__right {
|
||||
min-width: 280px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.meal-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 12px;
|
||||
border-radius: 14px;
|
||||
background: rgba(96, 165, 250, 0.15);
|
||||
border: 1px solid rgba(96, 165, 250, 0.35);
|
||||
color: #93c5fd;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.meal-tag__dot {
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: #4ade80;
|
||||
box-shadow: 0 0 6px rgba(74, 222, 128, 0.8);
|
||||
animation: pulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(0.85); }
|
||||
}
|
||||
.meal-time {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* ===== 主内容（两栏:菜品网格 + 生产计划） ===== */
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
padding: 14px 18px 16px;
|
||||
height: calc(100% - 52px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ===== 左侧:菜品监控网格区 ===== */
|
||||
.center-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
.center-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.center-header__title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.center-header__title .icon { color: #60a5fa; }
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
align-items: center;
|
||||
}
|
||||
.legend__group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.legend__dot {
|
||||
display: inline-block;
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.legend__dot--ok { background: #4ade80; }
|
||||
.legend__dot--warn { background: #fbbf24; }
|
||||
.legend__dot--danger { background: #f87171; }
|
||||
.legend__dot--empty { background: #4b5563; }
|
||||
/* 来源标签图例 */
|
||||
.legend__src {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px; height: 16px;
|
||||
border-radius: 50%;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.legend__src--bu { background: #f87171; }
|
||||
.legend__src--pu { background: #60a5fa; }
|
||||
.legend__src--dian { background: #a78bfa; }
|
||||
|
||||
.grid-wrap {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.grid-wrap::-webkit-scrollbar { display: none; }
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-auto-rows: minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
/* 餐位卡 */
|
||||
.dish-card {
|
||||
background: #1a2b4a;
|
||||
border-radius: 10px;
|
||||
padding: 11px 12px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dish-card--urgent {
|
||||
background: linear-gradient(180deg, rgba(127, 29, 29, 0.35) 0%, #1a2b4a 70%);
|
||||
border-color: rgba(248, 113, 113, 0.4);
|
||||
box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.15) inset;
|
||||
}
|
||||
.dish-card--warn {
|
||||
background: linear-gradient(180deg, rgba(146, 64, 14, 0.3) 0%, #1a2b4a 70%);
|
||||
border-color: rgba(251, 191, 36, 0.35);
|
||||
}
|
||||
.dish-card--ok {
|
||||
background: linear-gradient(180deg, rgba(20, 83, 45, 0.28) 0%, #1a2b4a 70%);
|
||||
border-color: rgba(74, 222, 128, 0.3);
|
||||
}
|
||||
.dish-card__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.dish-card__icon { font-size: 15px; flex-shrink: 0; }
|
||||
.dish-card__name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
}
|
||||
/* 圆形来源标签 */
|
||||
.src-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px; height: 18px;
|
||||
border-radius: 50%;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.src-tag--bu { background: #f87171; } /* 补餐 - 红 */
|
||||
.src-tag--pu { background: #60a5fa; } /* 食谱 - 蓝 */
|
||||
.src-tag--dian { background: #a78bfa; } /* 点餐 - 紫 */
|
||||
.dish-card__qty {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: #4ade80;
|
||||
font-family: "DIN Alternate", sans-serif;
|
||||
line-height: 1;
|
||||
}
|
||||
.dish-card--warn .dish-card__qty { color: #fbbf24; }
|
||||
.dish-card--urgent .dish-card__qty { color: #f87171; }
|
||||
.dish-card__qty-unit {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-weight: 500;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.dish-card__bar {
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dish-card__bar > span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.dish-card__meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.dish-card__tag {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
font-size: 9px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
.dish-card__tag--danger {
|
||||
background: rgba(248, 113, 113, 0.22);
|
||||
color: #fca5a5;
|
||||
border: 1px solid rgba(248, 113, 113, 0.4);
|
||||
}
|
||||
.dish-card__tag--warn {
|
||||
background: rgba(251, 191, 36, 0.22);
|
||||
color: #fcd34d;
|
||||
border: 1px solid rgba(251, 191, 36, 0.4);
|
||||
}
|
||||
/* 无开餐数据占位 */
|
||||
.dish-card--empty {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #161f33;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.dish-card--empty .empty-icon {
|
||||
font-size: 22px;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.dish-card--empty .empty-text {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
/* ===== 右栏:生产计划 ===== */
|
||||
.right-col {
|
||||
width: 290px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 右栏顶部来源图例条 */
|
||||
.src-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 9px 10px;
|
||||
background: rgba(96, 165, 250, 0.08);
|
||||
border: 1px solid rgba(96, 165, 250, 0.18);
|
||||
border-radius: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.src-legend__item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
font-weight: 500;
|
||||
}
|
||||
.plan-block {
|
||||
background: #1a2b4a;
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.plan-block__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.plan-block__title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.plan-block__title .icon { color: #60a5fa; font-size: 14px; }
|
||||
.plan-block__count {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #60a5fa;
|
||||
font-family: "DIN Alternate", sans-serif;
|
||||
padding: 2px 10px;
|
||||
background: rgba(96, 165, 250, 0.12);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.plan-block__count--done {
|
||||
color: #4ade80;
|
||||
background: rgba(74, 222, 128, 0.12);
|
||||
}
|
||||
.plan-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
flex: 1;
|
||||
}
|
||||
.plan-list::-webkit-scrollbar { display: none; }
|
||||
.plan-list__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 7px 10px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
gap: 8px;
|
||||
}
|
||||
.plan-list__item .item-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.plan-list__item .item-name .name-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.plan-list__item .item-qty {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 11px;
|
||||
font-family: "DIN Alternate", sans-serif;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.plan-list__item--done .item-name .name-text { color: rgba(255, 255, 255, 0.55); }
|
||||
.plan-list__empty {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
padding: 20px 0;
|
||||
}
|
||||
.top-bar { display: flex; align-items: center; height: 44px; background: #1a2b4a; padding: 0 20px; }
|
||||
.back-btn { font-size: 14px; cursor: pointer; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s; }
|
||||
.back-btn:hover { color: #fff; }
|
||||
.top-bar__title { flex: 1; text-align: center; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85); }
|
||||
.main { display: flex; align-items: center; justify-content: center; height: calc(100% - 44px); }
|
||||
.placeholder { text-align: center; color: rgba(255,255,255,0.3); }
|
||||
.placeholder__icon { font-size: 48px; margin-bottom: 16px; }
|
||||
.placeholder__text { font-size: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<span class="top-bar__title">加工提示屏</span>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="placeholder">
|
||||
<div class="placeholder__icon">🚧</div>
|
||||
<div class="placeholder__text">加工提示屏 页面待开发</div>
|
||||
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- 顶部栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__left">
|
||||
<span class="icon">📅</span>
|
||||
<span>2026-08-13 星期四</span>
|
||||
<span style="color: rgba(255,255,255,0.3);">|</span>
|
||||
<span class="icon">🕒</span>
|
||||
<span>10:48</span>
|
||||
</div>
|
||||
<div class="top-bar__title">
|
||||
<span class="title-icon">🍲</span>后厨补餐屏
|
||||
</div>
|
||||
<div class="top-bar__right">
|
||||
<span class="meal-time">午餐时段 10:30 - 13:30</span>
|
||||
<span class="meal-tag">
|
||||
<span class="meal-tag__dot"></span>
|
||||
进行中
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容 两栏 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 左侧:16 格菜品监控网格 -->
|
||||
<div class="center-col">
|
||||
<div class="center-header">
|
||||
<div class="center-header__title">
|
||||
<span class="icon">🍽️</span>餐线菜品余量看板（共 16 道）
|
||||
</div>
|
||||
<div class="legend">
|
||||
<span><span class="legend__dot legend__dot--ok"></span>充足</span>
|
||||
<span><span class="legend__dot legend__dot--warn"></span>偏低</span>
|
||||
<span><span class="legend__dot legend__dot--danger"></span>告急</span>
|
||||
<span><span class="legend__dot legend__dot--empty"></span>无数据</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-wrap">
|
||||
<div class="grid">
|
||||
|
||||
<!-- 1. 告急-补餐 -->
|
||||
<div class="dish-card dish-card--urgent">
|
||||
<span class="dish-card__tag dish-card__tag--danger">告急</span>
|
||||
<div class="dish-card__head">
|
||||
<span class="dish-card__icon">🥚</span>
|
||||
<span class="dish-card__name">拌莴苣鸡蛋</span>
|
||||
</div>
|
||||
<div><span class="dish-card__qty">0.31</span><span class="dish-card__qty-unit">kg</span></div>
|
||||
<div class="dish-card__bar"><span style="width:8%;background:#f87171;"></span></div>
|
||||
<div class="dish-card__meta"><span>余量 8%</span><span>已取 3.49kg</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 偏低-补餐 -->
|
||||
<div class="dish-card dish-card--warn">
|
||||
<span class="dish-card__tag dish-card__tag--warn">偏低</span>
|
||||
<div class="dish-card__head">
|
||||
<span class="dish-card__icon">🧄</span>
|
||||
<span class="dish-card__name">炝炒菠菜</span>
|
||||
</div>
|
||||
<div><span class="dish-card__qty">0.85</span><span class="dish-card__qty-unit">kg</span></div>
|
||||
<div class="dish-card__bar"><span style="width:22%;background:#fbbf24;"></span></div>
|
||||
<div class="dish-card__meta"><span>余量 22%</span><span>已取 3.0kg</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 充足-食谱 -->
|
||||
<div class="dish-card dish-card--ok">
|
||||
<div class="dish-card__head">
|
||||
<span class="dish-card__icon">🍚</span>
|
||||
<span class="dish-card__name">大米饭</span>
|
||||
</div>
|
||||
<div><span class="dish-card__qty">6.20</span><span class="dish-card__qty-unit">kg</span></div>
|
||||
<div class="dish-card__bar"><span style="width:78%;background:#4ade80;"></span></div>
|
||||
<div class="dish-card__meta"><span>余量 78%</span><span>已取 1.8kg</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 4. 充足-食谱 -->
|
||||
<div class="dish-card dish-card--ok">
|
||||
<div class="dish-card__head">
|
||||
<span class="dish-card__icon">🥦</span>
|
||||
<span class="dish-card__name">虾皮烧冬瓜</span>
|
||||
</div>
|
||||
<div><span class="dish-card__qty">5.10</span><span class="dish-card__qty-unit">kg</span></div>
|
||||
<div class="dish-card__bar"><span style="width:65%;background:#4ade80;"></span></div>
|
||||
<div class="dish-card__meta"><span>余量 65%</span><span>已取 2.7kg</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 5. 充足-食谱 -->
|
||||
<div class="dish-card dish-card--ok">
|
||||
<div class="dish-card__head">
|
||||
<span class="dish-card__icon">🍖</span>
|
||||
<span class="dish-card__name">牛肉饼</span>
|
||||
</div>
|
||||
<div><span class="dish-card__qty">4.30</span><span class="dish-card__qty-unit">kg</span></div>
|
||||
<div class="dish-card__bar"><span style="width:58%;background:#4ade80;"></span></div>
|
||||
<div class="dish-card__meta"><span>余量 58%</span><span>已取 3.1kg</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 6. 偏低-补餐 -->
|
||||
<div class="dish-card dish-card--warn">
|
||||
<span class="dish-card__tag dish-card__tag--warn">偏低</span>
|
||||
<div class="dish-card__head">
|
||||
<span class="dish-card__icon">🥛</span>
|
||||
<span class="dish-card__name">苦瓜炒猪肉</span>
|
||||
</div>
|
||||
<div><span class="dish-card__qty">1.05</span><span class="dish-card__qty-unit">kg</span></div>
|
||||
<div class="dish-card__bar"><span style="width:28%;background:#fbbf24;"></span></div>
|
||||
<div class="dish-card__meta"><span>余量 28%</span><span>已取 2.7kg</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 7. 充足-食谱 -->
|
||||
<div class="dish-card dish-card--ok">
|
||||
<div class="dish-card__head">
|
||||
<span class="dish-card__icon">🥺</span>
|
||||
<span class="dish-card__name">青椒炒肉丝</span>
|
||||
</div>
|
||||
<div><span class="dish-card__qty">3.80</span><span class="dish-card__qty-unit">kg</span></div>
|
||||
<div class="dish-card__bar"><span style="width:52%;background:#4ade80;"></span></div>
|
||||
<div class="dish-card__meta"><span>余量 52%</span><span>已取 3.5kg</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 8. 充足-食谱 -->
|
||||
<div class="dish-card dish-card--ok">
|
||||
<div class="dish-card__head">
|
||||
<span class="dish-card__icon">🧇</span>
|
||||
<span class="dish-card__name">肉夹馍</span>
|
||||
</div>
|
||||
<div><span class="dish-card__qty">4.50</span><span class="dish-card__qty-unit">kg</span></div>
|
||||
<div class="dish-card__bar"><span style="width:68%;background:#4ade80;"></span></div>
|
||||
<div class="dish-card__meta"><span>余量 68%</span><span>已取 2.1kg</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 9. 充足-点餐 -->
|
||||
<div class="dish-card dish-card--ok">
|
||||
<div class="dish-card__head">
|
||||
<span class="dish-card__icon">🍤</span>
|
||||
<span class="dish-card__name">蒸饺</span>
|
||||
</div>
|
||||
<div><span class="dish-card__qty">2.80</span><span class="dish-card__qty-unit">kg</span></div>
|
||||
<div class="dish-card__bar"><span style="width:48%;background:#4ade80;"></span></div>
|
||||
<div class="dish-card__meta"><span>余量 48%</span><span>已取 3.0kg</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 10. 充足-点餐 -->
|
||||
<div class="dish-card dish-card--ok">
|
||||
<div class="dish-card__head">
|
||||
<span class="dish-card__icon">🍟</span>
|
||||
<span class="dish-card__name">红烧排骨</span>
|
||||
</div>
|
||||
<div><span class="dish-card__qty">3.20</span><span class="dish-card__qty-unit">kg</span></div>
|
||||
<div class="dish-card__bar"><span style="width:55%;background:#4ade80;"></span></div>
|
||||
<div class="dish-card__meta"><span>余量 55%</span><span>已取 2.6kg</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 11. 偏低-点餐 -->
|
||||
<div class="dish-card dish-card--warn">
|
||||
<span class="dish-card__tag dish-card__tag--warn">偏低</span>
|
||||
<div class="dish-card__head">
|
||||
<span class="dish-card__icon">🍡</span>
|
||||
<span class="dish-card__name">糖醋里脊</span>
|
||||
</div>
|
||||
<div><span class="dish-card__qty">0.95</span><span class="dish-card__qty-unit">kg</span></div>
|
||||
<div class="dish-card__bar"><span style="width:24%;background:#fbbf24;"></span></div>
|
||||
<div class="dish-card__meta"><span>余量 24%</span><span>已取 3.0kg</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 12. 充足-补餐 -->
|
||||
<div class="dish-card dish-card--ok">
|
||||
<div class="dish-card__head">
|
||||
<span class="dish-card__icon">🍜</span>
|
||||
<span class="dish-card__name">番茄蛋汤</span>
|
||||
</div>
|
||||
<div><span class="dish-card__qty">5.60</span><span class="dish-card__qty-unit">kg</span></div>
|
||||
<div class="dish-card__bar"><span style="width:72%;background:#4ade80;"></span></div>
|
||||
<div class="dish-card__meta"><span>余量 72%</span><span>已取 2.2kg</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 13~16 无开餐数据 -->
|
||||
<div class="dish-card dish-card--empty">
|
||||
<div class="empty-icon">🥣</div>
|
||||
<div class="empty-text">无开餐数据</div>
|
||||
</div>
|
||||
<div class="dish-card dish-card--empty">
|
||||
<div class="empty-icon">🥣</div>
|
||||
<div class="empty-text">无开餐数据</div>
|
||||
</div>
|
||||
<div class="dish-card dish-card--empty">
|
||||
<div class="empty-icon">🥣</div>
|
||||
<div class="empty-text">无开餐数据</div>
|
||||
</div>
|
||||
<div class="dish-card dish-card--empty">
|
||||
<div class="empty-icon">🥣</div>
|
||||
<div class="empty-text">无开餐数据</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右栏:当前菜品生产计划 -->
|
||||
<div class="right-col">
|
||||
<!-- 来源图例 -->
|
||||
<div class="src-legend">
|
||||
<span class="src-legend__item"><span class="legend__src legend__src--bu">补</span>补餐</span>
|
||||
<span class="src-legend__item"><span class="legend__src legend__src--pu">谱</span>食谱</span>
|
||||
<span class="src-legend__item"><span class="legend__src legend__src--dian">点</span>点餐</span>
|
||||
</div>
|
||||
|
||||
<!-- 未制作 -->
|
||||
<div class="plan-block">
|
||||
<div class="plan-block__head">
|
||||
<div class="plan-block__title">
|
||||
<span class="icon">❔</span>未制作
|
||||
</div>
|
||||
<span class="plan-block__count">7</span>
|
||||
</div>
|
||||
<ul class="plan-list">
|
||||
<li class="plan-list__item">
|
||||
<span class="item-name">
|
||||
<span>🍚</span>
|
||||
<span class="name-text">大米饭</span>
|
||||
<span class="src-tag src-tag--bu">补</span>
|
||||
</span>
|
||||
<span class="item-qty">0g</span>
|
||||
</li>
|
||||
<li class="plan-list__item">
|
||||
<span class="item-name">
|
||||
<span>🥦</span>
|
||||
<span class="name-text">虾皮烧冬瓜</span>
|
||||
<span class="src-tag src-tag--pu">谱</span>
|
||||
</span>
|
||||
<span class="item-qty">0g</span>
|
||||
</li>
|
||||
<li class="plan-list__item">
|
||||
<span class="item-name">
|
||||
<span>🧄</span>
|
||||
<span class="name-text">炝炒菠菜</span>
|
||||
<span class="src-tag src-tag--bu">补</span>
|
||||
</span>
|
||||
<span class="item-qty">0g</span>
|
||||
</li>
|
||||
<li class="plan-list__item">
|
||||
<span class="item-name">
|
||||
<span>🍖</span>
|
||||
<span class="name-text">牛肉饼</span>
|
||||
<span class="src-tag src-tag--pu">谱</span>
|
||||
</span>
|
||||
<span class="item-qty">0g</span>
|
||||
</li>
|
||||
<li class="plan-list__item">
|
||||
<span class="item-name">
|
||||
<span>🥛</span>
|
||||
<span class="name-text">苦瓜炒猪肉</span>
|
||||
<span class="src-tag src-tag--bu">补</span>
|
||||
</span>
|
||||
<span class="item-qty">0g</span>
|
||||
</li>
|
||||
<li class="plan-list__item">
|
||||
<span class="item-name">
|
||||
<span>🥺</span>
|
||||
<span class="name-text">青椒炒肉丝</span>
|
||||
<span class="src-tag src-tag--pu">谱</span>
|
||||
</span>
|
||||
<span class="item-qty">0g</span>
|
||||
</li>
|
||||
<li class="plan-list__item">
|
||||
<span class="item-name">
|
||||
<span>🧇</span>
|
||||
<span class="name-text">肉夹馍</span>
|
||||
<span class="src-tag src-tag--pu">谱</span>
|
||||
</span>
|
||||
<span class="item-qty">0g</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 已制作 -->
|
||||
<div class="plan-block">
|
||||
<div class="plan-block__head">
|
||||
<div class="plan-block__title">
|
||||
<span class="icon" style="color:#4ade80;">✅</span>已制作
|
||||
</div>
|
||||
<span class="plan-block__count plan-block__count--done">1</span>
|
||||
</div>
|
||||
<ul class="plan-list">
|
||||
<li class="plan-list__item plan-list__item--done">
|
||||
<span class="item-name">
|
||||
<span>🥚</span>
|
||||
<span class="name-text">拌莴苣鸡蛋</span>
|
||||
<span class="src-tag src-tag--bu">补</span>
|
||||
</span>
|
||||
<span class="item-qty">3.80kg</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -8,12 +8,27 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
background: #0e1326; color: #fff; width: 1280px; height: 720px; overflow: hidden;
|
||||
background: #05080f;
|
||||
min-height: 760px; min-width: 1320px;
|
||||
display: grid; place-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
/* PAD 居中外壳 */
|
||||
.device-frame {
|
||||
width: 1280px; height: 720px;
|
||||
flex-shrink: 0;
|
||||
background: #0e1326; color: #fff;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
/* ---- 顶部导航栏 ---- */
|
||||
.top-bar {
|
||||
display: flex; align-items: center; height: 44px; background: #1a2b4a; padding: 0 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.back-btn {
|
||||
font-size: 14px; cursor: pointer; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s;
|
||||
@@ -27,6 +42,7 @@
|
||||
.login-main {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: calc(100% - 44px); padding: 24px 32px;
|
||||
flex: 1; min-height: 0;
|
||||
}
|
||||
|
||||
/* 登录面板 */
|
||||
@@ -132,6 +148,8 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="top-bar">
|
||||
<span class="top-bar__title">毛菜验收秤 - 员工登录</span>
|
||||
</div>
|
||||
@@ -176,6 +194,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -8,12 +8,27 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
background: #0e1326; color: #fff; width: 1280px; height: 720px; overflow: hidden;
|
||||
background: #05080f;
|
||||
min-height: 760px; min-width: 1320px;
|
||||
display: grid; place-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
/* PAD 居中外壳 */
|
||||
.device-frame {
|
||||
width: 1280px; height: 720px;
|
||||
flex-shrink: 0;
|
||||
background: #0e1326; color: #fff;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
/* ---- 顶部导航栏 ---- */
|
||||
.top-bar {
|
||||
display: flex; align-items: center; height: 44px; background: #1a2b4a; padding: 0 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.back-btn {
|
||||
font-size: 14px; cursor: pointer; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s;
|
||||
@@ -34,6 +49,7 @@
|
||||
.menu-main {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: calc(100% - 44px); padding: 24px 32px;
|
||||
flex: 1; min-height: 0;
|
||||
}
|
||||
|
||||
.menu-panel {
|
||||
@@ -89,6 +105,8 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="top-bar">
|
||||
<span class="top-bar__title">毛菜验收秤 - 功能菜单</span>
|
||||
<span class="top-bar__user" id="topUser">--</span>
|
||||
@@ -149,6 +167,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
@@ -178,7 +198,8 @@
|
||||
window.location.href = '00-login.html';
|
||||
return;
|
||||
}
|
||||
window.location.href = target + '?user=' + encodeURIComponent(currentUser.name) + '&uid=' + currentUser.id;
|
||||
// 携带 referer 参数,内页返回按钮据此"从哪里来回哪里去"
|
||||
window.location.href = target + '?user=' + encodeURIComponent(currentUser.name) + '&uid=' + currentUser.id + '&referer=00-welcome.html';
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
|
||||
@@ -8,13 +8,28 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
background: #0e1326; color: #fff; width: 1280px; height: 720px; overflow: hidden;
|
||||
background: #05080f;
|
||||
min-height: 760px; min-width: 1320px;
|
||||
display: grid; place-items: center;
|
||||
padding: 20px;
|
||||
user-select: none;
|
||||
}
|
||||
/* PAD 居中外壳 */
|
||||
.device-frame {
|
||||
width: 1280px; height: 720px;
|
||||
flex-shrink: 0;
|
||||
background: #0e1326; color: #fff;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
/* ---- 顶部导航栏（含称重读数） ---- */
|
||||
.top-bar {
|
||||
display: flex; align-items: center; height: 52px; background: #1a2b4a; padding: 0 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.back-btn {
|
||||
font-size: 14px; cursor: pointer; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s;
|
||||
@@ -274,6 +289,12 @@
|
||||
font-family: monospace; letter-spacing: 0.3px;
|
||||
}
|
||||
.food-row__price { font-size: 12px; color: rgba(255,255,255,0.6); }
|
||||
/* 只读采购单价(数据字典值,不可编辑) */
|
||||
.food-row__price-readonly {
|
||||
display: inline-block; width: 100%; padding: 2px 4px;
|
||||
color: rgba(255,255,255,0.45); font-size: 12px; text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
.food-row__price-input {
|
||||
width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 4px; padding: 2px 4px; color: #faad14; font-size: 12px; text-align: center;
|
||||
@@ -714,10 +735,12 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- 顶部导航（含称重读数） -->
|
||||
<div class="top-bar">
|
||||
|
||||
<a class="back-btn" id="backBtn" href="javascript:void(0)">◀ 返回</a> <span class="page-title">食材验收识别屏</span>
|
||||
<a class="back-btn" id="backBtn" href="javascript:void(0)">◀ 返回</a>
|
||||
<span class="page-title">食材验收识别屏</span>
|
||||
<div class="user-info">
|
||||
<div class="avatar" id="userAvatar">张</div>
|
||||
<span id="userName">张三</span>
|
||||
@@ -829,11 +852,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 食材验收列表 -->
|
||||
<!-- 食材验收列表(表头与列宽由 renderFoodList 按"有订单/无订单"动态渲染) -->
|
||||
<div class="food-list" id="completedFoodList" style="display:none;">
|
||||
<div class="food-list__head" id="foodListHead">
|
||||
<span>食材</span><span>采购规格</span><span>采购量</span><span>采购单价</span><span>应付金额</span><span>实收规格</span><span>实收量</span><span>操作</span>
|
||||
</div>
|
||||
<div class="food-list__head" id="foodListHead"></div>
|
||||
<div class="food-list__body" id="foodList"></div>
|
||||
</div>
|
||||
|
||||
@@ -1006,6 +1027,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
@@ -1149,9 +1172,6 @@
|
||||
}
|
||||
|
||||
/* ===== 初始化 ===== */
|
||||
/* 来源页，用于返回按钮 */
|
||||
var refererPage = '00-welcome.html';
|
||||
|
||||
function init() {
|
||||
currentUser = {
|
||||
name: getQueryParam('user') || '张三',
|
||||
@@ -1160,36 +1180,19 @@
|
||||
document.getElementById('userName').textContent = currentUser.name;
|
||||
document.getElementById('userAvatar').textContent = currentUser.name.charAt(0);
|
||||
|
||||
/* 根据来源设置返回目标页 */
|
||||
refererPage = detectRefererPage();
|
||||
var backBtn = document.getElementById('topBackBtn');
|
||||
if (backBtn) backBtn.href = refererPage;
|
||||
|
||||
initDirectSupplierSelect();
|
||||
renderOrderCards();
|
||||
if (backBtn) bindBackBtn();
|
||||
bindBackBtn();
|
||||
bindCameraClick();
|
||||
}
|
||||
|
||||
/* 根据 URL 参数或 referrer 判断来源页 */
|
||||
function detectRefererPage() {
|
||||
var ref = document.referrer || '';
|
||||
if (ref.indexOf('05-sampling-history.html') !== -1) return '05-sampling-history.html';
|
||||
if (ref.indexOf('04-ingredient-sampling.html') !== -1) return '04-ingredient-sampling.html';
|
||||
if (ref.indexOf('00-welcome.html') !== -1) return '00-welcome.html';
|
||||
if (ref.indexOf('index.html') !== -1) return 'index.html';
|
||||
/* URL 参数兜底 */
|
||||
if (getQueryParam('sampleRef')) return '05-sampling-history.html';
|
||||
if (getQueryParam('sampled')) return '04-ingredient-sampling.html';
|
||||
return '00-welcome.html';
|
||||
}
|
||||
|
||||
/* ===== 拦截返回按钮 ===== */
|
||||
/* ===== 拦截返回按钮：step2 时若有验收数据则弹确认,否则回 step1 ===== */
|
||||
function bindBackBtn() {
|
||||
document.getElementById('topBackBtn').addEventListener('click', function(e) {
|
||||
var btn = document.getElementById('backBtn');
|
||||
if (!btn) return;
|
||||
btn.addEventListener('click', function(e) {
|
||||
if (step === 2) {
|
||||
e.preventDefault();
|
||||
// 检查是否有验收数据
|
||||
var hasData = foodResults.some(function(r) { return r !== null; });
|
||||
if (hasData) {
|
||||
document.getElementById('backConfirmOverlay').classList.add('show');
|
||||
@@ -1206,7 +1209,9 @@
|
||||
|
||||
function confirmBack() {
|
||||
document.getElementById('backConfirmOverlay').classList.remove('show');
|
||||
window.location.href = refererPage;
|
||||
// 跳向与 backBtn 同源的目标(由末尾 IIFE 设置:优先 referer 参数 → referrer → index)
|
||||
var btn = document.getElementById('backBtn');
|
||||
window.location.href = btn ? btn.href : 'index.html';
|
||||
}
|
||||
|
||||
function backToStep1() {
|
||||
@@ -1426,14 +1431,28 @@
|
||||
startSceneSimulation();
|
||||
}
|
||||
|
||||
/* ===== 食材列表渲染（8列：食材/采购规格/采购量/采购单价/应付金额/实收规格/实收量/操作） ===== */
|
||||
/* ===== 食材列表渲染 =====
|
||||
* 有订单(10列): 食材/采购规格/采购量/采购单价(只读)/采购单金额(只读)/实收规格/实收量/实收单价/实收总价/操作
|
||||
* 无订单(8列): 食材/采购规格/采购量/实收规格/实收量/实收单价/实收总价/操作
|
||||
*/
|
||||
function renderFoodList() {
|
||||
if (!selectedOrder) return;
|
||||
var headEl = document.getElementById('foodListHead');
|
||||
if (!headEl) return;
|
||||
|
||||
var gridCols = '1fr 56px 50px 56px 58px 50px 50px 52px';
|
||||
var isDirect = !!selectedOrder._direct;
|
||||
/* 列宽(单位 px,首列 1fr 自适应)
|
||||
* 有订单(10列): 食材/采购规格/采购量/采购单价/采购单金额/实收规格/实收量/实收单价/实收总价/操作
|
||||
* 无订单(6列): 食材/实收规格/实收量/实收单价/实收总价/操作
|
||||
*/
|
||||
var gridCols = isDirect
|
||||
? '1fr 50px 50px 56px 60px 52px'
|
||||
: '1fr 56px 50px 56px 60px 50px 50px 56px 60px 52px';
|
||||
headEl.style.gridTemplateColumns = gridCols;
|
||||
/* 表头文字 */
|
||||
headEl.innerHTML = isDirect
|
||||
? '<span>食材</span><span>实收规格</span><span>实收量</span><span>实收单价</span><span>实收总价</span><span>操作</span>'
|
||||
: '<span>食材</span><span>采购规格</span><span>采购量</span><span>采购单价</span><span>采购单金额</span><span>实收规格</span><span>实收量</span><span>实收单价</span><span>实收总价</span><span>操作</span>';
|
||||
|
||||
var html = '';
|
||||
for (var i = 0; i < selectedOrder.foods.length; i++) {
|
||||
@@ -1465,18 +1484,16 @@
|
||||
hasRecord = false;
|
||||
}
|
||||
|
||||
/* 获取当前单价（支持自定义） */
|
||||
var currentPrice = (f._customPrice !== undefined) ? f._customPrice : info.price;
|
||||
/* 采购单价(数据字典值,只读展示。无订单模式不显示该列) */
|
||||
var currentPrice = info.price;
|
||||
|
||||
/* 采购量列（无订单显示"--"） */
|
||||
var isDirectOrder = selectedOrder._direct;
|
||||
/* 采购量列(无订单显示"--") */
|
||||
var orderQty = spice ? (f._orderQty || f.weight || 0) : f.weight;
|
||||
var orderQtyHtml = isDirectOrder
|
||||
var orderQtyHtml = isDirect
|
||||
? '<span class="food-row__weight" style="color:rgba(255,255,255,0.25);">--</span>'
|
||||
: '<span class="food-row__weight">' + (spice ? orderQty : orderQty.toFixed(1)) + '</span>';
|
||||
|
||||
/* 规格下拉选项（按 verifyType 分类过滤） */
|
||||
/* 称重类(weight):'斤','公斤','克','千克' | 计数类(count):'袋','瓶','箱','桶','罐','份','个','只','条','把' */
|
||||
/* 规格下拉选项(按 verifyType 分类过滤) */
|
||||
var UNIT_OPTIONS_WEIGHT = ['斤','公斤','克','千克'];
|
||||
var UNIT_OPTIONS_COUNT = ['袋','瓶','箱','桶','罐','份','个','只','条','把'];
|
||||
var verifyType = info.verifyType || 'weight';
|
||||
@@ -1493,9 +1510,10 @@
|
||||
}
|
||||
var specHtml = buildUnitSelect(currentUnit, 'updateFoodUnit(' + i + ', this.value)');
|
||||
|
||||
/* 应付金额列 */
|
||||
var amountValue = currentPrice * orderQty;
|
||||
var amountHtml = '<span class="food-row__amount">¥' + amountValue.toFixed(0) + '</span>';
|
||||
/* 采购单价列(只读) + 采购单金额列(只读,= 采购单价 × 采购量) */
|
||||
var priceReadOnlyHtml = '<span class="food-row__price-readonly">¥' + currentPrice.toFixed(1) + '</span>';
|
||||
var orderAmountValue = currentPrice * orderQty;
|
||||
var orderAmountHtml = '<span class="food-row__amount">¥' + orderAmountValue.toFixed(0) + '</span>';
|
||||
|
||||
/* 实收列 */
|
||||
var actualHtml = '';
|
||||
@@ -1519,38 +1537,59 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 单价列（可编辑） */
|
||||
var priceHtml = '<input type="number" class="food-row__price-input" value="' + currentPrice.toFixed(1) + '" '
|
||||
+ 'step="0.1" min="0" '
|
||||
/* 实收单价 / 实收总价输入框(联动) */
|
||||
var unitPriceVal = (f._customActualUnitPrice !== undefined) ? f._customActualUnitPrice : '';
|
||||
var totalPriceVal = (f._customActualTotalPrice !== undefined) ? f._customActualTotalPrice : '';
|
||||
/* 有订单模式下,用户尚未编辑过时默认按"采购单价/采购单金额"回填,方便用户在一致时直接提交 */
|
||||
if (!isDirect) {
|
||||
if (unitPriceVal === '') unitPriceVal = currentPrice.toFixed(2);
|
||||
if (totalPriceVal === '') totalPriceVal = orderAmountValue.toFixed(2);
|
||||
}
|
||||
/* 若一边有值另一边空(仅无订单模式会触发),render 时按已知那一边反算显示(不持久化对方) */
|
||||
if (unitPriceVal === '' && totalPriceVal !== '' && actual > 0) {
|
||||
unitPriceVal = (totalPriceVal / actual).toFixed(2);
|
||||
} else if (totalPriceVal === '' && unitPriceVal !== '' && actual > 0) {
|
||||
totalPriceVal = (unitPriceVal * actual).toFixed(2);
|
||||
}
|
||||
var actualUnitPriceHtml = '<input type="number" class="food-row__price-input" data-field="unitPrice" data-idx="' + i + '" '
|
||||
+ 'value="' + unitPriceVal + '" step="0.01" min="0" placeholder="0.00" '
|
||||
+ 'onclick="event.stopPropagation()" '
|
||||
+ 'onchange="updateFoodPrice(' + i + ', this.value)" '
|
||||
+ 'title="点击修改单价">';
|
||||
+ 'oninput="updateActualUnitPrice(' + i + ', this.value)" '
|
||||
+ 'title="实收单价,与实收总价联动">';
|
||||
var actualTotalPriceHtml = '<input type="number" class="food-row__price-input" data-field="totalPrice" data-idx="' + i + '" '
|
||||
+ 'value="' + totalPriceVal + '" step="0.01" min="0" placeholder="0.00" '
|
||||
+ 'onclick="event.stopPropagation()" '
|
||||
+ 'oninput="updateActualTotalPrice(' + i + ', this.value)" '
|
||||
+ 'title="实收总价,与实收单价联动">';
|
||||
|
||||
/* 操作列（删除 + 验收不通过；无订单模式无"不通过"，删除始终可用） */
|
||||
var isDirect = selectedOrder._direct;
|
||||
/* 操作列(删除 + 验收不通过;无订单模式无"不通过",删除始终可用) */
|
||||
var deleteDisabled = isDirect ? '' : (hasRecord ? '' : 'disabled');
|
||||
/* 验收不通过按钮暂时隐藏（后期恢复：将下方条件改回原逻辑即可） */
|
||||
/* 验收不通过按钮暂时隐藏(后期恢复:将下方条件改回原逻辑即可) */
|
||||
var actionsHtml = '<div class="food-row__actions">'
|
||||
+ '<button class="food-row__action-btn food-row__action-btn--delete" ' + deleteDisabled + ' onclick="event.stopPropagation();deleteFoodRecord(' + i + ')" title="删除食材">🗑</button>'
|
||||
+ '' /* 暂时隐藏不通过按钮：(isDirect ? '' : '<button ...>✗</button>') */
|
||||
+ '' /* 暂时隐藏不通过按钮:(isDirect ? '' : '<button ...>✗</button>') */
|
||||
+ '</div>';
|
||||
|
||||
var isCurrent = (i === currentFoodIdx) ? ' current' : '';
|
||||
/* 实收规格列（下拉可选，默认跟随采购规格） */
|
||||
/* 实收规格列(下拉可选,默认跟随采购规格) */
|
||||
var actualSpecHtml = buildUnitSelect(actualUnit, 'updateActualUnit(' + i + ', this.value)');
|
||||
|
||||
html += '<div class="food-row' + isCurrent + '" data-idx="' + i + '" style="grid-template-columns:' + gridCols + ';">'
|
||||
/* 组装行(按订单类型选不同列顺序) */
|
||||
var rowHtml = '<div class="food-row' + isCurrent + '" data-idx="' + i + '" style="grid-template-columns:' + gridCols + ';">'
|
||||
+ '<span class="food-row__name">' + f.name
|
||||
+ '<span class="food-row__cat-tag">' + info.catLabel + '</span>'
|
||||
+ '</span>'
|
||||
+ specHtml
|
||||
+ orderQtyHtml
|
||||
+ priceHtml
|
||||
+ amountHtml
|
||||
+ actualSpecHtml
|
||||
+ '</span>';
|
||||
if (!isDirect) {
|
||||
/* 有订单:采购规格 + 采购量 + 采购单价(只读) + 采购单金额(只读) */
|
||||
rowHtml += specHtml + orderQtyHtml + priceReadOnlyHtml + orderAmountHtml;
|
||||
}
|
||||
rowHtml += actualSpecHtml
|
||||
+ actualHtml
|
||||
+ actualUnitPriceHtml
|
||||
+ actualTotalPriceHtml
|
||||
+ actionsHtml
|
||||
+ '</div>';
|
||||
html += rowHtml;
|
||||
}
|
||||
|
||||
if (selectedOrder.foods.length === 0) {
|
||||
@@ -1565,14 +1604,38 @@
|
||||
updateOrderSummary();
|
||||
}
|
||||
|
||||
/* 更新食材单价（用户编辑） */
|
||||
function updateFoodPrice(idx, newPrice) {
|
||||
/* 更新实收单价(用户编辑) — 与实收总价联动,仅刷新对方 DOM 不重渲染避免光标丢失 */
|
||||
function updateActualUnitPrice(idx, newVal) {
|
||||
if (!selectedOrder || idx < 0) return;
|
||||
var price = parseFloat(newPrice);
|
||||
if (isNaN(price) || price < 0) return;
|
||||
selectedOrder.foods[idx]._customPrice = price;
|
||||
renderFoodList();
|
||||
calculateAmounts();
|
||||
var price = parseFloat(newVal);
|
||||
if (isNaN(price) || price < 0) price = 0;
|
||||
var f = selectedOrder.foods[idx];
|
||||
f._customActualUnitPrice = price;
|
||||
/* 反算总价 = 单价 × 实收量,同步写回同行总价输入框 */
|
||||
var actual = (accumulatedWeights[idx] !== undefined) ? accumulatedWeights[idx] : 0;
|
||||
var totalEl = document.querySelector('.food-row__price-input[data-field="totalPrice"][data-idx="' + idx + '"]');
|
||||
if (totalEl) {
|
||||
var totalVal = price * actual;
|
||||
f._customActualTotalPrice = totalVal;
|
||||
totalEl.value = totalVal.toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 更新实收总价(用户编辑) — 与实收单价联动 */
|
||||
function updateActualTotalPrice(idx, newVal) {
|
||||
if (!selectedOrder || idx < 0) return;
|
||||
var price = parseFloat(newVal);
|
||||
if (isNaN(price) || price < 0) price = 0;
|
||||
var f = selectedOrder.foods[idx];
|
||||
f._customActualTotalPrice = price;
|
||||
/* 反算单价 = 总价 / 实收量;实收量为 0 时单价置 0(避免除零) */
|
||||
var actual = (accumulatedWeights[idx] !== undefined) ? accumulatedWeights[idx] : 0;
|
||||
var unitEl = document.querySelector('.food-row__price-input[data-field="unitPrice"][data-idx="' + idx + '"]');
|
||||
if (unitEl) {
|
||||
var unitVal = actual > 0 ? (price / actual) : 0;
|
||||
f._customActualUnitPrice = unitVal;
|
||||
unitEl.value = unitVal.toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 更新食材规格/单位（用户编辑） */
|
||||
|
||||
@@ -8,11 +8,26 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
background: #0e1326; color: #fff; width: 1280px; height: 720px; overflow: hidden;
|
||||
background: #05080f;
|
||||
min-height: 760px; min-width: 1320px;
|
||||
display: grid; place-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
/* PAD 居中外壳 */
|
||||
.device-frame {
|
||||
width: 1280px; height: 720px;
|
||||
flex-shrink: 0;
|
||||
background: #0e1326; color: #fff;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: flex; align-items: center; height: 44px; background: #1a2b4a; padding: 0 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.back-btn {
|
||||
font-size: 14px; cursor: pointer; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s;
|
||||
@@ -25,6 +40,7 @@
|
||||
.main-area {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
|
||||
padding: 32px 40px; height: calc(100% - 44px); align-content: start;
|
||||
flex: 1; min-height: 0;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
@@ -101,9 +117,11 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="device-frame">
|
||||
|
||||
<a class="back-btn" id="backBtn" href="javascript:void(0)">◀ 返回</a> <span class="page-title">设置</span>
|
||||
<div class="top-bar">
|
||||
<a class="back-btn" id="backBtn" href="javascript:void(0)">◀ 返回</a>
|
||||
<span class="page-title">设置</span>
|
||||
<button class="logout-btn" onclick="handleLogout()">退出</button>
|
||||
</div>
|
||||
|
||||
@@ -167,11 +185,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="back-link" href="00-welcome.html">◀ 返回首页</a>
|
||||
<a class="back-link" id="backLink" href="javascript:void(0)">◀ 返回首页</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
@@ -200,20 +220,16 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
/* 返回按钮：从哪来回哪去 */
|
||||
/* 返回按钮：从哪来回哪去（顶部 back-btn 与底部 back-link 共用同一逻辑） */
|
||||
(function() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var referer = params.get('referer');
|
||||
var target = referer
|
||||
|| (document.referrer && document.referrer.indexOf(window.location.hostname) !== -1 ? document.referrer : 'index.html');
|
||||
var backBtn = document.getElementById('backBtn');
|
||||
if (backBtn) {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var referer = params.get('referer');
|
||||
if (referer) {
|
||||
backBtn.href = referer;
|
||||
} else if (document.referrer && document.referrer.indexOf(window.location.hostname) !== -1) {
|
||||
backBtn.href = document.referrer;
|
||||
} else {
|
||||
backBtn.href = 'index.html';
|
||||
}
|
||||
}
|
||||
if (backBtn) backBtn.href = target;
|
||||
var backLink = document.getElementById('backLink');
|
||||
if (backLink) backLink.href = target;
|
||||
})();
|
||||
|
||||
</body>
|
||||
|
||||
@@ -8,7 +8,20 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
background: #0e1326; color: #fff; width: 1280px; height: 720px; overflow: hidden;
|
||||
background: #05080f;
|
||||
min-height: 760px; min-width: 1320px;
|
||||
display: grid; place-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
/* PAD 居中外壳（承接原 body 的 flex column 布局职责） */
|
||||
.device-frame {
|
||||
width: 1280px; height: 720px;
|
||||
flex-shrink: 0;
|
||||
background: #0e1326; color: #fff;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
@@ -225,9 +238,11 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="device-frame">
|
||||
|
||||
<a class="back-btn" id="backBtn" href="javascript:void(0)">◀ 返回</a> <span class="page-title">验收记录</span>
|
||||
<div class="top-bar">
|
||||
<a class="back-btn" id="backBtn" href="javascript:void(0)">◀ 返回</a>
|
||||
<span class="page-title">验收记录</span>
|
||||
<button class="logout-btn" onclick="handleLogout()">退出</button>
|
||||
</div>
|
||||
|
||||
@@ -312,6 +327,8 @@
|
||||
<div class="table-footer" id="tableFooter">共 0 条记录</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 退出登录 */
|
||||
function handleLogout() {
|
||||
@@ -702,5 +719,6 @@
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -8,11 +8,25 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
background: #0e1326; color: #fff; width: 1280px; height: 720px; overflow: hidden;
|
||||
background: #05080f;
|
||||
min-height: 760px; min-width: 1320px;
|
||||
display: grid; place-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
/* PAD 居中外壳 */
|
||||
.device-frame {
|
||||
width: 1280px; height: 720px;
|
||||
flex-shrink: 0;
|
||||
background: #0e1326; color: #fff;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
/* ---- 顶部导航栏 ---- */
|
||||
.top-bar { display: flex; align-items: center; height: 44px; background: #1a2b4a; padding: 0 20px; }
|
||||
.top-bar { display: flex; align-items: center; height: 44px; background: #1a2b4a; padding: 0 20px; flex-shrink: 0; }
|
||||
.top-bar__title { flex: 1; text-align: center; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85); }
|
||||
.back-btn { font-size: 14px; cursor: pointer; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s; }
|
||||
.back-btn:hover { color: #fff; }
|
||||
@@ -25,7 +39,7 @@ body {
|
||||
}
|
||||
.logout-btn:hover { background: rgba(255,77,79,0.18); color: #ff6b6d; border-color: rgba(255,77,79,0.4); }
|
||||
|
||||
.main-content { display: flex; gap: 16px; padding: 16px 20px; height: calc(100% - 44px); }
|
||||
.main-content { display: flex; gap: 16px; padding: 16px 20px; height: calc(100% - 44px); flex: 1; min-height: 0; }
|
||||
|
||||
/* ========== 左侧：食材选择区 ========== */
|
||||
.food-select-area {
|
||||
@@ -244,10 +258,12 @@ body {
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
|
||||
<a class="back-btn" id="backBtn" href="javascript:void(0)">◀ 返回</a> <span class="top-bar__title">食材采样</span>
|
||||
<a class="back-btn" id="backBtn" href="javascript:void(0)">◀ 返回</a>
|
||||
<span class="top-bar__title">食材采样</span>
|
||||
<button class="logout-btn" onclick="handleLogout()">退出</button>
|
||||
</div>
|
||||
|
||||
@@ -319,6 +335,8 @@ body {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
|
||||
@@ -8,7 +8,20 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
background: #0e1326; color: #fff; width: 1280px; height: 720px; overflow: hidden;
|
||||
background: #05080f;
|
||||
min-height: 760px; min-width: 1320px;
|
||||
display: grid; place-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
/* PAD 居中外壳 */
|
||||
.device-frame {
|
||||
width: 1280px; height: 720px;
|
||||
flex-shrink: 0;
|
||||
background: #0e1326; color: #fff;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
@@ -30,7 +43,7 @@ body {
|
||||
.logout-btn:hover { background: rgba(255,77,79,0.18); color: #ff6b6d; border-color: rgba(255,77,79,0.4); }
|
||||
|
||||
/* ---- 主内容区：左右两列 ---- */
|
||||
.main-content { display: flex; gap: 16px; padding: 16px 20px; height: calc(100% - 44px); }
|
||||
.main-content { display: flex; gap: 16px; padding: 16px 20px; height: calc(100% - 44px); flex: 1; min-height: 0; }
|
||||
|
||||
/* ===== 左侧：快捷查找面板 ===== */
|
||||
.search-panel {
|
||||
@@ -191,10 +204,12 @@ body {
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
|
||||
<a class="back-btn" id="backBtn" href="javascript:void(0)">◀ 返回</a> <span class="top-bar__title">采样历史</span>
|
||||
<a class="back-btn" id="backBtn" href="javascript:void(0)">◀ 返回</a>
|
||||
<span class="top-bar__title">采样历史</span>
|
||||
<button class="logout-btn" onclick="handleLogout()">退出</button>
|
||||
</div>
|
||||
|
||||
@@ -259,6 +274,8 @@ body {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
|
||||
@@ -8,10 +8,25 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
background: #0e1326; color: #fff; width: 1280px; height: 720px; overflow: hidden;
|
||||
background: #05080f;
|
||||
min-height: 760px; min-width: 1320px;
|
||||
display: grid; place-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
/* PAD 居中外壳 */
|
||||
.device-frame {
|
||||
width: 1280px; height: 720px;
|
||||
flex-shrink: 0;
|
||||
background: #0e1326; color: #fff;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.top-bar {
|
||||
display: flex; align-items: center; height: 44px; background: #1a2b4a; padding: 0 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.top-bar__title {
|
||||
flex: 1; text-align: center; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85);
|
||||
@@ -19,6 +34,7 @@
|
||||
.main-content {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px;
|
||||
padding: 24px 40px; height: calc(100% - 44px); align-content: center;
|
||||
flex: 1; min-height: 0;
|
||||
}
|
||||
.card {
|
||||
display: flex; align-items: center; gap: 20px; padding: 24px 28px;
|
||||
@@ -38,59 +54,64 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<span class="top-bar__title">毛菜验收秤</span>
|
||||
</div>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="top-bar">
|
||||
<span class="top-bar__title">毛菜验收秤</span>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<!-- 卡片统一指向登录页,登录成功后由 00-welcome 承载功能菜单,避免无登录态直进内页 -->
|
||||
<a class="card" href="00-login.html">
|
||||
<span class="card__icon">🔑</span>
|
||||
<div class="card__info">
|
||||
<div class="card__title">员工登录</div>
|
||||
<div class="card__desc">人脸识别、账号密码登录</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</a>
|
||||
<a class="card" href="00-login.html">
|
||||
<span class="card__icon">⚖️</span>
|
||||
<div class="card__info">
|
||||
<div class="card__title">验收操作</div>
|
||||
<div class="card__desc">订单选择、称重验收、不合格处理</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</a>
|
||||
<a class="card" href="00-login.html">
|
||||
<span class="card__icon">🔍</span>
|
||||
<div class="card__info">
|
||||
<div class="card__title">食材采样</div>
|
||||
<div class="card__desc">采样操作、外观品级判定、保存采样</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</a>
|
||||
<a class="card" href="00-login.html">
|
||||
<span class="card__icon">📋</span>
|
||||
<div class="card__info">
|
||||
<div class="card__title">采样历史</div>
|
||||
<div class="card__desc">采样记录查看与筛选</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</a>
|
||||
<a class="card" href="00-login.html">
|
||||
<span class="card__icon">📝</span>
|
||||
<div class="card__info">
|
||||
<div class="card__title">验收记录</div>
|
||||
<div class="card__desc">历史验收记录查看与筛选</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</a>
|
||||
<a class="card" href="00-login.html">
|
||||
<span class="card__icon">⚙️</span>
|
||||
<div class="card__info">
|
||||
<div class="card__title">设置</div>
|
||||
<div class="card__desc">偏差率阈值配置、设备状态</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<a class="card" href="00-login.html">
|
||||
<span class="card__icon">🔐</span>
|
||||
<div class="card__info">
|
||||
<div class="card__title">员工登录</div>
|
||||
<div class="card__desc">人脸识别、账号密码登录</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</a>
|
||||
<a class="card" href="01-verify-inspection.html">
|
||||
<span class="card__icon">⚖️</span>
|
||||
<div class="card__info">
|
||||
<div class="card__title">验收操作</div>
|
||||
<div class="card__desc">订单选择、称重验收、不合格处置</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</a>
|
||||
<a class="card" href="04-ingredient-sampling.html">
|
||||
<span class="card__icon">🔍</span>
|
||||
<div class="card__info">
|
||||
<div class="card__title">食材采样</div>
|
||||
<div class="card__desc">采样操作、外观品级判定、保存采样</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</a>
|
||||
<a class="card" href="05-sampling-history.html">
|
||||
<span class="card__icon">📋</span>
|
||||
<div class="card__info">
|
||||
<div class="card__title">采样历史</div>
|
||||
<div class="card__desc">采样记录查看与筛选</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</a>
|
||||
<a class="card" href="03-verify-history.html">
|
||||
<span class="card__icon">📝</span>
|
||||
<div class="card__info">
|
||||
<div class="card__title">验收记录</div>
|
||||
<div class="card__desc">历史验收记录查看与筛选</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</a>
|
||||
<a class="card" href="02-settings.html">
|
||||
<span class="card__icon">⚙️</span>
|
||||
<div class="card__info">
|
||||
<div class="card__title">设置</div>
|
||||
<div class="card__desc">偏差率阈值配置、设备状态</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -147,52 +147,6 @@
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 倒计时圆环 */
|
||||
.countdown-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px 0 16px;
|
||||
}
|
||||
.countdown-ring {
|
||||
position: relative;
|
||||
width: 110px; height: 110px;
|
||||
}
|
||||
.countdown-ring svg {
|
||||
width: 100%; height: 100%;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.countdown-track {
|
||||
fill: none;
|
||||
stroke: rgba(255, 255, 255, 0.3);
|
||||
stroke-width: 8;
|
||||
}
|
||||
.countdown-progress {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-width: 8;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 283;
|
||||
transition: stroke-dashoffset 1s linear;
|
||||
}
|
||||
.countdown-number {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
.countdown-number__val {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.countdown-number__unit {
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 订单卡片 */
|
||||
.order-card {
|
||||
background: white;
|
||||
@@ -489,20 +443,6 @@
|
||||
<div class="ring-subtitle">调度中心为您指派了新订单</div>
|
||||
</div>
|
||||
|
||||
<!-- 倒计时 -->
|
||||
<div class="countdown-section">
|
||||
<div class="countdown-ring">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="45" class="countdown-track"/>
|
||||
<circle cx="50" cy="50" r="45" class="countdown-progress" id="progress"/>
|
||||
</svg>
|
||||
<div class="countdown-number">
|
||||
<div class="countdown-number__val" id="countdownVal">30</div>
|
||||
<div class="countdown-number__unit">秒后自动拒绝</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单摘要卡片 -->
|
||||
<div class="order-card">
|
||||
<div class="order-card__head">
|
||||
@@ -622,34 +562,8 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 倒计时
|
||||
const TOTAL = 30;
|
||||
const CIRC = 2 * Math.PI * 45;
|
||||
let remaining = TOTAL;
|
||||
const progressEl = document.getElementById('progress');
|
||||
const valEl = document.getElementById('countdownVal');
|
||||
progressEl.style.strokeDasharray = CIRC;
|
||||
|
||||
function renderProgress() {
|
||||
const offset = CIRC * (1 - remaining / TOTAL);
|
||||
progressEl.style.strokeDashoffset = offset;
|
||||
valEl.textContent = remaining;
|
||||
}
|
||||
renderProgress();
|
||||
|
||||
const timer = setInterval(() => {
|
||||
remaining--;
|
||||
renderProgress();
|
||||
if (remaining <= 0) {
|
||||
clearInterval(timer);
|
||||
alert('已超时未响应,此单已自动转派');
|
||||
location.href = '01-home.html';
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// 接受
|
||||
function acceptOrder() {
|
||||
clearInterval(timer);
|
||||
alert('✅ 已接单,请尽快到达取货地点');
|
||||
location.href = '04-order-detail.html?orderId=DP20260812-0928&state=accepted';
|
||||
}
|
||||
@@ -674,7 +588,6 @@
|
||||
alert('请选择拒单理由');
|
||||
return;
|
||||
}
|
||||
clearInterval(timer);
|
||||
alert('已拒单 · 理由:' + selectedReason);
|
||||
location.href = '01-home.html';
|
||||
}
|
||||
|
||||
@@ -354,11 +354,6 @@
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.btn--ghost {
|
||||
background: var(--background);
|
||||
color: var(--text-primary);
|
||||
flex: 0 0 110px;
|
||||
}
|
||||
.btn--primary {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||||
color: white;
|
||||
@@ -593,7 +588,6 @@
|
||||
</div>
|
||||
|
||||
<div class="action-bar">
|
||||
<button class="btn btn--ghost" onclick="toast('异常上报页面开发中')">⚠ 异常</button>
|
||||
<button class="btn btn--primary" onclick="location.href='05-delivering.html'">🚀 到店报到</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -380,27 +380,132 @@
|
||||
background: var(--success);
|
||||
color: white;
|
||||
}
|
||||
.icon-btn--msg {
|
||||
background: var(--info);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.order-summary {
|
||||
/* 商家信息(弱化) */
|
||||
.merchant-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 12px 14px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
background: #fafbfc;
|
||||
}
|
||||
.summary-cell { text-align: center; }
|
||||
.summary-num {
|
||||
font-size: 17px;
|
||||
.merchant-bar__label {
|
||||
color: var(--text-tertiary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.merchant-bar__name {
|
||||
flex: 1;
|
||||
color: var(--text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.merchant-bar__call {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
background: white;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-primary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.merchant-bar__call:active { background: var(--background); }
|
||||
|
||||
/* 餐品清单 */
|
||||
.card__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.card__title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.card__title::before {
|
||||
content: '';
|
||||
width: 4px; height: 14px;
|
||||
background: var(--primary);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.goods-list { padding: 0; }
|
||||
.goods-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
.goods-item:last-child { border-bottom: none; }
|
||||
.goods-img {
|
||||
width: 44px; height: 44px;
|
||||
background: linear-gradient(135deg, #fef3c7, #fed7aa);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.goods-info { flex: 1; }
|
||||
.goods-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.goods-spec {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.goods-qty {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
.summary-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2px;
|
||||
.tag-list {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.info-tag {
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
background: #f3f4f6;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.info-tag--warn {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
/* 订单信息列表 */
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
.info-label { color: var(--text-secondary); }
|
||||
.info-value { color: var(--text-primary); font-weight: 600; }
|
||||
|
||||
/* 操作按钮 */
|
||||
.action-bar {
|
||||
@@ -547,6 +652,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商家信息(弱化) -->
|
||||
<div class="merchant-bar">
|
||||
<span class="merchant-bar__label">取自商家</span>
|
||||
<span class="merchant-bar__name">味之都食堂·高新店</span>
|
||||
<a href="javascript:void(0)" class="merchant-bar__call" onclick="toast('正在呼叫商家王经理')">📞 联系商家</a>
|
||||
</div>
|
||||
|
||||
<!-- 客户信息 -->
|
||||
<div class="card">
|
||||
<div class="customer-card">
|
||||
@@ -557,29 +669,94 @@
|
||||
</div>
|
||||
<div class="customer-actions">
|
||||
<button class="icon-btn icon-btn--call" onclick="toast('正在呼叫张女士')">📞</button>
|
||||
<button class="icon-btn icon-btn--msg" onclick="toast('已发送到达提醒短信')">💬</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:8px 14px 14px;font-size:12px;color:var(--text-secondary);line-height:1.6;border-top:1px dashed var(--border);margin-top:4px">
|
||||
💬 <strong style="color:var(--text-primary)">客户备注:</strong>
|
||||
麻烦放门口即可,不要按门铃,孩子正在午休。
|
||||
麻烦放门口即可,不要按门铃,孩子正在午休。电话联系后放在 1802 门口鞋柜上,谢谢!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单概览 -->
|
||||
<!-- 餐品清单 -->
|
||||
<div class="card">
|
||||
<div class="order-summary">
|
||||
<div class="summary-cell">
|
||||
<div class="summary-num">4 份</div>
|
||||
<div class="summary-label">餐品</div>
|
||||
<div class="card__head">
|
||||
<div class="card__title">餐品清单</div>
|
||||
<span style="font-size:12px;color:var(--text-secondary)">共 4 份</span>
|
||||
</div>
|
||||
<div class="goods-list">
|
||||
<div class="goods-item">
|
||||
<div class="goods-img">🍱</div>
|
||||
<div class="goods-info">
|
||||
<div class="goods-name">红烧牛肉套餐</div>
|
||||
<div class="goods-spec">主荤·标准份 · 含米饭/汤</div>
|
||||
</div>
|
||||
<div class="goods-qty">×2</div>
|
||||
</div>
|
||||
<div class="summary-cell">
|
||||
<div class="summary-num">2.6km</div>
|
||||
<div class="summary-label">配送距离</div>
|
||||
<div class="goods-item">
|
||||
<div class="goods-img">🥗</div>
|
||||
<div class="goods-info">
|
||||
<div class="goods-name">清炒时蔬套餐</div>
|
||||
<div class="goods-spec">素菜·小份 · 含米饭</div>
|
||||
</div>
|
||||
<div class="goods-qty">×1</div>
|
||||
</div>
|
||||
<div class="summary-cell">
|
||||
<div class="summary-num">15:45</div>
|
||||
<div class="summary-label">要求送达</div>
|
||||
<div class="goods-item">
|
||||
<div class="goods-img">🍲</div>
|
||||
<div class="goods-info">
|
||||
<div class="goods-name">番茄鸡蛋汤</div>
|
||||
<div class="goods-spec">汤类·大份</div>
|
||||
</div>
|
||||
<div class="goods-qty">×1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag-list">
|
||||
<span class="info-tag info-tag--warn">⚠ 已核对溯源码</span>
|
||||
<span class="info-tag">📦 含冷链保温箱</span>
|
||||
<span class="info-tag">🥢 含餐具 4 份</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<div class="card">
|
||||
<div class="card__head">
|
||||
<div class="card__title">订单信息</div>
|
||||
</div>
|
||||
<div class="info-list">
|
||||
<div class="info-row">
|
||||
<span class="info-label">订单编号</span>
|
||||
<span class="info-value">DP20260812-0928</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">订单类型</span>
|
||||
<span class="info-value">到家配送</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">接单方式</span>
|
||||
<span class="info-value" style="color:var(--primary)">📌 派单</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">下单时间</span>
|
||||
<span class="info-value">14:08:25</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">接单时间</span>
|
||||
<span class="info-value">14:10:12</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">餐品份数</span>
|
||||
<span class="info-value">4 份</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">配送距离</span>
|
||||
<span class="info-value">2.6 km</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">要求送达</span>
|
||||
<span class="info-value">15:45 前</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">收货方式</span>
|
||||
<span class="info-value" style="color:var(--primary)">🔢 验证码收货</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,20 @@
|
||||
# 营养管理餐品配送 H5 模块变更日志
|
||||
|
||||
## 2026-08-14 · 派单/配送流程降噪与信息补全
|
||||
|
||||
### 优化
|
||||
- **`02-dispatch-incoming.html` 移除派单倒计时**:去除"30 秒倒计时圆环 + 超时自动拒绝转派"逻辑与弹层,派单响应不再强制限时
|
||||
- **`02-dispatch-incoming.html` / `04-order-detail.html` 移除异常上报按钮**:去除「⚠ 异常」占位按钮(异常上报页面暂不进入业务路径)
|
||||
- **`05-delivering.html` 新增商家信息弱化条**:页面顶部增加"取自商家"信息条(商家名 + 📞 联系商家),样式弱化不抢主流程视觉
|
||||
- **`05-delivering.html` 补全用户备注展示**:完整展示下单备注全文(如"麻烦放门口即可,不要按门铃…"类长文本),替代此前的短信提醒按钮(💬 到达提醒)
|
||||
- **`05-delivering.html` 信息结构卡片化**:「餐品清单」「订单信息」拆分为独立卡片区块,信息层级更清晰
|
||||
|
||||
### 业务约定更新
|
||||
- 派单不设强制响应倒计时,超时自动转派机制暂缓
|
||||
- 配送中页面强化"联系商家"能力,配送员取货前可与商家直接通话
|
||||
|
||||
---
|
||||
|
||||
## 2026-08-12 · 工作台与个人中心简化（第四版）
|
||||
|
||||
### 优化
|
||||
|
||||
Reference in New Issue
Block a user