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-26 17:28:04 +08:00
parent ac260696f8
commit c9e7e597af
5 changed files with 79 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/constant.js
View File

@ -1,4 +1,4 @@
export const BASE_URL = CURRENT_BASE_URL
// export const BASE_URL = CURRENT_BASE_URL
// export const BASE_URL = `http://192.168.0.75:50001/lymarket`
// export const BASE_URL = `http://192.168.0.89:50001/lymarket`
// export const BASE_URL = `http://10.0.0.5:50001/lymarket`
@ -12,7 +12,7 @@ export const BASE_URL = CURRENT_BASE_URL
// export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境
// export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境
// export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
// export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添
export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添
// export const BASE_URL = `http://192.168.1.22:50002/lymarket` // 婷
// export const BASE_URL = `http://192.168.1.42:50002/lymarket` // 杰

13
src/components/shopCart/components/productItem/index.tsx
View File

@ -1,4 +1,4 @@
import { View } from '@tarojs/components'
import { CustomWrapper, View } from '@tarojs/components'
import { memo, useCallback, useMemo } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
@ -12,7 +12,6 @@ type param = {
sale_model: saleModeType
onChangeSelect: (val: any) => any
onChangeCount: (val: any) => any
item: any
}
@ -56,10 +55,14 @@ export default memo((props: param) => {
const formatUnit = useCallback((item) => {
return item.sale_mode == 0 ? '条' : '米'
}, [])
const model_status = useMemo(() => {
return sale_model != item.sale_mode
}, [item])
return (
<View className={classnames(styles.product_item, sale_model != item.sale_mode && styles.no_product_item_select)} onClick={clickProduct}>
<View className={classnames(styles.product_item, model_status && styles.no_product_item_select)} onClick={clickProduct}>
<View className={styles.checkbox} catchMove>
<MCheckbox status={item.selected} onSelect={selectCallBack} onClose={colseCallBack} disabled={sale_model != item.sale_mode} />
<MCheckbox status={item.selected} onSelect={selectCallBack} onClose={colseCallBack} disabled={model_status} />
</View>
<View className={styles.img}>
<LabAndImg value={rga} showStatus={false} onClick={getLabAndImg} />
@ -88,7 +91,7 @@ export default memo((props: param) => {
unit={formatUnit(item)}
minNum={item.minNum}
maxNum={item.maxNum}
disabled={sale_model != item.sale_mode}
disabled={model_status}
/>
</View>
</View>

86
src/pages/details/components/counter/index.module.scss
View File

@ -1,46 +1,44 @@
.main{
.main {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.plus {
color: $color_main;
width: 46px;
height: 46px;
text-align: center;
line-height: 43px;
font-size: 50px;
background-color: $color_main;
color: #fff;
border-radius: 8px;
}
.reduce {
font-size: 50px;
width: 46px;
height: 46px;
text-align: center;
line-height: 43px;
color: #007aff;
}
.input {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.plus{
color: $color_main;
width: 46px;
height: 46px;
text-align: center;
line-height: 43px;
font-size: 50px;
background-color: $color_main;
color: #fff;
border-radius: 8px;
align-items: flex-end;
background-color: #fff;
padding: 5px 10px;
box-sizing: border-box;
width: 106px;
border-radius: 10px;
input {
font-size: $font_size_medium;
// text-align: right;
padding-right: 10px;
}
.reduce {
font-size: 50px;
width: 46px;
height: 46px;
text-align: center;
line-height: 43px;
color:#007AFF;
}
.input{
display: flex;
align-items: flex-end;
background-color: #fff;
padding: 5px 10px;
box-sizing: border-box;
width: 106px;
border-radius: 10px;
input{
font-size: $font_size_medium;
text-align: right;
padding-right: 10px;
}
}
.unit{
font-size: $font_size_min;
color: $color_font_two;
}
}
}
.unit {
font-size: $font_size_min;
color: $color_font_two;
}
}

4
src/pages/details/components/orderCount/index.module.scss
View File

@ -69,7 +69,7 @@
.product_color_con {
flex: 1;
height: 0;
padding-bottom: 151px;
margin-bottom: calc(150px - env(safe-area-inset-bottom));
}
.color_con {
.virtual_list {
@ -94,6 +94,7 @@
.title {
font-size: $font_size_big;
font-weight: 700;
@include common_ellipsis();
}
.num {
font-size: $font_size;
@ -147,6 +148,7 @@
}
.buy_btn {
width: 100%;
height: 150px;
padding: 0 40px;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

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

@ -2,7 +2,7 @@ import { View, Text } from '@tarojs/components'
import Popup from '@/components/popup'
import LoadingCard from '@/components/loadingCard'
import Search from '@/components/search'
import Counter from '../counter'
import Counter from '@/components/counter'
import Big from 'big.js'
import classnames from 'classnames'
import styles from './index.module.scss'
@ -239,12 +239,11 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
)) || (
<View className={styles.btn_count}>
<Counter
otherData={item}
onBlue={getInputValue}
onBlue={(num) => getInputValue(num, item)}
defaultNum={item.count}
step={selectList[selectIndex].step}
digits={selectList[selectIndex].digits}
onClickBtn={getInputValue}
onClickBtn={(num) => getInputValue(num, item)}
unit={selectList[selectIndex].unit}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
@ -258,6 +257,24 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
)
})
const [virtualHeight, setVirtualheight] = useState(400)
useEffect(() => {
if (!show) return
setTimeout(() => {
Taro.nextTick(() => {
let query = Taro.createSelectorQuery()
query
.select('#product_color_con')
.boundingClientRect((rect) => {
console.log('rect::', rect)
let clientHeight = rect.height
setVirtualheight(() => clientHeight)
})
.exec()
})
}, 100)
}, [show])
return (
<View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
@ -293,13 +310,13 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
{!searchShow && <View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
</View>
<View className={styles.product_color_con}>
<View className={styles.product_color_con} id='product_color_con'>
{list.length <= 0 && colorState.loading && <LoadingCard />}
{list.length > 0 && !colorState.loading && (
<View className={styles.color_con}>
<VirtualList
className={styles.virtual_list}
height={400} /* 列表的高度 */
height={virtualHeight} /* 列表的高度 */
width='100%' /* 列表的宽度 */
itemData={list} /* 渲染列表的数据 */
itemCount={list.length} /* 渲染列表的长度 */
@ -324,7 +341,7 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
</View>
</View>
</View>
<View className='common_safe_area_y'></View>
{/* <View className='common_safe_area_y'></View> */}
</Popup>
<View>
<LabAndImgShow value={labImageValue} show={showLabImage} onClose={closeLabImgShow} />