短信验证调试成功
This commit is contained in:
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import SubPageHeader from '../components/SubPageHeader';
|
||||
import { request } from '../lib/api';
|
||||
import { useUserSession } from '../contexts/UserSessionContext';
|
||||
import { buildAddressEditUrl, buildAddressListUrl, buildOrderConfirmUrl, hasCheckoutContext, readCheckoutContext } from '../lib/navigation';
|
||||
|
||||
type Address = {
|
||||
@@ -24,6 +25,7 @@ function formatAddress(a: Address) {
|
||||
}
|
||||
|
||||
export default function AddressListPage() {
|
||||
const { profile } = useUserSession();
|
||||
const [list, setList] = useState<Address[]>([]);
|
||||
const [pendingAddress, setPendingAddress] = useState<Address | null>(null);
|
||||
const [savingOrderAddress, setSavingOrderAddress] = useState(false);
|
||||
@@ -42,7 +44,7 @@ export default function AddressListPage() {
|
||||
|
||||
useEffect(() => {
|
||||
loadList();
|
||||
}, [loadList]);
|
||||
}, [loadList, profile?.id]);
|
||||
|
||||
function selectAddress(addr: Address) {
|
||||
if (!selectMode) return;
|
||||
@@ -137,7 +139,7 @@ export default function AddressListPage() {
|
||||
|
||||
<div className="address-list-cards">
|
||||
{list.map((a) => {
|
||||
const isDefault = a.isDefault === 1;
|
||||
const isDefault = Number(a.isDefault) === 1;
|
||||
const isSelected = selectMode && currentAddressId === String(a.id);
|
||||
return (
|
||||
<article
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import SubPageHeader from '../components/SubPageHeader';
|
||||
import { request } from '../lib/api';
|
||||
|
||||
type ChatMessage = {
|
||||
id: string;
|
||||
role: 'user' | 'agent' | 'system';
|
||||
text: string;
|
||||
time?: string;
|
||||
};
|
||||
|
||||
const QUICK_QUESTIONS = [
|
||||
{ key: 'logistics', label: '物流查询' },
|
||||
{ key: 'damage', label: '破损补发' },
|
||||
{ key: 'refund', label: '申请退款' },
|
||||
{ key: 'address', label: '修改地址' },
|
||||
] as const;
|
||||
|
||||
function nowLabel() {
|
||||
const d = new Date();
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
}
|
||||
|
||||
function agentReply(userText: string, orderNo?: string) {
|
||||
if (/订单|DK\d+/i.test(userText) || orderNo) {
|
||||
return '已收到您的订单信息，客服将在工作时间 9:00-18:00 内为您处理，请保持电话畅通。';
|
||||
}
|
||||
if (userText.includes('破损') || userText.includes('补发')) {
|
||||
return '非常抱歉给您带来不便。请提供订单号并描述破损情况，我们将尽快安排补发。';
|
||||
}
|
||||
if (userText.includes('退款')) {
|
||||
return '请提供订单号与退款原因，客服将为您核实订单状态并协助办理。';
|
||||
}
|
||||
if (userText.includes('地址')) {
|
||||
return '待发货/出库中的订单可在订单详情修改收货地址；已发货订单请联系客服协助处理。';
|
||||
}
|
||||
if (userText.includes('物流')) {
|
||||
return '您可在订单详情查看配送进度；如有异常请提供订单号，我们为您查询。';
|
||||
}
|
||||
return '您好，杜康客服已收到您的消息，请稍候，我们将尽快回复。';
|
||||
}
|
||||
|
||||
export default function CustomerServicePage() {
|
||||
const navigate = useNavigate();
|
||||
const [params] = useSearchParams();
|
||||
const orderId = params.get('orderId') || '';
|
||||
const orderNo = params.get('orderNo') || '';
|
||||
const [input, setInput] = useState('');
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
||||
const [sending, setSending] = useState(false);
|
||||
const listRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const welcome: ChatMessage[] = [
|
||||
{ id: 'sys-1', role: 'system', text: nowLabel(), time: nowLabel() },
|
||||
{
|
||||
id: 'agent-welcome',
|
||||
role: 'agent',
|
||||
text: orderNo
|
||||
? `您好，我是杜康好客客服。已为您关联订单 ${orderNo}，请问有什么可以帮您？`
|
||||
: '您好，我是杜康好客客服。请问有什么可以帮您？',
|
||||
},
|
||||
];
|
||||
setMessages(welcome);
|
||||
}, [orderNo]);
|
||||
|
||||
useEffect(() => {
|
||||
listRef.current?.scrollTo({ top: listRef.current.scrollHeight, behavior: 'smooth' });
|
||||
}, [messages]);
|
||||
|
||||
function pushMessage(role: ChatMessage['role'], text: string) {
|
||||
setMessages((prev) => [...prev, { id: `${Date.now()}-${prev.length}`, role, text }]);
|
||||
}
|
||||
|
||||
async function sendText(text: string) {
|
||||
const trimmed = text.trim();
|
||||
if (!trimmed || sending) return;
|
||||
setSending(true);
|
||||
pushMessage('user', trimmed);
|
||||
setInput('');
|
||||
window.setTimeout(() => {
|
||||
pushMessage('agent', agentReply(trimmed, orderNo));
|
||||
setSending(false);
|
||||
}, 600);
|
||||
}
|
||||
|
||||
async function loadOrderContext() {
|
||||
if (!orderId) return null;
|
||||
try {
|
||||
return await request<Record<string, unknown>>('USER_H5', `/trade/orders/${orderId}`);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!orderId) return;
|
||||
loadOrderContext().then((order) => {
|
||||
if (!order) return;
|
||||
const no = String(order.orderNo || orderNo);
|
||||
if (no && !orderNo) {
|
||||
pushMessage('system', `已关联订单 ${no}`);
|
||||
}
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [orderId]);
|
||||
|
||||
return (
|
||||
<div className="customer-service-page">
|
||||
<SubPageHeader title="在线客服" onBack={() => navigate(-1)} />
|
||||
|
||||
{orderNo && (
|
||||
<div className="customer-service-order-card">
|
||||
<span className="material-symbols-outlined">receipt_long</span>
|
||||
<div>
|
||||
<p className="customer-service-order-label">当前咨询订单</p>
|
||||
<p className="customer-service-order-no">{orderNo}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="customer-service-chat" ref={listRef}>
|
||||
{messages.map((m) => {
|
||||
if (m.role === 'system') {
|
||||
return (
|
||||
<div key={m.id} className="customer-service-time">
|
||||
<span>{m.text}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const isUser = m.role === 'user';
|
||||
return (
|
||||
<div
|
||||
key={m.id}
|
||||
className={`customer-service-bubble-row${isUser ? ' is-user' : ' is-agent'}`}
|
||||
>
|
||||
{!isUser && (
|
||||
<div className="customer-service-avatar" aria-hidden>
|
||||
<span className="material-symbols-outlined">support_agent</span>
|
||||
</div>
|
||||
)}
|
||||
<div className={`customer-service-bubble${isUser ? ' is-user' : ''}`}>{m.text}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="customer-service-quick">
|
||||
{QUICK_QUESTIONS.map((q) => (
|
||||
<button
|
||||
key={q.key}
|
||||
type="button"
|
||||
className="customer-service-quick-btn"
|
||||
disabled={sending}
|
||||
onClick={() => sendText(q.label)}
|
||||
>
|
||||
{q.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<footer className="customer-service-inputbar">
|
||||
<input
|
||||
type="text"
|
||||
className="customer-service-input"
|
||||
placeholder="请输入您的问题..."
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') void sendText(input);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="customer-service-send"
|
||||
disabled={sending || !input.trim()}
|
||||
onClick={() => sendText(input)}
|
||||
>
|
||||
发送
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import ProductCarousel from '../components/ProductCarousel';
|
||||
import TabMainHeader from '../components/TabMainHeader';
|
||||
import AppToast from '../components/AppToast';
|
||||
import { getProductImages } from '../lib/product-images';
|
||||
import { track } from '../lib/analytics';
|
||||
import CouponBadge from '@dukang/shared-ui/CouponBadge';
|
||||
|
||||
type Product = {
|
||||
@@ -42,6 +43,10 @@ export default function HomePage() {
|
||||
const [cityCode, setCityCode] = useState(() => localStorage.getItem(CITY_STORAGE_KEY) || '410100');
|
||||
const [toast, setToast] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
track('home_view', { pagePath: '/' });
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
request<City[]>('USER_H5', '/catalog/cities').then((list) => {
|
||||
setCities(list);
|
||||
|
||||
@@ -2,22 +2,27 @@ import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import AppImage from '@dukang/shared-ui/AppImage';
|
||||
import type { WechatLoginResult } from '@dukang/shared-types';
|
||||
import { request, saveSession, type UserProfile } from '../lib/api';
|
||||
import { SmsScene } from '@dukang/shared-types';
|
||||
import { request, type SessionPayload } from '../lib/api';
|
||||
import { normalizePhoneInput, validateMobilePhone } from '../lib/phone';
|
||||
import { useSmsCode } from '../lib/use-sms-code';
|
||||
import { isWechatEnv, weixinSdk } from '../lib/weixin';
|
||||
import { useUserSession } from '../contexts/UserSessionContext';
|
||||
|
||||
export default function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const returnTo = searchParams.get('return') || '/';
|
||||
const [phone, setPhone] = useState('13800000001');
|
||||
const [code, setCode] = useState('123456');
|
||||
const { applySession } = useUserSession();
|
||||
const [phone, setPhone] = useState('');
|
||||
const [code, setCode] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [agreed, setAgreed] = useState(true);
|
||||
const [codeCooldown, setCodeCooldown] = useState(0);
|
||||
const [msg, setMsg] = useState('');
|
||||
const [wxSessionKey, setWxSessionKey] = useState<string | null>(null);
|
||||
const [bindMode, setBindMode] = useState(false);
|
||||
const { sendCode, sending, codeCooldown, sentHint, error: smsError, setError: setSmsError, clearMessages } =
|
||||
useSmsCode();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isWechatEnv()) return;
|
||||
@@ -38,12 +43,12 @@ export default function LoginPage() {
|
||||
return;
|
||||
}
|
||||
if (result.accessToken) {
|
||||
saveSession({
|
||||
applySession({
|
||||
accessToken: result.accessToken,
|
||||
refreshToken: result.refreshToken ?? '',
|
||||
deviceKey: result.deviceKey,
|
||||
phoneVerified: !!result.phoneVerified,
|
||||
user: result.user as never,
|
||||
user: result.user as SessionPayload['user'],
|
||||
});
|
||||
navigate(returnTo.startsWith('/') ? returnTo : '/');
|
||||
}
|
||||
@@ -57,29 +62,11 @@ export default function LoginPage() {
|
||||
return true;
|
||||
}
|
||||
|
||||
async function sendCode() {
|
||||
async function onSendCode() {
|
||||
if (!ensureAgreed()) return;
|
||||
const phoneCheck = validateMobilePhone(phone);
|
||||
if (!phoneCheck.ok) {
|
||||
setMsg(phoneCheck.message ?? '请输入正确的手机号码');
|
||||
return;
|
||||
}
|
||||
clearMessages();
|
||||
setMsg('');
|
||||
await request('USER_H5', '/auth/sms/send', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ phone, scene: bindMode ? 'BIND_PHONE' : 'USER_LOGIN' }),
|
||||
});
|
||||
setMsg('验证码已发送（Mock: 123456）');
|
||||
setCodeCooldown(60);
|
||||
const timer = setInterval(() => {
|
||||
setCodeCooldown((c) => {
|
||||
if (c <= 1) {
|
||||
clearInterval(timer);
|
||||
return 0;
|
||||
}
|
||||
return c - 1;
|
||||
});
|
||||
}, 1000);
|
||||
await sendCode(phone, bindMode ? SmsScene.BIND_PHONE : SmsScene.USER_LOGIN);
|
||||
}
|
||||
|
||||
async function login() {
|
||||
@@ -95,6 +82,7 @@ export default function LoginPage() {
|
||||
}
|
||||
setLoading(true);
|
||||
setMsg('');
|
||||
setSmsError('');
|
||||
try {
|
||||
if (bindMode && wxSessionKey) {
|
||||
const data = await request<WechatLoginResult>('USER_H5', '/auth/wechat/bind-phone', {
|
||||
@@ -104,15 +92,11 @@ export default function LoginPage() {
|
||||
handleWechatLoginResult(data);
|
||||
return;
|
||||
}
|
||||
const data = await request<{
|
||||
accessToken: string;
|
||||
refreshToken: string;
|
||||
deviceKey?: string;
|
||||
}>('USER_H5', '/auth/login/sms', {
|
||||
const data = await request<SessionPayload>('USER_H5', '/auth/login/sms', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ phone, code }),
|
||||
});
|
||||
saveSession(data);
|
||||
applySession(data);
|
||||
navigate(returnTo.startsWith('/') ? returnTo : '/');
|
||||
} catch (e) {
|
||||
setMsg(e instanceof Error ? e.message : '登录失败');
|
||||
@@ -136,6 +120,8 @@ export default function LoginPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const displayMsg = msg || smsError;
|
||||
|
||||
return (
|
||||
<div className="login-page">
|
||||
<header className="login-header">
|
||||
@@ -164,6 +150,7 @@ export default function LoginPage() {
|
||||
onChange={(e) => {
|
||||
setPhone(normalizePhoneInput(e.target.value));
|
||||
setMsg('');
|
||||
clearMessages();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -173,19 +160,28 @@ export default function LoginPage() {
|
||||
inputMode="numeric"
|
||||
className="login-field-input"
|
||||
placeholder="请输入验证码"
|
||||
maxLength={6}
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={`login-get-code${codeCooldown > 0 ? ' disabled' : ''}`}
|
||||
disabled={codeCooldown > 0}
|
||||
onClick={sendCode}
|
||||
className={`login-get-code${codeCooldown > 0 || sending ? ' disabled' : ''}`}
|
||||
disabled={codeCooldown > 0 || sending}
|
||||
onClick={onSendCode}
|
||||
>
|
||||
{codeCooldown > 0 ? `${codeCooldown}s 后重新获取` : '获取验证码'}
|
||||
{sending
|
||||
? '发送中...'
|
||||
: codeCooldown > 0
|
||||
? `${codeCooldown}s 后重新获取`
|
||||
: '获取验证码'}
|
||||
</button>
|
||||
</div>
|
||||
{msg && <p className="login-msg">{msg}</p>}
|
||||
{(displayMsg || sentHint) && (
|
||||
<p className={`login-msg${sentHint && !displayMsg ? ' login-msg--hint' : ''}`}>
|
||||
{displayMsg || sentHint}
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="login-sms-btn"
|
||||
|
||||
@@ -4,6 +4,7 @@ import TabMainHeader from '../components/TabMainHeader';
|
||||
import AppImage from '@dukang/shared-ui/AppImage';
|
||||
import { request } from '../lib/api';
|
||||
import { useUserSession } from '../contexts/UserSessionContext';
|
||||
import ContactCustomerSheet from '../components/ContactCustomerSheet';
|
||||
|
||||
const DEFAULT_AVATAR =
|
||||
'https://lh3.googleusercontent.com/aida-public/AB6AXuAz_9Pnpk_Md4sEU6PXkeybus8oLZO9e-3pOpLuSwBX0jm_Z0JCfX1w2oZxz1VZayTh0PKUPjwjSuxJVX410fjtWFGR_f55f-nWppXWUweHRnEC7WyIWEqx4AyVHt-k02OhyaSGQfvY5cHG5IuRe9EqdcHy47gBQ82_cxGgX-DrKV4oYcwLoNRynAV0_xv2p1GOhisnQVulHwZcQClUJcP8q4nTY0Y3DR1w4ioa0DYTHePE43mLDJptjZcQqS7V8LihJdn4ze6fvQA';
|
||||
@@ -35,6 +36,7 @@ export default function MinePage() {
|
||||
const [benefitBalance, setBenefitBalance] = useState(0);
|
||||
const [orderCounts, setOrderCounts] = useState<Record<string, number>>({});
|
||||
const [toast, setToast] = useState('');
|
||||
const [showCs, setShowCs] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
@@ -67,7 +69,7 @@ export default function MinePage() {
|
||||
|
||||
function handleService(item: (typeof SERVICES)[number]) {
|
||||
if ('to' in item && item.to) return;
|
||||
if (item.action === 'cs') showToast('preV1：在线客服即将开放');
|
||||
if (item.action === 'cs') setShowCs(true);
|
||||
if (item.action === 'about') showToast('杜康好客 · 传承千年酒文化');
|
||||
}
|
||||
|
||||
@@ -208,6 +210,8 @@ export default function MinePage() {
|
||||
</main>
|
||||
|
||||
{toast && <div className="mine-toast">{toast}</div>}
|
||||
|
||||
{showCs && <ContactCustomerSheet onClose={() => setShowCs(false)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,8 +5,10 @@ import AppImage from '@dukang/shared-ui/AppImage';
|
||||
import { request } from '../lib/api';
|
||||
import { buildProductDetailUrl } from '../lib/navigation';
|
||||
import { getProductMainImage } from '../lib/product-images';
|
||||
import { track } from '../lib/analytics';
|
||||
import PhoneVerifySheet from '../components/PhoneVerifySheet';
|
||||
import { useUserSession } from '../contexts/UserSessionContext';
|
||||
import { tryGetClientGpsLocation } from '../lib/client-location';
|
||||
|
||||
type Address = {
|
||||
id: string;
|
||||
@@ -76,6 +78,12 @@ export default function OrderConfirmPage() {
|
||||
});
|
||||
}, [params]);
|
||||
|
||||
useEffect(() => {
|
||||
if (productId) {
|
||||
track('order_confirm_view', { refType: 'PRODUCT', refId: productId, productId, quantity });
|
||||
}
|
||||
}, [productId, quantity]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!productId || !addressId) return;
|
||||
request<OrderPreview>('USER_H5', '/trade/orders/preview', {
|
||||
@@ -116,7 +124,12 @@ export default function OrderConfirmPage() {
|
||||
const productImage = preview?.product ? getProductMainImage(preview.product) : getProductMainImage();
|
||||
|
||||
async function doSubmit() {
|
||||
const clientLocation = await tryGetClientGpsLocation();
|
||||
let clientLocation = null;
|
||||
try {
|
||||
clientLocation = await tryGetClientGpsLocation();
|
||||
} catch {
|
||||
/* GPS 获取失败不阻塞下单 */
|
||||
}
|
||||
const order = await request<{ id: string }>('USER_H5', '/trade/orders', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
|
||||
@@ -4,6 +4,7 @@ import AppImage from '@dukang/shared-ui/AppImage';
|
||||
import { request } from '../lib/api';
|
||||
import { buildOrderAddressSelectUrl } from '../lib/navigation';
|
||||
import { STITCH_ORDER_PRODUCT_IMAGE } from '../lib/order-images';
|
||||
import ContactCustomerSheet from '../components/ContactCustomerSheet';
|
||||
|
||||
type OrderItem = {
|
||||
productName: string;
|
||||
@@ -145,7 +146,11 @@ export default function OrderDetailPage() {
|
||||
const productImage = item?.productImage || STITCH_ORDER_PRODUCT_IMAGE;
|
||||
const canEditAddress = order ? EDITABLE_STATUSES.has(order.status) : false;
|
||||
const canConfirmReceive = order?.status === 'PENDING_RECEIVE' && !isReship;
|
||||
const canRefund = order && ['PENDING_SHIP', 'PENDING_RECEIVE', 'COMPLETED', 'OUT_WAREHOUSE', 'SHIPPING'].includes(order.status);
|
||||
const canPay = order?.status === 'PENDING_PAY' && !isReship;
|
||||
const canRefund =
|
||||
order &&
|
||||
!canPay &&
|
||||
['PENDING_SHIP', 'PENDING_RECEIVE', 'COMPLETED', 'OUT_WAREHOUSE', 'SHIPPING'].includes(order.status);
|
||||
const productTotal = Number(order?.productAmount ?? order?.payAmount ?? 0);
|
||||
const freightTotal = Number(order?.freightAmount ?? 0);
|
||||
|
||||
@@ -402,6 +407,16 @@ export default function OrderDetailPage() {
|
||||
申请退款
|
||||
</button>
|
||||
)}
|
||||
{canPay && (
|
||||
<button
|
||||
type="button"
|
||||
className="order-detail-action-primary"
|
||||
onClick={() => navigate(`/pay?orderId=${order.id}`)}
|
||||
>
|
||||
<span className="material-symbols-outlined">payments</span>
|
||||
去付款 ¥{formatMoney(Number(order.payAmount))}
|
||||
</button>
|
||||
)}
|
||||
{canConfirmReceive && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -416,18 +431,11 @@ export default function OrderDetailPage() {
|
||||
</footer>
|
||||
|
||||
{showCs && (
|
||||
<div className="modal-overlay" onClick={() => setShowCs(false)}>
|
||||
<div className="modal-sheet" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-grabber" />
|
||||
<h3 className="headline-md" style={{ marginBottom: 12 }}>联系客服</h3>
|
||||
<p className="text-variant body-md" style={{ marginBottom: 16 }}>
|
||||
preV1 Mock：客服工作时间 9:00-18:00，请描述订单号 {order.orderNo}
|
||||
</p>
|
||||
<button type="button" className="btn btn-primary btn-block" onClick={() => setShowCs(false)}>
|
||||
知道了
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ContactCustomerSheet
|
||||
orderId={order.id}
|
||||
orderNo={order.orderNo}
|
||||
onClose={() => setShowCs(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -42,6 +42,7 @@ export default function OrderListPage() {
|
||||
const items = (o.items as Array<Record<string, unknown>>) || [];
|
||||
const item = items[0];
|
||||
const isReshipDemo = i === 0 && tab === 'all';
|
||||
const isPendingPay = String(o.status) === 'PENDING_PAY';
|
||||
return (
|
||||
<div key={String(o.id)} className="card">
|
||||
<div className="card-row" style={{ marginBottom: 8 }}>
|
||||
@@ -63,7 +64,16 @@ export default function OrderListPage() {
|
||||
<div className="amount-lg">¥{Number(o.payAmount)}</div>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ textAlign: 'right', marginTop: 12 }}>
|
||||
<div style={{ textAlign: 'right', marginTop: 12, display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
|
||||
{isPendingPay && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-pill"
|
||||
onClick={() => navigate(`/pay?orderId=${o.id}`)}
|
||||
>
|
||||
去付款
|
||||
</button>
|
||||
)}
|
||||
<Link
|
||||
to={`/orders/${o.id}${isReshipDemo ? '?type=reship' : ''}`}
|
||||
className="btn btn-outline btn-pill"
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import type { ProductDetailContentDto } from '@dukang/shared-types';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'react';
|
||||
import AppImage from '@dukang/shared-ui/AppImage';
|
||||
import ProductCarousel from '../components/ProductCarousel';
|
||||
import { request } from '../lib/api';
|
||||
import { track } from '../lib/analytics';
|
||||
import { getProductCarouselImages, getProductDetailImages } from '../lib/product-images';
|
||||
import type { ProductImageSource } from '../lib/product-images';
|
||||
|
||||
@@ -11,13 +13,9 @@ type Product = ProductImageSource & {
|
||||
subtitle?: string;
|
||||
price: number;
|
||||
benefitAmount?: number;
|
||||
detailContent?: ProductDetailContentDto | null;
|
||||
};
|
||||
|
||||
const FEATURES = [
|
||||
{ icon: 'water_drop', title: '泉水酿造', desc: '甘冽清甜 灵动自然' },
|
||||
{ icon: 'grain', title: '精选五谷', desc: '传统比例 匠心发酵' },
|
||||
] as const;
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
@@ -28,6 +26,12 @@ export default function ProductDetailPage() {
|
||||
if (id) request<Product>('USER_H5', `/catalog/products/${id}`).then(setProduct);
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
track('product_detail_view', { refType: 'PRODUCT', refId: id, productId: id });
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
function onScroll() {
|
||||
setHeaderSolid(window.scrollY > 100);
|
||||
@@ -41,6 +45,8 @@ export default function ProductDetailPage() {
|
||||
const benefit = Number(product.benefitAmount ?? product.price);
|
||||
const carouselImages = getProductCarouselImages(product);
|
||||
const detailImages = getProductDetailImages(product);
|
||||
const detail = product.detailContent ?? {};
|
||||
const features = detail.features ?? [];
|
||||
|
||||
return (
|
||||
<div className="product-detail-page">
|
||||
@@ -107,31 +113,31 @@ export default function ProductDetailPage() {
|
||||
<h3>商品详情</h3>
|
||||
</div>
|
||||
|
||||
{detailImages[0] && (
|
||||
<AppImage src={detailImages[0]} alt="" wrapperClassName="product-detail-banner" />
|
||||
)}
|
||||
{detailImages.map((src, index) => (
|
||||
<AppImage key={`${src}-${index}`} src={src} alt="" wrapperClassName="product-detail-banner" />
|
||||
))}
|
||||
|
||||
<div className="product-detail-copy">
|
||||
<div className="product-detail-story">
|
||||
<h4>千年杜康 · 唯有此处</h4>
|
||||
<p>
|
||||
选自白水杜康核心产区，取山泉之灵气，集五谷之精华。古法酿造工艺，历经九九八十一道工序，方得这一口醇厚绵甜。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="product-detail-features">
|
||||
{FEATURES.map((f) => (
|
||||
<div key={f.title} className="product-detail-feature">
|
||||
<span className="material-symbols-outlined">{f.icon}</span>
|
||||
<div className="product-detail-feature-title">{f.title}</div>
|
||||
<div className="product-detail-feature-desc">{f.desc}</div>
|
||||
{(detail.storyTitle || detail.storyText || features.length > 0) && (
|
||||
<div className="product-detail-copy">
|
||||
{(detail.storyTitle || detail.storyText) && (
|
||||
<div className="product-detail-story">
|
||||
{detail.storyTitle && <h4>{detail.storyTitle}</h4>}
|
||||
{detail.storyText && <p>{detail.storyText}</p>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{detailImages.length > 1 && (
|
||||
<AppImage src={detailImages[1]} alt="" wrapperClassName="product-detail-banner" />
|
||||
{features.length > 0 && (
|
||||
<div className="product-detail-features">
|
||||
{features.map((f) => (
|
||||
<div key={`${f.title}-${f.icon}`} className="product-detail-feature">
|
||||
<span className="material-symbols-outlined">{f.icon}</span>
|
||||
<div className="product-detail-feature-title">{f.title}</div>
|
||||
<div className="product-detail-feature-desc">{f.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
|
||||
import AppImage from '@dukang/shared-ui/AppImage';
|
||||
import ProductCarousel from '../components/ProductCarousel';
|
||||
import { request } from '../lib/api';
|
||||
import { track } from '../lib/analytics';
|
||||
import { STITCH_STORE_MAP, getStoreGalleryImages } from '../lib/store-images';
|
||||
|
||||
type StoreMedia = { url: string; mediaType?: string; sortOrder?: number };
|
||||
@@ -55,7 +56,10 @@ export default function StoreDetailPage() {
|
||||
const [headerSolid, setHeaderSolid] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) request<StoreDetail>('USER_H5', `/stores/${id}`).then(setStore);
|
||||
if (id) {
|
||||
request<StoreDetail>('USER_H5', `/stores/${id}`).then(setStore);
|
||||
track('store_detail_view', { refType: 'STORE', refId: id, storeId: id });
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import AppImage from '@dukang/shared-ui/AppImage';
|
||||
import { request } from '../lib/api';
|
||||
import { track } from '../lib/analytics';
|
||||
import TabMainHeader from '../components/TabMainHeader';
|
||||
import RegionPicker from '../components/RegionPicker';
|
||||
import {
|
||||
@@ -64,6 +65,10 @@ export default function StoreListPage() {
|
||||
|
||||
const cityCode = useMemo(() => resolveCityCode(region, cities), [region, cities]);
|
||||
|
||||
useEffect(() => {
|
||||
track('store_list_view', { pagePath: '/stores' });
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
request<OpenCity[]>('USER_H5', '/catalog/cities').then(setCities);
|
||||
}, []);
|
||||
|
||||
Reference in New Issue
Block a user