Skip to content

肖康 / Europa-web

Go to a project
Commit 6f30936f by 肖康
Options

品牌分类修改

parent 92421120
Inline Side-by-side
Showing with 124 additions and 180 deletions
src/App.tsx
...@@ -101,7 +101,7 @@ const App = () => { ...@@ -101,7 +101,7 @@ const App = () => {
}); });
useEffect(() => { useEffect(() => {
setCommonConfigData({ setCommonConfigData({
qqurl: '/' qqurl: 'https://url.cn/uia2no5Z?_type=wpa&qidian=true'
}) })
}, []); }, []);
......
src/components/ListOneItem/index.tsx
...@@ -35,7 +35,7 @@ const ListOneItem = (props:dataListItemType) => { ...@@ -35,7 +35,7 @@ const ListOneItem = (props:dataListItemType) => {
{ {
itemInfo.ladder_price.map((item,index)=>{ itemInfo.ladder_price.map((item,index)=>{
return ( return (
<div key={index+item.price_cn} className='jtgroup row'><span>{item.purchases}+</span><strong>¥{item.price_cn}</strong><strong>¥{item.price_us}</strong></div> <div key={index+item.price_cn} className='jtgroup row'><span>{item.purchases}+</span><strong>¥{item.price_cn||'--'}</strong><strong>¥{item.price_us||'--'}</strong></div>
) )
}) })
} }
......
src/components/ListOneItem/types.tsx
...@@ -2,6 +2,10 @@ ...@@ -2,6 +2,10 @@
export type dataListItemType = { export type dataListItemType = {
sku_name: string; sku_name: string;
brand_name: string; brand_name: string;
brand_id: string|number;
class_id2?:string|number;
class_id1?:string|number;
class_name2?:string;
class_name: string; class_name: string;
cn_delivery_time: string; cn_delivery_time: string;
hk_delivery_time: string; hk_delivery_time: string;
......
src/pages/Search/index.less
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
.item-box{ .item-box{
width:1000px; width:1000px;
flex-wrap: wrap; flex-wrap: wrap;
min-height:40px;
&.overflowheight{ &.overflowheight{
height:40px; height:40px;
overflow: hidden; overflow: hidden;
...@@ -75,6 +75,14 @@ ...@@ -75,6 +75,14 @@
.data-group-supplier{ .data-group-supplier{
border: 1px solid #EDEFEF; border: 1px solid #EDEFEF;
margin-bottom: 30px; margin-bottom: 30px;
.search-list-datas{
.list-group-one-item:first-child{
.cons{
border-top: 0px;
}
}
}
.data-list-title{ .data-list-title{
padding:0 33px; padding:0 33px;
height:50px; height:50px;
......
src/pages/Search/index.min.css
.mv-search-page{margin-bottom:70px}.mv-search-page .shift-box{padding:24px 30px;background:#fff;padding-bottom:6px}.mv-search-page .shift-box .shift-group{border-bottom:1px solid #E7E7E7;margin-bottom:18px}.mv-search-page .shift-box .shift-group span{font-weight:bold;font-size:12px;color:#888888;padding-top:2px}.mv-search-page .shift-box .shift-group:last-child{border-bottom:0px;margin-bottom:0px}.mv-search-page .shift-box .shift-group .item-box{width:1000px;flex-wrap:wrap}.mv-search-page .shift-box .shift-group .item-box.overflowheight{height:40px;overflow:hidden}.mv-search-page .shift-box .shift-group .item-box .item{height:22px;border:1px solid rgba(0,0,0,0);line-height:20px;box-sizing:border-box;margin-left:45px;margin-bottom:18px;font-size:12px;color:#000;cursor:pointer;text-align:center;padding:0 15px}.mv-search-page .shift-box .shift-group .item-box .item.act{background:#FFFBF5;border:1px solid #FF9A00}.mv-search-page .shift-box .shift-group .shitrankbox{width:130px;justify-content:flex-end}.mv-search-page .shift-box .shift-group .shitrank{margin-left:5px;height:22px;width:58px;border:1px solid #B0B0B0;box-sizing:border-box;color:#919191;font-size:12px;cursor:pointer}.mv-search-page .shift-box .shift-group .shitrank.shows{display:flex}.mv-search-page .shift-box .shift-group .shitrank.hides{display:none}.mv-search-page .shift-box .shift-group .shitrank:first-child{margin-left:0px}.mv-search-page .shift-box .shift-group .shitrank i{color:#919191;font-size:12px}.mv-search-page .databox{padding-top:24px}.mv-search-page .databox .data-group-supplier{border:1px solid #EDEFEF;margin-bottom:30px}.mv-search-page .databox .data-group-supplier .data-list-title{padding:0 33px;height:50px;line-height:50px;font-size:16px;color:#000000;background:#f6f6f6}.mv-search-page .databox .data-group-supplier .data-list-more{height:48px;line-height:48px;color:#000;font-size:12px;text-align:center;background:#fff}.mv-search-page .databox .data-group-supplier .data-list-more b{color:#FF9A00;cursor:pointer} .mv-search-page{margin-bottom:70px}.mv-search-page .shift-box{padding:24px 30px;background:#fff;padding-bottom:6px}.mv-search-page .shift-box .shift-group{border-bottom:1px solid #E7E7E7;margin-bottom:18px}.mv-search-page .shift-box .shift-group span{font-weight:bold;font-size:12px;color:#888888;padding-top:2px}.mv-search-page .shift-box .shift-group:last-child{border-bottom:0px;margin-bottom:0px}.mv-search-page .shift-box .shift-group .item-box{width:1000px;flex-wrap:wrap;min-height:40px}.mv-search-page .shift-box .shift-group .item-box.overflowheight{height:40px;overflow:hidden}.mv-search-page .shift-box .shift-group .item-box .item{height:22px;border:1px solid rgba(0,0,0,0);line-height:20px;box-sizing:border-box;margin-left:45px;margin-bottom:18px;font-size:12px;color:#000;cursor:pointer;text-align:center;padding:0 15px}.mv-search-page .shift-box .shift-group .item-box .item.act{background:#FFFBF5;border:1px solid #FF9A00}.mv-search-page .shift-box .shift-group .shitrankbox{width:130px;justify-content:flex-end}.mv-search-page .shift-box .shift-group .shitrank{margin-left:5px;height:22px;width:58px;border:1px solid #B0B0B0;box-sizing:border-box;color:#919191;font-size:12px;cursor:pointer}.mv-search-page .shift-box .shift-group .shitrank.shows{display:flex}.mv-search-page .shift-box .shift-group .shitrank.hides{display:none}.mv-search-page .shift-box .shift-group .shitrank:first-child{margin-left:0px}.mv-search-page .shift-box .shift-group .shitrank i{color:#919191;font-size:12px}.mv-search-page .databox{padding-top:24px}.mv-search-page .databox .data-group-supplier{border:1px solid #EDEFEF;margin-bottom:30px}.mv-search-page .databox .data-group-supplier .search-list-datas .list-group-one-item:first-child .cons{border-top:0px}.mv-search-page .databox .data-group-supplier .data-list-title{padding:0 33px;height:50px;line-height:50px;font-size:16px;color:#000000;background:#f6f6f6}.mv-search-page .databox .data-group-supplier .data-list-more{height:48px;line-height:48px;color:#000;font-size:12px;text-align:center;background:#fff}.mv-search-page .databox .data-group-supplier .data-list-more b{color:#FF9A00;cursor:pointer}
\ No newline at end of file \ No newline at end of file
src/pages/Search/index.tsx
import './index.min.css' import './index.min.css'
import { useEffect, useReducer, useRef, useState } from 'react'; import { useEffect, useReducer, useRef, useState } from 'react';
import type { ListSortType } from '../../components/ListSort/types' import type { ListSortType } from '../../components/ListSort/types'
import type { dataListItemType } from '../../components/ListOneItem/types'
import BreadNav from '../../components/BreadNav'; import BreadNav from '../../components/BreadNav';
import ListSort from '../../components/ListSort'; import ListSort from '../../components/ListSort';
//import ListOneItem from '../../components/ListOneItem'; import ListOneItem from '../../components/ListOneItem';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { brandsAndClasssReducer } from './reducer'; import { brandsAndClasssReducer } from './reducer';
import type {ResponseTypeHome} from './types' import type { ResponseTypeSearch, supplierDataType } from './types'
import useRequest from '../../hooks/useRequest'; import useRequest from '../../hooks/useRequest';
const supplierIdS = ['', '24']
const Search = () => { const Search = () => {
const requestCount = useRef(0)
const location = useLocation(); const location = useLocation();
const params = new URLSearchParams(location.search); const params = new URLSearchParams(location.search);
const keyword = params.get('keyword'); const keyword = params.get('keyword');
const num = params.get('num'); const num = params.get('num');
console.log(keyword, num)
const {request:getListRequest}=useRequest<ResponseTypeHome>({manual:true})
const { request: getListRequest } = useRequest<ResponseTypeSearch>({ manual: true })
useEffect(()=>{ const initSupplierList = useRef<supplierDataType[]>([])//初始化数据
getListRequest({url: '/api/home/getHomepageList',params:{keyword:keyword,num:num}}).then((res)=>{ const [supplierList, setSupplierList] = useState<supplierDataType[]>([])
console.log(res) useEffect(() => {
const datasg = [ initSupplierList.current = []
{ requestCount.current = 0
goods_id: 1, supplierIdS.forEach(supplier_id => {
brand_id: 1, getListRequest({ url: '/api/search/goodsSearch', method: 'post', data: { keyword: keyword, num: num, supplier_id: supplier_id } }).then((res) => {
brand_name: 'taaaaaaaaaai', requestCount.current = requestCount.current + 1
class_id: 1, if (res?.code === 0) {
class_name: 'nxaaaaaaap' initSupplierList.current = [...initSupplierList.current, ...(res.data || [])]
},
{
goods_id: 2,
brand_id: 2,
brand_name: 'tiaaaaaaaa2',
class_id: 2,
class_name: 'nxaaaaaaap2'
},
{
goods_id: 3,
brand_id: 3,
brand_name: 'taaaaaai3',
class_id: 3,
class_name: 'nxaaaaaaaap3'
},
{
goods_id: 4,
brand_id: 4,
brand_name: 'tiaaaaaaa4',
class_id: 4,
class_name: 'nxaaaaap4'
},
{
goods_id: 5,
brand_id: 5,
brand_name: 'taaaaaaai5',
class_id: 5,
class_name: 'naaaaaaaaxp5'
},
{
goods_id: 6,
brand_id: 6,
brand_name: 'taaaaaaai6',
class_id: 6,
class_name: 'nxaaaaaap6'
},
{
goods_id: 7,
brand_id: 7,
brand_name: 'taaaaaaaai7',
class_id: 7,
class_name: 'nxaaaaaaaaap7'
}
,
{
goods_id: 5,
brand_id: 5,
brand_name: 'taaaaaaaaaaaai5',
class_id: 5,
class_name: 'nxaaaaaaaaap5'
} }
] getInitData()
dispatchBrands({type: 'brandsInit',value:datasg}) })
dispatchclasss({type: 'classsInit',value:datasg}) })
}, [getListRequest, keyword, num, setSupplierList])
const getInitData = () => {
let datasg: dataListItemType[] = [];
initSupplierList.current.forEach(item => {
item.data.forEach(child => {
datasg.push(child)
})
}) })
},[getListRequest,keyword,num]) dispatchBrands({ type: 'brandsInit', value: datasg })
dispatchclasss({ type: 'classsInit', value: datasg })
setSupplierList([...initSupplierList.current])
if(requestCount.current>1){
}
}
const [sortObj, setSortObj] = useState<ListSortType>({ const [sortObj, setSortObj] = useState<ListSortType>({
sortType: 1, sortType: 1,
isStock: false, isStock: false,
stockSort: '', stockSort: '',
priceSort: '' priceSort: ''
}) })
const [brandsR,dispatchBrands]=useReducer(brandsAndClasssReducer,[]) const [brandsR, dispatchBrands] = useReducer(brandsAndClasssReducer, [])
const [classsR,dispatchclasss]=useReducer(brandsAndClasssReducer,[]) const [classsR, dispatchclasss] = useReducer(brandsAndClasssReducer, [])
//品牌分类盒子 UI //品牌分类盒子 UI
const brandListRef=useRef<HTMLDivElement>(null); const brandListRef = useRef<HTMLDivElement>(null);
const classListRef=useRef<HTMLDivElement>(null); const classListRef = useRef<HTMLDivElement>(null);
const [brandListAll,setBrandListAll]=useState(true) const [brandListAll, setBrandListAll] = useState(false)
const [classListAll,setClassListAll]=useState(true) const [classListAll, setClassListAll] = useState(false)
const [brandListHeight,setBrandListHeight]=useState<number>(0)
const [classListHeight,setClassListHeight]=useState<number>(0)
//品牌,分类,排序发生变化 //品牌,分类,排序发生变化
useEffect(() => { useEffect(() => {
setBrandListHeight(brandListRef.current?.offsetHeight||0)
setClassListHeight(classListRef.current?.offsetHeight||0)
console.log('品牌,分类,排序发生变化') console.log('品牌,分类,排序发生变化')
}, [brandsR,classsR,sortObj]) }, [brandsR, classsR, sortObj])
const updateBrandAndClass = (type: number, id?: string) => { const updateBrandAndClass = (type: number, id?: string) => {
if(type===1){ if (type === 1) {
dispatchBrands({type: 'brandsUpdate',value:id}) dispatchBrands({ type: 'brandsUpdate', value: id })
} }
if(type===2){ if (type === 2) {
dispatchclasss({type: 'classsUpdate',value:id}) dispatchclasss({ type: 'classsUpdate', value: id })
} }
} }
return ( return (
<> <>
<BreadNav><strong>"MPX5700ASX"的型号搜索结果</strong></BreadNav> <BreadNav><strong>"{keyword}"的型号搜索结果</strong></BreadNav>
<div className='mv-search-page w1226' > <div className='mv-search-page w1226' >
<div className='shift-box'> <div className='shift-box'>
<div className='shift-group row'> <div className='shift-group row' >
<span>品牌：</span> <span>品牌：</span>
<div className={brandListAll?'item-box row':'item-box row overflowheight'} ref={brandListRef}> <div className={brandListAll ? 'item-box row' : 'item-box row overflowheight'} ref={brandListRef}>
{ {
brandsR.map(item => { brandsR.map(item => {
return ( return (
...@@ -147,57 +108,58 @@ const Search = () => { ...@@ -147,57 +108,58 @@ const Search = () => {
} }
</div> </div>
<div className='row shitrankbox'> <div className='row shitrankbox'>
<div className={brandsR.find(item => item.checked === true)?'more row verCenter rowCenter shitrank shows':'more row verCenter rowCenter shitrank hides'} onClick={() => { updateBrandAndClass(1) }}>清除条件</div> <div className={brandsR.find(item => item.checked === true) ? 'more row verCenter rowCenter shitrank shows' : 'more row verCenter rowCenter shitrank hides'} onClick={() => { updateBrandAndClass(1) }}>清除条件</div>
{ <div className='more row verCenter rowCenter shitrank' onClick={() => { setBrandListAll(!brandListAll) }}>
brandListHeight>40&& {brandListAll ? (<>收起<i className='icon iconfont icon-xiangshang2'></i></>) : (<>展开<i className='icon iconfont icon-xiangxia2'></i></>)}
<div className='more row verCenter rowCenter shitrank' onClick={()=>{setBrandListAll(!brandListAll)}}> </div>
{brandListAll?(<>收起<i className='icon iconfont icon-xiangshang2'></i></>):(<>展开<i className='icon iconfont icon-xiangxia2'></i></>)}
</div>
}
</div> </div>
</div> </div>
<div className='shift-group row'> <div className='shift-group row'>
<span>分类：</span> <span>分类：</span>
<div className={classListAll?'item-box row':'item-box row overflowheight'} ref={classListRef}> <div className={classListAll ? 'item-box row' : 'item-box row overflowheight'} ref={classListRef}>
{ {
classsR.map(item => { classsR.map(item => {
return ( return (
<div onClick={() => { updateBrandAndClass(2, item.id) }} key={item.id} className={item.checked ? 'item act' : 'item'} >{item.value}</div> <div onClick={() => { updateBrandAndClass(2, item.id) }} key={item.id} className={item.checked ? 'item act' : 'item'} >{item.value}</div>
) )
}) })
} }
</div> </div>
<div className='row shitrankbox'> <div className='row shitrankbox'>
<div className={classsR.find(item => item.checked === true)?'more row verCenter rowCenter shitrank shows':'more row verCenter rowCenter shitrank hides'} onClick={() => { updateBrandAndClass(2) }}>清除条件</div> <div className={classsR.find(item => item.checked === true) ? 'more row verCenter rowCenter shitrank shows' : 'more row verCenter rowCenter shitrank hides'} onClick={() => { updateBrandAndClass(2) }}>清除条件</div>
{ <div className='more row verCenter rowCenter shitrank' onClick={() => { setClassListAll(!classListAll) }}>
classListHeight>40&& {classListAll ? (<>收起<i className='icon iconfont icon-xiangshang2'></i></>) : (<>展开<i className='icon iconfont icon-xiangxia2'></i></>)}
<div className='more row verCenter rowCenter shitrank' onClick={()=>{setClassListAll(!classListAll)}}> </div>
{classListAll?(<>收起<i className='icon iconfont icon-xiangshang2'></i></>):(<>展开<i className='icon iconfont icon-xiangxia2'></i></>)}
</div>
}
</div> </div>
</div> </div>
</div> </div>
<div className='databox'> <div className='databox'>
<ListSort sortObj={sortObj} setSortObj={setSortObj} /> <ListSort sortObj={sortObj} setSortObj={setSortObj} />
<div className='data-group-supplier'> {
<div className='data-list-title'>djk</div> supplierList.map((item, index) => {
{/* <ListOneItem /> return (
<ListOneItem /> */} <div className='data-group-supplier' key={String(item.supplier_id) + index}>
<div className='data-list-more'>还有<b>32</b>个商品未显示，<b>点击加载更多</b></div> <div className='data-list-title'>{item.supplier_name||'其他'}</div>
</div> <div className='search-list-datas'>
<div className='data-group-supplier'> {
<div className='data-list-title'>djk</div> item.data.map(child => {
{/* <ListOneItem /> return (
<ListOneItem /> */} <ListOneItem key={child.goods_id} {...child} />
<div className='data-list-more'>还有<b>32</b>个商品未显示，<b>点击加载更多</b></div> )
</div> })
}
</div>
{/* <div className='data-list-more'>还有<b>32</b>个商品未显示，<b>点击加载更多</b></div> */}
</div>
)
})
}
</div> </div>
</div> </div>
</> </>
) )
......
src/pages/Search/reducer.tsx
...@@ -6,7 +6,7 @@ export const brandsAndClasssReducer = (state: BrandAndClassType, action: any) => ...@@ -6,7 +6,7 @@ export const brandsAndClasssReducer = (state: BrandAndClassType, action: any) =>
const datasg = [...action.value] const datasg = [...action.value]
datasg.forEach((item) => { datasg.forEach((item) => {
const id_ = action.type === 'brandsInit' ? String(item.brand_id) : String(item.class_id) const id_ = action.type === 'brandsInit' ? String(item.brand_id) : String(item.class_id2)
const name_ = action.type === 'brandsInit' ? String(item.brand_name) : String(item.class_name) const name_ = action.type === 'brandsInit' ? String(item.brand_name) : String(item.class_name)
newBrand = [...newBrand, { id: id_, value: name_, checked: false }] newBrand = [...newBrand, { id: id_, value: name_, checked: false }]
}) })
......
src/pages/Search/types.tsx
export type ResponseType = { import type { dataListItemType } from '../../components/ListOneItem/types'
success: boolean, export type ResponseTypeSearch = {
data: Array<{ code: number | string,
shopId: string, data:Array<supplierDataType>,
shopName: string, msg: string
cartList: Array<{ }
productId: string, export type supplierDataType= {
imgUrl: string, supplier_name: string,
weight: string, supplier_id:string|number,
title: string, data:Array<dataListItemType>,
price: number, msg: string
count: number
}>
}>
} }
export type BrandAndClassType = Array<{ export type BrandAndClassType = Array<{
id: string, id: string,
value: string, value: string,
...@@ -21,32 +21,3 @@ export type BrandAndClassType = Array<{ ...@@ -21,32 +21,3 @@ export type BrandAndClassType = Array<{
}> }>
export type ResponseTypeHome = {
code: number | string,
data: {
on_sale_list?: Array<onSaleListType>,
recommend_brand_list?: Array<recommendBrandListType>,
recommend_goods_list?: Array<recommendGoodsListType>
} | null,
msg: string
}
export type onSaleListType = {
goods_images: string,
sku_id: string | number,
sku_name: string,
single_price: string,
brand_name: string
}
export type recommendBrandListType = {
brand_logo: string,
brand_name: string,
goods_brand_id: string | number
}
export type recommendGoodsListType = {
goods_images: string,
brand_name: string,
sku_id: string | number,
single_price: string | number,
sku_name: string
}
\ No newline at end of file
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