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 = () => {
});
useEffect(() => {
setCommonConfigData({
qqurl: '/'
qqurl: 'https://url.cn/uia2no5Z?_type=wpa&qidian=true'
})
}, []);
......
src/components/ListOneItem/index.tsx
......@@ -35,7 +35,7 @@ const ListOneItem = (props:dataListItemType) => {
{
itemInfo.ladder_price.map((item,index)=>{
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 @@
export type dataListItemType = {
sku_name: string;
brand_name: string;
brand_id: string|number;
class_id2?:string|number;
class_id1?:string|number;
class_name2?:string;
class_name: string;
cn_delivery_time: string;
hk_delivery_time: string;
......
src/pages/Search/index.less
......@@ -17,7 +17,7 @@
.item-box{
width:1000px;
flex-wrap: wrap;
min-height:40px;
&.overflowheight{
height:40px;
overflow: hidden;
......@@ -75,6 +75,14 @@
.data-group-supplier{
border: 1px solid #EDEFEF;
margin-bottom: 30px;
.search-list-datas{
.list-group-one-item:first-child{
.cons{
border-top: 0px;
}
}
}
.data-list-title{
padding:0 33px;
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}
\ No newline at end of file
.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
src/pages/Search/index.tsx
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 { dataListItemType } from '../../components/ListOneItem/types'
import BreadNav from '../../components/BreadNav';
import ListSort from '../../components/ListSort';
//import ListOneItem from '../../components/ListOneItem';
import ListOneItem from '../../components/ListOneItem';
import { useLocation } from 'react-router-dom';
import { brandsAndClasssReducer } from './reducer';
import type {ResponseTypeHome} from './types'
import type { ResponseTypeSearch, supplierDataType } from './types'
import useRequest from '../../hooks/useRequest';
const supplierIdS = ['', '24']
const Search = () => {
const requestCount = useRef(0)
const location = useLocation();
const params = new URLSearchParams(location.search);
const keyword = params.get('keyword');
const num = params.get('num');
console.log(keyword, num)
const {request:getListRequest}=useRequest<ResponseTypeHome>({manual:true})
useEffect(()=>{
getListRequest({url: '/api/home/getHomepageList',params:{keyword:keyword,num:num}}).then((res)=>{
console.log(res)
const datasg = [
{
goods_id: 1,
brand_id: 1,
brand_name: 'taaaaaaaaaai',
class_id: 1,
class_name: 'nxaaaaaaap'
},
{
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'
const { request: getListRequest } = useRequest<ResponseTypeSearch>({ manual: true })
const initSupplierList = useRef<supplierDataType[]>([])//初始化数据
const [supplierList, setSupplierList] = useState<supplierDataType[]>([])
useEffect(() => {
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) => {
requestCount.current = requestCount.current + 1
if (res?.code === 0) {
initSupplierList.current = [...initSupplierList.current, ...(res.data || [])]
}
]
dispatchBrands({type: 'brandsInit',value:datasg})
dispatchclasss({type: 'classsInit',value:datasg})
getInitData()
})
})
}, [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>({
sortType: 1,
isStock: false,
stockSort: '',
priceSort: ''
})
const [brandsR,dispatchBrands]=useReducer(brandsAndClasssReducer,[])
const [classsR,dispatchclasss]=useReducer(brandsAndClasssReducer,[])
const [brandsR, dispatchBrands] = useReducer(brandsAndClasssReducer, [])
const [classsR, dispatchclasss] = useReducer(brandsAndClasssReducer, [])
//品牌分类盒子 UI
const brandListRef=useRef<HTMLDivElement>(null);
const classListRef=useRef<HTMLDivElement>(null);
const [brandListAll,setBrandListAll]=useState(true)
const [classListAll,setClassListAll]=useState(true)
const [brandListHeight,setBrandListHeight]=useState<number>(0)
const [classListHeight,setClassListHeight]=useState<number>(0)
const brandListRef = useRef<HTMLDivElement>(null);
const classListRef = useRef<HTMLDivElement>(null);
const [brandListAll, setBrandListAll] = useState(false)
const [classListAll, setClassListAll] = useState(false)
//品牌,分类,排序发生变化
useEffect(() => {
setBrandListHeight(brandListRef.current?.offsetHeight||0)
setClassListHeight(classListRef.current?.offsetHeight||0)
console.log('品牌,分类,排序发生变化')
}, [brandsR,classsR,sortObj])
}, [brandsR, classsR, sortObj])
const updateBrandAndClass = (type: number, id?: string) => {
if(type===1){
dispatchBrands({type: 'brandsUpdate',value:id})
if (type === 1) {
dispatchBrands({ type: 'brandsUpdate', value: id })
}
if(type===2){
dispatchclasss({type: 'classsUpdate',value:id})
if (type === 2) {
dispatchclasss({ type: 'classsUpdate', value: id })
}
}
return (
<>
<BreadNav><strong>"MPX5700ASX"的型号搜索结果</strong></BreadNav>
<BreadNav><strong>"{keyword}"的型号搜索结果</strong></BreadNav>
<div className='mv-search-page w1226' >
<div className='shift-box'>
<div className='shift-group row'>
<div className='shift-group row' >
<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 => {
return (
......@@ -147,57 +108,58 @@ const Search = () => {
}
</div>
<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>
{
brandListHeight>40&&
<div className='more row verCenter rowCenter shitrank' onClick={()=>{setBrandListAll(!brandListAll)}}>
{brandListAll?(<>收起<i className='icon iconfont icon-xiangshang2'></i></>):(<>展开<i className='icon iconfont icon-xiangxia2'></i></>)}
</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) }}>
{brandListAll ? (<>收起<i className='icon iconfont icon-xiangshang2'></i></>) : (<>展开<i className='icon iconfont icon-xiangxia2'></i></>)}
</div>
</div>
</div>
<div className='shift-group row'>
<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 => {
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 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>
{
classListHeight>40&&
<div className='more row verCenter rowCenter shitrank' onClick={()=>{setClassListAll(!classListAll)}}>
{classListAll?(<>收起<i className='icon iconfont icon-xiangshang2'></i></>):(<>展开<i className='icon iconfont icon-xiangxia2'></i></>)}
</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) }}>
{classListAll ? (<>收起<i className='icon iconfont icon-xiangshang2'></i></>) : (<>展开<i className='icon iconfont icon-xiangxia2'></i></>)}
</div>
</div>
</div>
</div>
<div className='databox'>
<ListSort sortObj={sortObj} setSortObj={setSortObj} />
<div className='data-group-supplier'>
<div className='data-list-title'>djk</div>
{/* <ListOneItem />
<ListOneItem /> */}
<div className='data-list-more'>还有<b>32</b>个商品未显示，<b>点击加载更多</b></div>
</div>
<div className='data-group-supplier'>
<div className='data-list-title'>djk</div>
{/* <ListOneItem />
<ListOneItem /> */}
<div className='data-list-more'>还有<b>32</b>个商品未显示，<b>点击加载更多</b></div>
</div>
{
supplierList.map((item, index) => {
return (
<div className='data-group-supplier' key={String(item.supplier_id) + index}>
<div className='data-list-title'>{item.supplier_name||'其他'}</div>
<div className='search-list-datas'>
{
item.data.map(child => {
return (
<ListOneItem key={child.goods_id} {...child} />
)
})
}
</div>
{/* <div className='data-list-more'>还有<b>32</b>个商品未显示，<b>点击加载更多</b></div> */}
</div>
)
})
}
</div>
</div>
</>
)
......
src/pages/Search/reducer.tsx
......@@ -6,7 +6,7 @@ export const brandsAndClasssReducer = (state: BrandAndClassType, action: any) =>
const datasg = [...action.value]
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)
newBrand = [...newBrand, { id: id_, value: name_, checked: false }]
})
......
src/pages/Search/types.tsx
export type ResponseType = {
success: boolean,
data: Array<{
shopId: string,
shopName: string,
cartList: Array<{
productId: string,
imgUrl: string,
weight: string,
title: string,
price: number,
count: number
}>
}>
import type { dataListItemType } from '../../components/ListOneItem/types'
export type ResponseTypeSearch = {
code: number | string,
data:Array<supplierDataType>,
msg: string
}
export type supplierDataType= {
supplier_name: string,
supplier_id:string|number,
data:Array<dataListItemType>,
msg: string
}
export type BrandAndClassType = Array<{
id: string,
value: string,
......@@ -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