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

发布商品，商品图片使用oss服务器地址

Browse Source
This commit is contained in:
jacy-dukang
2026-07-06 08:53:03 +08:00
parent a0466f023e
commit 5ba69eb935
60 changed files with 2776 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/h5-user/src/lib/product-images.ts
+36 -33
View File
@@ -1,44 +1,47 @@
/** Stitch 用户端-商品详情页 原型图（杜康·白水古酿） */
const STITCH_CAROUSEL = [
'https://lh3.googleusercontent.com/aida-public/AB6AXuDiJm2VWrwCv8wnC-dBgSfvlf66izs6faELgWXlyIAUpYWOKrLwfeyB0c0XT0vmDVJnfIkzbLNm_4NYASwH_ce7BotJDLCJcd3SfnxKIe7eso-c4mzzR-4LTv4y3ELhpXHfxVyu-5LVUEwuofvUuzdJELV6CK4MIcLW_9rMaOuXSADfz0mpP-MspQvhKhxJ0wpdAiBxBq8rqHNSKjx8dU7lcVc_smZGunmtkbhmnjAn4JU8nCDnvuDU5HECng82FbFM6rzdkFHoYR0',
'https://lh3.googleusercontent.com/aida-public/AB6AXuDzBBRn0yOqhRJ4CbTEOx1aF4fJVIhsbIZgFR9RgdB5E0xcs_RdR1khLyR0OzysGzkW_tnrZTb0avVEZ91Nd81KRItrlTjrEFvrYj0Qag45iRo5wioY8E2gK5NGhILvDpWxakuSPIGGp00nLY_5HuuLwr-0_8ZabaUFAR4C9loXIX_lgCAgRMt7An_H0AitIOBvwOfNVTMkz-P7dXQFzSUvYpFvcmvzAOIWsbipnTrgNU5H8Os37-soM-eWUCfNtJUaD_uqQ3mwJI8',
'https://lh3.googleusercontent.com/aida-public/AB6AXuDSSmH1ygwminKXiiIqOymnukbKJfnhfHnmCJTbNN2BEN2yF3vPtoMYOBAsDHxuldT9xg_ZBZhjh6QJjabvhu_HFB3WcNU53q_AjsD0mVWXInongiXqjOh8R-B2QW9Jfs786j3TSi2gVE57Ad1WskJji-xytI3aFEuk873xGXgdkn6EgzoAMOsKRaWF27DE3GBa48qAARYR92aEyMU_hcte6L2lkaF9brXshSmujiA_3ACK21TLsT2DCJ1Djacvh25J0LZ8v7BYVkk',
] as const;
/** 商品无图时的占位图 */
export const PRODUCT_IMAGE_FALLBACK = '/images/1.png';
const STITCH_DETAIL = [
'https://lh3.googleusercontent.com/aida-public/AB6AXuA2-IVt-apnEkj9QQ4rkjN5lb0oymgiJX1XfzAH8pRzSFzMVjYDtlMWE8GwpS7I6sth7CXJiKwNm9c-hpsYKqQ6pyb48yUO6NG8vky4E6qCjwgaCsCnlvoOVLroG4bmmL16-xl4-o28ZMvtzMoCKIiUK-_dQF7lx66nwnxFOP7PcUddDK-UItoO-Gp5iqxf6kp_-t_tjoPpo_ba25DBPG1QThlI8IJYqb9bNng5mIQzdnNul24rBy_JmgS5nsaYK0Wvo7907WT3ch4',
'https://lh3.googleusercontent.com/aida-public/AB6AXuBe0yoN6VDKu2SVqwOy9RedE-6Rh56-a_5ygo5raDOU3Y65m1fz9hNmqbrIpvTW8RsqAwPd3zfHnw96Bb4Ct7jtmq-pil1MEvPBL4G3C8Sym_LVuEzK---hgdim1wVx-qP1v1EPex2fXpVQEY27rEVINVaXk2L1F5elWKQhMHWVXjU8B2jvtyNzmlXBpynsocnCgcwM4RhaqYdVf1JZxcfScmJ34dO3QAUIli-RPzEYynLtnW2x4lEbRrpAdBnK2fuSggLnJU1nfSw',
] as const;
export type ProductImageSource = {
mainImageUrl?: string | null;
carouselUrls?: string[] | null;
detailImageUrls?: string[] | null;
};
/** 本地商品图占位 */
export const PRODUCT_IMAGE_INDEX = [
'/images/1.png',
'/images/2.png',
'/images/3.png',
] as const;
export function getProductImages(productIndex = 0): string[] {
if (productIndex === 0) {
return [...STITCH_CAROUSEL.slice(0, 2)];
function uniqueUrls(urls: Array<string | null | undefined>) {
const seen = new Set<string>();
const result: string[] = [];
for (const url of urls) {
if (!url || seen.has(url)) continue;
seen.add(url);
result.push(url);
}
const img = PRODUCT_IMAGE_INDEX[productIndex % PRODUCT_IMAGE_INDEX.length] ?? '/images/1.png';
return [img];
return result;
}
export function getProductMainImage(productIndex = 0): string {
if (productIndex === 0) return STITCH_CAROUSEL[0];
return PRODUCT_IMAGE_INDEX[productIndex % PRODUCT_IMAGE_INDEX.length] ?? '/images/1.png';
/** 首页/列表轮播图：优先 CAROUSEL，否则封面 */
export function getProductImages(source?: ProductImageSource | null): string[] {
const carousel = uniqueUrls(source?.carouselUrls ?? []);
if (carousel.length > 0) return carousel;
const main = source?.mainImageUrl;
if (main) return [main];
return [PRODUCT_IMAGE_FALLBACK];
}
/** 详情页轮播（首商品用 Stitch 三图，其余单图） */
export function getProductCarouselImages(productIndex = 0): string[] {
if (productIndex === 0) return [...STITCH_CAROUSEL];
const img = getProductMainImage(productIndex);
return [img];
/** 单张主图：封面优先 */
export function getProductMainImage(source?: ProductImageSource | null): string {
return source?.mainImageUrl ?? source?.carouselUrls?.[0] ?? PRODUCT_IMAGE_FALLBACK;
}
/** 详情页顶部轮播 */
export function getProductCarouselImages(source?: ProductImageSource | null): string[] {
const carousel = uniqueUrls(source?.carouselUrls ?? []);
if (carousel.length > 0) return carousel;
return getProductImages(source);
}
/** 详情页图文长图 */
export function getProductDetailImages(productIndex = 0): string[] {
if (productIndex === 0) return [...STITCH_DETAIL];
return [];
export function getProductDetailImages(source?: ProductImageSource | null): string[] {
return uniqueUrls(source?.detailImageUrls ?? []);
}
apps/h5-user/src/pages/HomePage.tsx
+38 -5
View File
@@ -13,27 +13,50 @@ type Product = {
subtitle: string;
price: number;
benefitDisplay: number;
mainImageUrl: string;
mainImageUrl?: string | null;
carouselUrls?: string[] | null;
detailImageUrls?: string[] | null;
aromaType: string;
status: string;
};
type City = {
id: string;
code: string;
name: string;
status: string;
};
const AROMA_TABS = [
{ key: 'QINGXIANG', label: '清香型', open: true },
{ key: 'JIANGXIANG', label: '酱香型', open: false },
{ key: 'NONGXIANG', label: '浓香型', open: false },
];
const CITY_STORAGE_KEY = 'dukang_selected_city';
export default function HomePage() {
const [tab, setTab] = useState('QINGXIANG');
const [products, setProducts] = useState<Product[]>([]);
const [cities, setCities] = useState<City[]>([]);
const [cityCode, setCityCode] = useState(() => localStorage.getItem(CITY_STORAGE_KEY) || '410100');
const [toast, setToast] = useState('');
useEffect(() => {
request<Product[]>('USER_H5', '/catalog/products').then(setProducts);
request<City[]>('USER_H5', '/catalog/cities').then((list) => {
setCities(list);
if (!list.some((c) => c.code === cityCode) && list[0]) {
setCityCode(list[0].code);
}
});
}, []);
useEffect(() => {
if (!cityCode) return;
localStorage.setItem(CITY_STORAGE_KEY, cityCode);
request<Product[]>('USER_H5', `/catalog/products?cityCode=${encodeURIComponent(cityCode)}`).then(setProducts);
}, [cityCode]);
function showToast(message: string) {
setToast(message);
window.setTimeout(() => setToast(''), 2200);
@@ -47,6 +70,7 @@ export default function HomePage() {
setTab(key);
}
const selectedCity = cities.find((c) => c.code === cityCode);
const filtered = products.filter((p) => p.aromaType === tab);
const onSale = tab === 'QINGXIANG';
@@ -57,7 +81,16 @@ export default function HomePage() {
extra={(
<div className="tab-main-city">
<span className="material-symbols-outlined">location_on</span>
<span>郑州市</span>
<select
value={cityCode}
onChange={(e) => setCityCode(e.target.value)}
style={{ border: 'none', background: 'transparent', font: 'inherit', color: 'inherit' }}
>
{cities.map((c) => (
<option key={c.code} value={c.code}>{c.name}</option>
))}
{!cities.length && <option value={cityCode}>{selectedCity?.name ?? '郑州市'}</option>}
</select>
</div>
)}
/>
@@ -78,10 +111,10 @@ export default function HomePage() {
<section className="home-product-list">
{!onSale && <div className="home-empty">该香型暂未上线，敬请期待</div>}
{onSale &&
filtered.map((p, index) => (
filtered.map((p) => (
<article key={p.id} className="home-product-card">
<Link to={`/product/${p.id}`} className="home-product-link">
<ProductCarousel images={getProductImages(index)} alt={p.name} />
<ProductCarousel images={getProductImages(p)} alt={p.name} />
<div className="home-product-body">
<div className="home-product-row">
<h3 className="home-product-name">{p.name}</h3>
apps/h5-user/src/pages/OrderConfirmPage.tsx
+3 -5
View File
@@ -4,8 +4,6 @@ import SubPageHeader from '../components/SubPageHeader';
import AppImage from '@dukang/shared-ui/AppImage';
import { request } from '../lib/api';
import { buildProductDetailUrl } from '../lib/navigation';
import { STITCH_ORDER_PRODUCT_IMAGE } from '../lib/order-images';
import { tryGetClientGpsLocation } from '../lib/client-location';
import { getProductMainImage } from '../lib/product-images';
import PhoneVerifySheet from '../components/PhoneVerifySheet';
import { useUserSession } from '../contexts/UserSessionContext';
@@ -27,6 +25,8 @@ type PreviewProduct = {
spec: string;
subtitle?: string;
price: number;
mainImageUrl?: string | null;
carouselUrls?: string[] | null;
};
type OrderPreview = {
@@ -113,9 +113,7 @@ export default function OrderConfirmPage() {
const isCross = forceCross || preview?.deliveryType === 'CROSS_CITY';
const minQty = isCross ? (preview?.city?.crossMinQty ?? 6) : (preview?.city?.localMinQty ?? 2);
const productIndex = productId ? Math.max(0, Number(productId) - 1) : 0;
const productImage =
productIndex === 0 ? STITCH_ORDER_PRODUCT_IMAGE : getProductMainImage(productIndex);
const productImage = preview?.product ? getProductMainImage(preview.product) : getProductMainImage();
async function doSubmit() {
const clientLocation = await tryGetClientGpsLocation();
apps/h5-user/src/pages/OrderDetailPage.tsx
+22
View File
@@ -145,6 +145,7 @@ 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 productTotal = Number(order?.productAmount ?? order?.payAmount ?? 0);
const freightTotal = Number(order?.freightAmount ?? 0);
@@ -174,6 +175,22 @@ export default function OrderDetailPage() {
}
}
async function requestRefund() {
if (!id || !canRefund) return;
setConfirming(true);
try {
await request('USER_H5', `/trade/orders/${id}/refund-requests`, {
method: 'POST',
body: JSON.stringify({ remark: '用户申请退款' }),
});
await loadOrder();
} catch (e) {
window.alert(e instanceof Error ? e.message : '申请退款失败');
} finally {
setConfirming(false);
}
}
if (!order) return <div className="empty">加载中...</div>;
return (
@@ -380,6 +397,11 @@ export default function OrderDetailPage() {
<span className="material-symbols-outlined">headset_mic</span>
联系客服
</button>
{canRefund && order?.status !== 'REFUNDING' && order?.status !== 'REFUNDED' && (
<button type="button" className="order-detail-action-outline" disabled={confirming} onClick={requestRefund}>
申请退款
</button>
)}
{canConfirmReceive && (
<button
type="button"
apps/h5-user/src/pages/ProductDetailPage.tsx
+4 -4
View File
@@ -4,8 +4,9 @@ import AppImage from '@dukang/shared-ui/AppImage';
import ProductCarousel from '../components/ProductCarousel';
import { request } from '../lib/api';
import { getProductCarouselImages, getProductDetailImages } from '../lib/product-images';
import type { ProductImageSource } from '../lib/product-images';
type Product = {
type Product = ProductImageSource & {
name: string;
subtitle?: string;
price: number;
@@ -22,7 +23,6 @@ export default function ProductDetailPage() {
const navigate = useNavigate();
const [product, setProduct] = useState<Product | null>(null);
const [headerSolid, setHeaderSolid] = useState(false);
const imageIndex = id ? Math.max(0, Number(id) - 1) : 0;
useEffect(() => {
if (id) request<Product>('USER_H5', `/catalog/products/${id}`).then(setProduct);
@@ -39,8 +39,8 @@ export default function ProductDetailPage() {
if (!product) return <div className="empty">加载中...</div>;
const benefit = Number(product.benefitAmount ?? product.price);
const carouselImages = getProductCarouselImages(imageIndex);
const detailImages = getProductDetailImages(imageIndex);
const carouselImages = getProductCarouselImages(product);
const detailImages = getProductDetailImages(product);
return (
<div className="product-detail-page">
apps/h5-user/src/pages/RedeemCodePage.tsx
+20 -2
View File
@@ -1,3 +1,4 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import PageHeader from '@dukang/shared-ui/PageHeader';
@@ -5,6 +6,19 @@ export default function RedeemCodePage() {
const navigate = useNavigate();
const token = sessionStorage.getItem('redeemToken') || '';
const amount = sessionStorage.getItem('redeemAmount') || '0';
const [secondsLeft, setSecondsLeft] = useState(300);
useEffect(() => {
const expireAt = sessionStorage.getItem('redeemExpireAt');
if (!expireAt) return;
const tick = () => {
const left = Math.max(0, Math.floor((new Date(expireAt).getTime() - Date.now()) / 1000));
setSecondsLeft(left);
};
tick();
const id = window.setInterval(tick, 1000);
return () => window.clearInterval(id);
}, []);
return (
<div className="page-no-tab" style={{ textAlign: 'center' }}>
@@ -14,10 +28,14 @@ export default function RedeemCodePage() {
<div className="label-md text-muted">核销金额</div>
<div className="amount-xl" style={{ margin: '8px 0 24px' }}>¥{amount}</div>
<div className="code-box">{token}</div>
<p className="label-md text-muted" style={{ marginTop: 16 }}>5 分钟内有效</p>
<p className="label-md text-muted" style={{ marginTop: 16 }}>
{secondsLeft > 0 ? `${secondsLeft} 秒后过期` : '已过期，请重新生成'}
</p>
</div>
<div className="page-actions">
<button type="button" className="btn btn-outline btn-block" onClick={() => navigate('/redeem/success')}>模拟核销完成</button>
<button type="button" className="btn btn-outline btn-block" onClick={() => navigate('/benefit')}>
返回权益页
</button>
</div>
</div>
);