xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎈 perf(完成优化):

Browse Source
This commit is contained in:
czm 2022-11-25 14:23:22 +08:00
parent 12e70ce8ae
commit 48f054517f
10 changed files with 105 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
config/index.js
View File

@ -60,7 +60,9 @@ const config = {
postcss: {
pxtransform: {
enable: true,
config: {},
config: {
onePxTransform: false,
},
},
url: {
enable: true,

17
src/components/LabAndImg/index.tsx
View File

@ -19,7 +19,7 @@ type Param = {
name?: string
}
export default memo(({ value, onClick, showStatus = false, round = false, name = '' }: Param) => {
const [imgs, setImgs] = useState<string[]>([])
const [imgs, setImgs] = useState<string>('')
//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 (
<>
<View className={styles.labAndImg_main} style={{ borderRadius: round ? '50%' : '' }} onClick={() => onShowLabAndImg()}>
{value.texture_url && <Image mode='aspectFill' src={imgs[0]} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '' }}></Image>}
{value.texture_url && (
<Image
mode='aspectFill'
src={imgs}
onError={(e) => checkLoad(e)}
className={styles.labAndImg_image}
style={{ borderRadius: round ? '50%' : '' }}></Image>
)}
{!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '' }}></View>}
{!value.texture_url && !rgbStyle && (
<Image mode='aspectFill' src={formatImgUrl('')} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '' }}></Image>

13
src/components/sideBar/index.tsx
View File

@ -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 (

2
src/pages/details/components/orderCount/index.tsx
View File

@ -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}

9
src/pages/details/index.module.scss
View File

@ -66,7 +66,9 @@
}
.con {
display: grid;
grid-template-columns: auto auto;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto auto;
grid-template-areas: 'a b' 'c d' 'e e';
font-size: $font_size_medium;
color: $color_font_three;
background-color: rgba(247, 247, 247, 0.6);
@ -77,6 +79,10 @@
.des_text {
display: flex;
margin-bottom: 24px;
font-size: 26px;
&:nth-child(5) {
grid-area: e;
}
text {
flex: 1;
color: #333333;
@ -95,6 +101,7 @@
.title {
color: rgba(0, 0, 0, 0.8);
font-weight: 500;
font-size: 28px;
}
.list {
margin-top: 30px;

2
src/pages/details/index.tsx
View File

@ -247,7 +247,7 @@ export default (props: Params) => {
<View className={styles.customer_service}>
<View className={classnames('iconfont icon-kefu', styles.miconfont)}></View>
<View className={styles.text}>
客服
询货/咨询
<Button
className={styles.wxBtn}
openType='contact'

47
src/pages/index/components/productClass/index.module.scss
View File

@ -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,14 +33,13 @@
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;
color: #3c78f4;
background: #ecf2ff;
box-sizing: border-box;
}
}
}
@ -61,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;
@ -71,13 +80,20 @@
.product_class_scroll {
box-sizing: border-box;
max-height: 500px;
padding: 20px 20px 0 20px;
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;
@ -85,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;
}
}
}

71
src/pages/index/components/productClass/index.tsx
View File

@ -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,29 +15,31 @@ type ParamProduct = Omit<Param, 'open'>
export default (option: Param) => {
const { open = false, onOpenClick, onSelect, list, defaultSelectId } = option
// const [defaultSelectIded, setDefaultSelectIded] = useState(-1)
const getSelect = (id) => {
// setDefaultSelectIded(id)
const getSelect = useCallback((id) => {
onSelect?.(id)
}
}, [])
const openClick = useCallback((val) => {
onOpenClick?.(val)
}, [])
return (
<>
{open ? (
<ProductClassBlock list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassBlock>
) : (
<ProductClassLine list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={(val) => onOpenClick?.(val)}></ProductClassLine>
)}
<View className={styles.class_main}>
<ProductClassLine list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={openClick}></ProductClassLine>
<ProductClassBlock open={open} list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={openClick}></ProductClassBlock>
</View>
</>
)
}
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) => {
@ -47,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])
@ -76,11 +79,11 @@ const ProductClassLine = (option: ParamProduct) => {
</View>
</View>
)
}
})
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)
@ -91,24 +94,26 @@ const ProductClassBlock = (option: ParamProduct) => {
onSelect?.(item.id)
}
return (
<View className={styles.product_class_main_block}>
<View className={styles.product_class_block_con}>
<ScrollView scrollY className={styles.product_class_scroll}>
<View className={styles.product_class_list}>
{list?.map((item) => (
<View
className={classnames(styles.product_class_item, item.id == selectInfo ? styles.product_class_item_selected : '')}
onClick={() => clickEvent(item)}>
{item.name}
</View>
))}
<>
<View className={styles.product_class_main_block} style={{ display: open ? 'block' : 'none' }}>
<View className={styles.product_class_block_con}>
<ScrollView scrollY className={styles.product_class_scroll}>
<View className={styles.product_class_list}>
{list?.map((item) => (
<View
className={classnames(styles.product_class_item, item.id == selectInfo ? styles.product_class_item_selected : '')}
onClick={() => clickEvent(item)}>
{item.name}
</View>
))}
</View>
</ScrollView>
<View className={styles.product_class_close} onClick={() => onOpenClick?.(false)}>
点击收起<Text className={classnames('iconfont icon-a-moreback', styles.product_class_close_icon)}></Text>
</View>
</ScrollView>
<View className={styles.product_class_close} onClick={() => onOpenClick?.(false)}>
点击收起<Text className={classnames('iconfont icon-a-moreback', styles.product_class_close_icon)}></Text>
</View>
<View className={styles.product_class_block_mask} onClick={() => onOpenClick?.(false)}></View>
</View>
<View className={styles.product_class_block_mask} onClick={() => onOpenClick?.(false)}></View>
</View>
</>
)
}

2
src/pages/order/components/scanPay/index.tsx
View File

@ -191,7 +191,7 @@ export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
<View className={styles.scanPay_list}>
{(state.loading && <LoadingCard />) || (
<ScrollView scrollY className={styles.scanPay_list}>
<Image mode='widthFix' src={payCodeImage} onClick={showImage}></Image>
<Image mode='widthFix' src={payCodeImage} onClick={showImage} showMenuByLongpress={true}></Image>
</ScrollView>
)}
</View>

7
src/pages/userEdit/index.tsx
View File

@ -170,9 +170,6 @@ export default () => {
<View>点击编辑头像</View>
</View>
<View className='user-edit-content'>
<View className='user-edit-content-title'>
<Text /> 个人资料
</View>
<UserEditList
onClick={() => (ModifyIcknameEl.current as any).setModalShow(true)}
data={(formData as any)?.user_name}
@ -184,7 +181,6 @@ export default () => {
{(formData as any)?.phone ? (
<View className='user-edit-content-phone'>
<View>{(formData as any)?.phone}</View>
<Text>已绑定</Text>
</View>
) : (
<Button className='user-edit-content-bindphone' openType='getPhoneNumber' onGetPhoneNumber={mGetPhoneNumber}>
@ -194,9 +190,6 @@ export default () => {
</UserEditList>
</View>
<View className='user-edit-content'>
<View className='user-edit-content-title'>
<Text /> 组织资料
</View>
<UserEditList
onClick={() => (ModifyCompanyNameEl.current as any).setModalShow(true)}
data={(formData as any)?.company_name}