Skip to content

肖康 / Europa-web

Go to a project
Commit 32c7bbe2 by 肖康
Options

详情页面修改

parent 5e39c7b1
Inline Side-by-side
Showing with 103 additions and 66 deletions
components/Footer/index.tsx
......@@ -10,9 +10,9 @@ const Footer = () => {
<div className={`${footerCss.cons} boxsiz row bothSide`} >
<img src='/images/qq.png' alt='' className={`${footerCss.img} `}/>
<div className={`${footerCss.navlink} cons boxsiz row bothSide`}>
<Link href='/brandMap'>品牌馆</Link>
<Link href='/about'>关于我们</Link>
<Link href='/contact'>联系我们</Link>
<Link href='/brands.html'>品牌馆</Link>
<Link href='/about.html'>关于我们</Link>
<Link href='/contact.html'>联系我们</Link>
</div>
</div>
<div className={footerCss.footerBot}>
......
components/Header/components/NavBig/index.tsx
......@@ -15,13 +15,13 @@ const NavBig = (props: ResponseTypeCateList) => {
url: '/',
name: '首页'
}, {
url: '/brandMap',
url: '/brands.html',
name: '品牌馆'
}, {
url: '/about',
url: '/about.html',
name: '关于我们'
}, {
url: '/contact',
url: '/contact.html',
name: '联系我们'
}]
......@@ -34,7 +34,7 @@ const NavBig = (props: ResponseTypeCateList) => {
<div className={styles.mvNavBig}>
<div className={`${styles.navbox} row`}>
<div className={styles.classBoxs}>
<Link className={styles.titleLc} href='/classMap'>查看全部</Link>
<Link className={styles.titleLc} href='/list.html'>查看全部</Link>
<div className={router.pathname === '/' ? `${styles.boxOneLeft} ${styles.indexPages}` : `${styles.boxOneLeft}`} >
<div className={styles.classleftcons}>
{
......@@ -42,7 +42,7 @@ const NavBig = (props: ResponseTypeCateList) => {
return (
<div className={styles.oneClassGroup} key={item.goods_type_id}>
<div className={styles.oneClassLink}>
<Link className={styles.spann} href={`/category/${item.goods_type_id}`}>
<Link className={styles.spann} href={`/list/${item.goods_type_id}`}>
<span><i className='icon iconfont icon-sanjiaoxing'></i></span>
{item.goods_type_name}
</Link>
......@@ -52,12 +52,12 @@ const NavBig = (props: ResponseTypeCateList) => {
<div className={styles.classconsjk}>
<div className={styles.twoClassGroup}>
<Link href={`/category/${item.goods_type_id}`} key={item.goods_type_id} className={styles.twoClassLink}>{item.goods_type_name}</Link>
<Link href={`/list/${item.goods_type_id}`} key={item.goods_type_id} className={styles.twoClassLink}>{item.goods_type_name}</Link>
<div className={`${styles.threeClassGroup} row`}>
{
(item.child || []).map((itemChild, index) => {
return (
<Link key={itemChild.goods_type_id + index} className={styles.threeClassLink} href={`/category/${item.goods_type_id}_${itemChild.goods_type_id}`}>{itemChild.goods_type_name}</Link>
<Link key={itemChild.goods_type_id + index} className={styles.threeClassLink} href={`/list/${item.goods_type_id}_${itemChild.goods_type_id}`}>{itemChild.goods_type_name}</Link>
)
})
......
components/Header/components/SearchH/index.tsx
......@@ -12,11 +12,12 @@ const SearchH = () => {
const {query}=router
let keywords=''
let nums ='';
if(router.pathname==='/search'){
if(router.pathname==='/search/[keyword]'){
keywords=String(query.keyword)||''
nums = String(query.num)||''
if(query.num){
nums = String(query.num)||''
}
}
const [key,setKey]=useState<string>(keywords)
const [num,setNum]=useState<string>(nums)
......@@ -30,7 +31,12 @@ const SearchH = () => {
message("请输入至少2个字符")
return
}
router.push(`/search?keyword=${key}&num=${num}`)
if(num){
router.push(`/search/${key}.html?num=${num}`)
}else{
router.push(`/search/${key}.html`)
}
}
const changeNum=((e:React.ChangeEvent<HTMLInputElement>)=>{
......
components/Header/components/TopH/index.tsx
......@@ -13,11 +13,11 @@ const TopH=()=>{
<div className={`${styles.con} row bothSide verCenter`}>
<div ></div>
<div className='row verCenter'>
<Link href='/about'>关于我们</Link>
<Link href='/about.html'>关于我们</Link>
<span className={styles.line}></span>
<Link href='/contact'>联系我们</Link>
<Link href='/contact.html'>联系我们</Link>
<span className={styles.line}></span>
<Link href='/notice'>公告</Link>
<Link href='/notice.html'>公告</Link>
<span className={styles.rqq}><QqIcon /></span>
</div>
</div>
......
components/ListOneItem/index.tsx
......@@ -15,7 +15,7 @@ const ListOneItem = (props:dataListItemType) => {
<div className={styles.listGroupOneItem}>
<div className={`${styles.cons} row`}>
<div className={styles.item}>
<Link href={`/detail/${itemInfo.goods_id}`}><img
<Link href={`/item/${itemInfo.goods_id}.html`}><img
src={itemInfo.goods_images||'http://static.ichunt.com//dist/res/home/images/goods_default.png'}
className={styles.goodsImg} alt=""
onError={(e) => {
......@@ -25,7 +25,7 @@ const ListOneItem = (props:dataListItemType) => {
</Link>
</div>
<div className={`${styles.item} ${styles.w198}`}>
<Link className={styles.goodsName} href={`/detail/${itemInfo.goods_id}`}>{itemInfo.goods_name}</Link>
<Link className={styles.goodsName} replace href={`/item/${itemInfo.goods_id}.html`}>{itemInfo.goods_name}</Link>
<p>品牌：{itemInfo.brand_name}</p>
<p>参数：{itemInfo.class_name}</p>
</div>
......
hooks/useSeoTitle.tsx
......@@ -6,30 +6,20 @@ export const useSeoTitle = () => {
let titlestr='404'
const titleKeywords:any = {
'/': { title: '首页' },
'/search': { title: '搜索结果' },
'/detail': { title: '商品详情' },
'/brandMap': { title: '品牌馆' },
'/Brand': { title: '品牌结果' },
'/classMap': { title: '分类地图' },
'/category': { title: '分类结果' },
'/about': { title: '关于我们' },
'/contact': { title: '联系我们' },
'/notice': { title: '公告' },
'/search/[keyword]': { title: '搜索结果' },
'/item/[sku_id]': { title: '商品详情' },
'/brands.html': { title: '品牌馆' },
'/brand/[brand_id]': { title: '品牌结果' },
'/list.html': { title: '分类地图' },
'/list/[class_id]': { title: '分类结果' },
'/about.html': { title: '关于我们' },
'/contact.html': { title: '联系我们' },
'/notice.html': { title: '公告' },
}
if (Object.keys(titleKeywords).indexOf(router.pathname) !== -1) {
titlestr=titleKeywords[router.pathname]['title']
}
if(router.pathname.indexOf('/detail/')!==-1){
titlestr='商品详情'
}
if(router.pathname.indexOf('/brand/')!==-1){
titlestr='品牌结果'
}
if(router.pathname.indexOf('/category/')!==-1){
titlestr='分类结果'
}
return (
<Head>
<title>{`麒麟电子商城-${titlestr}`}</title>
......
next.config.mjs
......@@ -6,11 +6,26 @@ const nextConfig = {
reactStrictMode: false, // 关闭 React 严格模式
// 配置代理
async rewrites() {
return [{
return [
{
source: '/api/:path*',
destination: 'http://erpweb.liexindev.net/api/:path*',
}, ];
},
{
source: '/brand/:brand_id.html',
destination: '/brand/:brand_id',
},
{
source: '/item/:sku_id.html',
destination: '/item/:sku_id',
},
{
source: '/search/:keyword.html',
destination: '/search/:keyword',
},
];
},
async headers() {
return [
{
......
pages/brandMap/index.tsx → pages/brands.html/index.tsx
......@@ -32,7 +32,7 @@ const BrandMap = (props: { cateList: ResponseTypeCateList, brandMapData: brandMa
{
more_brand_list.map((item, index) => {
return (
<Link href={`/brand/${item.goods_brand_id}`} className={styles.item} key={index + String(item.goods_brand_id)}>
<Link href={`/brand/${item.goods_brand_id}.html`} className={styles.item} key={index + String(item.goods_brand_id)}>
<img src={item.brand_logo} alt={item.brand_name} />
</Link>
)
......@@ -51,7 +51,7 @@ const BrandMap = (props: { cateList: ResponseTypeCateList, brandMapData: brandMa
{
popular_brand_list.map((item, index) => {
return (
<Link href={`/brand/${item.goods_brand_id}`} className={styles.item} key={index + String(item.goods_brand_id)}>
<Link href={`/brand/${item.goods_brand_id}.html`} className={styles.item} key={index + String(item.goods_brand_id)}>
<img src={item.brand_logo} alt={item.brand_name} />
</Link>
)
......
pages/index/components/HomeFloor1.tsx
......@@ -13,7 +13,7 @@ const HomeFloor1 = (props: ResponseTypeHome) => {
{
on_sale_list.map(item => {
return (
<Link href={`/detail/${item.sku_id}`} key={item.sku_id} className={`${styles.item} boxsiz row bothSide`}>
<Link href={`/item/${item.sku_id}.html`} key={item.sku_id} className={`${styles.item} boxsiz row bothSide`}>
<img src={item.goods_images || 'http://static.ichunt.com//dist/res/home/images/goods_default.png'} alt="" />
<div className={`${styles.rt} boxsiz `}>
<div className={styles.gos}>{item.sku_name}</div>
......
pages/index/components/HomeFloor2.tsx
......@@ -14,7 +14,7 @@ const HomeFloor2 = (props: ResponseTypeHome) => {
{
recommend_goods_list.map(item => {
return (
<Link href={`/detail/${item.sku_id}`} className={`${styles.item} boxsiz`} key={item.sku_id}>
<Link href={`/item/${item.sku_id}.html`} className={`${styles.item} boxsiz`} key={item.sku_id}>
<img src={item.goods_images || 'http://static.ichunt.com//dist/res/home/images/goods_default.png'} alt="" />
<div className={styles.gos}>{item.sku_name}</div>
<div className='row bothSide'>
......
pages/index/components/HomeFloor3.tsx
......@@ -10,13 +10,13 @@ const HomeFloor3 = (props: ResponseTypeHome) => {
<div className={`${styles.floor3} boxsiz w1226`}>
<div className={`${styles.title} row bothSide verCenter`}>
<span>推荐品牌</span>
<Link href='/brandMap' className={styles.more}>更多<i className="icon iconfont icon-xiangyou1"></i></Link>
<Link href='/brands.html' className={styles.more}>更多<i className="icon iconfont icon-xiangyou1"></i></Link>
</div>
<div className={`${styles.itembox} row bothSide boxsiz`}>
{
recommend_brand_list.map(item => {
return (
<Link href={`/brand/${item.goods_brand_id}`} className={styles.item} key={item.goods_brand_id}>
<Link href={`/brand/${item.goods_brand_id}.html`} className={styles.item} key={item.goods_brand_id}>
<img src={item.brand_logo} alt="" />
</Link>
)
......
pages/detail/[sku_id].tsx → pages/item/[sku_id].tsx
......@@ -12,16 +12,16 @@ import Header from "@/components/Header";
import { GetServerSideProps } from 'next';
import { getDetailData } from "@/server/getDetailData";
import type { ResponseTypeCateList } from '@/components/Header/components/NavBig/types'
import Link from 'next/link';
export const getServerSideProps: GetServerSideProps = async (context) => {
const { query } = context;
return getDetailData(query.sku_id)
return getDetailData(String(query.sku_id))
}
const Page = (props: { cateList: ResponseTypeCateList, detailInfoData: DetailResponseType }) => {
const detailData = props.detailInfoData
const sku_info:skuInfoResponseType=detailData.data?.sku_info
return (
......@@ -34,7 +34,23 @@ const Page = (props: { cateList: ResponseTypeCateList, detailInfoData: DetailRes
{
sku_info ?
<>
<BreadNav > <strong>{detailData.data?.sku_info?.sku_name}</strong></BreadNav>
<BreadNav >
{
sku_info.cate_1 &&
<>
<Link href={`/list/${sku_info.class_id1}`}>{sku_info.cate_1}</Link>
<i className="icon iconfont icon-xiangyou1"></i>
</>
}
{
sku_info.cate_2 &&
<>
<Link href={`/list/${sku_info.class_id1}_${sku_info.class_id2}`}>{sku_info.cate_2}</Link>
<i className="icon iconfont icon-xiangyou1"></i>
</>
}
<strong>{detailData.data?.sku_info?.sku_name}</strong>
</BreadNav>
<DetailHead {...sku_info} />
<DetailSection {...detailData} />
</>
......
pages/detail/components/DetailHead.tsx → pages/item/components/DetailHead.tsx
......@@ -9,7 +9,6 @@ const DetailHead = (props: skuInfoResponseType) => {
const sku_info =props!
return (
<>
<div className={`${styles.detailHeaders} w1226 row bothSide boxsiz`}>
......@@ -21,7 +20,11 @@ const DetailHead = (props: skuInfoResponseType) => {
<p> 品牌： {sku_info.brand_name}</p>
<p>商品类别：低压差线性稳压(LDO)</p>
<p>封装规格：{sku_info.encap}</p>
<p>描述：{sku_info.remark}</p>
{
sku_info.remark&&
<p>描述：{sku_info.remark}</p>
}
</div>
<div className={`${styles.handle} row bothSide verCenter`}>
<QqIcon />
......@@ -46,7 +49,7 @@ const DetailHead = (props: skuInfoResponseType) => {
(sku_info.ladder_price||[]).map((item,index) => {
return (
<p className='row' key={index}>
<span className={styles.items}> {item.purchase}+</span>
<span className={styles.items}> {item.purchases}+</span>
<span className={`${styles.items} row`}><span>¥ {item.price_cn||0}</span><span>$ {item.price_us||0}</span></span>
</p>
)
......
pages/detail/components/DetailSection.tsx → pages/item/components/DetailSection.tsx
......@@ -45,7 +45,7 @@ const DetailSection = (props: DetailResponseType) => {
{
other_sku_list.map(item => {
return (
<Link href={`/detail/${item.sku_id}`} className={`${styles.item} boxsiz`} key={item.sku_id}>
<Link href={`/item/${item.sku_id}.html`} className={`${styles.item} boxsiz`} key={item.sku_id}>
<img src={item.goods_images || 'http://static.ichunt.com//dist/res/home/images/goods_default.png'} alt="" />
<div className={styles.gos}>{item.sku_name}</div>
<div className='row bothSide'>
......
pages/classMap/index.tsx → pages/list.html/index.tsx
......@@ -28,12 +28,12 @@ const Page = (props: { cateList: ResponseTypeCateList, classMapData: classMapRes
list.map((item, index) => {
return (
<div className={`${styles.itembox} boxsiz`} key={String(item.goods_type_id) + index}>
<Link href={`/category/${item.goods_type_id}`} className={styles.itemtitle} >{item.goods_type_name}</Link>
<Link href={`/list/${item.goods_type_id}`} className={styles.itemtitle} >{item.goods_type_name}</Link>
<div className={`${styles.itemcons} flex`} >
{
(item.child || []).map((itemChild, indexChild) => {
return (
<Link key={String(itemChild.goods_type_id) + indexChild} href={`/category/${item.goods_type_id}_${itemChild.goods_type_id}`} className={styles.itemlink} >{itemChild.goods_type_name}</Link>
<Link key={String(itemChild.goods_type_id) + indexChild} href={`/list/${item.goods_type_id}_${itemChild.goods_type_id}`} className={styles.itemlink} >{itemChild.goods_type_name}</Link>
)
})
}
......
pages/search/index.tsx → pages/search/[keyword].tsx
......@@ -34,7 +34,6 @@ const Page = (props: { cateList: ResponseTypeCateList }) => {
const num = router.query.num || '';
const { request: getListRequest } = useRequest<ResponseTypeSearch>({ manual: true })
const initSupplierList = useRef<supplierDataType[]>([])//初始化数据
......@@ -44,7 +43,7 @@ const Page = (props: { cateList: ResponseTypeCateList }) => {
initSupplierList.current = []
requestCount.current = 0
supplierIdS.forEach(supplier_id => {
getListRequest({ url: '/api/search/goodsSearch', method: 'post', data: { keyword: keyword, num: num, supplier_id: supplier_id } }).then((res) => {
getListRequest({ url: '/api/search/goodsSearch', method: 'post', data: { keyword: keyword, num: num, supplier_id: supplier_id,page:1,page_size:10 } }).then((res) => {
requestCount.current = requestCount.current + 1
if (res?.code === 0) {
initSupplierList.current = [...initSupplierList.current, ...(res.data || [])]
......@@ -108,14 +107,16 @@ const Page = (props: { cateList: ResponseTypeCateList }) => {
<Header {...props.cateList} />
<BreadNav><strong>&quot;{keyword}&quot;的型号搜索结果</strong></BreadNav>
<div className={`${styles.mvSearchPage} w1226`} >
<div className={styles.shiftBox}>
{
initSupplierList.current.length>0&&
<div className={styles.shiftBox}>
<div className={`${styles.shiftGroup} row`} >
<span>品牌：</span>
<div className={brandListAll ? `${styles.itemBox} row` :`${styles.itemBox} row ${styles.overflowheight}` } ref={brandListRef}>
{
brandsR.map(item => {
return (
<div key={item.id} onClick={() => { updateBrandAndClass(1, item.id) }} className={item.checked ? `${styles.item} act` : `${styles.item}`} >{item.value}</div>
<div key={item.id+Math.random()} onClick={() => { updateBrandAndClass(1, item.id) }} className={item.checked ? `${styles.item} act` : `${styles.item}`} >{item.value}</div>
)
})
}
......@@ -134,7 +135,7 @@ const Page = (props: { cateList: ResponseTypeCateList }) => {
{
classsR.map(item => {
return (
<div onClick={() => { updateBrandAndClass(2, item.id) }} key={item.id} className={item.checked ? `${styles.item} act` : `${styles.item}`} >{item.value}</div>
<div onClick={() => { updateBrandAndClass(2, item.id) }} key={item.id+Math.random()} className={item.checked ? `${styles.item} act` : `${styles.item}`} >{item.value}</div>
)
})
}
......@@ -147,6 +148,8 @@ const Page = (props: { cateList: ResponseTypeCateList }) => {
</div>
</div>
</div>
}
<div className={styles.databox}>
<ListSort sortObj={sortObj} setSortObj={setSortObj} />
{
......@@ -160,7 +163,7 @@ const Page = (props: { cateList: ResponseTypeCateList }) => {
{
item.data.map(child => {
return (
<ListOneItem key={child.goods_id} {...child} />
<ListOneItem key={child.goods_id+Math.random()} {...child} />
)
})
}
......
server/getDetailData.tsx
import {API_URL} from '../configReact'
export async function getDetailData(sku_id?:string | string[] | undefined) {
export async function getDetailData(sku_id?:string ) {
// 数据获取逻辑
// 在这里进行异步数据获取
const res = await fetch(API_URL+'/api/home/getCateList');
const res2 = await fetch(API_URL+'/api/goodsSku/getGoodsSkuDetail?sku_id='+sku_id);
const res2 = await fetch(API_URL+'/api/goodsSku/getGoodsSkuDetail?sku_id='+sku_id?.split(".")[0]);
const [cateList, detailInfoData] = await Promise.all([
res.json(),
res2.json()
......
types/detailTypes.tsx
......@@ -19,6 +19,10 @@ export type skuInfoResponseType = {
encap:string,
batch_sn:string,
remark:string,
cate_1:string,
cate_2:string,
class_id1?:string,
class_id2?:string,
goods_type_name:string,
moq:number,
multiple:number,
......@@ -30,7 +34,7 @@ export type skuInfoResponseType = {
ladder_price:Array<{
price_cn:number,
price_us:number,
purchase:number
purchases:number
}>
}|undefined|null
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment