开店需要验证手机号

apps/h5-partner/src/pages/StoreCreatePage.tsx

@@ -13,7 +13,7 @@ import { toastError, toastSuccess } from '../lib/toast';
 
 import { resolveRegionBinding } from '../lib/china-region';
 
-import { checkStorePhoneAvailable } from '../lib/storePhone';
+import { checkStorePhoneAvailable, sendStorePhoneSms } from '../lib/storePhone';
 
 import { fetchPartnerCities, type OpenCityOption } from '../lib/upload';
 
@@ -54,6 +54,8 @@ type FieldErrors = {
 
   phone?: string;
 
+  storeSmsCode?: string;
+
 };
 
 
@@ -68,7 +70,7 @@ function isPhoneConflictMessage(message: string) {
 
 function isPhoneValidationMessage(message: string) {
 
-  return message.includes('联系电话') || message.includes('手机号');
+  return message.includes('联系电话') || message.includes('手机号') || message.includes('验证码');
 
 }
 
@@ -108,6 +110,10 @@ export default function StoreCreatePage() {
 
   const [citiesError, setCitiesError] = useState('');
 
+  const [smsCooldown, setSmsCooldown] = useState(0);
+
+  const [smsHint, setSmsHint] = useState('');
+
   function reportFormError(message: string) {
     setSubmitError(message);
   }
@@ -216,16 +222,28 @@ export default function StoreCreatePage() {
 
   function patchForm(patch: Partial<StoreDraftForm>) {
 
-    setForm((prev) => ({ ...prev, ...patch }));
-
     setSubmitError('');
 
+    let nextPatch = patch;
+
     if ('phone' in patch) {
 
-      setFieldErrors((prev) => ({ ...prev, phone: undefined }));
+      setFieldErrors((prev) => ({ ...prev, phone: undefined, storeSmsCode: undefined }));
+
+      setSmsHint('');
+
+      nextPatch = { ...patch, storeSmsCode: '' };
 
     }
 
+    if ('storeSmsCode' in patch) {
+
+      setFieldErrors((prev) => ({ ...prev, storeSmsCode: undefined }));
+
+    }
+
+    setForm((prev) => ({ ...prev, ...nextPatch }));
+
   }
 
 
@@ -286,6 +304,70 @@ export default function StoreCreatePage() {
 
 
 
+  async function sendStorePhoneCode() {
+
+    const phone = form.phone.trim();
+
+    if (!/^1\d{10}$/.test(phone)) {
+
+      setFieldErrors({ phone: '请先填写正确的11位手机号' });
+
+      return;
+
+    }
+
+    setSmsHint('');
+
+    setFieldErrors((prev) => ({ ...prev, phone: undefined }));
+
+    try {
+
+      const phoneCheck = await checkStorePhoneAvailable(phone);
+
+      if (!phoneCheck.available) {
+
+        setFieldErrors({ phone: phoneCheck.message ?? '该手机号不可用于门店账号' });
+
+        return;
+
+      }
+
+      const res = await sendStorePhoneSms(phone);
+
+      setSmsHint(`验证码已发送至 ${res.maskedPhone}`);
+
+      setSmsCooldown(60);
+
+      const timer = setInterval(() => {
+
+        setSmsCooldown((s) => {
+
+          if (s <= 1) {
+
+            clearInterval(timer);
+
+            return 0;
+
+          }
+
+          return s - 1;
+
+        });
+
+      }, 1000);
+
+    } catch (e) {
+
+      const msg = e instanceof Error ? e.message : '验证码发送失败';
+
+      setFieldErrors({ phone: msg });
+
+    }
+
+  }
+
+
+
   async function handleNext() {
 
     if (step === 1) {
@@ -293,7 +375,15 @@ export default function StoreCreatePage() {
       const msg = validateStoreStep1(form);
 
       if (msg) {
-        reportFormError(msg);
+        if (isPhoneValidationMessage(msg)) {
+          if (msg.includes('验证码')) {
+            setFieldErrors({ storeSmsCode: msg });
+          } else {
+            setFieldErrors({ phone: msg });
+          }
+        } else {
+          reportFormError(msg);
+        }
         return;
       }
 
@@ -365,7 +455,12 @@ export default function StoreCreatePage() {
 
     if (step1Msg) {
       if (isPhoneValidationMessage(step1Msg)) {
-        setFieldErrors({ phone: step1Msg });
+        if (step1Msg.includes('验证码')) {
+          setFieldErrors({ storeSmsCode: step1Msg });
+        } else {
+          setFieldErrors({ phone: step1Msg });
+        }
+        goStep(1);
         return;
       }
       reportFormError(step1Msg);
@@ -448,6 +543,8 @@ export default function StoreCreatePage() {
 
           phone: form.phone.trim(),
 
+          smsCode: form.storeSmsCode.trim(),
+
           district: form.district.trim(),
 
           address: form.address.trim(),
@@ -481,6 +578,11 @@ export default function StoreCreatePage() {
         setFieldErrors({ phone: message });
         return;
       }
+      if (/验证码/.test(message)) {
+        setFieldErrors({ storeSmsCode: message });
+        goStep(1);
+        return;
+      }
       setSubmitError(message);
       toastError(message);
     } finally {
@@ -631,6 +733,74 @@ export default function StoreCreatePage() {
 
               )}
 
+              <p className="label-md text-muted" style={{ marginTop: 8 }}>
+
+                验证码将发送至该手机号，需门店负责人确认后方可录入
+
+              </p>
+
+            </div>
+
+            <div className="partner-field">
+
+              <label>门店账号验证码 <span className="text-primary">*</span></label>
+
+              <div className="partner-input-row">
+
+                <div className="partner-input-wrap" style={{ flex: 1 }}>
+
+                  <span className="material-symbols-outlined partner-input-icon">shield</span>
+
+                  <input
+
+                    className="partner-input"
+
+                    type="text"
+
+                    inputMode="numeric"
+
+                    maxLength={6}
+
+                    placeholder="请输入短信验证码"
+
+                    value={form.storeSmsCode}
+
+                    onChange={(e) => patchForm({ storeSmsCode: e.target.value.replace(/\D/g, '') })}
+
+                  />
+
+                </div>
+
+                <button
+
+                  type="button"
+
+                  className="partner-code-btn"
+
+                  disabled={smsCooldown > 0 || checkingPhone}
+
+                  onClick={() => void sendStorePhoneCode()}
+
+                >
+
+                  {smsCooldown > 0 ? `${smsCooldown}s` : '获取验证码'}
+
+                </button>
+
+              </div>
+
+              {smsHint && (
+
+                <p className="label-md text-muted" style={{ marginTop: 8 }}>{smsHint}</p>
+
+              )}
+
+              {fieldErrors.storeSmsCode && (
+
+                <p className="partner-field-error" role="alert">{fieldErrors.storeSmsCode}</p>
+
+              )}
+
             </div>
 
             <div className="partner-field">