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

apps/h5-user/src/pages/HomePage.tsx

@@ -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>