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:
2026-07-27 23:19:40 +08:00
parent d36fe13bcd
commit 317f910f3c
13 changed files with 571 additions and 52 deletions
@@ -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,
};
}
+50 -36
View File
@@ -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,
};
}
+30 -1
View File
@@ -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>
); );
} }
+68 -13
View File
@@ -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;
+2
View File
@@ -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[];
+2 -1
View File
@@ -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=
# 阿里云 OSSali-oss@6.x;凭证齐全时直传,缺失则服务端报错) # 阿里云 OSSali-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,