diff --git a/src/components/LabAndImg/index.tsx b/src/components/LabAndImg/index.tsx index 7aee959..5fff9dc 100644 --- a/src/components/LabAndImg/index.tsx +++ b/src/components/LabAndImg/index.tsx @@ -19,7 +19,7 @@ type Param = { name?: string } export default memo(({ value, onClick, showStatus = false, round = false, name = '' }: Param) => { - const [imgs, setImgs] = useState([]) + const [imgs, setImgs] = useState('') //lab是否都是0 const rgbStyle = useMemo(() => { @@ -35,7 +35,7 @@ export default memo(({ value, onClick, showStatus = false, round = false, name = let imgs = value.texture_url.split(',').map((item) => { return formatImgUrl(item) }) - setImgs(() => imgs) + setImgs(() => imgs[0]) } }, [value]) @@ -50,10 +50,21 @@ export default memo(({ value, onClick, showStatus = false, round = false, name = setLabAndImgShow(true) } + const checkLoad = (val) => { + setImgs(() => formatImgUrl('')) + } + return ( <> onShowLabAndImg()}> - {value.texture_url && } + {value.texture_url && ( + checkLoad(e)} + className={styles.labAndImg_image} + style={{ borderRadius: round ? '50%' : '' }}> + )} {!value.texture_url && rgbStyle && } {!value.texture_url && !rgbStyle && ( diff --git a/src/components/sideBar/index.tsx b/src/components/sideBar/index.tsx index d8ec31a..6d800bb 100644 --- a/src/components/sideBar/index.tsx +++ b/src/components/sideBar/index.tsx @@ -1,8 +1,8 @@ import { ScrollView, View } from '@tarojs/components' -import React, { memo, ReactNode, useEffect, useRef, useState } from 'react' +import React, { memo, ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react' import styles from './index.module.scss' import classnames from 'classnames' -import Taro, { useReady } from '@tarojs/taro' +import Taro, { getCurrentInstance, useReady, useRouter } from '@tarojs/taro' import InfiniteScroll, { StatusParam } from '../infiniteScroll' import LoadingCard from '../loadingCard' import ProductClass from '@/pages/index/components/productClass' @@ -73,7 +73,7 @@ export default memo( } } - useReady(() => { + useEffect(() => { Taro.nextTick(() => { let query = Taro.createSelectorQuery() query @@ -85,16 +85,17 @@ export default memo( let ratio = 750 / clientWidth let height = clientHeight * ratio num_half.current = Math.ceil(height / 2 / heightItem) + console.log('num_half::', num_half) init() }) .exec() }) - }) + }, []) //二级面料系列分类 const [openClass, setOpenClass] = useState(false) const [classList, setClassList] = useState([]) - const [classId, setClassId] = useState(0) + const [classId, setClassId] = useState(-1) const { fetchData } = GetClassList() const getClassData = async (id) => { let res = await fetchData({ id }) @@ -111,7 +112,7 @@ export default memo( const getSelectClass = (id) => { selectClass?.(id) - setClassId(id) + setClassId(() => id) } return ( diff --git a/src/pages/details/components/orderCount/index.tsx b/src/pages/details/components/orderCount/index.tsx index cd90c9c..955e8e8 100644 --- a/src/pages/details/components/orderCount/index.tsx +++ b/src/pages/details/components/orderCount/index.tsx @@ -302,7 +302,7 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param height={400} /* 列表的高度 */ width='100%' /* 列表的宽度 */ itemData={list} /* 渲染列表的数据 */ - itemCount={list.length + 1} /* 渲染列表的长度 */ + itemCount={list.length} /* 渲染列表的长度 */ itemSize={100} /* 列表单项的高度 */ overscanCount={1}> {Rows} diff --git a/src/pages/details/index.module.scss b/src/pages/details/index.module.scss index cf0dee8..9b238eb 100644 --- a/src/pages/details/index.module.scss +++ b/src/pages/details/index.module.scss @@ -69,7 +69,7 @@ grid-template-columns: 50% 50%; grid-template-rows: auto auto auto; grid-template-areas: 'a b' 'c d' 'e e'; - font-size: 26px; + font-size: $font_size_medium; color: $color_font_three; background-color: rgba(247, 247, 247, 0.6); border-radius: 8px; @@ -79,6 +79,7 @@ .des_text { display: flex; margin-bottom: 24px; + font-size: 26px; &:nth-child(5) { grid-area: e; } diff --git a/src/pages/index/components/productClass/index.module.scss b/src/pages/index/components/productClass/index.module.scss index 8e3c8d2..e124093 100644 --- a/src/pages/index/components/productClass/index.module.scss +++ b/src/pages/index/components/productClass/index.module.scss @@ -1,20 +1,28 @@ +.class_main { + position: relative; + height: 100%; +} .product_class_main_line { width: 100%; height: 80px; - position: relative; - display: flex; - align-items: center; + position: absolute; + top: 0; + left: 0; + // display: flex; + // align-items: center; margin-bottom: 20px; background-color: #fff; .product_class_scroll { - padding: 0 88px 0 19px; box-sizing: border-box; + padding: 6px 90px 0 20px; .product_class_list { white-space: nowrap; display: flex; box-sizing: border-box; .product_class_item { - padding: 10px 20px; + height: 56px; + line-height: 56px; + padding: 0 15px; background: #f5f5f5; border-radius: 29px; display: flex; @@ -25,9 +33,7 @@ box-sizing: border-box; max-width: 260px; // @include common_ellipsis; - &:nth-last-child(n + 1) { - margin-right: 16px; - } + margin: 0 8px 16px 8px; } .product_class_item_selected { border: 1px solid #3c78f4; @@ -62,7 +68,9 @@ width: 100%; height: 100%; box-sizing: border-box; - position: relative; + position: absolute; + top: 0; + left: 0; .product_class_block_con { max-height: 500px; background-color: #fff; @@ -72,13 +80,20 @@ .product_class_scroll { box-sizing: border-box; max-height: 500px; - padding: 15px 20px 0 10px; + padding: 0 20px; + padding: 6px 20px 0 20px; .product_class_list { - display: flex; - flex-wrap: wrap; + // display: flex; + // flex-wrap: wrap; box-sizing: border-box; + display: grid; + grid-template-columns: auto auto auto; .product_class_item { - padding: 10px 20px; + width: 169px; + height: 56px; + line-height: 56px; + text-align: center; + padding: 0 15px; background: #f5f5f5; border-radius: 29px; display: flex; @@ -86,15 +101,16 @@ justify-content: center; font-size: 24px; color: rgba(0, 0, 0, 0.8); - margin: 0 8px 20px 8px; + margin: 0 8px 16px 8px; box-sizing: border-box; max-width: 260px; - // @include common_ellipsis(1); + @include common_ellipsis(1); } .product_class_item_selected { border: 1px solid #3c78f4; color: #3c78f4; background: #ecf2ff; + box-sizing: border-box; } } } diff --git a/src/pages/index/components/productClass/index.tsx b/src/pages/index/components/productClass/index.tsx index 281a4e8..0b40391 100644 --- a/src/pages/index/components/productClass/index.tsx +++ b/src/pages/index/components/productClass/index.tsx @@ -1,7 +1,7 @@ import { ScrollView, Text, View } from '@tarojs/components' import styles from './index.module.scss' import classnames from 'classnames' -import { useEffect, useMemo, useState } from 'react' +import { memo, useCallback, useEffect, useMemo, useState } from 'react' type Param = { open: boolean @@ -15,27 +15,31 @@ type ParamProduct = Omit export default (option: Param) => { const { open = false, onOpenClick, onSelect, list, defaultSelectId } = option - const getSelect = (id) => { + const getSelect = useCallback((id) => { onSelect?.(id) - } + }, []) + const openClick = useCallback((val) => { + onOpenClick?.(val) + }, []) return ( <> - {open ? ( - onOpenClick?.(val)}> - ) : ( - onOpenClick?.(val)}> - )} + + + + ) } -const ProductClassLine = (option: ParamProduct) => { - const { onOpenClick, defaultSelectId = -1, onSelect, list = [] } = option +const ProductClassLine = memo((option: ParamProduct) => { + const { onOpenClick, defaultSelectId = 0, onSelect, list = [] } = option const [selectInfo, setSelectInfo] = useState({ - selected: -1, //当前选中的id + selected: 0, //当前选中的id tabId: 0, //需要滚动到的id }) + console.log('刷新了') + useEffect(() => { let data: { item: any; index: number } = { item: null, index: 0 } list?.filter((item, index) => { @@ -45,6 +49,7 @@ const ProductClassLine = (option: ParamProduct) => { }) if (data.item) { const num = data.index > 0 ? data.index - 1 : 0 + console.log('获取数据::', list[num].id) setSelectInfo((e) => ({ ...e, tabId: list[num].id, selected: data.item.id })) } }, [defaultSelectId]) @@ -74,11 +79,11 @@ const ProductClassLine = (option: ParamProduct) => { ) -} +}) -const ProductClassBlock = (option: ParamProduct) => { - const { onOpenClick, defaultSelectId = -1, onSelect, list = [] } = option - const [selectInfo, setSelectInfo] = useState(-1) +const ProductClassBlock = (option: ParamProduct & { open: boolean }) => { + const { onOpenClick, defaultSelectId = 0, onSelect, list = [], open } = option + const [selectInfo, setSelectInfo] = useState(0) useEffect(() => { setSelectInfo(defaultSelectId) @@ -89,24 +94,26 @@ const ProductClassBlock = (option: ParamProduct) => { onSelect?.(item.id) } return ( - - - - - {list?.map((item) => ( - clickEvent(item)}> - {item.name} - - ))} + <> + + + + + {list?.map((item) => ( + clickEvent(item)}> + {item.name} + + ))} + + + onOpenClick?.(false)}> + 点击收起 - - onOpenClick?.(false)}> - 点击收起 + onOpenClick?.(false)}> - onOpenClick?.(false)}> - + ) } diff --git a/src/pages/order/components/scanPay/index.tsx b/src/pages/order/components/scanPay/index.tsx index 6e0b784..d3b114e 100644 --- a/src/pages/order/components/scanPay/index.tsx +++ b/src/pages/order/components/scanPay/index.tsx @@ -191,7 +191,7 @@ export default memo(({ show = true, onClose, company, orderInfo }: Param) => { {(state.loading && ) || ( - + )} diff --git a/src/pages/userEdit/index.tsx b/src/pages/userEdit/index.tsx index 5a45875..9f988d2 100644 --- a/src/pages/userEdit/index.tsx +++ b/src/pages/userEdit/index.tsx @@ -170,9 +170,6 @@ export default () => { 点击编辑头像 - - 个人资料 - (ModifyIcknameEl.current as any).setModalShow(true)} data={(formData as any)?.user_name} @@ -184,7 +181,6 @@ export default () => { {(formData as any)?.phone ? ( {(formData as any)?.phone} - 已绑定 ) : (