feat(admin,partner): Tencent map location picker and expose LBS key
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:
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -19,7 +19,7 @@ import {
|
|||||||
message,
|
message,
|
||||||
} from 'antd';
|
} from 'antd';
|
||||||
import type { ColumnsType } from 'antd/es/table';
|
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 { request, type Paginated } from '../lib/api';
|
||||||
import {
|
import {
|
||||||
ADMIN_OPTIONS_PAGE_SIZE,
|
ADMIN_OPTIONS_PAGE_SIZE,
|
||||||
@@ -37,6 +37,7 @@ import { useAdminList } from '../lib/useAdminList';
|
|||||||
import { resolveRegionBinding } from '../lib/china-region';
|
import { resolveRegionBinding } from '../lib/china-region';
|
||||||
import ChinaRegionCascader from '../components/ChinaRegionCascader';
|
import ChinaRegionCascader from '../components/ChinaRegionCascader';
|
||||||
import OssUpload from '../components/OssUpload';
|
import OssUpload from '../components/OssUpload';
|
||||||
|
import TencentLocPickerModal from '../components/TencentLocPickerModal';
|
||||||
|
|
||||||
const CREATE_STEPS = [
|
const CREATE_STEPS = [
|
||||||
{ title: '基本信息' },
|
{ title: '基本信息' },
|
||||||
@@ -44,17 +45,6 @@ const CREATE_STEPS = [
|
|||||||
{ title: '结算资质' },
|
{ 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(
|
function fillGeolocation(
|
||||||
setCoords: (lat: number, lng: number) => void,
|
setCoords: (lat: number, lng: number) => void,
|
||||||
setLoading: (v: boolean) => void,
|
setLoading: (v: boolean) => void,
|
||||||
@@ -356,6 +346,8 @@ export default function StoresPage() {
|
|||||||
const [createStep, setCreateStep] = useState(0);
|
const [createStep, setCreateStep] = useState(0);
|
||||||
const [createError, setCreateError] = useState('');
|
const [createError, setCreateError] = useState('');
|
||||||
const [locating, setLocating] = useState(false);
|
const [locating, setLocating] = useState(false);
|
||||||
|
const [mapPickerOpen, setMapPickerOpen] = useState(false);
|
||||||
|
const [mapPickerTarget, setMapPickerTarget] = useState<'create' | 'edit'>('create');
|
||||||
const [partners, setPartners] = useState<PartnerOption[]>([]);
|
const [partners, setPartners] = useState<PartnerOption[]>([]);
|
||||||
const [cities, setCities] = useState<CityOption[]>([]);
|
const [cities, setCities] = useState<CityOption[]>([]);
|
||||||
const [categoryTree, setCategoryTree] = useState<CategoryNode[]>([]);
|
const [categoryTree, setCategoryTree] = useState<CategoryNode[]>([]);
|
||||||
@@ -839,24 +831,16 @@ export default function StoresPage() {
|
|||||||
获取当前位置
|
获取当前位置
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
icon={<LinkOutlined />}
|
icon={<EnvironmentOutlined />}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const name = String(editForm.getFieldValue('name') || detail.name || '');
|
setMapPickerTarget('edit');
|
||||||
const district = String(editForm.getFieldValue('district') || detail.district || '');
|
setMapPickerOpen(true);
|
||||||
const address = String(editForm.getFieldValue('address') || detail.address || '');
|
|
||||||
openBaiduMapSearch([
|
|
||||||
String(detail.province || ''),
|
|
||||||
String(detail.cityName || ''),
|
|
||||||
district,
|
|
||||||
address,
|
|
||||||
name,
|
|
||||||
]);
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
百度地图查询
|
腾讯地图选点
|
||||||
</Button>
|
</Button>
|
||||||
<Typography.Text type="secondary">
|
<Typography.Text type="secondary">
|
||||||
打开百度地图核对位置后,将坐标填回上方经纬度
|
搜索或拖图确认位置后自动填入经纬度
|
||||||
</Typography.Text>
|
</Typography.Text>
|
||||||
</Space>
|
</Space>
|
||||||
<Form.Item name="avgPrice" label="人均费用(选填)">
|
<Form.Item name="avgPrice" label="人均费用(选填)">
|
||||||
@@ -1013,22 +997,16 @@ export default function StoresPage() {
|
|||||||
获取当前位置
|
获取当前位置
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
icon={<LinkOutlined />}
|
icon={<EnvironmentOutlined />}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const v = createForm.getFieldsValue();
|
setMapPickerTarget('create');
|
||||||
openBaiduMapSearch([
|
setMapPickerOpen(true);
|
||||||
v.province,
|
|
||||||
v.city,
|
|
||||||
v.district,
|
|
||||||
v.address,
|
|
||||||
v.name,
|
|
||||||
]);
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
百度地图查询
|
腾讯地图选点
|
||||||
</Button>
|
</Button>
|
||||||
<Typography.Text type="secondary">
|
<Typography.Text type="secondary">
|
||||||
可手动填写 / 定位 / 百度地图核对后填入坐标
|
可手动填写 / 定位 / 腾讯地图选点填入坐标
|
||||||
</Typography.Text>
|
</Typography.Text>
|
||||||
</Space>
|
</Space>
|
||||||
<Space wrap style={{ width: '100%' }}>
|
<Space wrap style={{ width: '100%' }}>
|
||||||
@@ -1132,6 +1110,42 @@ export default function StoresPage() {
|
|||||||
onChange={(e) => setRejectReason(e.target.value)}
|
onChange={(e) => setRejectReason(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</Modal>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -19,6 +19,8 @@ import { fetchPartnerCities, type OpenCityOption } from '../lib/upload';
|
|||||||
|
|
||||||
import { usePartnerSession } from '../contexts/PartnerSessionContext';
|
import { usePartnerSession } from '../contexts/PartnerSessionContext';
|
||||||
|
|
||||||
|
import TencentLocPickerOverlay from '../components/TencentLocPickerOverlay';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
|
||||||
clearAllStoreDrafts,
|
clearAllStoreDrafts,
|
||||||
@@ -106,6 +108,8 @@ export default function StoreCreatePage() {
|
|||||||
|
|
||||||
const [locating, setLocating] = useState(false);
|
const [locating, setLocating] = useState(false);
|
||||||
|
|
||||||
|
const [mapPickerOpen, setMapPickerOpen] = useState(false);
|
||||||
|
|
||||||
const draftSaveDisabledRef = useRef(false);
|
const draftSaveDisabledRef = useRef(false);
|
||||||
|
|
||||||
function reportFormError(message: string) {
|
function reportFormError(message: string) {
|
||||||
@@ -777,10 +781,18 @@ export default function StoreCreatePage() {
|
|||||||
>
|
>
|
||||||
{locating ? '定位中…' : '获取当前位置'}
|
{locating ? '定位中…' : '获取当前位置'}
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="partner-btn-outline"
|
||||||
|
style={{ padding: '8px 12px', fontSize: 13 }}
|
||||||
|
onClick={() => setMapPickerOpen(true)}
|
||||||
|
>
|
||||||
|
地图选点
|
||||||
|
</button>
|
||||||
<span className="label-md text-muted">
|
<span className="label-md text-muted">
|
||||||
{formatStoreCoords(form.latitude, form.longitude)
|
{formatStoreCoords(form.latitude, form.longitude)
|
||||||
? `坐标:${formatStoreCoords(form.latitude, form.longitude)}`
|
? `坐标:${formatStoreCoords(form.latitude, form.longitude)}`
|
||||||
: '未定位(提交后可按地址自动解析)'}
|
: '未定位(可定位或地图选点)'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1278,6 +1290,23 @@ export default function StoreCreatePage() {
|
|||||||
|
|
||||||
</footer>
|
</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>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import { canManagePartnerStore } from '../lib/partnerAccess';
|
|||||||
import { normalizeStringArray, patchEnvPhotoAt } from '../lib/storeDraft';
|
import { normalizeStringArray, patchEnvPhotoAt } from '../lib/storeDraft';
|
||||||
import { formatStoreCoords, locateStorePosition } from '../lib/storeLocate';
|
import { formatStoreCoords, locateStorePosition } from '../lib/storeLocate';
|
||||||
import OssUploadField from '../components/OssUploadField';
|
import OssUploadField from '../components/OssUploadField';
|
||||||
|
import TencentLocPickerOverlay from '../components/TencentLocPickerOverlay';
|
||||||
import {
|
import {
|
||||||
canPartnerOpenStore,
|
canPartnerOpenStore,
|
||||||
storeAuditLabel,
|
storeAuditLabel,
|
||||||
@@ -54,6 +55,7 @@ export default function StoreDetailPage() {
|
|||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
const [mediaSaving, setMediaSaving] = useState(false);
|
const [mediaSaving, setMediaSaving] = useState(false);
|
||||||
const [locating, setLocating] = useState(false);
|
const [locating, setLocating] = useState(false);
|
||||||
|
const [mapPickerOpen, setMapPickerOpen] = useState(false);
|
||||||
const [actionError, setActionError] = useState('');
|
const [actionError, setActionError] = useState('');
|
||||||
const [closeConfirmOpen, setCloseConfirmOpen] = useState(false);
|
const [closeConfirmOpen, setCloseConfirmOpen] = useState(false);
|
||||||
|
|
||||||
@@ -367,6 +369,14 @@ export default function StoreDetailPage() {
|
|||||||
>
|
>
|
||||||
{locating ? '定位中…' : '获取当前位置'}
|
{locating ? '定位中…' : '获取当前位置'}
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="partner-btn-outline"
|
||||||
|
style={{ padding: '8px 12px', fontSize: 13 }}
|
||||||
|
onClick={() => setMapPickerOpen(true)}
|
||||||
|
>
|
||||||
|
地图选点
|
||||||
|
</button>
|
||||||
<span className="label-md text-muted">
|
<span className="label-md text-muted">
|
||||||
{formatStoreCoords(form.latitude, form.longitude)
|
{formatStoreCoords(form.latitude, form.longitude)
|
||||||
? `坐标:${formatStoreCoords(form.latitude, form.longitude)}`
|
? `坐标:${formatStoreCoords(form.latitude, form.longitude)}`
|
||||||
@@ -480,6 +490,24 @@ export default function StoreDetailPage() {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useEffect, useMemo, useState } from 'react';
|
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 Taro, { usePageScroll, useRouter, useShareAppMessage, useShareTimeline } from '@tarojs/taro';
|
||||||
import PageShell from '../../components/PageShell';
|
import PageShell from '../../components/PageShell';
|
||||||
import PageNavBar from '../../components/PageNavBar';
|
import PageNavBar from '../../components/PageNavBar';
|
||||||
@@ -13,6 +13,12 @@ import {
|
|||||||
toWeappShareMessage,
|
toWeappShareMessage,
|
||||||
} from '../../lib/wechat-share';
|
} from '../../lib/wechat-share';
|
||||||
|
|
||||||
|
type StoreMedia = {
|
||||||
|
url?: string | null;
|
||||||
|
bizType?: string | null;
|
||||||
|
mediaType?: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
type Store = {
|
type Store = {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
@@ -25,6 +31,7 @@ type Store = {
|
|||||||
intro?: string | null;
|
intro?: string | null;
|
||||||
coverUrl?: string | null;
|
coverUrl?: string | null;
|
||||||
carouselUrls?: string[] | null;
|
carouselUrls?: string[] | null;
|
||||||
|
media?: StoreMedia[] | null;
|
||||||
openTime?: string | null;
|
openTime?: string | null;
|
||||||
closeTime?: string | null;
|
closeTime?: string | null;
|
||||||
openTime2?: string | null;
|
openTime2?: string | null;
|
||||||
@@ -35,6 +42,26 @@ type Store = {
|
|||||||
category?: { name: string } | null;
|
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) {
|
function fullAddress(store: Store) {
|
||||||
const city = store.cityName || store.city || '';
|
const city = store.cityName || store.city || '';
|
||||||
return `${store.province || ''}${city}${store.district || ''}${store.address || ''}`.trim();
|
return `${store.province || ''}${city}${store.district || ''}${store.address || ''}`.trim();
|
||||||
@@ -66,12 +93,15 @@ export default function StoreDetailPage() {
|
|||||||
}, [storeId]);
|
}, [storeId]);
|
||||||
|
|
||||||
const sharePayload = useMemo(
|
const sharePayload = useMemo(
|
||||||
() => ({
|
() => {
|
||||||
title: store?.name || DEFAULT_SHARE_TITLE,
|
const envFirst = store ? envPhotoUrls(store)[0] : undefined;
|
||||||
desc: store?.intro?.trim() || store?.address || DEFAULT_SHARE_DESC,
|
return {
|
||||||
path: `/pages/store-detail/index?id=${storeId}`,
|
title: store?.name || DEFAULT_SHARE_TITLE,
|
||||||
imgUrl: store?.coverUrl || store?.carouselUrls?.[0] || undefined,
|
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],
|
[store, storeId],
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -135,15 +165,23 @@ export default function StoreDetailPage() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const images =
|
const envPhotos = envPhotoUrls(store);
|
||||||
(store.carouselUrls && store.carouselUrls.length > 0
|
const images = uniqueUrls([
|
||||||
? store.carouselUrls
|
store.coverUrl,
|
||||||
: store.coverUrl
|
...(store.carouselUrls || []),
|
||||||
? [store.coverUrl]
|
...envPhotos,
|
||||||
: []) as string[];
|
]);
|
||||||
|
|
||||||
const intro = store.intro?.trim() || '';
|
const intro = store.intro?.trim() || '';
|
||||||
|
|
||||||
|
function previewEnv(index: number) {
|
||||||
|
if (!envPhotos.length) return;
|
||||||
|
Taro.previewImage({
|
||||||
|
current: envPhotos[index],
|
||||||
|
urls: envPhotos,
|
||||||
|
}).catch(() => toast('无法预览图片'));
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageShell variant="scroll" className="store-detail-page" hasFixedFooter>
|
<PageShell variant="scroll" className="store-detail-page" hasFixedFooter>
|
||||||
<WechatShareReady payload={sharePayload} />
|
<WechatShareReady payload={sharePayload} />
|
||||||
@@ -210,6 +248,23 @@ export default function StoreDetailPage() {
|
|||||||
</View>
|
</View>
|
||||||
) : null}
|
) : 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="store-detail-bar">
|
||||||
<View
|
<View
|
||||||
className="u-btn u-btn--block"
|
className="u-btn u-btn--block"
|
||||||
|
|||||||
@@ -144,6 +144,27 @@
|
|||||||
color: var(--color-on-surface);
|
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 {
|
.store-detail-bar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|||||||
@@ -31,6 +31,8 @@ export type ClientRuntimeConfig = {
|
|||||||
mockWechat?: boolean;
|
mockWechat?: boolean;
|
||||||
/** false 时三端跳过微信 SDK OAuth 授权(由 MOCK_WECHAT 或真实凭证推导) */
|
/** false 时三端跳过微信 SDK OAuth 授权(由 MOCK_WECHAT 或真实凭证推导) */
|
||||||
wxAuthorize?: boolean;
|
wxAuthorize?: boolean;
|
||||||
|
/** 腾讯位置服务 Key(地图选点组件,可按域名限制) */
|
||||||
|
tencentLbsKey?: string;
|
||||||
/** 小程序首页轮播 / 底部图 */
|
/** 小程序首页轮播 / 底部图 */
|
||||||
miniHome?: {
|
miniHome?: {
|
||||||
banners: string[];
|
banners: string[];
|
||||||
|
|||||||
@@ -59,7 +59,8 @@ WX_PAY_NOTIFY_URL=https://api.dukanghaoke.com/api/v1/callbacks/wechat/pay
|
|||||||
# 企业微信智能机器人总开关(Bot 实例在 HQ「企微机器人」模块创建)
|
# 企业微信智能机器人总开关(Bot 实例在 HQ「企微机器人」模块创建)
|
||||||
WECOM_AIBOT_ENABLED=false
|
WECOM_AIBOT_ENABLED=false
|
||||||
|
|
||||||
# 腾讯位置服务(逆地理编码,微信定位展示城市)
|
# 腾讯位置服务(地理编码 / 逆地理 / 地图选点组件)
|
||||||
|
# 地图选点需在控制台为 Key 配置域名白名单,并允许组件域名 apis.map.qq.com
|
||||||
TENCENT_LBS_KEY=
|
TENCENT_LBS_KEY=
|
||||||
|
|
||||||
# 阿里云 OSS(ali-oss@6.x;凭证齐全时直传,缺失则服务端报错)
|
# 阿里云 OSS(ali-oss@6.x;凭证齐全时直传,缺失则服务端报错)
|
||||||
|
|||||||
@@ -107,7 +107,7 @@ export const SYSTEM_CONFIG_FIELDS: SystemConfigFieldMeta[] = [
|
|||||||
{ key: 'OSS_MAX_UPLOAD_BYTES', label: '单文件上限(字节)', group: G.oss, type: 'number', requiresRestart: false },
|
{ key: 'OSS_MAX_UPLOAD_BYTES', label: '单文件上限(字节)', group: G.oss, type: 'number', requiresRestart: false },
|
||||||
|
|
||||||
{ key: 'USER_H5_URL', label: 'C 端 H5 落地页', group: G.app, type: 'string', requiresRestart: false },
|
{ key: 'USER_H5_URL', label: 'C 端 H5 落地页', group: G.app, type: 'string', requiresRestart: false },
|
||||||
{ key: 'TENCENT_LBS_KEY', label: '腾讯位置服务 Key', group: G.app, type: 'password', secret: true, requiresRestart: false },
|
{ key: 'TENCENT_LBS_KEY', label: '腾讯位置服务 Key(地理编码 / 地图选点)', group: G.app, type: 'password', secret: true, requiresRestart: false },
|
||||||
|
|
||||||
{ key: 'DEPLOY_WEBHOOK_URL', label: '发布 Webhook URL', group: G.deploy, type: 'string', requiresRestart: false },
|
{ key: 'DEPLOY_WEBHOOK_URL', label: '发布 Webhook URL', group: G.deploy, type: 'string', requiresRestart: false },
|
||||||
{ key: 'DEPLOY_WEBHOOK_SECRET', label: '发布 Webhook Secret', group: G.deploy, type: 'password', secret: true, requiresRestart: false },
|
{ key: 'DEPLOY_WEBHOOK_SECRET', label: '发布 Webhook Secret', group: G.deploy, type: 'password', secret: true, requiresRestart: false },
|
||||||
|
|||||||
@@ -17,6 +17,8 @@ export class ClientConfigController {
|
|||||||
mockSms: cfg.mockSms,
|
mockSms: cfg.mockSms,
|
||||||
mockWechat: cfg.mockWechat,
|
mockWechat: cfg.mockWechat,
|
||||||
wxAuthorize: cfg.wxAuthorize,
|
wxAuthorize: cfg.wxAuthorize,
|
||||||
|
/** 浏览器地图选点用;建议在腾讯控制台按域名限制 Key */
|
||||||
|
tencentLbsKey: cfg.tencentLbsKey || undefined,
|
||||||
miniHome: {
|
miniHome: {
|
||||||
banners: parseMiniHomeBanners(env.MINI_HOME_BANNERS),
|
banners: parseMiniHomeBanners(env.MINI_HOME_BANNERS),
|
||||||
footerUrl: footer || null,
|
footerUrl: footer || null,
|
||||||
|
|||||||
Reference in New Issue
Block a user