115 lines
4.4 KiB
TypeScript
115 lines
4.4 KiB
TypeScript
import { DelFavoriteApi, FavoriteListApi } from "@/api/favorite";
|
|
import { alert } from "@/common/common";
|
|
import { getFilterData } from "@/common/util";
|
|
import Product from "@/components/product";
|
|
import Search from "@/components/search"
|
|
import { Text, View } from "@tarojs/components"
|
|
import Taro from "@tarojs/taro";
|
|
import classnames from "classnames";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import CreatePopup from "./components/createPopup";
|
|
import UpdatePopup from "./components/updatePopup";
|
|
import styles from './index.module.scss'
|
|
export default () => {
|
|
|
|
const changeOpenCon = (item) => {
|
|
item.openStatus = !item.openStatus
|
|
setList((e) => [...e])
|
|
}
|
|
//获取搜索数据
|
|
const [searchData, setSearchData] = useState('')
|
|
const onSearch = useCallback((e) => {
|
|
setSearchData(() => e)
|
|
}, [])
|
|
useEffect(() => {
|
|
getFavoriteList()
|
|
}, [searchData])
|
|
|
|
//获取列表
|
|
const [list, setList] = useState([])
|
|
const {fetchData: fetchDataList} = FavoriteListApi()
|
|
const getFavoriteList = async () => {
|
|
let res = await fetchDataList(getFilterData({name: searchData}))
|
|
setList(() => res.data.list)
|
|
}
|
|
useEffect(() => {
|
|
getFavoriteList()
|
|
}, [])
|
|
|
|
//创建收藏夹
|
|
const [collectioinShow, setCollectioinShow] = useState(false)
|
|
const closeCollection = useCallback(() => {
|
|
setCollectioinShow(false)
|
|
}, [])
|
|
|
|
//创建成功
|
|
const onCreatSuccess = useCallback(() => {
|
|
getFavoriteList()
|
|
}, [])
|
|
|
|
//更多编辑
|
|
const selectInfo = useRef<any>(null)
|
|
const [updateShow, setUpdateShow] = useState(false)
|
|
const closeUpdate = useCallback(() => {
|
|
setUpdateShow(false)
|
|
}, [])
|
|
const moreUpdate = (item,e) => {
|
|
e.stopPropagation()
|
|
selectInfo.current = item
|
|
setUpdateShow(true)
|
|
}
|
|
|
|
//删除改收藏夹
|
|
const {fetchData: delFetchData} = DelFavoriteApi()
|
|
const onDeleteCollect = useCallback(() => {
|
|
if(!selectInfo.current.id) return alert.error('参数不正确！')
|
|
if(selectInfo.current.id == 1) return alert.none('删除失败,该文件夹不能删除!')
|
|
Taro.showModal({
|
|
content: '确认删除该文件夹?',
|
|
success: async function (res) {
|
|
if (res.confirm) {
|
|
let res = await delFetchData({id: selectInfo.current.id})
|
|
if(res.success) {
|
|
alert.success('删除成功')
|
|
getFavoriteList()
|
|
} else {
|
|
alert.error('删除失败')
|
|
}
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消')
|
|
}
|
|
}
|
|
})
|
|
closeUpdate()
|
|
}, [])
|
|
|
|
//编辑
|
|
const onUpdate = useCallback(() => {
|
|
|
|
}, [])
|
|
|
|
return (
|
|
<View className={styles.collection_main}>
|
|
<View className={styles.search}>
|
|
<Search style={{width: '100%'}} debounceTime={300} changeOnSearch={onSearch} placeholder="请输入面料关键词" />
|
|
<View className={styles.miconfont_con} onClick={() => setCollectioinShow(true)}><Text className={classnames(styles.miconfont, 'iconfont icon-jia')}></Text></View>
|
|
</View>
|
|
<View className={styles.class_list}>
|
|
{list?.map((item:any) => <View className={styles.class_item}>
|
|
<View key={item.id} className={styles.class_title} onClick={() => changeOpenCon(item)}>
|
|
<Text className={classnames(styles.miconfont_left, 'iconfont icon-a-moreback', item.openStatus?styles.miconfont_open:styles.miconfont_close)}></Text>
|
|
<View className={styles.title}>{item.name}
|
|
{item.product_color_list&&<><Text className={styles.fg}>·</Text><Text className={styles.num}>{item.product_color_list.length}</Text></>}
|
|
</View>
|
|
<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={new Array(10).fill('')}/>
|
|
</View>
|
|
</View>)}
|
|
</View>
|
|
<CreatePopup show={collectioinShow} onClose={closeCollection} onSuccess={onCreatSuccess}/>
|
|
<UpdatePopup show={updateShow} onClose={closeUpdate} onDelete={onDeleteCollect} onUpdate={onUpdate}/>
|
|
</View>
|
|
)
|
|
} |