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

🦄 refactor:购物车添加虚拟列表

Browse Source
This commit is contained in:
Haiyi
2022-09-07 14:42:31 +08:00
parent d8c8c46a83
commit caf7066663
14 changed files with 805 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/closeBtn/index.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export default memo(({onClose, styleObj = {}}:Params) => {
className={style.icon_a_cuowuwrong_self}
onClick={onClose}
>
<Text className={`iconfont icon-qingkong ${style.icon_a_btn}`}></Text>
<Text className={`iconfont icon-guanbi ${style.icon_a_btn}`}></Text>
</View>
)
})
src/components/goodsItem/index.tsx
+26 -9
View File
@@ -5,7 +5,7 @@ import classnames from "classnames";
interface props {
clickAdd: (any) => void,
onInputEven: (a: any, c: any) => void,
// onInputEven?: (a: any, c: any) => void,
clickReduce: (any) => void,
handPlus: (any) => void,
modeFont?: number
@@ -18,38 +18,53 @@ interface props {
code?: string,
rgb?: { r: number, g: number, b: number },
name?: string,
roll?: number | string
roll?: number | string,
buyNums?: number | string,
}
}
export default memo((props: props) => {
const [value, setValue] = useState<any>({ count: props.value.nums })
const onInputEven = (e) => {
let res = e.detail.value
if (props.modeFont !== 2) {
if (Number(res) == 0 || Number(res) < 1) {
setValue({ count: 1 })
}
} else {
if (Number(res) == 0 || Number(res) < 3) {
setValue({ count: 3 })
}
}
}
const type = useMemo(() => {
if (props.modeFont === 0) {
return 'number'
} else {
return 'type'
return 'digit'
}
}, [props.modeFont])
return (
<View className={styles.goodsBox}>
{
props.value?.rgb?.r == 0 && props.value?.rgb?.g == 0 && props.value?.rgb?.b == 0 && <Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
props?.value?.rgb?.r == 0 && props?.value?.rgb?.g == 0 && props?.value?.rgb?.b == 0 && <Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
}
{
(props.value?.rgb?.r != 0 || props.value?.rgb?.g != 0 || props.value?.rgb?.b != 0) &&
<View className={styles.pic} style={{ backgroundColor: `rgb(${props.value.rgb?.r} ${props.value.rgb?.g} ${props.value.rgb?.b})` }}></View>
(props?.value?.rgb?.r != 0 || props?.value?.rgb?.g != 0 || props?.value?.rgb?.b != 0) &&
<View className={styles.pic} style={{ backgroundColor: `rgb(${props?.value?.rgb?.r} ${props?.value?.rgb?.g} ${props?.value.rgb?.b})` }}></View>
}
<View className={styles.rightGoodbox}>
<View className={styles.leftFontsbox}>
<View className={styles.title}>{props.value.code} {props.value.name}环保黑</View>
<View className={styles.title}>{props.value?.code} {props.value?.name}环保黑</View>
{/* <View className={styles.productName}>0681# 26S全棉平纹</View> */}
<View className={styles.productNums}>剩:{props.value?.roll}件</View>
</View>
<View className={styles.rightFontsbox}>
<View className={styles.money}>¥{props.modeFont === 0 ? Number(props.value?.bulk_price) / 100 : props.modeFont === 1 ? Number(props.value?.length_cut_price) / 100 : Number(props.value?.weight_cut_price) / 100}{props.modeFont === 0 ? '/Kg' : '/m'}</View>
<View className={styles.money}>¥{props?.modeFont === 0 ? Number(props.value?.bulk_price) / 100 : props.modeFont === 1 ? Number(props.value?.length_cut_price) / 100 : Number(props.value?.weight_cut_price) / 100}{props.modeFont === 0 ? '/Kg' : '/m'}</View>
{
props.value.showInput && <View className={styles.inputBox}>
<View className={styles.reduceBox} onClick={() => { props.clickReduce?.(props.value) }}>
@@ -57,7 +72,9 @@ export default memo((props: props) => {
</View>
</View>
<View className={styles.numsBox}>
<Input type={type as any} value={props.value.nums} onInput={($event) => props.onInputEven($event, props.value)}></Input>
<Input type={type as any} value={value.count} onInput={onInputEven}></Input>
{/* <Input type={type as any} value={value.count} onInput={($event) => onInputEven($event, props.value)}></Input> */}
</View>
<View className={styles.addBox} onClick={() => { props.handPlus?.(props.value) }}>
+
src/components/shoppingCart/index.module.scss
+14 -7
View File
@@ -76,7 +76,7 @@
display: flex;
margin-bottom: 24px;
align-items: center;
padding-bottom: 10px;
.kingFont {
font-size: 28px;
@@ -91,7 +91,7 @@
width: 148px;
height: 30px;
border-radius: 4px;
border: 1px solid #E42945;
border: 1PX solid #E42945;
font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
@@ -106,15 +106,22 @@
margin-bottom: 32px;
}
.scrollview {
height: 500px;
.scrollviewBig {
.scrollview {
height: 300px;
.kongBox {
height: 181px;
width: 100%;
.kongBox {
height: 181px;
width: 100%;
}
}
.kongOne {
height: 100px;
}
}
.posBox {
width: 100%;
position: fixed;
src/components/shoppingCart/index.tsx
+32 -17
View File
@@ -6,7 +6,7 @@ import classnames from "classnames";
import Popup from '@/components/popup'
import Goods from "@/components/goodsItem"
import BottomCustomer from "@/components/BottomCustomer"
import VirtualList from '@tarojs/components/virtual-list'
interface prosObj {
showPopup?: false | true,
@@ -86,9 +86,20 @@ export default memo(forwardRef((props: prosObj, ref) => {
return s;
}, [goodList])
// onInputEven={(e, obj) => oninputEvent?.(e, obj)}
const rows = memo(({ id, index, style, data }: any) => {
let item = data[index]
return (
<>
<Goods modeFont={(modeFont as number)}
handPlus={(item) => handPlus?.(item)}
value={item || {}}
clickAdd={(item) => addNums?.(item)}
clickReduce={(item) => { reduceNums?.(item) }}></Goods>
</>
)
})
return (
<Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}>
@@ -114,20 +125,21 @@ export default memo(forwardRef((props: prosObj, ref) => {
<View className={styles.searchBox}>
<Search placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
</View>
<ScrollView
className={styles.scrollview}
scroll-y={true}
>
<View className={styles.scrollviewBig}>
<VirtualList
className={styles.scrollview}
height={300} /* 列表的高度 */
width='100%' /* 列表的宽度 */
itemData={goodList} /* 渲染列表的数据 */
itemCount={goodList.length + 0} /* 渲染列表的长度 */
itemSize={100} /* 列表单项的高度 */
overscanCount={1}>
{rows}
</VirtualList>
<View className={styles.kongOne}></View>
</View>
{
goodList.map((item, index) => {
return (
<Goods modeFont={(modeFont as number)} handPlus={(item) => handPlus?.(item)} key={index} value={item} onInputEven={(e, obj) => oninputEvent?.(e, obj)} clickAdd={(item) => addNums?.(item)} clickReduce={(item) => { reduceNums?.(item) }}></Goods>
)
})
}
<View className={styles.kongBox}></View>
</ScrollView>
<View className={styles.posBox}>
<BottomCustomer clientName={clientName} clientId={clientId} isDisabled={selectTotal > 0 && clientName !== '' ? false : true} handSure={() => { handSure() }}></BottomCustomer>
</View>
@@ -135,4 +147,7 @@ export default memo(forwardRef((props: prosObj, ref) => {
</Popup>
)
}))
}))