diff --git a/app/good/[id]/page.jsx b/app/good/[id]/page.jsx index 7945f6a..e9fd595 100644 --- a/app/good/[id]/page.jsx +++ b/app/good/[id]/page.jsx @@ -132,7 +132,7 @@ export default function ProductDetail() { {/* 商品信息 */} -
+
¥{product.price} @@ -186,6 +186,60 @@ export default function ProductDetail() {
+ {/* 店铺模块 */} +
+ + 店铺头像 +
+ + 宠物用品专卖店 + +
+ 评分: +
+ {[...Array(5)].map((_, index) => ( + + + + ))} +
+
+

+ 官方正品旗舰店{" >"} +

+
+ + + +
+
+ 宝贝质量: + 4.9 +
+
+ 物流速度: + 5.0 +
+
+ 服务保障: + 4.8 +
+
+
+ {/* 推荐商品模块 */}

猜你喜欢

diff --git a/app/layout.js b/app/layout.js index 888857b..c8d9ae5 100644 --- a/app/layout.js +++ b/app/layout.js @@ -7,6 +7,13 @@ export const metadata = { keywords: "宠物用品,宠物商城,宠物食品,宠物玩具", }; +export const viewport = { + width: "device-width", + initialScale: 1, + maximumScale: 1, + userScalable: 0, +}; + export default function RootLayout({ children }) { return ( diff --git a/app/shop/page.jsx b/app/shop/page.jsx new file mode 100644 index 0000000..000e0e7 --- /dev/null +++ b/app/shop/page.jsx @@ -0,0 +1,156 @@ +"use client"; + +import React, { useEffect, useState } from "react"; +import Link from "next/link"; +import Image from "next/image"; +import { useRouter } from "next/navigation"; + +export default function ShopPage() { + const [products, setProducts] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [searchTerm, setSearchTerm] = useState(""); + const [currentPage, setCurrentPage] = useState(1); + const [productsPerPage] = useState(10); // 每页显示的商品数量 + const [activeTab, setActiveTab] = useState("all"); // 新增的状态 + const router = useRouter(); + + useEffect(() => { + const fetchProducts = async () => { + try { + const res = await fetch("/api/products"); + if (!res.ok) { + throw new Error("获取商品列表失败"); + } + const data = await res.json(); + setProducts(data); + } catch (err) { + setError(err.message); + } finally { + setLoading(false); + } + }; + + fetchProducts(); + }, []); + + const handleSearch = (e) => { + setSearchTerm(e.target.value); + }; + + const filteredProducts = products.filter((product) => + product.title.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + const indexOfLastProduct = currentPage * productsPerPage; + const indexOfFirstProduct = indexOfLastProduct - productsPerPage; + const currentProducts = filteredProducts.slice( + indexOfFirstProduct, + indexOfLastProduct + ); + + const paginate = (pageNumber) => setCurrentPage(pageNumber); + + if (loading) return
加载中...
; + if (error) return
错误: {error}
; + + return ( +
+ + + {/* 店铺信息 */} + + 店铺头像 +
+ + 宠物用品专卖店 + +

+ 官方正品旗舰店{" >"} +

+
+ + + {/* Tab 切换栏 */} +
+ + +
+ +
+ {currentProducts.map((product) => ( +
+ +
+ {product.title} +
+
+

+ {product.title} +

+

¥{product.price}

+
+ +
+ ))} +
+
+ {[ + ...Array(Math.ceil(filteredProducts.length / productsPerPage)).keys(), + ].map((number) => ( + + ))} +
+
+ ); +} diff --git a/app/shop/profile/page.jsx b/app/shop/profile/page.jsx new file mode 100644 index 0000000..ead6acf --- /dev/null +++ b/app/shop/profile/page.jsx @@ -0,0 +1,90 @@ +"use client"; + +import React, { useState } from "react"; +import Image from "next/image"; + +export default function ShopProfile() { + const [showLicenseImage, setShowLicenseImage] = useState(false); + return ( +
+
+ {/* 店铺头像和名称 */} +
+ 店铺头像 +
+

宠物用品专卖店

+
+
+ + {/* 店铺评分 */} +
+
+

店铺评分

+
+ {[...Array(5)].map((_, index) => ( + + + + ))} +
+
+
+
+ 宝贝质量 + 4.9 +
+
+ 物流速度 + 5.0 +
+
+ 服务保障 + 4.8 +
+
+
+ + {/* 保证金金额 */} +
+

保证金

+

¥10,000

+
+ + {/* 店铺资质 */} +
+

店铺资质

+
    +
  • setShowLicenseImage(!showLicenseImage)} + className="cursor-pointer text-blue-500" + > + 营业执照 +
    • +
+ {showLicenseImage && ( +
+ 营业执照 +
+ )} +
+
+
+ ); +} diff --git a/app/tab/layout.jsx b/app/tab/layout.jsx index 6d45bda..34a5ae7 100644 --- a/app/tab/layout.jsx +++ b/app/tab/layout.jsx @@ -20,7 +20,10 @@ export default function TabLayout({ children }) {
{children}
-