门店开通流程

2026-07-03 14:53:21 +08:00
parent c7dc6a2274
commit f2175b83f7
24 changed files with 1451 additions and 186 deletions
@@ -0,0 +1,178 @@
+import { createPortal } from 'react-dom';
+import { useEffect, useMemo, useState } from 'react';
+import { codeToText } from 'element-china-area-data';
+import { CHINA_REGION_OPTIONS, formatRegionLabel, parseRegionCodes } from '../lib/china-region';
+
+type RegionNode = {
+  value: string;
+  label: string;
+  children?: RegionNode[];
+};
+
+type ChinaRegionPickerProps = {
+  value?: string[];
+  onChange?: (codes: string[]) => void;
+  disabled?: boolean;
+};
+
+const STEP_LABELS = ['选择省份', '选择城市', '选择区县'] as const;
+
+function lockBodyScroll(lock: boolean) {
+  if (typeof document === 'undefined') return;
+  const body = document.body;
+  if (lock) {
+    const scrollY = window.scrollY;
+    body.dataset.dukangScrollY = String(scrollY);
+    body.style.position = 'fixed';
+    body.style.top = `-${scrollY}px`;
+    body.style.left = '0';
+    body.style.right = '0';
+    body.style.overflow = 'hidden';
+  } else {
+    const scrollY = Number(body.dataset.dukangScrollY ?? '0');
+    body.style.position = '';
+    body.style.top = '';
+    body.style.left = '';
+    body.style.right = '';
+    body.style.overflow = '';
+    delete body.dataset.dukangScrollY;
+    window.scrollTo(0, scrollY);
+  }
+}
+
+export default function ChinaRegionPicker({ value = [], onChange, disabled }: ChinaRegionPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState<string[]>(value);
+  const [step, setStep] = useState(0);
+
+  const options = CHINA_REGION_OPTIONS as RegionNode[];
+  const parsed = parseRegionCodes(value);
+  const display = parsed ? formatRegionLabel(parsed) : '请选择省 / 市 / 区县';
+
+  const provinces = options;
+  const cities = useMemo(() => {
+    const p = provinces.find((item) => item.value === draft[0]);
+    return p?.children ?? [];
+  }, [draft, provinces]);
+
+  const districts = useMemo(() => {
+    const c = cities.find((item) => item.value === draft[1]);
+    return c?.children ?? [];
+  }, [draft, cities]);
+
+  const listItems = step === 0 ? provinces : step === 1 ? cities : districts;
+  const activeCode = draft[step];
+
+  useEffect(() => {
+    if (!open) return;
+    lockBodyScroll(true);
+    return () => lockBodyScroll(false);
+  }, [open]);
+
+  function openPicker() {
+    if (disabled) return;
+    const next = value.length === 3 ? [...value] : [];
+    setDraft(next);
+    setStep(next.length >= 3 ? 2 : next.length);
+    setOpen(true);
+  }
+
+  function closePicker() {
+    setOpen(false);
+  }
+
+  function selectItem(code: string) {
+    const next = [...draft.slice(0, step), code];
+    setDraft(next);
+    if (step < 2) {
+      setStep(step + 1);
+      return;
+    }
+    onChange?.(next);
+    closePicker();
+  }
+
+  function confirm() {
+    if (draft.length < 3) return;
+    onChange?.(draft);
+    closePicker();
+  }
+
+  const modal = open ? (
+    <div className="partner-region-overlay" role="presentation" onClick={closePicker}>
+      <div
+        className="partner-region-sheet"
+        role="dialog"
+        aria-modal
+        onClick={(e) => e.stopPropagation()}
+        onTouchMove={(e) => e.stopPropagation()}
+      >
+        <div className="partner-region-sheet-header">
+          <button type="button" className="partner-region-sheet-btn" onClick={closePicker}>取消</button>
+          <span className="headline-md">选择地区</span>
+          <button
+            type="button"
+            className="partner-region-sheet-btn partner-region-sheet-btn--primary"
+            disabled={draft.length < 3}
+            onClick={confirm}
+          >
+            确定
+          </button>
+        </div>
+
+        <div className="partner-region-steps">
+          {STEP_LABELS.map((label, index) => (
+            <button
+              key={label}
+              type="button"
+              className={`partner-region-step${step === index ? ' partner-region-step--active' : ''}${draft[index] ? ' partner-region-step--done' : ''}`}
+              disabled={index === 1 && !draft[0] || index === 2 && !draft[1]}
+              onClick={() => {
+                if (index === 1 && !draft[0]) return;
+                if (index === 2 && !draft[1]) return;
+                setStep(index);
+              }}
+            >
+              <span className="partner-region-step-index">{index + 1}</span>
+              <span>{label}</span>
+            </button>
+          ))}
+        </div>
+
+        {draft[0] && (
+          <p className="partner-region-breadcrumb label-md text-muted">
+            {codeToText[draft[0]]}
+            {draft[1] ? ` / ${codeToText[draft[1]]}` : ''}
+            {draft[2] ? ` / ${codeToText[draft[2]]}` : ''}
+          </p>
+        )}
+
+        <div className="partner-region-list" role="listbox">
+          {listItems.map((item) => (
+            <button
+              key={item.value}
+              type="button"
+              role="option"
+              aria-selected={activeCode === item.value}
+              className={`partner-region-item${activeCode === item.value ? ' partner-region-item--active' : ''}`}
+              onClick={() => selectItem(item.value)}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  ) : null;
+
+  return (
+    <>
+      <button type="button" className="partner-field-input partner-region-trigger" onClick={openPicker} disabled={disabled}>
+        <span className="material-symbols-outlined">location_on</span>
+        <span className={parsed ? '' : 'text-muted'}>{display}</span>
+        <span className="material-symbols-outlined partner-region-chevron">expand_more</span>
+      </button>
+      {typeof document !== 'undefined' ? createPortal(modal, document.body) : null}
+    </>
+  );
+}