🦄 refactor:搜索历史加入购物车100%
This commit is contained in:
Haiyi
@@ -2,6 +2,8 @@ import { View, Image } from '@tarojs/components'
|
||||
import React, { useCallback, memo, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import styles from "../goods/index.module.scss"
|
||||
import LabAndImg from "@/components/LabAndImg"
|
||||
|
||||
|
||||
export default memo((props: any) => {
|
||||
|
||||
|
||||
@@ -9,7 +11,7 @@ export default memo((props: any) => {
|
||||
return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
|
||||
}, [])
|
||||
return (
|
||||
<View className={styles.itemBox}>
|
||||
<View className={styles.itemBox} onClick={() => props?.clickItem?.()}>
|
||||
{
|
||||
props.data?.texture_url === '' && <>
|
||||
|
||||
|
||||
+259
-20
@@ -4,18 +4,223 @@ import Search from '@/components/search'
|
||||
import styles from "./index.module.scss"
|
||||
import classnames from "classnames";
|
||||
import Empty from './components/empty'
|
||||
import Taro from '@tarojs/taro';
|
||||
import Taro, { useDidShow } from '@tarojs/taro';
|
||||
import Goods from './components/goods'
|
||||
import { mpproductlist } from "@/api/search"
|
||||
import { debounce } from "@/common/util";
|
||||
import ShopCart from '@/components/shoppingCart'
|
||||
import {
|
||||
mpproductcolorlist,
|
||||
mpshoppingCartproductColorlist,
|
||||
mpsearchHistorylist,
|
||||
mpsearchHistory
|
||||
} from "@/api/order"
|
||||
import { getFilterData } from '@/common/util'
|
||||
|
||||
|
||||
export default memo(() => {
|
||||
//获取数据
|
||||
const [histroyList, setHistroyList] = useState<any[]>(['a','b'])
|
||||
|
||||
|
||||
|
||||
const [clientObj, setclientObj] = useState({
|
||||
clientId: -1,
|
||||
clientName: ''
|
||||
})
|
||||
useDidShow(() => {
|
||||
|
||||
//获取选择的客户
|
||||
let pages = Taro.getCurrentPages();
|
||||
let currPage = pages[pages.length - 1]; // 获取当前页面
|
||||
setclientObj({
|
||||
clientId: currPage.data?.clientId,
|
||||
clientName: currPage.data?.clientName,
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
//选择的类型
|
||||
const [typeList, setTypeList] = useState<any[]>([{ id: 0, name: '大货', checked: true }, { id: 1, name: '剪版', checked: false }, { id: 2, name: '散剪', checked: false }])
|
||||
const [goodList, setGoodlist] = useState<any[]>([])
|
||||
const [search, setSearchObj] = useState({
|
||||
modeId: 0,
|
||||
goodsId: null,
|
||||
code_or_name: '',
|
||||
physical_warehouse: 1
|
||||
})
|
||||
const [showShopCart, setShowShopCart] = useState(false)
|
||||
|
||||
|
||||
//监听选择的类型
|
||||
useEffect(() => {
|
||||
setSearchObj(search)
|
||||
if (search.goodsId) getGoodList()
|
||||
}, [search])
|
||||
|
||||
|
||||
//获取商品
|
||||
const { fetchData: colorlistFetch } = mpproductcolorlist()
|
||||
const getGoodList = async () => {
|
||||
const res = await colorlistFetch({ product_id: search.goodsId, sale_mode: search.modeId, code_or_name: search.code_or_name, physical_warehouse: 1 })
|
||||
res.data.list.map((item) => {
|
||||
item.showInput = false
|
||||
if (search.modeId !== 2) {
|
||||
item.nums = 1
|
||||
item.buyNums = 1
|
||||
} else {
|
||||
item.nums = 3
|
||||
item.buyNums = 3
|
||||
}
|
||||
return item
|
||||
})
|
||||
setGoodlist([...res.data.list])
|
||||
}
|
||||
|
||||
//加入购物车
|
||||
const { fetchData: preViewFetch, } = mpshoppingCartproductColorlist()
|
||||
const handSure = async () => {
|
||||
const arr = goodList.filter(item => {
|
||||
return item.showInput
|
||||
})
|
||||
const list: any[] = []
|
||||
arr.forEach(it => {
|
||||
list.push({
|
||||
roll: search.modeId === 0 ? it.nums : 0,
|
||||
length: search.modeId !== 0 ? it.nums * 100 : 0,
|
||||
product_color_id: Number(it.id)
|
||||
})
|
||||
})
|
||||
const query = {
|
||||
purchaser_id: clientObj.clientId,
|
||||
sale_mode: search.modeId,
|
||||
color_list: list,
|
||||
sale_offect: 0
|
||||
}
|
||||
let res = await preViewFetch(getFilterData(query))
|
||||
Taro.showLoading({
|
||||
mask: true,
|
||||
title: '请稍等...'
|
||||
})
|
||||
if (res.data) {
|
||||
Taro.showToast({
|
||||
title: "加入成功",
|
||||
duration: 2000,
|
||||
});
|
||||
setShowShopCart(false)
|
||||
goodList.map(item => {
|
||||
item.showInput = false
|
||||
return item
|
||||
})
|
||||
setGoodlist([...goodList])
|
||||
console.log(search, '000000.0.0.')
|
||||
Taro.hideLoading()
|
||||
} else {
|
||||
Taro.hideLoading()
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//点击输入框的加
|
||||
const handPlus = useCallback((item) => {
|
||||
goodList.map((it) => {
|
||||
if (item.id === it.id) {
|
||||
// if (it.nums > item.buyNums) {
|
||||
it.nums++
|
||||
// }
|
||||
}
|
||||
return item
|
||||
})
|
||||
setGoodlist([...goodList])
|
||||
}, [goodList])
|
||||
|
||||
|
||||
//输入了搜索关键字
|
||||
const getSearchDataInput = useCallback((eq) => {
|
||||
setSearchObj((e) => ({ ...e, code_or_name: eq }))
|
||||
}, [])
|
||||
|
||||
const [goodObj, setGoodsobj] = useState({})
|
||||
//点击对应商品显示购物车
|
||||
const showCart = async (item) => {
|
||||
console.log(item, 6666)
|
||||
setSearchObj((e) => ({ ...e, goodsId: item.id }))
|
||||
setShowShopCart(true)
|
||||
setGoodsobj(item)
|
||||
}
|
||||
|
||||
//点击加展示输入框
|
||||
const handAdd = useCallback((item) => {
|
||||
goodList.map((it) => {
|
||||
if (item.id === it.id) {
|
||||
it.showInput = true
|
||||
}
|
||||
return item
|
||||
})
|
||||
setGoodlist([...goodList])
|
||||
}, [goodList])
|
||||
|
||||
|
||||
//点击减
|
||||
const reduceNums = useCallback((item) => {
|
||||
goodList.map((it) => {
|
||||
if (item.id === it.id) {
|
||||
item.nums--
|
||||
if (search.modeId !== 2) {
|
||||
if (item.nums < 1) it.showInput = false, it.nums = 1
|
||||
} else {
|
||||
if (item.nums < 3) it.showInput = false, it.nums = 3
|
||||
}
|
||||
|
||||
}
|
||||
return item
|
||||
})
|
||||
setGoodlist([...goodList])
|
||||
}, [goodList])
|
||||
|
||||
//选择类型
|
||||
const handCheckMode = (item) => {
|
||||
typeList.map(it => {
|
||||
if (it.id === item.id) {
|
||||
it.checked = true
|
||||
setSearchObj((e) => ({ ...e, modeId: it.id }))
|
||||
} else {
|
||||
it.checked = false
|
||||
}
|
||||
return it
|
||||
})
|
||||
setTypeList([...typeList])
|
||||
setGoodlist([])
|
||||
}
|
||||
|
||||
//关闭弹窗
|
||||
const closePoup = () => {
|
||||
setShowShopCart(false)
|
||||
}
|
||||
|
||||
//获取关键字数据
|
||||
const [histroyList, setHistroyList] = useState<any[]>([])
|
||||
const { fetchData: historyFetch } = mpsearchHistorylist()
|
||||
const getHistory = async () => {
|
||||
Taro.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
const res = await historyFetch()
|
||||
if (res.data) {
|
||||
setHistroyList([...res.data.list])
|
||||
Taro.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
//搜索商品的数组
|
||||
const [searchList, setSearchList] = useState<any[]>(['a'])
|
||||
const [searchList, setSearchList] = useState<any[]>([])
|
||||
//是否有值输入框
|
||||
const [hasFonts, setHasFonts] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
getHistory()
|
||||
}, [])
|
||||
//输入了搜索关键字
|
||||
const getSearchData = useCallback((e) => {
|
||||
if (e) {
|
||||
@@ -25,21 +230,27 @@ export default memo(() => {
|
||||
setHasFonts(false)
|
||||
setSearchList([])
|
||||
}
|
||||
// pageNum.current.page = 1
|
||||
// setOrderData(() => ({ list: [], total: 0 }))
|
||||
// setSearchField((val) => ({ ...val, name: e, size: 10 }))
|
||||
}, [])
|
||||
//搜索获取商品数据
|
||||
const { fetchData: productFetch } = mpproductlist()
|
||||
const getProduct = async (e) => {
|
||||
const res = await productFetch({ code_or_name: e })
|
||||
// res.data.list.map(item=>{
|
||||
// if(item.texture_url !==''){
|
||||
|
||||
// }
|
||||
// })
|
||||
setSearchList([...res.data.list])
|
||||
}
|
||||
const { fetchData: historyputFetch } = mpsearchHistory()
|
||||
const getProduct = debounce(async (e) => {
|
||||
Taro.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
await historyputFetch({ key: e, scene: 0 }).then((res) => {
|
||||
if (res.data) {
|
||||
getHistory()
|
||||
}
|
||||
})
|
||||
productFetch({ code_or_name: e }).then((res) => {
|
||||
if (res.data) {
|
||||
Taro.hideLoading()
|
||||
setSearchList([...res.data.list])
|
||||
}
|
||||
})
|
||||
}, 300)
|
||||
//返回
|
||||
const back = () => {
|
||||
Taro.navigateBack({
|
||||
@@ -47,6 +258,17 @@ export default memo(() => {
|
||||
})
|
||||
}
|
||||
|
||||
//输入框失焦
|
||||
const onBlur = (e, id) => {
|
||||
goodList.map((item) => {
|
||||
if (item.id == id) {
|
||||
item.nums = e.detail.value
|
||||
}
|
||||
return item
|
||||
})
|
||||
setGoodlist([...goodList])
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.main}>
|
||||
<Search placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
|
||||
@@ -63,7 +285,7 @@ export default memo(() => {
|
||||
<View className={styles.bigBox}>
|
||||
{histroyList.map((item, index) => {
|
||||
return (
|
||||
<View key={index} className={styles.itemBox}>{item}</View>
|
||||
<View key={index} className={styles.itemBox}>{item.search_key}</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
@@ -81,7 +303,7 @@ export default memo(() => {
|
||||
{
|
||||
!!searchList.length && searchList.map((item, index) => {
|
||||
return (
|
||||
<Goods key={index} data={item}></Goods>
|
||||
<Goods clickItem={() => showCart(item)} key={index} data={item}></Goods>
|
||||
)
|
||||
})
|
||||
}
|
||||
@@ -90,9 +312,26 @@ export default memo(() => {
|
||||
}
|
||||
</>
|
||||
}
|
||||
|
||||
<ShopCart handSure={() => handSure()}
|
||||
clientName={clientObj?.clientName}
|
||||
clientId={clientObj?.clientId}
|
||||
modeFont={search.modeId}
|
||||
handPlus={(item) => handPlus(item)}
|
||||
obj={goodObj}
|
||||
getSearchData={(e) => { getSearchDataInput(e) }}
|
||||
hasBottom={false}
|
||||
reduceNums={(item) => { reduceNums(item) }}
|
||||
addNums={(item) => { handAdd(item) }}
|
||||
showPopup={showShopCart}
|
||||
handCheck={(item) => { handCheckMode(item) }}
|
||||
closePopup={() => closePoup()}
|
||||
goodList={goodList}
|
||||
typeList={typeList}
|
||||
onBlur={(e, id) => onBlur(e, id)}
|
||||
></ShopCart>
|
||||
|
||||
</View>
|
||||
|
||||
)
|
||||
})
|
||||
// oninputEvent={(e, item) => { onInputEven?.(e, item) }}
|
||||
|
||||
Reference in New Issue
Block a user