feat(mini-user): v3.5.10 同城配送提示可配置并支持换行

承运商 HTML 按收货市下发;textarea 回车在 C 端转成换行。含门店去掉分享按钮与小程序企微客服。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-08-25 14:29:48 +08:00
parent fed8ff3d3a
commit 797b20979d
29 changed files with 758 additions and 28 deletions
@@ -1,5 +1,9 @@
import { useEffect, useState } from 'react';
import { Button, Text } from '@tarojs/components';
import type { ReactNode } from 'react';
import { toast } from '../lib/api';
import { getBrandAssetsSync, loadBrandAssets } from '../lib/brand-assets';
import { openWecomCustomerServiceChat } from '../lib/wecom-cs';
export type ContactCsSessionContext = {
orderId?: string;
@@ -16,7 +20,7 @@ type ContactCsButtonProps = {
const isWeapp = process.env.TARO_ENV === 'weapp';
/** 组装 session-from(微信限制约 1000 字符) */
/** 组装 session-from(微信限制约 1000 字符;原生小程序客服兜底用 */
export function buildCsSessionFrom(session?: ContactCsSessionContext): string {
if (!session) return 'dukang|from=mini-user';
const parts = ['dukang'];
@@ -26,16 +30,59 @@ export function buildCsSessionFrom(session?: ContactCsSessionContext): string {
return parts.join('|');
}
function canOpenWecom(url: string, corpId: string) {
return !!url.trim() && !!corpId.trim();
}
/**
* 微信小程序客服入口(open-type=contact)。
* weapp 环境不渲染,由调用方走电话等兜底。
* C 端在线客服:
* - weapp 且已配置 CorpID + kfid:调起企业微信「微信客服」
* - weapp 未配 CorpID:回退 open-type=contact
* - H5:有 kfid 则打开企微客服链接
*/
export default function ContactCsButton({
className = '',
children = '联系在线客服',
session,
}: ContactCsButtonProps) {
if (!isWeapp) return null;
const [cs, setCs] = useState(() => getBrandAssetsSync());
useEffect(() => {
void loadBrandAssets().then(setCs);
}, []);
const wecomChatReady = canOpenWecom(cs.customerServiceWecomUrl, cs.wecomCorpId);
const wecomWebReady = !!cs.customerServiceWecomUrl.trim();
if (!isWeapp && !wecomWebReady) return null;
async function openWecom() {
try {
if (isWeapp && wecomChatReady) {
await openWecomCustomerServiceChat({
url: cs.customerServiceWecomUrl,
corpId: cs.wecomCorpId,
session,
});
return;
}
if (typeof window !== 'undefined' && cs.customerServiceWecomUrl) {
window.location.href = cs.customerServiceWecomUrl;
return;
}
toast('请在微信内打开后联系客服');
} catch (e) {
toast(e instanceof Error ? e.message : '无法打开客服');
}
}
if (wecomChatReady || (!isWeapp && wecomWebReady)) {
return (
<Button className={className} hoverClass="none" onClick={() => void openWecom()}>
{typeof children === 'string' ? <Text>{children}</Text> : children}
</Button>
);
}
return (
<Button
@@ -0,0 +1,22 @@
import { RichText, Text } from '@tarojs/components';
import { deliveryHintHtmlToRichNodes } from '@dukang/shared-types';
import { DEFAULT_LOCAL_DELIVERY_HINT } from '../lib/local-delivery';
type DeliveryHintHtmlProps = {
html?: string | null;
className?: string;
};
/** 承运商配送提示:HTML 用 RichTexttextarea 里的换行转成 br */
export default function DeliveryHintHtml({
html,
className = '',
}: DeliveryHintHtmlProps) {
const raw = (html || '').trim() || DEFAULT_LOCAL_DELIVERY_HINT;
const nodes = deliveryHintHtmlToRichNodes(raw);
const looksHtml = /<[a-z][\s\S]*>/i.test(nodes);
if (!looksHtml) {
return <Text className={className}>{nodes}</Text>;
}
return <RichText className={className} nodes={nodes} />;
}
+57
View File
@@ -0,0 +1,57 @@
import type { LocalDeliveryDto } from '@dukang/shared-types';
import { DEFAULT_LOCAL_DELIVERY_HINT } from '@dukang/shared-types';
import { request } from './api';
export { DEFAULT_LOCAL_DELIVERY_HINT };
const CACHE_TTL_MS = 60_000;
let cached: LocalDeliveryDto[] | null = null;
let cachedAt = 0;
let inflight: Promise<LocalDeliveryDto[]> | null = null;
function cityAliases(name: string): string[] {
const raw = name.trim();
if (!raw) return [];
const noSuffix = raw.replace(/市$/, '');
const withSuffix = raw.endsWith('市') ? raw : `${raw}`;
return [raw, noSuffix, withSuffix];
}
export async function loadLocalDeliveries(force = false): Promise<LocalDeliveryDto[]> {
if (!force && cached && Date.now() - cachedAt < CACHE_TTL_MS) return cached;
if (!force && inflight) return inflight;
inflight = request<LocalDeliveryDto[]>('/catalog/local-deliveries')
.then((list) => {
cached = Array.isArray(list) ? list : [];
cachedAt = Date.now();
return cached;
})
.catch(() => {
cached = cached ?? [];
return cached;
})
.finally(() => {
inflight = null;
});
return inflight;
}
export function matchLocalDelivery(
list: LocalDeliveryDto[],
opts: { cityCode?: string | null; cityName?: string | null },
): LocalDeliveryDto | null {
const code = String(opts.cityCode || '').trim();
if (code) {
const byCode = list.find((row) => row.city.code === code);
if (byCode) return byCode;
}
const names = new Set(cityAliases(String(opts.cityName || '')));
if (!names.size) return null;
return list.find((row) => cityAliases(row.city.name).some((n) => names.has(n))) ?? null;
}
export function resolveLocalDeliveryHintHtml(row: LocalDeliveryDto | null): string {
const html = row?.hintHtml?.trim();
if (html) return html;
return DEFAULT_LOCAL_DELIVERY_HINT;
}
@@ -1,3 +1,8 @@
import { DEFAULT_LOCAL_DELIVERY_HINT } from '@dukang/shared-types';
/** @deprecated 使用 DEFAULT_LOCAL_DELIVERY_HINT;空配置回退 */
export const LOCAL_DELIVERY_ETA_HINT = DEFAULT_LOCAL_DELIVERY_HINT;
/** 商品履约能力(与 HQ / 交易硬闸一致) */
export type FulfillmentFlags = {
+85
View File
@@ -0,0 +1,85 @@
import Taro from '@tarojs/taro';
export type WecomCsSessionContext = {
orderId?: string;
orderNo?: string;
from?: string;
};
type OpenCsChatOption = {
extInfo: { url: string };
corpId: string;
showMessageCard?: boolean;
sendMessageTitle?: string;
sendMessagePath?: string;
};
type OpenCsChatFn = (option: OpenCsChatOption) => Promise<unknown>;
function getTaroOpenCsChat(): OpenCsChatFn | null {
const api = (Taro as unknown as { openCustomerServiceChat?: OpenCsChatFn }).openCustomerServiceChat;
return typeof api === 'function' ? api : null;
}
function getWxOpenCsChat(): ((option: OpenCsChatOption & {
success?: () => void;
fail?: (err: { errMsg?: string }) => void;
}) => void) | null {
const wxApi = (
globalThis as {
wx?: {
openCustomerServiceChat?: (option: OpenCsChatOption & {
success?: () => void;
fail?: (err: { errMsg?: string }) => void;
}) => void;
};
}
).wx?.openCustomerServiceChat;
return typeof wxApi === 'function' ? wxApi : null;
}
/** 小程序调起企业微信「微信客服」会话 */
export async function openWecomCustomerServiceChat(params: {
url: string;
corpId: string;
session?: WecomCsSessionContext;
}): Promise<void> {
const url = params.url.trim();
const corpId = params.corpId.trim();
if (!url || !corpId) {
throw new Error('企微客服未配置');
}
const option: OpenCsChatOption = {
extInfo: { url },
corpId,
};
if (params.session?.orderNo || params.session?.orderId) {
option.showMessageCard = true;
option.sendMessageTitle = params.session.orderNo
? `订单 ${params.session.orderNo}`
: '订单咨询';
if (params.session.orderId) {
option.sendMessagePath = `pages/order-detail/index?id=${params.session.orderId}`;
}
}
const taroApi = getTaroOpenCsChat();
if (taroApi) {
await taroApi(option);
return;
}
const wxApi = getWxOpenCsChat();
if (!wxApi) {
throw new Error('当前微信版本不支持企业微信客服');
}
await new Promise<void>((resolve, reject) => {
wxApi({
...option,
success: () => resolve(),
fail: (err) => reject(new Error(err?.errMsg || '无法打开企业微信客服')),
});
});
}
@@ -16,35 +16,43 @@ function dialPhone(phone: string) {
}
export default function CustomerServicePage() {
const [phone, setPhone] = useState(() => getBrandAssetsSync().customerServicePhone);
const [brand, setBrand] = useState(() => getBrandAssetsSync());
useEffect(() => {
void loadBrandAssets().then((b) => setPhone(b.customerServicePhone));
void loadBrandAssets().then(setBrand);
}, []);
const phone = brand.customerServicePhone;
const wecomReady = !!brand.customerServiceWecomUrl.trim() && !!brand.wecomCorpId.trim();
const wecomUrlReady = !!brand.customerServiceWecomUrl.trim();
const hint = isWeapp
? wecomReady
? '点击下方按钮,进入企业微信客服会话'
: '点击下方按钮,进入在线客服会话'
: wecomUrlReady
? '点击下方按钮进入企业微信客服,或拨打客服电话'
: '请在微信小程序内打开以使用在线客服,或拨打客服电话';
return (
<PageShell variant="sub" className="cs-page">
<SubPageHeader title="联系客服" />
<View className="sub-page-body inset-page cs-body">
<Text className="cs-brand"></Text>
<Text className="cs-hint">
{isWeapp
? '点击下方按钮,进入小程序在线客服会话'
: '请在微信小程序内打开以使用在线客服,或拨打客服电话'}
</Text>
<Text className="cs-hint">{hint}</Text>
<Text className="cs-hours">9:00 - 21:00</Text>
{isWeapp ? (
{isWeapp || wecomUrlReady ? (
<ContactCsButton className="cs-online-btn" session={{ from: 'customer-service' }} />
) : null}
<View className={isWeapp ? 'cs-phone-link' : 'cs-call-btn'} onClick={() => dialPhone(phone)}>
<View className={isWeapp || wecomUrlReady ? 'cs-phone-link' : 'cs-call-btn'} onClick={() => dialPhone(phone)}>
<Text>
{isWeapp ? `或拨打客服电话 ${phone}` : '拨打客服电话'}
{isWeapp || wecomUrlReady ? `或拨打客服电话 ${phone}` : '拨打客服电话'}
</Text>
</View>
{!isWeapp ? (
{!isWeapp && !wecomUrlReady ? (
<Text className="cs-phone-display">{phone}</Text>
) : null}
</View>
@@ -11,7 +11,9 @@ import { maskPhone } from '../../lib/phone';
import { ensurePayReady } from '../../lib/pay-ready';
import { fetchUserProfile } from '../../lib/pay-wechat';
import { request, toast } from '../../lib/api';
import DeliveryHintHtml from '../../components/DeliveryHintHtml';
import { canCrossCity, isCrossCityAddress } from '../../lib/product-fulfillment';
import { loadLocalDeliveries, matchLocalDelivery, resolveLocalDeliveryHintHtml } from '../../lib/local-delivery';
import { getProductMainImage } from '../../lib/product-images';
import BenefitFigure from '../../components/BenefitFigure';
@@ -75,6 +77,7 @@ export default function OrderConfirmPage() {
const [addresses, setAddresses] = useState<Address[]>([]);
const [addressId, setAddressId] = useState(checkoutCtx.addressId || '');
const [preview, setPreview] = useState<OrderPreview | null>(null);
const [localHintHtml, setLocalHintHtml] = useState('');
const [previewLoading, setPreviewLoading] = useState(false);
const [loading, setLoading] = useState(false);
const [msg, setMsg] = useState('');
@@ -151,6 +154,18 @@ export default function OrderConfirmPage() {
[addresses, addressId],
);
useEffect(() => {
const cityName = selectedAddress?.city;
if (!cityName) {
setLocalHintHtml('');
return;
}
void loadLocalDeliveries().then((list) => {
const row = matchLocalDelivery(list, { cityName });
setLocalHintHtml(row ? resolveLocalDeliveryHintHtml(row) : '');
});
}, [selectedAddress?.city]);
const allowCross =
preview?.allowCrossCityDelivery !== undefined
? canCrossCity({ allowCrossCityDelivery: preview.allowCrossCityDelivery })
@@ -339,6 +354,12 @@ export default function OrderConfirmPage() {
</View>
) : null}
{!isCross && addressOk && addressId && localHintHtml ? (
<View className="order-card">
<DeliveryHintHtml className="u-muted" html={localHintHtml} />
</View>
) : null}
{preview ? (
<>
<View className="order-card">
@@ -10,6 +10,8 @@ import ContactCsButton from '../../components/ContactCsButton';
import LogisticsRichText from '../../components/LogisticsRichText';
import { request, toast } from '../../lib/api';
import { buildPayUrl } from '../../lib/checkout-nav';
import DeliveryHintHtml from '../../components/DeliveryHintHtml';
import { loadLocalDeliveries, matchLocalDelivery, resolveLocalDeliveryHintHtml } from '../../lib/local-delivery';
import {
formatEstimatedArrival,
isLogisticsNotArrived,
@@ -83,6 +85,22 @@ const STATUS_LABELS: Record<string, string> = {
REFUNDED: '已退款',
};
function applyLocalDeliveryHint(
data: OrderDetail,
setLocalHintHtml: (html: string) => void,
) {
if (data.deliveryType !== 'LOCAL') {
setLocalHintHtml('');
return;
}
void loadLocalDeliveries().then((list) => {
const row = data.receiverCity
? matchLocalDelivery(list, { cityName: data.receiverCity })
: null;
setLocalHintHtml(resolveLocalDeliveryHintHtml(row));
});
}
function fullReceiverAddress(order: OrderDetail) {
const detail = (order.receiverAddress || '').trim();
const region = [order.receiverProvince, order.receiverCity, order.receiverDistrict]
@@ -102,6 +120,7 @@ export default function OrderDetailPage() {
const [latestTrack, setLatestTrack] = useState<OrderTrackNode | null>(null);
const [estimatedArrival, setEstimatedArrival] = useState<OrderTrackEstimatedArrival | null>(null);
const [trackLoading, setTrackLoading] = useState(false);
const [localHintHtml, setLocalHintHtml] = useState('');
async function loadOrderTrack(delivery: OrderDetail['delivery'], orderStatus?: string) {
if (!orderId || !shouldLoadOrderTrack(delivery)) {
@@ -133,6 +152,7 @@ export default function OrderDetailPage() {
.then((data) => {
setOrder(data);
void loadOrderTrack(data.delivery, data.status);
applyLocalDeliveryHint(data, setLocalHintHtml);
})
.catch((e) => toast(e instanceof Error ? e.message : '加载失败'));
}, [orderId]);
@@ -144,6 +164,7 @@ export default function OrderDetailPage() {
.then((data) => {
setOrder(data);
void loadOrderTrack(data.delivery, data.status);
applyLocalDeliveryHint(data, setLocalHintHtml);
})
.catch(() => {});
});
@@ -361,6 +382,12 @@ export default function OrderDetailPage() {
{order.createdAt ? String(order.createdAt).slice(0, 19).replace('T', ' ') : '-'}
</Text>
</View>
{order.deliveryType === 'LOCAL' && localHintHtml ? (
<View className="order-row">
<Text className="order-row-label"></Text>
<DeliveryHintHtml className="order-row-value" html={localHintHtml} />
</View>
) : null}
</View>
</>
)}
@@ -14,6 +14,7 @@ import PageNavBar from '../../components/PageNavBar';
import ProductCarousel from '../../components/ProductCarousel';
import WechatShareReady from '../../components/WechatShareReady';
import BenefitFigure from '../../components/BenefitFigure';
import DeliveryHintHtml from '../../components/DeliveryHintHtml';
import { goLogin } from '../../lib/auth-nav';
import { ensurePayReady } from '../../lib/pay-ready';
import { isLoggedIn, request, toast } from '../../lib/api';
@@ -28,6 +29,8 @@ import {
canPickupOnSite,
normalizeFulfillmentFlags,
} from '../../lib/product-fulfillment';
import { loadLocalDeliveries, matchLocalDelivery, resolveLocalDeliveryHintHtml } from '../../lib/local-delivery';
import { getCityCodeForCatalog, resolveUserCity } from '../../lib/user-location';
import {
buildSceneSharePayload,
toWeappShareMessage,
@@ -90,6 +93,7 @@ export default function ProductDetailPage() {
const [product, setProduct] = useState<Product | null>(null);
const [headerSolid, setHeaderSolid] = useState(false);
const [selected, setSelected] = useState<Record<string, string>>({});
const [localHintHtml, setLocalHintHtml] = useState('');
usePageScroll(({ scrollTop }) => {
setHeaderSolid(scrollTop > 100);
@@ -136,6 +140,17 @@ export default function ProductDetailPage() {
useDidShow(() => {
loadProduct();
void resolveUserCity()
.then((city) =>
loadLocalDeliveries().then((list) => {
const row = matchLocalDelivery(list, {
cityCode: getCityCodeForCatalog(city),
cityName: city.cityName || city.displayCity || city.city,
});
setLocalHintHtml(resolveLocalDeliveryHintHtml(row));
}),
)
.catch(() => setLocalHintHtml(resolveLocalDeliveryHintHtml(null)));
});
const attrs = product?.specAttrs ?? [];
@@ -317,6 +332,10 @@ export default function ProductDetailPage() {
</View>
) : null}
{allowOnline && localHintHtml ? (
<DeliveryHintHtml className="product-detail-fulfillment" html={localHintHtml} />
) : null}
<View className="product-detail-promo">
<View className="product-detail-promo-glow" />
<View className="product-detail-promo-head">
@@ -12,7 +12,6 @@ import Taro, {
import PageShell from '../../components/PageShell';
import PageNavBar from '../../components/PageNavBar';
import ProductCarousel from '../../components/ProductCarousel';
import ShareNavButton from '../../components/ShareNavButton';
import StoreRedeemMarquee from '../../components/StoreRedeemMarquee';
import WechatShareReady from '../../components/WechatShareReady';
import { request, toast } from '../../lib/api';
@@ -356,7 +355,6 @@ export default function StoreDetailPage() {
solid={headerSolid}
titleVisible={headerSolid}
onBack={goBack}
right={<ShareNavButton payload={sharePayload} />}
/>
<View className="store-detail-hero full-bleed">
@@ -128,6 +128,14 @@
margin-bottom: 24px;
}
.product-detail-fulfillment {
display: block;
margin: 0 0 16px;
font-size: 13px;
line-height: 20px;
color: var(--color-on-surface-variant);
}
.product-detail-promo {
position: relative;
margin-top: 8px;