feat(site): 官网全新重建(App 真相源风格)+ 四档套餐 + 在线购买流

- tokens.css/site.css 逐值对齐原型设计系统,icons 雪碧图,零外链;首页/下载/帮助/法务全站重皮肤,真实截图
- 注册与登录在官网内完成(写 shared_preferences_web 兼容 localStorage,不再跳 App)
- 价格区四档:免费/标准 299/高级 599/定制;登录后标准/高级按钮变「购买 / 续费」
- 新增 /checkout/(套餐+月付年付切换)与 /license/result/(支付回跳轮询到账)
- 登录页支持 ?next= 站内回跳;二维码措辞改「扫码看详情可分享」
- 下载页构建期真实下载链接+运行时 release 刷新;旧 features 页/死 CSS/dist 产物清理

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JJ1g8XV1YhhmHRzhwWEW7o
This commit is contained in:
wangjia
2026-07-03 20:40:21 +08:00
parent 18925d7d15
commit d256e7ac85
24 changed files with 1313 additions and 1977 deletions
+92 -309
View File
@@ -1,327 +1,110 @@
---
layout: base.njk
title: 注册新门店
description: 填写门店信息,创建岩美酒库管理账户,注册完成后获取门店编用于登录客户端
pageStyle: |
.reg-page { padding: var(--space-16) 0 var(--space-24); }
.reg-wrap { max-width: 640px; margin: 0 auto; padding: 0 var(--space-4); }
.reg-hero { text-align: center; margin-bottom: var(--space-8); }
.reg-hero h1 { font-size: var(--text-3xl); font-weight: 700; margin-bottom: var(--space-2); }
.reg-hero p { color: var(--neutral-500); font-size: var(--text-md); max-width: 480px; margin: 0 auto; }
.reg-card { background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: var(--radius-xl); padding: var(--space-8); }
.reg-fieldset { border: none; padding: 0; margin: 0 0 var(--space-8); }
.reg-legend { font-size: var(--text-sm); font-weight: 600; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--neutral-100); display: block; width: 100%; }
.form-row { margin-bottom: var(--space-5); }
.form-label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--neutral-700); margin-bottom: var(--space-1-5); }
.form-label .req { color: var(--error-500); margin-left: 2px; }
.form-input, .form-textarea { width: 100%; padding: var(--space-2-5) var(--space-3); border: 1.5px solid var(--neutral-300); border-radius: var(--radius-md); font-size: var(--text-md); font-family: inherit; background: var(--neutral-0); color: var(--neutral-900); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.form-input.error, .form-textarea.error { border-color: var(--error-500); box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-helper { font-size: var(--text-xs); color: var(--neutral-400); margin-top: var(--space-1); }
.field-error { font-size: var(--text-xs); color: var(--error-600); margin-top: 4px; display: none; }
.field-error.visible { display: block; }
.reg-submit { width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--text-md); font-weight: 600; margin-top: var(--space-2); }
.reg-login-hint { text-align: center; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--neutral-500); }
.reg-login-hint a { color: var(--brand-600); }
.reg-error { display: none; background: var(--error-50); border: 1px solid var(--error-200); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5); font-size: var(--text-sm); color: var(--error-700); }
.reg-error.visible { display: block; }
.success-panel { display: none; text-align: center; }
.success-panel.visible { display: block; }
.success-icon { color: var(--success-500); margin-bottom: var(--space-4); }
.success-panel h2 { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-2); }
.success-panel > p { color: var(--neutral-500); margin-bottom: var(--space-6); }
.shop-code-box { background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6); display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.shop-code-text { font-size: var(--text-3xl); font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--brand-700); letter-spacing: 0.05em; }
.copy-btn { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-2) var(--space-3); background: var(--brand-600); color: #fff; border: none; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background .15s; }
.copy-btn:hover { background: var(--brand-700); }
.login-hint-card { background: var(--neutral-50); border: 1px solid var(--neutral-200); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6); text-align: left; }
.login-hint-card p { font-size: var(--text-sm); font-weight: 600; color: var(--neutral-600); margin-bottom: var(--space-3); }
.login-hint-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.login-hint-table td { padding: var(--space-1-5) var(--space-2); }
.login-hint-table td:first-child { color: var(--neutral-500); width: 80px; }
.login-hint-table td:last-child { font-weight: 500; color: var(--neutral-800); font-family: 'JetBrains Mono', monospace; }
.success-note { font-size: var(--text-xs); color: var(--neutral-400); margin-bottom: var(--space-6); }
.btn-loading { opacity: .7; cursor: not-allowed; }
description: 几分钟创建你的酒水进销存门店,注册完成后获取门店编用于登录。
permalink: /register/
---
<section class="reg-page">
<div class="reg-wrap">
<div class="reg-hero">
<h1>注册新门店</h1>
<p>填写以下信息,创建您的专属酒库管理账户。注册完成后系统自动分配门店编码,用于登录客户端。</p>
</div>
<!-- 注册表单 -->
<div class="reg-card" id="reg-form-card">
<div class="reg-error" id="reg-error"></div>
<!-- 门店信息 -->
<fieldset class="reg-fieldset">
<legend class="reg-legend">门店信息</legend>
<div class="form-row">
<label class="form-label" for="shop_name">店铺名称<span class="req">*</span></label>
<input class="form-input" type="text" id="shop_name" placeholder="例:强朋友名酒行" autocomplete="organization" />
<div class="field-error" id="err-shop_name"></div>
<div class="form-helper">您的酒行正式名称,将显示在所有单据和商品标签上</div>
</div>
<div class="form-row">
<label class="form-label" for="address">门店地址<span class="req">*</span></label>
<input class="form-input" type="text" id="address" placeholder="例:贵州省贵阳市云岩区中华北路 88 号" autocomplete="street-address" />
<div class="field-error" id="err-address"></div>
<div class="form-helper">实际经营地址,打印标签和单据时展示</div>
</div>
<div class="form-row">
<label class="form-label" for="manager_name">负责人姓名<span class="req">*</span></label>
<input class="form-input" type="text" id="manager_name" placeholder="例:张三" autocomplete="name" />
<div class="field-error" id="err-manager_name"></div>
<div class="form-helper">主要负责人真实姓名,也是首个管理员账号的姓名</div>
</div>
<div class="form-row">
<label class="form-label" for="phone">联系电话<span class="req">*</span></label>
<input class="form-input" type="tel" id="phone" placeholder="例:0851-12345678" autocomplete="tel" />
<div class="field-error" id="err-phone"></div>
<div class="form-helper">对外联系电话,打印商品标签时会展示</div>
</div>
<div class="form-row">
<label class="form-label" for="description">店铺简介</label>
<textarea class="form-textarea" id="description" placeholder="简短介绍您的门店,例:专注高端白酒批发零售,主营茅台系列" maxlength="200"></textarea>
<div class="form-helper">选填,最多 200 字;客户扫商品码时可见</div>
</div>
</fieldset>
<!-- 管理员账号 -->
<fieldset class="reg-fieldset" style="margin-bottom:0">
<legend class="reg-legend">管理员账号</legend>
<div class="form-row">
<label class="form-label" for="username">用户名<span class="req">*</span></label>
<input class="form-input" type="text" id="username" placeholder="例:admin" autocomplete="username" />
<div class="field-error" id="err-username"></div>
<div class="form-helper">登录账号(3–30 位,字母/数字/下划线),创建后不可修改</div>
</div>
<div class="form-row">
<label class="form-label" for="password">密码<span class="req">*</span></label>
<input class="form-input" type="password" id="password" placeholder="至少 6 位" autocomplete="new-password" />
<div class="field-error" id="err-password"></div>
<div class="form-helper">至少 6 位,建议字母数字组合</div>
</div>
<div class="form-row">
<label class="form-label" for="password_confirm">确认密码<span class="req">*</span></label>
<input class="form-input" type="password" id="password_confirm" placeholder="再次输入密码" autocomplete="new-password" />
<div class="field-error" id="err-password_confirm"></div>
</div>
</fieldset>
<button class="btn btn-primary reg-submit" id="reg-btn">
<i data-lucide="store" class="icon"></i>
立即注册
</button>
<p class="reg-login-hint">已有账号?<a href="/app/">直接登录</a></p>
</div>
<!-- 注册成功面板 -->
<div class="reg-card success-panel" id="success-panel">
<div class="success-icon">
<i data-lucide="check-circle" style="width:56px;height:56px;"></i>
{# 官网内注册(不跳 App):POST /api/v1/public/register,成功显示门店编号并引导登录。
版式与 App 注册页同款(App 真相源两栏卡片 + 三步时间线)。 #}
<div class="auth-wrap">
<div class="auth reg">
<div class="auth-brand">
<img class="mk" src="/assets/logo-mark.svg" alt="岩美酒库" style="width:60px;height:60px" />
<div class="bname">开通门店</div>
<div class="btag">几分钟创建你的酒水进销存门店,立即开始入库出库</div>
<div class="steps">
<div class="step done"><span class="si">1</span><div class="st"><b>填写门店信息</b><span>店名、地址与联系人</span></div></div>
<div class="step"><span class="si">2</span><div class="st"><b>创建管理员账号</b><span>用于登录与管理成员</span></div></div>
<div class="step"><span class="si">3</span><div class="st"><b>激活授权</b><span>先享 30 天试用,兑换券随时续期</span></div></div>
</div>
<h2>注册成功!</h2>
<p>您的门店编码已生成,请妥善保存:</p>
<div class="shop-code-box">
<span class="shop-code-text" id="result-shop-code">—</span>
<button class="copy-btn" id="copy-code-btn">
<i data-lucide="copy" class="icon"></i>复制
</button>
</div>
<div class="auth-form">
<div id="regForm">
<h1>注册新门店</h1>
<p class="alead">已有门店账号?<a href="/login/" style="font-weight:600">直接登录 →</a></p>
<div class="auth-alert" id="regErr"></div>
<div class="field"><label>门店名称<span class="req">*</span></label>
<input class="input" id="shop_name" placeholder="例如 强朋友名酒行" autocomplete="organization" />
<div class="hint">酒行正式名称,将显示在单据与商品标签上</div></div>
<div class="grid2f">
<div class="field"><label>联系电话<span class="req">*</span></label>
<input class="input" id="phone" type="tel" placeholder="手机或座机" autocomplete="tel" /></div>
<div class="field"><label>负责人姓名<span class="req">*</span></label>
<input class="input" id="manager_name" placeholder="例如 王经理" autocomplete="name" /></div>
</div>
<div class="field"><label>门店地址<span class="req">*</span></label>
<input class="input" id="address" placeholder="省 / 市 / 区 详细地址" autocomplete="street-address" /></div>
<div class="field"><label>店铺简介</label>
<textarea class="input" id="description" maxlength="200" placeholder="选填,最多 200 字;顾客扫商品码时可见"></textarea></div>
<div style="height:1px;background:var(--border-subtle);margin:6px 0 16px"></div>
<div class="field"><label>登录账号<span class="req">*</span></label>
<input class="input" id="username" placeholder="330 位字母/数字/下划线" autocomplete="username" />
<div class="hint">创建后不可修改</div></div>
<div class="grid2f">
<div class="field"><label>登录密码<span class="req">*</span></label>
<input class="input" id="password" type="password" placeholder="至少 6 位" autocomplete="new-password" /></div>
<div class="field"><label>确认密码<span class="req">*</span></label>
<input class="input" id="password_confirm" type="password" placeholder="再次输入" autocomplete="new-password" /></div>
</div>
<button class="btn primary lg" id="reg-btn" style="margin-top:8px">创建门店并开始试用</button>
<div class="auth-foot">创建即代表你将成为该门店的管理员,并同意<a href="/terms/">服务条款</a>与<a href="/privacy/">隐私政策</a></div>
</div>
<div class="login-hint-card">
<p>登录客户端时请输入:</p>
<table class="login-hint-table">
<tr>
<td>门店编码</td>
<td id="hint-code"></td>
</tr>
<tr>
<td>用户名</td>
<td id="hint-username">—</td>
</tr>
<tr>
<td>密码</td>
<td>您设置的密码</td>
</tr>
</table>
<div id="regDone" style="display:none">
<h1>门店创建成功 🎉</h1>
<p class="alead">请记下你的门店编号,登录时需要用到。</p>
<div class="auth-ok">
门店编号:<code id="done-code">—</code><br/>
<span style="color:var(--muted);font-size:var(--fs-sm)" id="done-detail"></span>
</div>
<a class="btn primary lg" href="/login/">前往登录</a>
<div class="auth-foot">已自动开通 30 天全功能试用 · 到期可在 系统设置 → 授权兑换券 续期</div>
</div>
<p class="success-note">如忘记门店编码,登录后可在「系统设置」中查看。</p>
<a href="/app/" class="btn btn-primary" style="display:inline-flex;align-items:center;gap:8px;">
<i data-lucide="log-in" class="icon"></i>前往登录
</a>
</div>
</div>
</section>
</div>
<script>
(function() {
var API_URL = "{{ site.appBaseUrl }}/api/v1/public/register";
(function () {
var API = '{{ site.appBaseUrl }}';
function $(id) { return document.getElementById(id); }
function showErr(msg) { var el = $('regErr'); el.textContent = msg; el.classList.add('show'); }
function val(id) { return $(id).value.trim(); }
function getVal(id) { return $(id).value.trim(); }
function submit() {
$('regErr').classList.remove('show');
if (!val('shop_name')) return showErr('请填写门店名称');
if (!val('phone')) return showErr('请填写联系电话');
if (!val('manager_name')) return showErr('请填写负责人姓名');
if (!val('address')) return showErr('请填写门店地址');
if (!/^[A-Za-z0-9_]{3,30}$/.test(val('username'))) return showErr('登录账号需 330 位字母/数字/下划线');
if ($('password').value.length < 6) return showErr('密码至少 6 位');
if ($('password').value !== $('password_confirm').value) return showErr('两次密码不一致');
function setFieldError(id, msg) {
var input = $(id);
var errEl = $('err-' + id);
if (msg) {
input.classList.add('error');
if (errEl) { errEl.textContent = msg; errEl.classList.add('visible'); }
} else {
input.classList.remove('error');
if (errEl) { errEl.textContent = ''; errEl.classList.remove('visible'); }
}
}
function clearAllErrors() {
['shop_name','address','manager_name','phone','username','password','password_confirm'].forEach(function(id) {
setFieldError(id, '');
});
}
// 用户修改字段后清除该字段的错误提示
['shop_name','address','manager_name','phone','username','password','password_confirm'].forEach(function(id) {
var el = $(id);
if (el) el.addEventListener('input', function() { setFieldError(id, ''); });
});
function validate() {
clearAllErrors();
var ok = true;
var firstErr = null;
function require(id, msg) {
if (!getVal(id)) { setFieldError(id, msg); if (!firstErr) firstErr = id; ok = false; }
}
require('shop_name', '请填写店铺名称');
require('address', '请填写门店地址');
require('manager_name', '请填写负责人姓名');
require('phone', '请填写联系电话');
var username = getVal('username');
if (!username) {
setFieldError('username', '请填写用户名'); if (!firstErr) firstErr = 'username'; ok = false;
} else if (username.length < 3 || username.length > 30) {
setFieldError('username', '用户名长度须在 330 位之间'); if (!firstErr) firstErr = 'username'; ok = false;
} else if (!/^[a-zA-Z0-9_]+$/.test(username)) {
setFieldError('username', '用户名只能包含字母、数字和下划线'); if (!firstErr) firstErr = 'username'; ok = false;
}
var password = $('password').value;
if (!password) {
setFieldError('password', '请填写密码'); if (!firstErr) firstErr = 'password'; ok = false;
} else if (password.length < 6) {
setFieldError('password', '密码至少 6 位'); if (!firstErr) firstErr = 'password'; ok = false;
}
var confirm = $('password_confirm').value;
if (!confirm) {
setFieldError('password_confirm', '请再次输入密码'); if (!firstErr) firstErr = 'password_confirm'; ok = false;
} else if (password && password !== confirm) {
setFieldError('password_confirm', '两次输入的密码不一致'); if (!firstErr) firstErr = 'password_confirm'; ok = false;
}
if (firstErr) { $(firstErr).focus(); $(firstErr).scrollIntoView({ behavior: 'smooth', block: 'center' }); }
return ok;
}
function showTopError(msg) {
var el = $('reg-error');
el.textContent = msg;
el.classList.add('visible');
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
$('reg-btn').addEventListener('click', function() {
$('reg-error').classList.remove('visible');
if (!validate()) return;
var btn = $('reg-btn');
btn.disabled = true;
btn.classList.add('btn-loading');
btn.textContent = '注册中…';
var payload = {
shop_name: getVal('shop_name'),
address: getVal('address'),
manager_name: getVal('manager_name'),
phone: getVal('phone'),
description: getVal('description'),
username: getVal('username'),
password: $('password').value
};
fetch(API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
var btn = $('reg-btn'); btn.disabled = true; btn.textContent = '创建中…';
fetch(API + '/api/v1/public/register', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
shop_name: val('shop_name'), phone: val('phone'), manager_name: val('manager_name'),
address: val('address'), description: val('description'),
username: val('username'), password: $('password').value,
}),
})
.then(function(res) { return res.json().then(function(data) { return { ok: res.ok, data: data }; }); })
.then(function(r) {
if (!r.ok) {
var msg = (r.data && r.data.error) ? r.data.error : '注册失败,请稍后重试';
if (msg.indexOf('Duplicate') !== -1 || msg.indexOf('duplicate') !== -1) {
msg = '该用户名在此门店已存在,请换一个用户名';
}
showTopError(msg);
btn.disabled = false;
btn.classList.remove('btn-loading');
btn.innerHTML = '<i data-lucide="store" class="icon"></i>立即注册';
if (window.lucide) lucide.createIcons();
return;
}
var d = r.data.data;
$('result-shop-code').textContent = d.shop_code;
$('hint-code').textContent = d.shop_code;
$('hint-username').textContent = d.username;
$('reg-form-card').style.display = 'none';
var panel = $('success-panel');
panel.classList.add('visible');
if (window.lucide) lucide.createIcons();
panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
})
.catch(function() {
showTopError('网络异常,请检查网络连接后重试');
btn.disabled = false;
btn.classList.remove('btn-loading');
btn.innerHTML = '<i data-lucide="store" class="icon"></i>立即注册';
if (window.lucide) lucide.createIcons();
});
});
$('copy-code-btn').addEventListener('click', function() {
var code = $('result-shop-code').textContent;
navigator.clipboard.writeText(code).then(function() {
var btn = $('copy-code-btn');
btn.innerHTML = '<i data-lucide="check" class="icon"></i>已复制';
if (window.lucide) lucide.createIcons();
setTimeout(function() {
btn.innerHTML = '<i data-lucide="copy" class="icon"></i>复制';
if (window.lucide) lucide.createIcons();
}, 2000);
});
});
document.addEventListener('DOMContentLoaded', function() {
if (window.lucide) lucide.createIcons();
});
.then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
.then(function (res) {
if (!res.ok) throw new Error((res.j && res.j.error) || '注册失败,请稍后重试');
var d = res.j.data || {};
$('done-code').textContent = d.shop_code || '—';
$('done-detail').textContent = '门店「' + (d.shop_name || val('shop_name')) + '」已创建,管理员账号 ' + (d.username || val('username'));
$('regForm').style.display = 'none';
$('regDone').style.display = 'block';
window.scrollTo(0, 0);
})
.catch(function (e) {
showErr(e && e.message ? e.message : '无法连接服务器,请稍后重试');
btn.disabled = false; btn.textContent = '创建门店并开始试用';
});
}
$('reg-btn').addEventListener('click', submit);
})();
</script>