diff --git a/src/components/moveBtn/index.tsx b/src/components/moveBtn/index.tsx index 14669ee..d8875eb 100644 --- a/src/components/moveBtn/index.tsx +++ b/src/components/moveBtn/index.tsx @@ -29,8 +29,10 @@ interface param { playVideo?: boolean floatVideoFile?: any[] showFloatVideo?: boolean + customStyles?: React.CSSProperties } -const MoveBtn = ({ showFloatVideo = false, floatVideoFile = [], playVideo = true, orderObj = {}, children = null, onShopClick, showList = [], messageTitle = '', messagePath = '', showCart = false }: param) => { +const MoveBtn = (props: param) => { + const { customStyles = {}, showFloatVideo = false, floatVideoFile = [], playVideo = false, orderObj = {}, children = null, onShopClick, showList = [], messageTitle = '', messagePath = '', showCart = false } = props const userInfo = useSelector(state => state.userInfo) // 获取购物车数据数量 const { getShopCount, commonData } = useCommonData() @@ -127,7 +129,7 @@ const MoveBtn = ({ showFloatVideo = false, floatVideoFile = [], playVideo = true } return ( - + {children} {onShow('shop') && { categoryList() }, []) - return - - - goLink('/pages/searchList/search')}> - + return + + + + goLink('/pages/searchList/search')}> + + + + getRefresherRefresh()} + > + + + - - getRefresherRefresh()} - > - - - - + } export default Category diff --git a/src/pages/index/index.module.scss b/src/pages/index/index.module.scss index 39d683c..0e77aa2 100644 --- a/src/pages/index/index.module.scss +++ b/src/pages/index/index.module.scss @@ -1,6 +1,5 @@ .main { background-color: #fff; - height: 100vh; display: flex; flex-direction: column; .header { diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 8b8a9ad..02b9756 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -14,6 +14,7 @@ import IconFont from '@/components/iconfont/iconfont' import IconText from '@/components/iconText' import { HOME_ITEM1, HOME_ITEM2, HOME_ITEM3, HOME_ITEM4 } from '@/common/constant' import { EnumLabelPageJumpApi, GetLabelProductsApi } from '@/api/search' +import MoveBtn from '@/components/moveBtn' const Index = () => { useLogin() @@ -134,74 +135,74 @@ const Index = () => { } return ( - - - - goLink('/pages/searchList/search')}> - - - - - - - - handleClickHomeItem('女装面料')}> - {/* 女装面料 */} - - - handleClickHomeItem('男装面料')}> - {/* 男装面料 */} - - - handleClickHomeItem('童装面料')}> - {/* 童装面料 */} - - - handleClickHomeItem('潮流面料')}> - {/* 潮流面料 */} - - - - - - - - handleClickHomeItem('高端奢侈')}> - {/* 高端奢侈 */} - - + + + + + goLink('/pages/searchList/search')}> + - handleClickHomeItem('热销走量')}> - {/* 热销走量 */} - - + + + + + handleClickHomeItem('女装面料')}> + {/* 女装面料 */} + + + handleClickHomeItem('男装面料')}> + {/* 男装面料 */} + + + handleClickHomeItem('童装面料')}> + {/* 童装面料 */} + + + handleClickHomeItem('潮流面料')}> + {/* 潮流面料 */} + + + + - handleClickHomeItem('性价比')}> - {/* 性价比 */} - - + + handleClickHomeItem('高端奢侈')}> + {/* 高端奢侈 */} + + + + + handleClickHomeItem('热销走量')}> + {/* 热销走量 */} + + + + + handleClickHomeItem('性价比')}> + {/* 性价比 */} + + + - - - - 猜你喜欢 - - 更多推荐 - + + + 猜你喜欢 + + 更多推荐 + + + + + + {'更多推荐 >'} - - - {'更多推荐 >'} - - {/* 真机测试:注释了以下这段也没有布局问题 */} - {/* */} - + ) } diff --git a/src/pages/searchList/searchList.tsx b/src/pages/searchList/searchList.tsx index b5daa6b..8ce66f1 100644 --- a/src/pages/searchList/searchList.tsx +++ b/src/pages/searchList/searchList.tsx @@ -17,6 +17,7 @@ import LabAndImg from '@/components/LabAndImg' import IconFont from '@/components/iconfont/iconfont' import Tag from '@/components/tag' import { EnumAllLabelApi, GetLabelProductsApi, HomePageJumpApi } from '@/api/search' +import MoveBtn from '@/components/moveBtn' enum FilterOptions { RECOMMEND = 1, @@ -201,82 +202,84 @@ export default () => { } return ( - - - - - - - handleSelectFilterOptions(FilterOptions.RECOMMEND)}> - 综合推荐 - - handleSelectFilterOptions(FilterOptions.SALES)}> - 销量 - - - 价格 - - - - getFilter(e)} /> - + + + + - { - !!labelList.length && - - + + + handleSelectFilterOptions(FilterOptions.RECOMMEND)}> + 综合推荐 + + handleSelectFilterOptions(FilterOptions.SALES)}> + 销量 + + + 价格 + + + + getFilter(e)} /> - } - - - - - - {materialList.list?.map((item) => { - return ( - goLinkPage(item)}> - - - {item.product_color_count}色 - - - - - {formatHashTag(item.code, item.name)} - - - {item.is_favorite && } + { + !!labelList.length && + + + + + } + + + + + + {materialList.list?.map((item) => { + return ( + goLinkPage(item)}> + + + {item.product_color_count}色 + + + + + {formatHashTag(item.code, item.name)} + + + {item.is_favorite && } + + + + {item.width} + {item.weight_density} + { + !!item.product_screw_id + && 配套螺纹 + } + + {item.component} + + ¥ + {formatPriceDiv(item.lowest_price).toLocaleString()}起 - - {item.width} - {item.weight_density} - { - !!item.product_screw_id - && 配套螺纹 - } - - {item.component} - - ¥ - {formatPriceDiv(item.lowest_price).toLocaleString()}起 - - - ) - })} - - + ) + })} + + + - + ) } diff --git a/src/pages/shopCar/components/bottomBtn/index.module.scss b/src/pages/shopCar/components/bottomBtn/index.module.scss index 01dcbcb..e738f0d 100644 --- a/src/pages/shopCar/components/bottomBtn/index.module.scss +++ b/src/pages/shopCar/components/bottomBtn/index.module.scss @@ -3,11 +3,9 @@ align-items: center; background-color: #fff; padding: 24px 24px 24px 56px; - position: fixed; - bottom: 0; - left: 0; width: 100%; box-sizing: border-box; + position: relative; z-index: 999; box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06); .select_text { diff --git a/src/pages/shopCar/components/main/index.module.scss b/src/pages/shopCar/components/main/index.module.scss index 9c555c8..b386df9 100644 --- a/src/pages/shopCar/components/main/index.module.scss +++ b/src/pages/shopCar/components/main/index.module.scss @@ -1,13 +1,20 @@ +page { + display: flex; + flex-flow: column nowrap; + height: 100vh; + overflow: hidden; +} .shop_main { - min-height: 100vh; background-color: #f8f8f8; display: flex; - flex-direction: column; + flex-flow: column nowrap; + justify-content: space-between; + overflow: hidden; + height: 100%; .shop_con { - // flex: 1; + flex: 1 1 auto; box-sizing: border-box; - height: calc(100vh - 300px); - overflow: hidden; + overflow: scroll; } .scroll_view { padding: 0 24px; diff --git a/src/pages/shopCar/components/main/index.tsx b/src/pages/shopCar/components/main/index.tsx index e520d8d..64c1e2a 100644 --- a/src/pages/shopCar/components/main/index.tsx +++ b/src/pages/shopCar/components/main/index.tsx @@ -4,15 +4,14 @@ import React, { useCallback, useEffect, useMemo, useRef, useState, useTransition import ProductBlock from '../productBlock' import BottomBtn from '../bottomBtn' import Operation from '../operation' -import type { listType } from '../search' import Search from '../search' import NoShop from '../noShop' import RecommendOpen from '../RecommendOpen' import styles from './index.module.scss' +import type { listType, saleModeType } from '@/common/enum' import { DelShoppingCartApi, GetProductColorApi, GetShoppingCartV2Api } from '@/api/shopCart' import type { ProductType } from '@/context/ContextShop' import { useCurrenShop } from '@/context/ContextShop' -import type { saleModeType } from '@/common/enum' import LoadingCard from '@/components/loadingCard' import { alert, goLink } from '@/common/common' import InfiniteScroll from '@/components/infiniteScroll' @@ -25,6 +24,7 @@ import { useSelector } from '@/reducers/hooks' import OrganizationNameModal from '@/components/organizationNameModal' import useLogin from '@/use/useLogin' import { companyDetailApi, companyUpdateApi } from '@/api/company' +import MoveBtn from '@/components/moveBtn' interface FilterType { abstract_sort_key: -1|1|2|-2 @@ -93,7 +93,7 @@ export default () => { setFilter(e => ({ ...e, sale_mode: val.value })) }, []) - const logadingStatus = useMemo(() => { + const loadingStatus = useMemo(() => { return shopState.loading || isPending }, [shopState.loading, isPending]) @@ -224,32 +224,32 @@ export default () => { } }, [state.delCommendId]) - return - - - - + return + + + + + + + + + {loadingStatus && } + {(!loadingStatus && state.list && state.list.length > 0) && + {state.list?.map(item => ())} + } + {(!loadingStatus && !state.list) && } + + + + + + + + + + + - - {logadingStatus && } - {(!logadingStatus && state.list && state.list.length > 0) && - {state.list?.map(item => ())} - - } - {(!logadingStatus && !state.list) && } - - - - - - - - - - - - - - + }