init

2026-06-30 10:33:56 +08:00
commit 6e047dc0a5
607 changed files with 65966 additions and 0 deletions
@@ -0,0 +1,230 @@
+import { useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import PageHeader from '@dukang/shared-ui/PageHeader';
+import { request } from '../lib/api';
+
+const STEPS = ['基本信息', '照片上传', '结算资质'] as const;
+
+export default function StoreCreatePage() {
+  const navigate = useNavigate();
+  const [params, setParams] = useSearchParams();
+  const step = Number(params.get('step') || 1);
+  const [form, setForm] = useState({
+    name: '',
+    phone: '',
+    district: '金水区',
+    address: '',
+    intro: '',
+    accountPhone: '',
+    accountName: '',
+    bankAccountName: '',
+    bankAccountNo: '',
+    bankBranch: '',
+  });
+
+  function goStep(n: number) {
+    setParams({ step: String(n) });
+  }
+
+  async function submit() {
+    await request('PARTNER_H5', '/partner/stores', {
+      method: 'POST',
+      body: JSON.stringify(form),
+    });
+    navigate('/stores');
+  }
+
+  const progress = step === 1 ? 0 : step === 2 ? 50 : 100;
+
+  return (
+    <div className="partner-page-sticky">
+      <PageHeader title="录入新门店" onBack={() => navigate('/stores')} />
+
+      <nav className="partner-stepper">
+        <div className="partner-stepper-inner">
+          <div className="partner-stepper-line" aria-hidden>
+            <div className="partner-stepper-line-fill" style={{ width: `${progress}%` }} />
+          </div>
+          {STEPS.map((label, i) => {
+            const n = i + 1;
+            const done = step > n;
+            const active = step === n;
+            return (
+              <div key={label} className="partner-step">
+                <div className={`partner-step-circle${done ? ' partner-step-circle--done' : ''}${active ? ' partner-step-circle--active' : ''}`}>
+                  {done ? <span className="material-symbols-outlined" style={{ fontSize: 16, fontVariationSettings: "'FILL' 1" }}>check</span> : n}
+                </div>
+                <span className={`partner-step-label${active || done ? ' partner-step-label--active' : ''}`}>{label}</span>
+              </div>
+            );
+          })}
+        </div>
+      </nav>
+
+      {step === 1 && (
+        <>
+          <section className="partner-form-card">
+            <div className="partner-section-title">
+              <div className="partner-section-bar" />
+              <h2 className="headline-md">门店基本信息</h2>
+            </div>
+            <div className="partner-field">
+              <label>门店名称 <span className="text-primary">*</span></label>
+              <div className="partner-field-input">
+                <span className="material-symbols-outlined">store</span>
+                <input placeholder="请输入门店名称" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
+              </div>
+            </div>
+            <div className="partner-field">
+              <label>联系电话 <span className="text-primary">*</span></label>
+              <div className="partner-field-input">
+                <span className="material-symbols-outlined">call</span>
+                <input type="tel" placeholder="请输入联系电话" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
+              </div>
+            </div>
+            <div className="partner-field">
+              <label>区县 <span className="text-primary">*</span></label>
+              <div className="partner-field-input">
+                <span className="material-symbols-outlined">location_on</span>
+                <input placeholder="请选择区县" value={form.district} onChange={(e) => setForm({ ...form, district: e.target.value })} />
+              </div>
+            </div>
+            <div className="partner-field">
+              <label>详细地址 <span className="text-primary">*</span></label>
+              <textarea rows={2} placeholder="请输入详细门牌号" value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} />
+            </div>
+            <div className="partner-field">
+              <label>门店简介</label>
+              <textarea rows={4} placeholder="请输入门店简介 (10-500字)" value={form.intro} onChange={(e) => setForm({ ...form, intro: e.target.value })} />
+              <div style={{ textAlign: 'right', marginTop: 4 }}>
+                <span className="label-md text-muted">{form.intro.length} / 500</span>
+              </div>
+            </div>
+          </section>
+          <div className="partner-info-banner">
+            <div className="partner-bills-icon">
+              <span className="material-symbols-outlined">verified_user</span>
+            </div>
+            <div>
+              <h3 className="body-md text-primary" style={{ fontWeight: 700 }}>杜康合伙人身份认证</h3>
+              <p className="label-md text-variant" style={{ marginTop: 4, lineHeight: 1.4 }}>
+                传承千年窖香，共筑美酒传奇。录入信息后，系统将在 1-3 个工作日内完成审核。
+              </p>
+            </div>
+          </div>
+        </>
+      )}
+
+      {step === 2 && (
+        <>
+          <div className="partner-section-title" style={{ padding: '0 20px', marginBottom: 16 }}>
+            <div className="partner-bills-icon" style={{ background: '#ffdad7', borderRadius: 8, width: 40, height: 40 }}>
+              <span className="material-symbols-outlined text-primary">photo_library</span>
+            </div>
+            <h2 className="headline-md">门店图片上传</h2>
+          </div>
+
+          <section className="partner-form-card">
+            <h3 className="headline-md">门头照 *</h3>
+            <p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>至少1张，需包含完整招牌</p>
+            <button type="button" className="partner-upload-dashed partner-upload-dashed--wide">
+              <span className="material-symbols-outlined text-primary" style={{ fontSize: 36 }}>add_a_photo</span>
+              <span className="text-primary" style={{ fontWeight: 500 }}>点击或拖拽上传</span>
+            </button>
+          </section>
+
+          <section className="partner-form-card">
+            <h3 className="headline-md">环境照片 *</h3>
+            <p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>至少3张，展示店内整洁环境</p>
+            <div className="partner-upload-grid">
+              <button type="button" className="partner-upload-dashed">
+                <span className="material-symbols-outlined text-primary">add_a_photo</span>
+                <span>添加照片</span>
+              </button>
+              <button type="button" className="partner-upload-dashed">
+                <span className="material-symbols-outlined text-primary">add_a_photo</span>
+                <span>添加照片</span>
+              </button>
+              <button type="button" className="partner-upload-dashed">
+                <span className="material-symbols-outlined text-primary">add_a_photo</span>
+                <span>添加照片</span>
+              </button>
+            </div>
+          </section>
+
+          <section className="partner-form-card">
+            <h3 className="headline-md">签约合同 *</h3>
+            <p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>拍照上传签约协议首页与盖章页</p>
+            <button type="button" className="partner-upload-dashed" style={{ flexDirection: 'row', height: 96 }}>
+              <div className="partner-bills-icon" style={{ background: '#ffb3ae' }}>
+                <span className="material-symbols-outlined text-primary">description</span>
+              </div>
+              <div style={{ textAlign: 'left' }}>
+                <span className="text-primary" style={{ fontWeight: 700, display: 'block' }}>上传合同副本</span>
+                <span className="label-md text-muted">支持 JPG, PNG, PDF</span>
+              </div>
+            </button>
+          </section>
+
+          <div className="partner-info-banner" style={{ background: 'rgba(254,214,91,0.2)', borderColor: 'rgba(254,214,91,0.5)' }}>
+            <span className="material-symbols-outlined text-secondary" style={{ fontSize: 18 }}>info</span>
+            <p className="label-md" style={{ lineHeight: 1.5, color: 'var(--color-on-secondary-container)' }}>
+              温馨提示：请确保照片清晰无反光。preV1 占位上传，可直接下一步。
+            </p>
+          </div>
+        </>
+      )}
+
+      {step === 3 && (
+        <>
+          <div className="partner-section-title" style={{ padding: '0 20px', marginBottom: 16 }}>
+            <span className="material-symbols-outlined text-primary">account_balance</span>
+            <h2 className="headline-md">结算信息配置</h2>
+          </div>
+          <section className="partner-form-card">
+            <div className="partner-field">
+              <label>户主姓名 *</label>
+              <input className="partner-field-input" style={{ width: '100%', padding: '0 16px', minHeight: 48, border: '1px solid rgba(226,190,188,0.3)', borderRadius: 8, background: 'var(--color-background)' }} placeholder="请输入银行卡实名姓名" value={form.bankAccountName} onChange={(e) => setForm({ ...form, bankAccountName: e.target.value })} />
+            </div>
+            <div className="partner-field">
+              <label>银行卡号 *</label>
+              <input className="partner-field-input" style={{ width: '100%', padding: '0 16px', minHeight: 48, border: '1px solid rgba(226,190,188,0.3)', borderRadius: 8, background: 'var(--color-background)' }} placeholder="请输入16-19位银行卡号" value={form.bankAccountNo} onChange={(e) => setForm({ ...form, bankAccountNo: e.target.value })} />
+            </div>
+            <div className="partner-field">
+              <label>开户支行 *</label>
+              <input className="partner-field-input" style={{ width: '100%', padding: '0 16px', minHeight: 48, border: '1px solid rgba(226,190,188,0.3)', borderRadius: 8, background: 'var(--color-background)' }} placeholder="例如：中国工商银行洛阳分行" value={form.bankBranch} onChange={(e) => setForm({ ...form, bankBranch: e.target.value })} />
+            </div>
+            <div className="partner-field">
+              <label>门店账号手机</label>
+              <input className="partner-field-input" style={{ width: '100%', padding: '0 16px', minHeight: 48, border: '1px solid rgba(226,190,188,0.3)', borderRadius: 8, background: 'var(--color-background)' }} value={form.accountPhone} onChange={(e) => setForm({ ...form, accountPhone: e.target.value })} />
+            </div>
+            <div className="partner-field">
+              <label>店长姓名</label>
+              <input className="partner-field-input" style={{ width: '100%', padding: '0 16px', minHeight: 48, border: '1px solid rgba(226,190,188,0.3)', borderRadius: 8, background: 'var(--color-background)' }} value={form.accountName} onChange={(e) => setForm({ ...form, accountName: e.target.value })} />
+            </div>
+          </section>
+          <div className="partner-info-banner" style={{ background: 'rgba(254,214,91,0.15)', borderColor: 'rgba(254,214,91,0.3)' }}>
+            <span className="material-symbols-outlined text-secondary">info</span>
+            <p className="body-md" style={{ color: 'var(--color-on-secondary-container)' }}>
+              请确保银行卡信息准确，以免影响每月的餐费结算。结算将按合同约定账期执行。
+            </p>
+          </div>
+        </>
+      )}
+
+      <footer className="partner-sticky-footer">
+        {step > 1 && (
+          <button type="button" className="partner-btn-outline" onClick={() => goStep(step - 1)}>上一步</button>
+        )}
+        {step < 3 ? (
+          <button type="button" className="partner-btn-primary" onClick={() => goStep(step + 1)}>
+            <span>下一步</span>
+            <span className="material-symbols-outlined" style={{ fontSize: 20 }}>navigate_next</span>
+          </button>
+        ) : (
+          <button type="button" className="partner-btn-primary" onClick={submit}>提交审核</button>
+        )}
+      </footer>
+    </div>
+  );
+}