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

✨ feat(发货列表): 初步完成发货列表UI界面

Browse Source
This commit is contained in:
xuan
2022-09-19 19:32:47 +08:00
parent b9c3076f5d
commit fb589f120f
18 changed files with 683 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/shopping/components/shoppingCartItem/index.tsx
+22 -26
View File
@@ -1,5 +1,5 @@
import { Text, View } from '@tarojs/components'
import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'
import { FC, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import { formatPriceDiv } from '@/common/format'
@@ -27,9 +27,8 @@ const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
)
})
export default memo((props: PropsType) => {
// const { handleSelectedItem } = useLayoutBlockContext()
export default memo<PropsType>((props) => {
console.log('props==>', props)
const { itemData, selectedId } = props
console.log('重新渲染 shoppingCartItem', selectedId)
@@ -45,25 +44,22 @@ export default memo((props: PropsType) => {
setSelect(type)
}
const [mockList, setMockList] = useState(
{
0: [
{ id: 0, sale_mode: 0, roll: 5, length: 0, checked: true },
{ id: 1, sale_mode: 0, roll: 6, length: 0, checked: false },
{ id: 2, sale_mode: 0, roll: 7, length: 0, checked: true },
],
1: [
{ id: 5, sale_mode: 1, roll: 0, length: 77700, checked: false },
{ id: 6, sale_mode: 1, roll: 0, length: 7600, checked: true },
{ id: 7, sale_mode: 1, roll: 0, length: 400, checked: true },
],
2: [
{ id: 8, sale_mode: 2, roll: 0, length: 11100, checked: false },
{ id: 9, sale_mode: 2, roll: 0, length: 8540, checked: true },
],
}
)
// const [mockList, setMockList] = useState(itemData?.color_list)
const [mockList, setMockList] = useState({
0: [
{ id: 0, sale_mode: 0, roll: 5, length: 0, checked: true },
{ id: 1, sale_mode: 0, roll: 6, length: 0, checked: false },
{ id: 2, sale_mode: 0, roll: 7, length: 0, checked: true },
],
1: [
{ id: 5, sale_mode: 1, roll: 0, length: 77700, checked: false },
{ id: 6, sale_mode: 1, roll: 0, length: 7600, checked: true },
{ id: 7, sale_mode: 1, roll: 0, length: 400, checked: true },
],
2: [
{ id: 8, sale_mode: 2, roll: 0, length: 11100, checked: false },
{ id: 9, sale_mode: 2, roll: 0, length: 8540, checked: true },
],
})
const handleChecked = useCallback(
(current) => {
@@ -120,11 +116,11 @@ export default memo((props: PropsType) => {
console.log('itemData===>', itemData)
}
const {isManager} = useContext(ShoppingContext)
// const { isManager } = useContext(ShoppingContext)
return (
<LayoutBlock circle customClassName={classnames(styles.layout, itemData?.purchaser_id === selectedId ? styles.selected : '')} onClick={handleClickLayout}>
<MCheckbox customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false} hidden={isManager}>
<MCheckbox customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false}>
<View className='flex-row justify-between' onClick={handleOpenDetail}>
<View className={styles.topItem}>
<View className='flex-row items-center'>
@@ -135,7 +131,7 @@ export default memo((props: PropsType) => {
</View>
<View className={styles.summary}>
<Text>
已选 {mockList[selected].filter(item=>item.checked).length} 种面料，1 个颜色，共 {selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
已选 {mockList[selected].filter((item) => item.checked).length} 种面料，1 个颜色，共 {selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
</Text>
</View>
</View>
src/pages/shopping/index.tsx
+23 -19
View File
@@ -33,7 +33,7 @@ export const Shopping: FC = () => {
// 管理
const onStartToManage = () => {
setManage((isManage) => !isManage)
ShoppingContext.Consumer
// ShoppingContext.Consumer
}
const [selectedAmount, setSelectedAmount] = useState(0)
@@ -59,28 +59,31 @@ export const Shopping: FC = () => {
}, [shoppingCartData, state])
useDidShow(() => {
fetchData()
(async () => {
await fetchData()
let query = Taro.createSelectorQuery()
console.log('query', query)
query.select('#shoppingContainer').boundingClientRect()
query.select('#topBar').boundingClientRect()
query.select('#bottomBar').boundingClientRect()
query.exec((res) => {
console.log('res==>', res)
const containerHeight = res[0].height
const topBarHeight = res[1].height
const bottomBarHeight = res[2].height
const listHeight = containerHeight - topBarHeight - bottomBarHeight
setListHeight(listHeight + 'px')
})
})()
})
useEffect(() => {
setShoppingCartData({ list: state.data, total: state.data.length })
}, [state])
useEffect(() => {
let query = Taro.createSelectorQuery()
console.log(query)
query.select('#shoppingContainer').boundingClientRect()
query.select('#topBar').boundingClientRect()
query.select('#bottomBar').boundingClientRect()
query.exec((res) => {
const containerHeight = res[0].height
const topBarHeight = res[1].height
const bottomBarHeight = res[2].height
const listHeight = containerHeight - topBarHeight - bottomBarHeight
console.log('res==>', listHeight)
setListHeight(listHeight + 'px')
})
}, [])
useDidShow(() => {
})
const [selectedId, setSelectedId] = useState<number>()
@@ -105,8 +108,9 @@ export const Shopping: FC = () => {
<View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeight }}>
<ShoppingContext.Provider value={{isManager:false}}>
<InfiniteScroll statusMore={statusMore}>
{!!shoppingCartData.list?.length &&
shoppingCartData.list?.map((item, index) => {
{!!shoppingCartData?.list?.length &&
shoppingCartData?.list?.map((item, index) => {
console.log('item==>', item)
return <ItemList itemData={item} key={index} selectedId={selectedId}></ItemList>
})}
</InfiniteScroll>