jacy/dukang
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

feat(admin,partner): Tencent map location picker and expose LBS key

Browse Source 
Store create/edit on HQ and partner can pick coords via Tencent locpicker; client-config exposes TENCENT_LBS_KEY; seed empty system settings from env.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jacy
2026-07-27 23:19:40 +08:00
parent d36fe13bcd
commit 317f910f3c
13 changed files with 571 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-web/src/components/TencentLocPickerModal.tsx
+115
View File
@@ -0,0 +1,115 @@
import { useEffect, useMemo, useState } from 'react';
import { Modal, Spin, Typography, message } from 'antd';
import type { ClientRuntimeConfig } from '@dukang/shared-types';
import { request } from '../lib/api';
import {
buildTencentLocPickerUrl,
parseTencentLocPickerMessage,
type TencentPickedLocation,
} from '../lib/tencentLocPicker';
type Props = {
open: boolean;
onClose: () => void;
onPick: (loc: TencentPickedLocation) => void;
latitude?: number | null;
longitude?: number | null;
};
let cachedKey: string | null | undefined;
async function loadTencentLbsKey(): Promise<string> {
if (cachedKey) return cachedKey;
const cfg = await request<ClientRuntimeConfig>('/common/client-config');
const key = (cfg.tencentLbsKey || '').trim();
if (!key) {
throw new Error('未配置腾讯位置服务 Key，请在系统设置中填写 TENCENT_LBS_KEY');
}
cachedKey = key;
return key;
}
export default function TencentLocPickerModal({
open,
onClose,
onPick,
latitude,
longitude,
}: Props) {
const [key, setKey] = useState<string | null>(cachedKey ?? null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
useEffect(() => {
if (!open) return;
let cancelled = false;
setError('');
if (key) return;
setLoading(true);
void loadTencentLbsKey()
.then((k) => {
if (!cancelled) setKey(k);
})
.catch((e) => {
if (!cancelled) {
const msg = e instanceof Error ? e.message : '加载地图配置失败';
setError(msg);
message.error(msg);
}
})
.finally(() => {
if (!cancelled) setLoading(false);
});
return () => {
cancelled = true;
};
}, [open, key]);
useEffect(() => {
if (!open) return;
function onMessage(event: MessageEvent) {
const picked = parseTencentLocPickerMessage(event.data);
if (!picked) return;
onPick(picked);
onClose();
}
window.addEventListener('message', onMessage);
return () => window.removeEventListener('message', onMessage);
}, [open, onPick, onClose]);
const src = useMemo(() => {
if (!key) return '';
return buildTencentLocPickerUrl(key, {
latitude: latitude != null ? Number(latitude) : undefined,
longitude: longitude != null ? Number(longitude) : undefined,
});
}, [key, latitude, longitude]);
return (
<Modal
title="腾讯地图选点"
open={open}
onCancel={onClose}
footer={null}
width={720}
destroyOnClose
styles={{ body: { padding: 0, height: 560 } }}
>
{loading ? (
<div style={{ height: 560, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Spin tip="加载地图…" />
</div>
) : error ? (
<div style={{ padding: 24 }}>
<Typography.Text type="danger">{error}</Typography.Text>
</div>
) : src ? (
<iframe
title="腾讯地图选点"
src={src}
style={{ width: '100%', height: 560, border: 0, display: 'block' }}
/>
) : null}
</Modal>
);
}
apps/admin-web/src/lib/tencentLocPicker.ts
+60
View File
@@ -0,0 +1,60 @@
export type TencentPickedLocation = {
latitude: number;
longitude: number;
address?: string;
name?: string;
cityname?: string;
};
type LocPickerMessage = {
module?: string;
latlng?: { lat?: number; lng?: number };
poiaddress?: string;
poiname?: string;
cityname?: string;
};
const REFERER = 'dukang-haoke';
export function buildTencentLocPickerUrl(
key: string,
options?: { latitude?: number; longitude?: number },
): string {
const params = new URLSearchParams({
search: '1',
type: '1',
key,
referer: REFERER,
policy: '1',
});
const lat = options?.latitude;
const lng = options?.longitude;
if (
lat != null &&
lng != null &&
Number.isFinite(lat) &&
Number.isFinite(lng) &&
!(lat === 0 && lng === 0)
) {
params.set('coord', `${lat},${lng}`);
params.set('coordtype', '5');
}
return `https://apis.map.qq.com/tools/locpicker?${params.toString()}`;
}
export function parseTencentLocPickerMessage(data: unknown): TencentPickedLocation | null {
const loc = data as LocPickerMessage;
if (!loc || loc.module !== 'locationPicker') return null;
const lat = Number(loc.latlng?.lat);
const lng = Number(loc.latlng?.lng);
if (!Number.isFinite(lat) || !Number.isFinite(lng)) return null;
// 列表滑动过程中偶发空 POI，忽略无名称且无地址的噪声
if (!loc.poiname && !loc.poiaddress) return null;
return {
latitude: lat,
longitude: lng,
address: loc.poiaddress?.trim() || undefined,
name: loc.poiname?.trim() || undefined,
cityname: loc.cityname?.trim() || undefined,
};
}
apps/admin-web/src/pages/StoresPage.tsx
+50 -36
View File
@@ -19,7 +19,7 @@ import {
message,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { FilePdfOutlined, LinkOutlined } from '@ant-design/icons';
import { FilePdfOutlined, LinkOutlined, EnvironmentOutlined } from '@ant-design/icons';
import { request, type Paginated } from '../lib/api';
import {
ADMIN_OPTIONS_PAGE_SIZE,
@@ -37,6 +37,7 @@ import { useAdminList } from '../lib/useAdminList';
import { resolveRegionBinding } from '../lib/china-region';
import ChinaRegionCascader from '../components/ChinaRegionCascader';
import OssUpload from '../components/OssUpload';
import TencentLocPickerModal from '../components/TencentLocPickerModal';
const CREATE_STEPS = [
{ title: '基本信息' },
@@ -44,17 +45,6 @@ const CREATE_STEPS = [
{ title: '结算资质' },
];
/** 用店名 + 地址打开百度地图搜索，便于人工核对经纬度 */
function openBaiduMapSearch(parts: Array<string | null | undefined>) {
const query = parts.map((p) => String(p || '').trim()).filter(Boolean).join(' ');
if (!query) {
message.warning('请先填写门店名称和地址');
return;
}
const url = `https://map.baidu.com/search/${encodeURIComponent(query)}/@0,0,12z?querytype=s&da_src=shareurl&wd=${encodeURIComponent(query)}`;
window.open(url, '_blank', 'noopener,noreferrer');
}
function fillGeolocation(
setCoords: (lat: number, lng: number) => void,
setLoading: (v: boolean) => void,
@@ -356,6 +346,8 @@ export default function StoresPage() {
const [createStep, setCreateStep] = useState(0);
const [createError, setCreateError] = useState('');
const [locating, setLocating] = useState(false);
const [mapPickerOpen, setMapPickerOpen] = useState(false);
const [mapPickerTarget, setMapPickerTarget] = useState<'create' | 'edit'>('create');
const [partners, setPartners] = useState<PartnerOption[]>([]);
const [cities, setCities] = useState<CityOption[]>([]);
const [categoryTree, setCategoryTree] = useState<CategoryNode[]>([]);
@@ -839,24 +831,16 @@ export default function StoresPage() {
获取当前位置
</Button>
<Button
icon={<LinkOutlined />}
icon={<EnvironmentOutlined />}
onClick={() => {
const name = String(editForm.getFieldValue('name') || detail.name || '');
const district = String(editForm.getFieldValue('district') || detail.district || '');
const address = String(editForm.getFieldValue('address') || detail.address || '');
openBaiduMapSearch([
String(detail.province || ''),
String(detail.cityName || ''),
district,
address,
name,
]);
setMapPickerTarget('edit');
setMapPickerOpen(true);
}}
>
百度地图查询
腾讯地图选点
</Button>
<Typography.Text type="secondary">
打开百度地图核对位置后，将坐标填回上方经纬度
搜索或拖图确认位置后自动填入经纬度
</Typography.Text>
</Space>
<Form.Item name="avgPrice" label="人均费用（选填）">
@@ -1013,22 +997,16 @@ export default function StoresPage() {
获取当前位置
</Button>
<Button
icon={<LinkOutlined />}
icon={<EnvironmentOutlined />}
onClick={() => {
const v = createForm.getFieldsValue();
openBaiduMapSearch([
v.province,
v.city,
v.district,
v.address,
v.name,
]);
setMapPickerTarget('create');
setMapPickerOpen(true);
}}
>
百度地图查询
腾讯地图选点
</Button>
<Typography.Text type="secondary">
可手动填写 / 定位 / 百度地图核对后填入坐标
可手动填写 / 定位 / 腾讯地图选点填入坐标
</Typography.Text>
</Space>
<Space wrap style={{ width: '100%' }}>
@@ -1132,6 +1110,42 @@ export default function StoresPage() {
onChange={(e) => setRejectReason(e.target.value)}
/>
</Modal>
<TencentLocPickerModal
open={mapPickerOpen}
onClose={() => setMapPickerOpen(false)}
latitude={
mapPickerTarget === 'edit'
? Number(editForm.getFieldValue('latitude') ?? detail?.latitude)
: Number(createForm.getFieldValue('latitude'))
}
longitude={
mapPickerTarget === 'edit'
? Number(editForm.getFieldValue('longitude') ?? detail?.longitude)
: Number(createForm.getFieldValue('longitude'))
}
onPick={(loc) => {
if (mapPickerTarget === 'edit') {
editForm.setFieldsValue({
latitude: loc.latitude,
longitude: loc.longitude,
...(loc.address && !editForm.getFieldValue('address')
? { address: loc.address }
: {}),
});
} else {
createForm.setFieldsValue({
latitude: loc.latitude,
longitude: loc.longitude,
...(loc.address && !createForm.getFieldValue('address')
? { address: loc.address }
: {}),
});
}
message.success(
`已选点 ${loc.latitude.toFixed(6)}, ${loc.longitude.toFixed(6)}${loc.name ? `（${loc.name}）` : ''}`,
);
}}
/>
</div>
);
}
apps/h5-partner/src/components/TencentLocPickerOverlay.tsx
+133
View File
@@ -0,0 +1,133 @@
import { useEffect, useMemo, useState } from 'react';
import type { ClientRuntimeConfig } from '@dukang/shared-types';
import { request } from '../lib/api';
import {
buildTencentLocPickerUrl,
parseTencentLocPickerMessage,
type TencentPickedLocation,
} from '../lib/tencentLocPicker';
type Props = {
open: boolean;
onClose: () => void;
onPick: (loc: TencentPickedLocation) => void;
latitude?: number | null;
longitude?: number | null;
};
let cachedKey: string | null | undefined;
async function loadTencentLbsKey(): Promise<string> {
if (cachedKey) return cachedKey;
const cfg = await request<ClientRuntimeConfig>('PARTNER_H5', '/common/client-config', {
silent: true,
});
const key = (cfg.tencentLbsKey || '').trim();
if (!key) {
throw new Error('未配置腾讯位置服务 Key，请联系管理员在系统设置中配置');
}
cachedKey = key;
return key;
}
export default function TencentLocPickerOverlay({
open,
onClose,
onPick,
latitude,
longitude,
}: Props) {
const [key, setKey] = useState<string | null>(cachedKey ?? null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
useEffect(() => {
if (!open) return;
let cancelled = false;
setError('');
if (key) return;
setLoading(true);
void loadTencentLbsKey()
.then((k) => {
if (!cancelled) setKey(k);
})
.catch((e) => {
if (!cancelled) setError(e instanceof Error ? e.message : '加载地图配置失败');
})
.finally(() => {
if (!cancelled) setLoading(false);
});
return () => {
cancelled = true;
};
}, [open, key]);
useEffect(() => {
if (!open) return;
function onMessage(event: MessageEvent) {
const picked = parseTencentLocPickerMessage(event.data);
if (!picked) return;
onPick(picked);
onClose();
}
window.addEventListener('message', onMessage);
return () => window.removeEventListener('message', onMessage);
}, [open, onPick, onClose]);
const src = useMemo(() => {
if (!key) return '';
return buildTencentLocPickerUrl(key, {
latitude: latitude != null ? Number(latitude) : undefined,
longitude: longitude != null ? Number(longitude) : undefined,
});
}, [key, latitude, longitude]);
if (!open) return null;
return (
<div
style={{
position: 'fixed',
inset: 0,
zIndex: 1000,
background: '#fff',
display: 'flex',
flexDirection: 'column',
}}
>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '12px 16px',
borderBottom: '1px solid rgba(0,0,0,0.06)',
flexShrink: 0,
}}
>
<button type="button" className="partner-btn-outline" style={{ padding: '6px 12px' }} onClick={onClose}>
关闭
</button>
<span style={{ fontWeight: 600 }}>地图选点</span>
<span style={{ width: 52 }} />
</div>
<div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
{loading ? (
<p className="label-md text-muted" style={{ padding: 24, textAlign: 'center' }}>
加载地图…
</p>
) : error ? (
<p className="label-md" style={{ padding: 24, color: 'var(--color-heritage-red, #a61d24)' }}>
{error}
</p>
) : src ? (
<iframe
title="腾讯地图选点"
src={src}
style={{ width: '100%', height: '100%', border: 0, display: 'block' }}
/>
) : null}
</div>
</div>
);
}
apps/h5-partner/src/lib/tencentLocPicker.ts
+59
View File
@@ -0,0 +1,59 @@
export type TencentPickedLocation = {
latitude: number;
longitude: number;
address?: string;
name?: string;
cityname?: string;
};
type LocPickerMessage = {
module?: string;
latlng?: { lat?: number; lng?: number };
poiaddress?: string;
poiname?: string;
cityname?: string;
};
const REFERER = 'dukang-haoke';
export function buildTencentLocPickerUrl(
key: string,
options?: { latitude?: number; longitude?: number },
): string {
const params = new URLSearchParams({
search: '1',
type: '1',
key,
referer: REFERER,
policy: '1',
});
const lat = options?.latitude;
const lng = options?.longitude;
if (
lat != null &&
lng != null &&
Number.isFinite(lat) &&
Number.isFinite(lng) &&
!(lat === 0 && lng === 0)
) {
params.set('coord', `${lat},${lng}`);
params.set('coordtype', '5');
}
return `https://apis.map.qq.com/tools/locpicker?${params.toString()}`;
}
export function parseTencentLocPickerMessage(data: unknown): TencentPickedLocation | null {
const loc = data as LocPickerMessage;
if (!loc || loc.module !== 'locationPicker') return null;
const lat = Number(loc.latlng?.lat);
const lng = Number(loc.latlng?.lng);
if (!Number.isFinite(lat) || !Number.isFinite(lng)) return null;
if (!loc.poiname && !loc.poiaddress) return null;
return {
latitude: lat,
longitude: lng,
address: loc.poiaddress?.trim() || undefined,
name: loc.poiname?.trim() || undefined,
cityname: loc.cityname?.trim() || undefined,
};
}
apps/h5-partner/src/pages/StoreCreatePage.tsx
+30 -1
View File
@@ -19,6 +19,8 @@ import { fetchPartnerCities, type OpenCityOption } from '../lib/upload';
import { usePartnerSession } from '../contexts/PartnerSessionContext';
import TencentLocPickerOverlay from '../components/TencentLocPickerOverlay';
import {
clearAllStoreDrafts,
@@ -106,6 +108,8 @@ export default function StoreCreatePage() {
const [locating, setLocating] = useState(false);
const [mapPickerOpen, setMapPickerOpen] = useState(false);
const draftSaveDisabledRef = useRef(false);
function reportFormError(message: string) {
@@ -777,10 +781,18 @@ export default function StoreCreatePage() {
>
{locating ? '定位中…' : '获取当前位置'}
</button>
<button
type="button"
className="partner-btn-outline"
style={{ padding: '8px 12px', fontSize: 13 }}
onClick={() => setMapPickerOpen(true)}
>
地图选点
</button>
<span className="label-md text-muted">
{formatStoreCoords(form.latitude, form.longitude)
? `坐标：${formatStoreCoords(form.latitude, form.longitude)}`
: '未定位（提交后可按地址自动解析）'}
: '未定位（可定位或地图选点）'}
</span>
</div>
@@ -1278,6 +1290,23 @@ export default function StoreCreatePage() {
</footer>
<TencentLocPickerOverlay
open={mapPickerOpen}
onClose={() => setMapPickerOpen(false)}
latitude={form.latitude ? Number(form.latitude) : undefined}
longitude={form.longitude ? Number(form.longitude) : undefined}
onPick={(loc) => {
patchForm({
latitude: String(loc.latitude),
longitude: String(loc.longitude),
...(loc.address && !form.address.trim() ? { address: loc.address } : {}),
});
toastSuccess(
`已选点 ${loc.latitude.toFixed(6)}, ${loc.longitude.toFixed(6)}${loc.name ? `（${loc.name}）` : ''}`,
);
}}
/>
</div>
);
apps/h5-partner/src/pages/StoreDetailPage.tsx
+28
View File
@@ -8,6 +8,7 @@ import { canManagePartnerStore } from '../lib/partnerAccess';
import { normalizeStringArray, patchEnvPhotoAt } from '../lib/storeDraft';
import { formatStoreCoords, locateStorePosition } from '../lib/storeLocate';
import OssUploadField from '../components/OssUploadField';
import TencentLocPickerOverlay from '../components/TencentLocPickerOverlay';
import {
canPartnerOpenStore,
storeAuditLabel,
@@ -54,6 +55,7 @@ export default function StoreDetailPage() {
const [saving, setSaving] = useState(false);
const [mediaSaving, setMediaSaving] = useState(false);
const [locating, setLocating] = useState(false);
const [mapPickerOpen, setMapPickerOpen] = useState(false);
const [actionError, setActionError] = useState('');
const [closeConfirmOpen, setCloseConfirmOpen] = useState(false);
@@ -367,6 +369,14 @@ export default function StoreDetailPage() {
>
{locating ? '定位中…' : '获取当前位置'}
</button>
<button
type="button"
className="partner-btn-outline"
style={{ padding: '8px 12px', fontSize: 13 }}
onClick={() => setMapPickerOpen(true)}
>
地图选点
</button>
<span className="label-md text-muted">
{formatStoreCoords(form.latitude, form.longitude)
? `坐标：${formatStoreCoords(form.latitude, form.longitude)}`
@@ -480,6 +490,24 @@ export default function StoreDetailPage() {
</div>
</div>
)}
<TencentLocPickerOverlay
open={mapPickerOpen}
onClose={() => setMapPickerOpen(false)}
latitude={form.latitude ? Number(form.latitude) : undefined}
longitude={form.longitude ? Number(form.longitude) : undefined}
onPick={(loc) => {
setForm((prev) => ({
...prev,
latitude: String(loc.latitude),
longitude: String(loc.longitude),
...(loc.address && !prev.address.trim() ? { address: loc.address } : {}),
}));
toastSuccess(
`已选点 ${loc.latitude.toFixed(6)}, ${loc.longitude.toFixed(6)}${loc.name ? `（${loc.name}）` : ''}`,
);
}}
/>
</div>
);
}
apps/mini-user/src/pages/store-detail/index.tsx
+68 -13
View File
@@ -1,5 +1,5 @@
import { useEffect, useMemo, useState } from 'react';
import { View, Text } from '@tarojs/components';
import { View, Text, Image } from '@tarojs/components';
import Taro, { usePageScroll, useRouter, useShareAppMessage, useShareTimeline } from '@tarojs/taro';
import PageShell from '../../components/PageShell';
import PageNavBar from '../../components/PageNavBar';
@@ -13,6 +13,12 @@ import {
toWeappShareMessage,
} from '../../lib/wechat-share';
type StoreMedia = {
url?: string | null;
bizType?: string | null;
mediaType?: string | null;
};
type Store = {
id: string;
name: string;
@@ -25,6 +31,7 @@ type Store = {
intro?: string | null;
coverUrl?: string | null;
carouselUrls?: string[] | null;
media?: StoreMedia[] | null;
openTime?: string | null;
closeTime?: string | null;
openTime2?: string | null;
@@ -35,6 +42,26 @@ type Store = {
category?: { name: string } | null;
};
function uniqueUrls(urls: Array<string | null | undefined>) {
const seen = new Set<string>();
const out: string[] = [];
for (const raw of urls) {
const url = String(raw || '').trim();
if (!url || seen.has(url)) continue;
seen.add(url);
out.push(url);
}
return out;
}
function envPhotoUrls(store: Store) {
return uniqueUrls(
(store.media || [])
.filter((m) => !m.bizType || m.bizType === 'ENV')
.map((m) => m.url),
);
}
function fullAddress(store: Store) {
const city = store.cityName || store.city || '';
return `${store.province || ''}${city}${store.district || ''}${store.address || ''}`.trim();
@@ -66,12 +93,15 @@ export default function StoreDetailPage() {
}, [storeId]);
const sharePayload = useMemo(
() => ({
title: store?.name || DEFAULT_SHARE_TITLE,
desc: store?.intro?.trim() || store?.address || DEFAULT_SHARE_DESC,
path: `/pages/store-detail/index?id=${storeId}`,
imgUrl: store?.coverUrl || store?.carouselUrls?.[0] || undefined,
}),
() => {
const envFirst = store ? envPhotoUrls(store)[0] : undefined;
return {
title: store?.name || DEFAULT_SHARE_TITLE,
desc: store?.intro?.trim() || store?.address || DEFAULT_SHARE_DESC,
path: `/pages/store-detail/index?id=${storeId}`,
imgUrl: store?.coverUrl || envFirst || store?.carouselUrls?.[0] || undefined,
};
},
[store, storeId],
);
@@ -135,15 +165,23 @@ export default function StoreDetailPage() {
);
}
const images =
(store.carouselUrls && store.carouselUrls.length > 0
? store.carouselUrls
: store.coverUrl
? [store.coverUrl]
: []) as string[];
const envPhotos = envPhotoUrls(store);
const images = uniqueUrls([
store.coverUrl,
...(store.carouselUrls || []),
...envPhotos,
]);
const intro = store.intro?.trim() || '';
function previewEnv(index: number) {
if (!envPhotos.length) return;
Taro.previewImage({
current: envPhotos[index],
urls: envPhotos,
}).catch(() => toast('无法预览图片'));
}
return (
<PageShell variant="scroll" className="store-detail-page" hasFixedFooter>
<WechatShareReady payload={sharePayload} />
@@ -210,6 +248,23 @@ export default function StoreDetailPage() {
</View>
) : null}
{envPhotos.length > 0 ? (
<View className="store-detail-section">
<Text className="store-detail-section-title">店内环境</Text>
<View className="store-detail-env-grid">
{envPhotos.map((url, index) => (
<View
key={`${url}-${index}`}
className="store-detail-env-item"
onClick={() => previewEnv(index)}
>
<Image className="store-detail-env-img" src={url} mode="aspectFill" />
</View>
))}
</View>
</View>
) : null}
<View className="store-detail-bar">
<View
className="u-btn u-btn--block"
apps/mini-user/src/styles/store-detail.css
+21
View File
@@ -144,6 +144,27 @@
color: var(--color-on-surface);
}
.store-detail-env-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.store-detail-env-item {
position: relative;
width: 100%;
aspect-ratio: 1;
border-radius: var(--radius-md, 8px);
overflow: hidden;
background: var(--color-surface-container);
}
.store-detail-env-img {
width: 100%;
height: 100%;
display: block;
}
.store-detail-bar {
position: fixed;
bottom: 0;