feat(docs): 收银台原型（扫码/手机拉起/三态）+ 客服邮箱切换 support@51yanmei.com
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wangjia
@@ -155,6 +155,7 @@
|
||||
<a class="kit" href="screens/users.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic45"/></svg></div><div class="kt"><b>用户管理</b><span>成员/角色 · 新增编辑弹窗</span></div></a>
|
||||
<a class="kit" href="screens/pricing.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic07"/></svg></div><div class="kt"><b>购买授权</b><span>时长套餐 · 版本档位</span></div></a>
|
||||
<a class="kit" href="screens/checkout.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic67"/></svg></div><div class="kt"><b>确认订单</b><span>下单 · 开票 · 无支付占位</span></div></a>
|
||||
<a class="kit" href="screens/pay.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic08"/></svg></div><div class="kt"><b>收银台</b><span>订单信息 · 支付宝扫码 · 三态</span></div></a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,213 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-theme="a">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>收银台 · 岩美酒库</title>
|
||||
<link rel="stylesheet" href="../tokens.css">
|
||||
<link rel="stylesheet" href="../atoms.css">
|
||||
<style>
|
||||
/* ====== 官网收银台（独立页，无 app 壳）：App/官网「提交订单」后落地，替代支付宝托管扫码页 ====== */
|
||||
body{margin:0; min-height:100vh; font-family:var(--font); color:var(--text); background:var(--bg);}
|
||||
a{color:var(--primary); text-decoration:none;}
|
||||
|
||||
/* 顶部品牌条（对齐官网 nav 的精简版） */
|
||||
.topbar{height:56px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 28px; gap:10px;}
|
||||
.topbar .logo{width:28px; height:28px; border-radius:8px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;}
|
||||
.topbar .logo svg{width:16px; height:16px; stroke-width:2;}
|
||||
.topbar b{font-size:var(--fs-title); color:var(--heading);}
|
||||
.topbar .sub{font-size:var(--fs-sm); color:var(--muted); border-left:1px solid var(--border); padding-left:10px;}
|
||||
.topbar .safe{margin-left:auto; display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted);}
|
||||
.topbar .safe svg{width:14px; height:14px; stroke-width:2; color:var(--success);}
|
||||
|
||||
.wrap{max-width:880px; margin:0 auto; padding:36px 24px 72px;}
|
||||
.crumb{display:flex; align-items:center; gap:7px; font-size:var(--fs-sm); color:var(--muted); margin-bottom:12px;}
|
||||
h1{margin:0 0 18px; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
|
||||
|
||||
.pay-grid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:22px; align-items:start;}
|
||||
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px;}
|
||||
.card h2{margin:0 0 14px; font-size:var(--fs-h2); color:var(--heading);}
|
||||
|
||||
/* 左：订单信息 */
|
||||
.item{display:flex; align-items:center; gap:14px; padding:2px 0 14px; border-bottom:1px solid var(--border-subtle);}
|
||||
.item .ic{width:46px; height:46px; border-radius:var(--r-md); background:var(--brand50); color:var(--primary); display:flex; align-items:center; justify-content:center; flex:none;}
|
||||
.item .ic svg{width:24px; height:24px; stroke-width:1.7;}
|
||||
.item .meta b{display:block; font-size:var(--fs-body); color:var(--heading); font-weight:600;}
|
||||
.item .meta span{font-size:var(--fs-sm); color:var(--muted);}
|
||||
.drow{display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:var(--fs-sm); border-bottom:1px solid var(--border-subtle);}
|
||||
.drow .k{color:var(--muted); flex:none;}
|
||||
.drow .v{color:var(--text); text-align:right;}
|
||||
.drow .v.mono{font-family:var(--font-mono);}
|
||||
.sum{margin-top:12px;}
|
||||
.sum-row{display:flex; justify-content:space-between; font-size:var(--fs-sm); color:var(--muted); padding:5px 0;}
|
||||
.sum-total{display:flex; justify-content:space-between; align-items:baseline; padding-top:8px;}
|
||||
.sum-total .lab{font-size:var(--fs-body); color:var(--heading); font-weight:600;}
|
||||
.sum-total .val{font-size:var(--fs-display); font-weight:800; color:var(--primary); font-family:var(--font-mono); letter-spacing:-.5px;}
|
||||
.fine{font-size:var(--fs-xs); color:var(--faint); margin-top:14px; line-height:1.7;}
|
||||
|
||||
/* 右：扫码支付 */
|
||||
.qr-card{text-align:center; position:sticky; top:24px;}
|
||||
.qr-card h2{display:flex; align-items:center; justify-content:center; gap:8px;}
|
||||
.qr-card h2 .ali{width:22px; height:22px; border-radius:6px; background:#1677FF; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;} /* ds-allow 支付宝品牌色 */
|
||||
.qr-box{position:relative; width:216px; height:216px; margin:14px auto 4px; border:1px solid var(--border); border-radius:var(--r-md); padding:10px; background:#fff;} /* ds-allow 二维码底必须纯白 */
|
||||
.qr-box canvas{display:block; width:100%; height:100%;}
|
||||
.qr-badge{position:absolute; inset:0; margin:auto; width:40px; height:40px; border-radius:10px; background:#1677FF; color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; border:3px solid #fff;} /* ds-allow 支付宝品牌色 */
|
||||
.qr-amt{font-size:var(--fs-display); font-weight:800; color:var(--heading); font-family:var(--font-mono); margin-top:10px;}
|
||||
.qr-amt s{font-size:var(--fs-sm); color:var(--faint); font-weight:400; margin-right:8px;}
|
||||
.qr-hint{font-size:var(--fs-sm); color:var(--muted); margin-top:4px;}
|
||||
|
||||
.status{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; padding:10px; border-radius:var(--r-md); background:var(--bg); font-size:var(--fs-sm); color:var(--text);}
|
||||
.spin{width:14px; height:14px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--primary); animation:sp 1s linear infinite; flex:none;}
|
||||
@keyframes sp{to{transform:rotate(360deg)}}
|
||||
.ttl{font-size:var(--fs-xs); color:var(--faint); margin-top:10px;}
|
||||
.ttl b{color:var(--warn); font-family:var(--font-mono); font-weight:600;}
|
||||
|
||||
/* 手机 Web 形态：扫码区换成拉起支付宝按钮（UA 判定，原型里按视宽/开关模拟） */
|
||||
.wap-cta{display:none; flex-direction:column; align-items:center; gap:10px; margin:18px 0 6px;}
|
||||
.wap-cta .btn{width:100%; max-width:280px; justify-content:center;}
|
||||
.wap-cta .alt{font-size:var(--fs-xs); color:var(--faint);}
|
||||
.wap .wap-cta{display:flex;}
|
||||
.wap .qr-box,.wap .qr-hint{display:none;}
|
||||
.wap.expired .wap-cta{display:none;}
|
||||
.exp-box{display:none; flex-direction:column; align-items:center; gap:12px; padding:22px 0 10px;}
|
||||
.exp-box p{margin:0; font-size:var(--fs-sm); color:var(--heading); font-weight:600;}
|
||||
.wap.expired .exp-box{display:flex;}
|
||||
|
||||
/* 过期遮罩 */
|
||||
.qr-mask{position:absolute; inset:0; border-radius:var(--r-md); background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(2px); display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px;}
|
||||
.qr-mask p{margin:0; font-size:var(--fs-sm); color:var(--heading); font-weight:600;}
|
||||
.expired .qr-mask{display:flex;}
|
||||
.expired .status,.expired .ttl{display:none;}
|
||||
|
||||
/* 成功态（整卡替换） */
|
||||
.done{display:none; text-align:center; padding:26px 8px 10px;}
|
||||
.done .ring{width:64px; height:64px; border-radius:50%; background:var(--ok-soft); color:var(--success); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
|
||||
.done .ring svg{width:34px; height:34px; stroke-width:2.4;}
|
||||
.done h3{margin:0 0 6px; font-size:var(--fs-h2); color:var(--heading);}
|
||||
.done p{margin:0 0 18px; font-size:var(--fs-sm); color:var(--muted); line-height:1.8;}
|
||||
.paid .done{display:block;}
|
||||
.paid .qr-box,.paid .qr-amt,.paid .qr-hint,.paid .status,.paid .ttl,.paid h2{display:none;}
|
||||
|
||||
@media (max-width:760px){ .pay-grid{grid-template-columns:1fr;} .qr-card{position:static; order:-1;} .wrap{padding-top:20px;} }
|
||||
|
||||
/* 设计期状态切换（评审用，不入实现） */
|
||||
.ds-states{position:fixed; left:22px; bottom:22px; display:flex; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:5px; box-shadow:var(--sh-2); z-index:var(--z-fab);}
|
||||
.ds-states button{border:none; background:none; font:inherit; font-size:var(--fs-xs); color:var(--muted); padding:5px 12px; border-radius:var(--r-pill); cursor:pointer;}
|
||||
.ds-states button.on{background:var(--brand50); color:var(--primary); font-weight:600;}
|
||||
.ds-fab{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); z-index:var(--z-fab); opacity:.6; transition:.18s; text-decoration:none;}
|
||||
.ds-fab:hover{opacity:1; color:var(--primary); border-color:var(--primary);}
|
||||
.ds-fab svg{width:20px; height:20px; stroke-width:2; fill:none; stroke:currentColor;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="topbar">
|
||||
<div class="logo"><svg viewBox="0 0 24 24"><use href="#i-bottle"/></svg></div>
|
||||
<b>岩美酒库</b><span class="sub">收银台</span>
|
||||
<span class="safe"><svg viewBox="0 0 24 24"><use href="#i-check"/></svg>支付宝官方渠道 · 支付成功即时到账</span>
|
||||
</div>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="crumb"><span>确认订单</span><span>/</span><span style="color:var(--heading)">支付</span></div>
|
||||
<h1>扫码支付</h1>
|
||||
|
||||
<div class="pay-grid">
|
||||
<!-- 左：订单信息 -->
|
||||
<div class="card">
|
||||
<h2>订单信息</h2>
|
||||
<div class="item">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><use href="#i-ic07"/></svg></div>
|
||||
<div class="meta"><b>岩美酒库 · 高级版年付</b><span>365 天授权 · 到期时间自动叠加，不覆盖</span></div>
|
||||
</div>
|
||||
<div class="drow"><span class="k">开通门店</span><span class="v">鼎晟酒行（S001）</span></div>
|
||||
<div class="drow"><span class="k">订单号</span><span class="v mono">yanmei-20260705061422-e1e6bbef</span></div>
|
||||
<div class="drow"><span class="k">下单时间</span><span class="v mono">2026-07-05 14:14</span></div>
|
||||
<div class="drow"><span class="k">支付方式</span><span class="v">支付宝</span></div>
|
||||
<div class="drow"><span class="k">收款方</span><span class="v">岩美（北京）技术有限公司</span></div>
|
||||
<div class="sum">
|
||||
<div class="sum-row"><span>套餐原价</span><span>¥5,999</span></div>
|
||||
<div class="sum-row"><span>优惠</span><span>− ¥0</span></div>
|
||||
<div class="sum-total"><span class="lab">应付总额</span><span class="val">¥5,999</span></div>
|
||||
</div>
|
||||
<div class="fine">支付成功后授权即时到账，回到应用即可看到新的到期时间；如需发票或对公转账，请联系 support@51yanmei.com。</div>
|
||||
</div>
|
||||
|
||||
<!-- 右：二维码 / 成功态 -->
|
||||
<div class="card qr-card" id="qrCard">
|
||||
<h2><span class="ali">支</span>支付宝扫码支付</h2>
|
||||
<div class="qr-box">
|
||||
<canvas id="qr" width="196" height="196"></canvas>
|
||||
<div class="qr-badge">支</div>
|
||||
<div class="qr-mask">
|
||||
<p>二维码已失效</p>
|
||||
<button class="btn primary" onclick="setState('pending')">重新生成二维码</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qr-amt"><s>¥6,999</s>¥5,999</div>
|
||||
<div class="qr-hint">打开手机支付宝「扫一扫」完成付款</div>
|
||||
<div class="wap-cta">
|
||||
<button class="btn primary lg" onclick="return false">打开支付宝付款</button>
|
||||
<span class="alt">未安装支付宝 App 时将打开网页版收银台</span>
|
||||
</div>
|
||||
<div class="exp-box">
|
||||
<p>订单已失效</p>
|
||||
<button class="btn primary" onclick="setState('pending')">重新下单</button>
|
||||
</div>
|
||||
<div class="status"><span class="spin"></span>等待支付 · 支付结果自动检测，无需刷新</div>
|
||||
<div class="ttl">订单 <b id="ttl">14:32</b> 后失效，失效后可重新下单</div>
|
||||
|
||||
<div class="done">
|
||||
<div class="ring"><svg viewBox="0 0 24 24"><use href="#i-ic10"/></svg></div>
|
||||
<h3>支付成功</h3>
|
||||
<p>高级版授权已到账，新到期时间 <b style="color:var(--heading)">2027-08-04</b>。<br>本页可以关闭，返回应用即可使用。</p>
|
||||
<a class="btn ghost" href="#" onclick="return false">查看订单与发票</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设计期控件：三态切换（仅评审） -->
|
||||
<div class="ds-states">
|
||||
<button class="on" onclick="setState('pending')">待支付</button>
|
||||
<button onclick="setState('paid')">支付成功</button>
|
||||
<button onclick="setState('expired')">已失效</button>
|
||||
<button id="wapBtn" onclick="toggleWap()">手机Web</button>
|
||||
</div>
|
||||
<a class="ds-fab" href="../index.html" title="返回设计系统"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg></a>
|
||||
|
||||
<script src="icons.js"></script>
|
||||
<script>
|
||||
/* 假二维码（原型示意） */
|
||||
const cv=document.getElementById('qr'),ctx=cv.getContext('2d');
|
||||
let seed=7; const rnd=()=>{ seed=(seed*16807)%2147483647; return seed/2147483647; };
|
||||
ctx.fillStyle='#fff'; ctx.fillRect(0,0,196,196); ctx.fillStyle='#111'; // ds-allow 二维码示意黑白模块，实现期由真实 QR 库渲染
|
||||
const n=29,s=196/n;
|
||||
for(let y=0;y<n;y++)for(let x=0;x<n;x++){ if(rnd()>.52) ctx.fillRect(x*s,y*s,s,s); }
|
||||
function finder(x,y){ ctx.fillStyle='#111'; ctx.fillRect(x,y,s*7,s*7); ctx.fillStyle='#fff'; ctx.fillRect(x+s,y+s,s*5,s*5); ctx.fillStyle='#111'; ctx.fillRect(x+2*s,y+2*s,s*3,s*3); } // ds-allow 二维码示意黑白模块
|
||||
finder(0,0); finder(196-7*s,0); finder(0,196-7*s);
|
||||
|
||||
/* 倒计时示意 */
|
||||
let t=14*60+32;
|
||||
setInterval(()=>{ t=Math.max(0,t-1); const m=String(Math.floor(t/60)).padStart(2,'0'),sx=String(t%60).padStart(2,'0'); document.getElementById('ttl').textContent=m+':'+sx; },1000);
|
||||
|
||||
/* 三态切换（评审） */
|
||||
function setState(st){
|
||||
const c=document.getElementById('qrCard');
|
||||
c.classList.toggle('paid',st==='paid');
|
||||
c.classList.toggle('expired',st==='expired');
|
||||
const order=['pending','paid','expired'];
|
||||
document.querySelectorAll('.ds-states button:not(#wapBtn)').forEach((b,i)=>{ const hit=order[i]===st; b.classList.toggle('on',hit); });
|
||||
}
|
||||
|
||||
/* 手机 Web（wap）形态：实现期按 UA 判定；原型里窄视宽自动 + 开关可强制 */
|
||||
let forceWap=false;
|
||||
const mq=matchMedia('(max-width:760px)');
|
||||
function applyWap(){
|
||||
const on=forceWap||mq.matches;
|
||||
document.getElementById('qrCard').classList.toggle('wap',on);
|
||||
document.getElementById('wapBtn').classList.toggle('on',on);
|
||||
}
|
||||
function toggleWap(){ forceWap=!forceWap; applyWap(); }
|
||||
mq.addEventListener('change',applyWap); applyWap();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+1
-1
@@ -4,7 +4,7 @@
|
||||
"copyright": "© 2026 岩美科技 · 保留所有权利",
|
||||
"icp": "京ICP备2026039814号",
|
||||
"support": {
|
||||
"email": "yammy2023@163.com",
|
||||
"email": "support@51yanmei.com",
|
||||
"wechat": ""
|
||||
},
|
||||
"appUrl": "/app/",
|
||||
|
||||
Reference in New Issue
Block a user