🎈 perf(优化加入购物车):
This commit is contained in:
parent
ac260696f8
commit
c9e7e597af
@ -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.75:50001/lymarket`
|
||||||
// export const BASE_URL = `http://192.168.0.89:50001/lymarket`
|
// export const BASE_URL = `http://192.168.0.89:50001/lymarket`
|
||||||
// export const BASE_URL = `http://10.0.0.5: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://dev.zzfzyc.com/lymarket` // 开发环境
|
||||||
// export const BASE_URL = `https://www.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.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.22:50002/lymarket` // 婷
|
||||||
// export const BASE_URL = `http://192.168.1.42:50002/lymarket` // 杰
|
// export const BASE_URL = `http://192.168.1.42:50002/lymarket` // 杰
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { View } from '@tarojs/components'
|
import { CustomWrapper, View } from '@tarojs/components'
|
||||||
import { memo, useCallback, useMemo } from 'react'
|
import { memo, useCallback, useMemo } from 'react'
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import styles from './index.module.scss'
|
import styles from './index.module.scss'
|
||||||
@ -12,7 +12,6 @@ type param = {
|
|||||||
sale_model: saleModeType
|
sale_model: saleModeType
|
||||||
onChangeSelect: (val: any) => any
|
onChangeSelect: (val: any) => any
|
||||||
onChangeCount: (val: any) => any
|
onChangeCount: (val: any) => any
|
||||||
|
|
||||||
item: any
|
item: any
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -56,10 +55,14 @@ export default memo((props: param) => {
|
|||||||
const formatUnit = useCallback((item) => {
|
const formatUnit = useCallback((item) => {
|
||||||
return item.sale_mode == 0 ? '条' : '米'
|
return item.sale_mode == 0 ? '条' : '米'
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
const model_status = useMemo(() => {
|
||||||
|
return sale_model != item.sale_mode
|
||||||
|
}, [item])
|
||||||
return (
|
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>
|
<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>
|
||||||
<View className={styles.img}>
|
<View className={styles.img}>
|
||||||
<LabAndImg value={rga} showStatus={false} onClick={getLabAndImg} />
|
<LabAndImg value={rga} showStatus={false} onClick={getLabAndImg} />
|
||||||
@ -88,7 +91,7 @@ export default memo((props: param) => {
|
|||||||
unit={formatUnit(item)}
|
unit={formatUnit(item)}
|
||||||
minNum={item.minNum}
|
minNum={item.minNum}
|
||||||
maxNum={item.maxNum}
|
maxNum={item.maxNum}
|
||||||
disabled={sale_model != item.sale_mode}
|
disabled={model_status}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
.main {
|
.main {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -21,7 +20,7 @@
|
|||||||
height: 46px;
|
height: 46px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 43px;
|
line-height: 43px;
|
||||||
color:#007AFF;
|
color: #007aff;
|
||||||
}
|
}
|
||||||
.input {
|
.input {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -33,7 +32,7 @@
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
input {
|
input {
|
||||||
font-size: $font_size_medium;
|
font-size: $font_size_medium;
|
||||||
text-align: right;
|
// text-align: right;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -42,5 +41,4 @@
|
|||||||
font-size: $font_size_min;
|
font-size: $font_size_min;
|
||||||
color: $color_font_two;
|
color: $color_font_two;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
@ -69,7 +69,7 @@
|
|||||||
.product_color_con {
|
.product_color_con {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 0;
|
height: 0;
|
||||||
padding-bottom: 151px;
|
margin-bottom: calc(150px - env(safe-area-inset-bottom));
|
||||||
}
|
}
|
||||||
.color_con {
|
.color_con {
|
||||||
.virtual_list {
|
.virtual_list {
|
||||||
@ -94,6 +94,7 @@
|
|||||||
.title {
|
.title {
|
||||||
font-size: $font_size_big;
|
font-size: $font_size_big;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
@include common_ellipsis();
|
||||||
}
|
}
|
||||||
.num {
|
.num {
|
||||||
font-size: $font_size;
|
font-size: $font_size;
|
||||||
@ -147,6 +148,7 @@
|
|||||||
}
|
}
|
||||||
.buy_btn {
|
.buy_btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
@ -2,7 +2,7 @@ import { View, Text } from '@tarojs/components'
|
|||||||
import Popup from '@/components/popup'
|
import Popup from '@/components/popup'
|
||||||
import LoadingCard from '@/components/loadingCard'
|
import LoadingCard from '@/components/loadingCard'
|
||||||
import Search from '@/components/search'
|
import Search from '@/components/search'
|
||||||
import Counter from '../counter'
|
import Counter from '@/components/counter'
|
||||||
import Big from 'big.js'
|
import Big from 'big.js'
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import styles from './index.module.scss'
|
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}>
|
<View className={styles.btn_count}>
|
||||||
<Counter
|
<Counter
|
||||||
otherData={item}
|
onBlue={(num) => getInputValue(num, item)}
|
||||||
onBlue={getInputValue}
|
|
||||||
defaultNum={item.count}
|
defaultNum={item.count}
|
||||||
step={selectList[selectIndex].step}
|
step={selectList[selectIndex].step}
|
||||||
digits={selectList[selectIndex].digits}
|
digits={selectList[selectIndex].digits}
|
||||||
onClickBtn={getInputValue}
|
onClickBtn={(num) => getInputValue(num, item)}
|
||||||
unit={selectList[selectIndex].unit}
|
unit={selectList[selectIndex].unit}
|
||||||
minNum={selectList[selectIndex].minNum}
|
minNum={selectList[selectIndex].minNum}
|
||||||
maxNum={selectList[selectIndex].maxNum}
|
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 (
|
return (
|
||||||
<View className={styles.shop_cart_main}>
|
<View className={styles.shop_cart_main}>
|
||||||
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
|
<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>}
|
{!searchShow && <View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
|
||||||
</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 && <LoadingCard />}
|
||||||
{list.length > 0 && !colorState.loading && (
|
{list.length > 0 && !colorState.loading && (
|
||||||
<View className={styles.color_con}>
|
<View className={styles.color_con}>
|
||||||
<VirtualList
|
<VirtualList
|
||||||
className={styles.virtual_list}
|
className={styles.virtual_list}
|
||||||
height={400} /* 列表的高度 */
|
height={virtualHeight} /* 列表的高度 */
|
||||||
width='100%' /* 列表的宽度 */
|
width='100%' /* 列表的宽度 */
|
||||||
itemData={list} /* 渲染列表的数据 */
|
itemData={list} /* 渲染列表的数据 */
|
||||||
itemCount={list.length} /* 渲染列表的长度 */
|
itemCount={list.length} /* 渲染列表的长度 */
|
||||||
@ -324,7 +341,7 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
|
|||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View className='common_safe_area_y'></View>
|
{/* <View className='common_safe_area_y'></View> */}
|
||||||
</Popup>
|
</Popup>
|
||||||
<View>
|
<View>
|
||||||
<LabAndImgShow value={labImageValue} show={showLabImage} onClose={closeLabImgShow} />
|
<LabAndImgShow value={labImageValue} show={showLabImage} onClose={closeLabImgShow} />
|
||||||
|
Loading…
x
Reference in New Issue
Block a user