对接完添加购物车

This commit is contained in:
2022-05-09 18:52:08 +08:00
parent b5e967779c
commit f3c818f549
15 changed files with 212 additions and 79 deletions
@@ -8,12 +8,16 @@ import Big from 'big.js'
import classnames from "classnames";
import styles from "./index.module.scss"
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useSelector } from "@/reducers/hooks"
import {GetColorList} from "@/api/materialColor"
import { useRouter } from "@tarojs/taro";
import {AddShoppingCartApi} from "@/api/shopCart"
import Taro, { useRouter } from "@tarojs/taro";
import UseLogin from "@/use/useLogin"
import { formatHashTag, formatMillionYuan } from "@/common/fotmat";
import { getFilterData } from "@/common/util";
type param = {
show?: true|false,
onClose?: () => void,
@@ -21,6 +25,8 @@ type param = {
productId?: number
}
export default memo(({show = false, onClose, title = '', productId = 0}: param) => {
const {adminUserInfo} = useSelector(state => state.userInfo)
const selectList = [
{id: 0, step:1, digits:0, maxNum:100000, defaultNum:1, title:'大货', unit:'件', eunit:'kg'},
{id: 1, step:1, digits:2, maxNum:9.99, defaultNum:1, title:'剪板', unit:'米', eunit:'m'},
@@ -28,32 +34,53 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
]
const [selectIndex, setSelectIndex] = useState(0)
const selectProduct = (index:number) => {
setSelectIndex(index)
console.log('number::',index)
setSelectIndex(() => index)
}
//获取面料颜色列表
const {fetchData:colorFetchData} = GetColorList()
const {fetchData:colorFetchData, state: colorState} = GetColorList()
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
const condition = useRef({physical_warehouse:1, sale_mode:selectIndex, product_id:0, code_or_name:null})
const condition = useRef({physical_warehouse:adminUserInfo.physical_warehouse, sale_mode:selectIndex, product_id:0, code_or_name:null})
const getColorList = async () => {
setLoading(() => true)
console.log('数据:::',getFilterData(condition.current))
let {data} = await colorFetchData(getFilterData(condition.current))
setList([...data.list])
const list = initList(data.list)
setList([...list])
setLoading(() => false)
}
const [showPopup, setShowPopup] = useState(false)
useEffect(() => {
console.log('colorState::',colorState)
}, [colorState])
//显示获取
useEffect(() => {
if(show) {
setSelectIndex(0)
condition.current.code_or_name = null
setSearchShow(false)
condition.current.product_id = productId
getColorList()
}
setShowPopup(show)
}, [show])
//卸载清空
//初始化列表数据
const initList = useCallback((list) => {
const newList = list.map(item => {
item.count = 0
item.show = false
return item
})
return newList
}, [])
//卸载数据
useEffect(() => {
return () => {
setList([])
@@ -64,22 +91,28 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
const closePopup = () => {
onClose?.()
setShowPopup(false)
setList([])
}
//计算总数量和总米/件数
const [selectCount, setSelectCount] = useState({
const [selectCount, setSelectCount] = useState<{sumCount:number, kindCount:number, color_list:any[]}>({
sumCount: 0,
kindCount: 0
kindCount: 0,
color_list: []
})
useEffect(() => {
let sumCount = 0, kindCount = 0
let sumCount = 0, kindCount = 0, color_list:any[] = []
let color_list_info = {}
list.map(item => {
if(item.count > 0) {
sumCount = Big(sumCount).add(item.count).toNumber()
kindCount ++
color_list_info = selectIndex == 0? {product_color_id:item.id, roll:item.count}:{product_color_id:item.id, length:item.count}
color_list.push(color_list_info)
}
})
setSelectCount({sumCount, kindCount})
setSelectCount({...selectCount, sumCount, kindCount, color_list})
}, [list])
//计数组件
@@ -92,7 +125,6 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
const onAdd = (item) => {
item.show = true
item.count = selectList[selectIndex].defaultNum
console.log('aa:::',item.count)
setList((list) => [...list])
}
@@ -104,8 +136,32 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
//添加购物车
const {getSelfUserInfo} = UseLogin()
const addShopCart = () => {
getSelfUserInfo()
const {fetchData:addFetchData} = AddShoppingCartApi()
const addShopCart = async () => {
if(selectCount.sumCount == 0) {
Taro.showToast({
icon:'none',
title:'请选择面料颜色!'
})
return false
}
await getSelfUserInfo()
const state = await addFetchData({
"sale_mode": selectIndex,
color_list: selectCount.color_list
})
if(state.success) {
Taro.showToast({
title:'添加成功'
})
onClose?.()
} else {
Taro.showToast({
icon:'none',
title: state.msg
})
}
}
//显示金额
@@ -123,12 +179,10 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
//重置数据
useEffect(() => {
const newList = list.map(item => {
item.count = 0
item.show = false
return item
})
const newList = initList(list)
setList([...newList])
// condition.current.code_or_name = null
// setSearchShow(false)
}, [selectIndex])
//筛选数据
@@ -147,7 +201,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
return (
<View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()} >
<View className={styles.popup_con}>
<View className={styles.header}>{title}</View>
<View className={styles.search}>
@@ -165,12 +219,13 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
<View className={styles.text} onClick={() => clearSearch()}>取消</View>
</View>}
<View className={styles.colorNum}>
<View className={styles.title}>颜色分类 (13) {list.length}</View>
<View className={styles.title}>颜色分类 (13)</View>
{!searchShow&&<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
</View>
<View className={styles.product_color_con}>
{list.length > 0&&<InfiniteScroll moreStatus={false}>
{(list.length <= 0 && colorState.loading)&&<LoadingCard/>}
{(list.length > 0&& !colorState.loading)&&<InfiniteScroll moreStatus={false}>
<View className={styles.color_con}>
{list.map(item => {
return <View className={styles.item}>
@@ -199,8 +254,8 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
</View>
})}
</View>
</InfiniteScroll>||
<View className={styles.noData}>暂无此商品</View>}
</InfiniteScroll>}
{(list.length <= 0 && !colorState.loading)&&<View className={styles.noData}>暂无此商品</View>}
</View>
<View className={styles.buy_btn}>
<View className={styles.buy_btn_con}>