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

电子商城测试版v4

Browse Source
This commit is contained in:
cheng
2022-07-05 20:32:37 +08:00
parent 29090350ef
commit 7a2dc0006f
19 changed files with 649 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/collection/collectionClass/index.module.scss
+7 -4
View File
@@ -20,7 +20,7 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 20px 0 20px;
padding: 20px 30px 0 30px;
font-size: 26px;
color: #707070;
.operation_check{
@@ -35,9 +35,12 @@
}
}
.operation_check_right{
Text{
color: #CCCCCC;
margin-right: 20px;
.operation_check_move{
color: #707070;
margin-right: 30px;
}
.operation_check_cancel{
color: #007AFF;
}
}
.class_list{
src/pages/collection/collectionClass/index.tsx
+45 -23
View File
@@ -11,6 +11,7 @@ import CreatePopup from "../components/createPopup";
import UpdatePopup from "../components/updatePopup";
import styles from './index.module.scss'
import MCheckbox from "@/components/checkbox";
import AddCollection from "@/components/addCollection";
export default () => {
@@ -20,7 +21,7 @@ export default () => {
const getFavoriteInfo = () => {
let arr:any[] = []
new Array(10).fill("").map((item, index) => {
arr.push({code: index})
arr.push({id:index, code: index})
})
setList(arr)
}
@@ -34,32 +35,53 @@ export default () => {
getFavoriteInfo()
}, [searchData])
//获取选中的id
const [ids, setIds] = useState<number[]>([])
const getSelectIds = useCallback((val) => {
setIds(() => val)
}, [])
//全选反选
const [selectStatus, setSelectStatus] = useState(false)
const selectCallBack = useCallback(() => {
setSelectStatus(() => true)
}, [])
const colseCallBack = useCallback(() => {
setSelectStatus(() => false)
}, [])
// useEffect(() => {
// if(list.length)
// setSelectStatus(ids.length == list.length)
// }, [ids, list])
const [collectionShow, setCollectionShow] = useState(false)
const closeCollection = useCallback(() => {
setCollectionShow(false)
}, [])
return (
<View className={styles.collection_main}>
<View className={styles.search}>
<Search style={{width: '100%'}} debounceTime={300} changeOnSearch={onSearch} placeholder="请输入面料关键词" />
</View>
<View className={styles.operation}>
<View className={styles.operation_check}>
<MCheckbox onSelect={() => selectCallBack()} onClose={() => colseCallBack()}/>
<Text>全选</Text>
</View>
<View className={styles.operation_check_right}>
<Text>移动到</Text>
<Text>取消收藏</Text>
</View>
</View>
<View className={styles.class_list}>
<Product productList={list}/>
</View>
const onAdd = () => {
}
return (
<View className={styles.collection_main}>
<View className={styles.search}>
<Search style={{width: '100%'}} debounceTime={300} changeOnSearch={onSearch} placeholder="请输入面料关键词" />
</View>
)
<View className={styles.operation}>
<View className={styles.operation_check}>
<MCheckbox status={selectStatus} onSelect={() => selectCallBack()} onClose={() => colseCallBack()}/>
<Text>全选</Text>
</View>
<View className={styles.operation_check_right}>
<Text className={styles.operation_check_move} onClick={() => setCollectionShow(true)}>移动到</Text>
<Text className={styles.operation_check_cancel}>取消收藏</Text>
</View>
</View>
<View className={styles.class_list}>
<Product productList={list} onSelectIds={getSelectIds} selectStatus={selectStatus}/>
</View>
<AddCollection show={collectionShow} onAdd={onAdd} onClose={closeCollection}/>
</View>
)
}
src/pages/collection/components/product/index.tsx
+43 -20
View File
@@ -5,54 +5,77 @@ import styles from './index.module.scss'
import { formatHashTag, formatImgUrl } from "@/common/fotmat"
import LabAndImg from "@/components/LabAndImg"
import MCheckbox from "@/components/checkbox";
import { useCallback, useEffect, useState } from "react"
import { useCallback, useEffect, useRef, useState } from "react"
type Params = {
desStatus?: true|false,
productList?: any[]
productList?: any[],
onSelectIds?: (val: number[]) => void
selectStatus?: false|true
}
export default ({desStatus = true, productList = []}:Params) => {
export default ({productList = [], onSelectIds, selectStatus = false}:Params) => {
const [list, setList] = useState<any[]>([])
useEffect(() => {
console.log('productList::', productList)
setList(() => [...productList])
},[productList])
useEffect(() => {
if(list.length) {
list.map(item => {
item.check = selectStatus
})
}
setList(() => [...list])
}, [selectStatus])
const onSelect = (item, e) => {
console.log('e:::', e)
const onChangeSelect = (item) => {
if(item.check) {
onClose(item)
} else {
onSelect(item)
}
}
//选中和取消选中
const onSelect = (item) => {
item.check = true
setList(() => ([...list]))
}
const onClose = (item, e) => {
const onClose = (item) => {
item.check = false
setList(() => ([...list]))
}
//监听数据变化
useEffect(() => {
let ids: number[] = []
list.map(item => {
if(item.check) ids.push(item.id)
})
onSelectIds?.(ids)
}, [list])
return (
<View className={styles.products_list}>
{list?.map(item => {
return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
<View className={styles.checkbox}>
<MCheckbox status={item.check} onSelect={() => onSelect(item, e)} onClose={() => onClose(item, e)}/>
return <View className={styles.products_item} onClick={() => onChangeSelect(item)}>
<View className={styles.checkbox} onClick={(e) => e.stopPropagation()}>
<MCheckbox status={item.check} onSelect={() => onSelect(item)} onClose={() => onClose(item)}/>
</View>
<View className={styles.item_img}>
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
<View className={styles.num}>{item.product_color_count}色</View>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>{formatHashTag(item.product_code, '')} </text>{item.product_name}</View>
<View className={styles.tag_list}>
<View className={styles.tag}>{item.width}</View>
<View className={styles.tag_g}>{item.weight_density}</View>
</View>
<View className={styles.introduce}>{item.component}</View>
{desStatus&&<View className={styles.des}>{item.describe}</View>}
<View className={styles.title}><text>{formatHashTag(item.product_code, '')} </text>{item.product_name}</View>
<View className={styles.tag_list}>
<View className={styles.tag}>{item.width}</View>
<View className={styles.tag_g}>{item.weight_density}</View>
</View>
<View className={styles.introduce}>{item.component}</View>
</View>
</View>
})}
<View className="common_safe_area_y"></View>
</View>
)
}
src/pages/collection/index.tsx
+1 -1
View File
@@ -143,7 +143,7 @@ export default () => {
<View className={styles.more} onClick={(e) => moreUpdate(item,e)}>更多</View>
</View>
<View className={styles.class_con} style={item.openStatus?{maxHeight: 10*260 + 'rpx'}:{maxHeight: 0}} >
<Product productList={item.product_color_list}/>
<Product productList={item.product_color_list||[]}/>
</View>
</View>)}
</View>