jiu/web/register.njk

---
layout: base.njk
title: 注册新门店
description: 几分钟创建你的酒水进销存门店，注册完成后获取门店编号用于登录。
permalink: /register/
---
{# 官网内注册（不跳 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>
    </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="3–30 位字母/数字/下划线" 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 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>
    </div>
  </div>
</div>

<script>
(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 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('登录账号需 3–30 位字母/数字/下划线');
    if ($('password').value.length < 6) return showErr('密码至少 6 位');
    if ($('password').value !== $('password_confirm').value) return showErr('两次密码不一致');

    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 (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>