H5端开店增加获取当前店铺位置

2026-07-27 22:37:15 +08:00
parent 23c0cc7a5f
commit 09eda9a11e
9 changed files with 253 additions and 5 deletions
@@ -8,6 +8,9 @@ export type StoreDraftForm = {
  phone: string;
  storeSmsCode: string;
  address: string;
+  /** 门店坐标（定位或地理编码） */
+  latitude: string;
+  longitude: string;
  openTime: string;
  closeTime: string;
  /** 是否启用第二段营业时间 */
@@ -47,6 +50,8 @@ export const defaultStoreForm = (): StoreDraftForm => ({
  phone: '',
  storeSmsCode: '',
  address: '',
+  latitude: '',
+  longitude: '',
  openTime: '10:00',
  closeTime: '22:00',
  dualHours: false,
@@ -87,6 +92,8 @@ export function normalizeStoreDraftForm(raw: Partial<StoreDraftForm> | null | un
    ...raw,
    regionCodes: Array.isArray(raw.regionCodes) ? raw.regionCodes.map(String) : base.regionCodes,
    cityId: String(raw.cityId ?? base.cityId),
+    latitude: raw.latitude != null && raw.latitude !== '' ? String(raw.latitude) : base.latitude,
+    longitude: raw.longitude != null && raw.longitude !== '' ? String(raw.longitude) : base.longitude,
    openTime: String(raw.openTime ?? base.openTime),
    closeTime: String(raw.closeTime ?? base.closeTime),
    dualHours: Boolean(raw.dualHours),
@@ -0,0 +1,26 @@
+import { weixinSdk } from './weixin';
+
+export type StorePosition = {
+  latitude: number;
+  longitude: number;
+};
+
+/** 获取当前 GPS 坐标（微信 JSSDK / 浏览器 Geolocation） */
+export async function locateStorePosition(): Promise<StorePosition> {
+  const outcome = await weixinSdk.getLocationDetailed();
+  if (!outcome.location) {
+    throw new Error(outcome.errMsg || '定位失败，请允许位置权限后重试');
+  }
+  const { latitude, longitude } = outcome.location;
+  if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) {
+    throw new Error('定位结果无效');
+  }
+  return { latitude, longitude };
+}
+
+export function formatStoreCoords(lat?: string | number | null, lng?: string | number | null): string {
+  const a = lat != null && lat !== '' ? Number(lat) : NaN;
+  const b = lng != null && lng !== '' ? Number(lng) : NaN;
+  if (!Number.isFinite(a) || !Number.isFinite(b)) return '';
+  return `${a.toFixed(6)}, ${b.toFixed(6)}`;
+}
@@ -13,6 +13,8 @@ import { resolveRegionBinding } from '../lib/china-region';

 import { checkStorePhoneAvailable, sendStorePhoneSms } from '../lib/storePhone';

+import { formatStoreCoords, locateStorePosition } from '../lib/storeLocate';
+
 import { fetchPartnerCities, type OpenCityOption } from '../lib/upload';

 import { usePartnerSession } from '../contexts/PartnerSessionContext';
@@ -102,6 +104,8 @@ export default function StoreCreatePage() {

  const [categoryTree, setCategoryTree] = useState<StoreCategoryNode[]>([]);

+  const [locating, setLocating] = useState(false);
+
  const draftSaveDisabledRef = useRef(false);

  function reportFormError(message: string) {
@@ -508,6 +512,13 @@ export default function StoreCreatePage() {

          address: form.address.trim(),

+          ...(form.latitude.trim() && form.longitude.trim()
+            ? {
+                latitude: Number(form.latitude),
+                longitude: Number(form.longitude),
+              }
+            : {}),
+
          openTime: form.openTime.trim(),

          closeTime: form.closeTime.trim(),
@@ -740,6 +751,39 @@ export default function StoreCreatePage() {

              <textarea rows={2} placeholder="请输入详细门牌号" value={form.address} onChange={(e) => patchForm({ address: e.target.value })} />

+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
+                <button
+                  type="button"
+                  className="partner-btn-outline"
+                  style={{ padding: '8px 12px', fontSize: 13 }}
+                  disabled={locating}
+                  onClick={() => {
+                    void (async () => {
+                      setLocating(true);
+                      try {
+                        const pos = await locateStorePosition();
+                        patchForm({
+                          latitude: String(pos.latitude),
+                          longitude: String(pos.longitude),
+                        });
+                        toastSuccess('已获取当前坐标');
+                      } catch (e) {
+                        toastError(e instanceof Error ? e.message : '定位失败');
+                      } finally {
+                        setLocating(false);
+                      }
+                    })();
+                  }}
+                >
+                  {locating ? '定位中…' : '获取当前位置'}
+                </button>
+                <span className="label-md text-muted">
+                  {formatStoreCoords(form.latitude, form.longitude)
+                    ? `坐标：${formatStoreCoords(form.latitude, form.longitude)}`
+                    : '未定位（提交后可按地址自动解析）'}
+                </span>
+              </div>
+
            </div>

            <div className="partner-field">
@@ -2,10 +2,11 @@ import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import AppImage from '@dukang/shared-ui/AppImage';
 import { request } from '../lib/api';
-import { toastSuccess } from '../lib/toast';
+import { toastError, toastSuccess } from '../lib/toast';
 import { usePartnerSession } from '../contexts/PartnerSessionContext';
 import { canManagePartnerStore } from '../lib/partnerAccess';
 import { normalizeStringArray, patchEnvPhotoAt } from '../lib/storeDraft';
+import { formatStoreCoords, locateStorePosition } from '../lib/storeLocate';
 import OssUploadField from '../components/OssUploadField';
 import {
  canPartnerOpenStore,
@@ -38,13 +39,21 @@ export default function StoreDetailPage() {
  const canMutate = canManagePartnerStore(account);
  const [store, setStore] = useState<Record<string, unknown> | null>(null);
  const [loadError, setLoadError] = useState('');
-  const [form, setForm] = useState({ name: '', phone: '', address: '', intro: '' });
+  const [form, setForm] = useState({
+    name: '',
+    phone: '',
+    address: '',
+    intro: '',
+    latitude: '',
+    longitude: '',
+  });
  const [coverUrl, setCoverUrl] = useState('');
  const [envPhotoUrls, setEnvPhotoUrls] = useState<string[]>(['', '', '']);
  const [status, setStatus] = useState<StoreStatusValue>('OPEN');
  const [statusSaving, setStatusSaving] = useState(false);
  const [saving, setSaving] = useState(false);
  const [mediaSaving, setMediaSaving] = useState(false);
+  const [locating, setLocating] = useState(false);
  const [actionError, setActionError] = useState('');
  const [closeConfirmOpen, setCloseConfirmOpen] = useState(false);

@@ -55,6 +64,8 @@ export default function StoreDetailPage() {
      phone: String(data.phone || ''),
      address: String(data.address || ''),
      intro: String(data.intro || ''),
+      latitude: data.latitude != null && data.latitude !== '' ? String(data.latitude) : '',
+      longitude: data.longitude != null && data.longitude !== '' ? String(data.longitude) : '',
    });
    setStatus(String(data.status || 'OPEN').toUpperCase() as StoreStatusValue);
    setCoverUrl(String(data.coverUrl || ''));
@@ -149,6 +160,12 @@ export default function StoreDetailPage() {
          phone: form.phone.trim(),
          address: form.address.trim(),
          intro: form.intro.trim(),
+          ...(form.latitude.trim() && form.longitude.trim()
+            ? {
+                latitude: Number(form.latitude),
+                longitude: Number(form.longitude),
+              }
+            : {}),
        }),
      });
      applyStore(data);
@@ -319,6 +336,48 @@ export default function StoreDetailPage() {
          <div className="partner-field">
            <label>门店地址</label>
            <textarea disabled={readOnly} rows={2} value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} />
+            {!readOnly ? (
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
+                <button
+                  type="button"
+                  className="partner-btn-outline"
+                  style={{ padding: '8px 12px', fontSize: 13 }}
+                  disabled={locating}
+                  onClick={() => {
+                    void (async () => {
+                      setLocating(true);
+                      setActionError('');
+                      try {
+                        const pos = await locateStorePosition();
+                        setForm((prev) => ({
+                          ...prev,
+                          latitude: String(pos.latitude),
+                          longitude: String(pos.longitude),
+                        }));
+                        toastSuccess('已获取当前坐标');
+                      } catch (e) {
+                        const msg = e instanceof Error ? e.message : '定位失败';
+                        setActionError(msg);
+                        toastError(msg);
+                      } finally {
+                        setLocating(false);
+                      }
+                    })();
+                  }}
+                >
+                  {locating ? '定位中…' : '获取当前位置'}
+                </button>
+                <span className="label-md text-muted">
+                  {formatStoreCoords(form.latitude, form.longitude)
+                    ? `坐标：${formatStoreCoords(form.latitude, form.longitude)}`
+                    : '未定位'}
+                </span>
+              </div>
+            ) : formatStoreCoords(form.latitude, form.longitude) ? (
+              <p className="label-md text-muted" style={{ marginTop: 6 }}>
+                坐标：{formatStoreCoords(form.latitude, form.longitude)}
+              </p>
+            ) : null}
          </div>
          <div className="partner-field">
            <label>门店简介</label>