门店开通流程

2026-07-03 14:53:21 +08:00
parent c7dc6a2274
commit f2175b83f7
24 changed files with 1451 additions and 186 deletions
@@ -1,7 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import PageHeader from '@dukang/shared-ui/PageHeader';
+import ChinaRegionPicker from '../components/ChinaRegionPicker';
+import OssUploadField from '../components/OssUploadField';
 import { request } from '../lib/api';
+import { resolveRegionBinding } from '../lib/china-region';
+import { fetchPartnerCities, type OpenCityOption } from '../lib/upload';
 import {
  clearStoreDraft,
  defaultStoreForm,
@@ -20,6 +24,9 @@ export default function StoreCreatePage() {
  const saved = loadStoreDraft();
  const [form, setForm] = useState<StoreDraftForm>(saved?.form ?? defaultStoreForm());
  const [error, setError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [cities, setCities] = useState<OpenCityOption[]>([]);
+  const [citiesError, setCitiesError] = useState('');

  const stepFromUrl = Number(params.get('step') || 0);
  const step = stepFromUrl >= 1 && stepFromUrl <= 3 ? stepFromUrl : (saved?.step ?? 1);
@@ -34,11 +41,45 @@ export default function StoreCreatePage() {
    saveStoreDraft({ step, form });
  }, [step, form]);

+  useEffect(() => {
+    void fetchPartnerCities()
+      .then((items) => {
+        setCities(items);
+        if (!items.length) setCitiesError('暂无开城城市，请联系总部在后台配置');
+      })
+      .catch((e) => setCitiesError(e instanceof Error ? e.message : '加载开城城市失败'));
+  }, []);
+
+  const regionBindingHint = useMemo(() => {
+    if (!form.regionCodes.length) return null;
+    const binding = resolveRegionBinding(form.regionCodes, cities);
+    if (!binding) return null;
+    if (binding.cityId && binding.matchedCity) {
+      return `已匹配开城城市：${binding.matchedCity.name}`;
+    }
+    return '所选地区暂未开城，请联系总部配置对应区划';
+  }, [form.regionCodes, cities]);
+
  function patchForm(patch: Partial<StoreDraftForm>) {
    setForm((prev) => ({ ...prev, ...patch }));
    setError('');
  }

+  function bindRegionSelection(codes: string[]) {
+    const binding = resolveRegionBinding(codes, cities);
+    if (!binding) {
+      patchForm({ regionCodes: codes, cityId: '', province: '', city: '', district: '' });
+      return;
+    }
+    patchForm({
+      regionCodes: codes,
+      cityId: binding.cityId ?? '',
+      province: binding.region.province,
+      city: binding.region.city,
+      district: binding.region.district,
+    });
+  }
+
  function goStep(n: number) {
    setParams({ step: String(n) });
    setError('');
@@ -58,21 +99,38 @@ export default function StoreCreatePage() {
    const step1Msg = validateStoreStep1(form);
    if (step1Msg) { setError(step1Msg); return; }

-    await request('PARTNER_H5', '/partner/stores', {
-      method: 'POST',
-      body: JSON.stringify({
-        name: form.name.trim(),
-        phone: form.phone.trim(),
-        district: form.district.trim(),
-        address: form.address.trim(),
-        intro: form.intro.trim() || undefined,
-        bankAccountName: form.bankAccountName.trim(),
-        bankAccountNo: form.bankAccountNo.replace(/\s/g, ''),
-        bankBranch: form.bankBranch.trim(),
-      }),
-    });
-    clearStoreDraft();
-    navigate('/stores');
+    setSubmitting(true);
+    setError('');
+    try {
+      const envPhotoUrls = form.envPhotoUrls.map((u) => u.trim()).filter(Boolean);
+      const result = await request<{ store: { id: string } }>('PARTNER_H5', '/partner/stores', {
+        method: 'POST',
+        body: JSON.stringify({
+          cityId: form.cityId,
+          province: form.province,
+          city: form.city,
+          name: form.name.trim(),
+          phone: form.phone.trim(),
+          district: form.district.trim(),
+          address: form.address.trim(),
+          intro: form.intro.trim() || undefined,
+          coverUrl: form.coverUrl.trim() || undefined,
+          envPhotoUrls: envPhotoUrls.length ? envPhotoUrls : undefined,
+          contractUrl: form.contractUrl.trim() || undefined,
+          bankAccountName: form.bankAccountName.trim(),
+          bankAccountNo: form.bankAccountNo.replace(/\s/g, ''),
+          bankBranch: form.bankBranch.trim(),
+          accountPhone: form.accountPhone.trim() || undefined,
+          accountName: form.accountName.trim() || undefined,
+        }),
+      });
+      clearStoreDraft();
+      navigate(`/stores/${result.store.id}`);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '提交失败');
+    } finally {
+      setSubmitting(false);
+    }
  }

  const progress = step === 1 ? 0 : step === 2 ? 50 : 100;
@@ -102,8 +160,8 @@ export default function StoreCreatePage() {
        </div>
      </nav>

-      {error && (
-        <p className="partner-form-error" role="alert">{error}</p>
+      {(error || citiesError) && (
+        <p className="partner-form-error" role="alert">{error || citiesError}</p>
      )}

      {step === 1 && (
@@ -113,6 +171,15 @@ export default function StoreCreatePage() {
              <div className="partner-section-bar" />
              <h2 className="headline-md">门店基本信息</h2>
            </div>
+            <div className="partner-field">
+              <label>所在地区 <span className="text-primary">*</span></label>
+              <ChinaRegionPicker value={form.regionCodes} onChange={bindRegionSelection} />
+              {regionBindingHint && (
+                <p className={`label-md${form.cityId ? ' text-muted' : ' text-primary'}`} style={{ marginTop: 8 }}>
+                  {regionBindingHint}
+                </p>
+              )}
+            </div>
            <div className="partner-field">
              <label>门店名称 <span className="text-primary">*</span></label>
              <div className="partner-field-input">
@@ -127,13 +194,6 @@ export default function StoreCreatePage() {
                <input type="tel" placeholder="请输入联系电话" value={form.phone} onChange={(e) => patchForm({ 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) => patchForm({ 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) => patchForm({ address: e.target.value })} />
@@ -145,6 +205,20 @@ export default function StoreCreatePage() {
                <span className="label-md text-muted">{form.intro.length} / 500</span>
              </div>
            </div>
+            <div className="partner-field">
+              <label>店长手机</label>
+              <div className="partner-field-input">
+                <span className="material-symbols-outlined">smartphone</span>
+                <input type="tel" placeholder="默认同门店电话" value={form.accountPhone} onChange={(e) => patchForm({ accountPhone: e.target.value })} />
+              </div>
+            </div>
+            <div className="partner-field">
+              <label>店长姓名</label>
+              <div className="partner-field-input">
+                <span className="material-symbols-outlined">person</span>
+                <input placeholder="默认同门店名" value={form.accountName} onChange={(e) => patchForm({ accountName: e.target.value })} />
+              </div>
+            </div>
          </section>
          <div className="partner-info-banner">
            <div className="partner-bills-icon">
@@ -170,45 +244,57 @@ export default function StoreCreatePage() {
          </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>
+            <h3 className="headline-md">门头照</h3>
+            <p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>建议至少 1 张，需包含完整招牌</p>
+            <OssUploadField
+              wide
+              bizType="STORE_TITLE"
+              mediaType="IMAGE"
+              value={form.coverUrl}
+              onChange={(coverUrl) => patchForm({ coverUrl })}
+              label="点击或拖拽上传"
+            />
          </section>

          <section className="partner-form-card">
-            <h3 className="headline-md">环境照片 *</h3>
-            <p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>至少3张，展示店内整洁环境</p>
+            <h3 className="headline-md">环境照片</h3>
+            <p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>建议至少 3 张，展示店内整洁环境</p>
            <div className="partner-upload-grid">
-              {[0, 1, 2].map((i) => (
-                <button key={i} type="button" className="partner-upload-dashed">
-                  <span className="material-symbols-outlined text-primary">add_a_photo</span>
-                  <span>添加照片</span>
-                </button>
+              {form.envPhotoUrls.map((url, index) => (
+                <OssUploadField
+                  key={index}
+                  compact
+                  bizType="STORE_ENV"
+                  mediaType="IMAGE"
+                  value={url}
+                  label="添加照片"
+                  onChange={(nextUrl) => {
+                    const envPhotoUrls = [...form.envPhotoUrls];
+                    envPhotoUrls[index] = nextUrl;
+                    patchForm({ envPhotoUrls });
+                  }}
+                />
              ))}
            </div>
          </section>

          <section className="partner-form-card">
-            <h3 className="headline-md">签约合同 *</h3>
+            <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>
+            <OssUploadField
+              bizType="STORE_CONTRACT"
+              mediaType="FILE"
+              accept="image/*,.pdf"
+              value={form.contractUrl}
+              onChange={(contractUrl) => patchForm({ contractUrl })}
+              label="上传合同副本"
+            />
          </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 占位上传，可直接下一步。
+              照片与合同将上传至 OSS 存储；与总部后台一致，选填项可跳过直接下一步。
            </p>
          </div>
        </>
@@ -245,7 +331,7 @@ export default function StoreCreatePage() {

      <footer className="partner-sticky-footer">
        {step > 1 && (
-          <button type="button" className="partner-btn-outline" onClick={() => goStep(step - 1)}>上一步</button>
+          <button type="button" className="partner-btn-outline" onClick={() => goStep(step - 1)} disabled={submitting}>上一步</button>
        )}
        {step < 3 ? (
          <button type="button" className="partner-btn-primary" onClick={handleNext}>
@@ -253,7 +339,9 @@ export default function StoreCreatePage() {
            <span className="material-symbols-outlined" style={{ fontSize: 20 }}>navigate_next</span>
          </button>
        ) : (
-          <button type="button" className="partner-btn-primary" onClick={submit}>提交审核</button>
+          <button type="button" className="partner-btn-primary" onClick={() => void submit()} disabled={submitting}>
+            {submitting ? '提交中…' : '提交'}
+          </button>
        )}
      </footer>
    </div>