420 lines
14 KiB
TypeScript
420 lines
14 KiB
TypeScript
import { View } from '@tarojs/components'
|
|
import React, { useCallback, memo, useEffect, useMemo, useRef, useState } from 'react'
|
|
import Search from '@/components/search'
|
|
import styles from "./index.module.scss"
|
|
import classnames from "classnames";
|
|
import Empty from './components/empty'
|
|
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'
|
|
import { ClientListApi } from '@/api/order'
|
|
|
|
export default memo(() => {
|
|
|
|
|
|
useEffect(() => {
|
|
getClient()
|
|
}, [])
|
|
|
|
const [clientObj, setclientObj] = useState({
|
|
clientId: -1,
|
|
clientName: ''
|
|
})
|
|
|
|
//获取客户
|
|
const [clienList, setclienList] = useState<any[]>([])
|
|
const { fetchData: listFetchData } = ClientListApi()
|
|
const getClient = async () => {
|
|
const res = await listFetchData({
|
|
page: 1, size: 10
|
|
})
|
|
setclientObj({
|
|
clientId: res.data.list.length > 0 ? res.data.list[0]?.id : -1,
|
|
clientName: res.data.list.length > 0 ? res.data.list[0]?.name : '',
|
|
})
|
|
setclienList([...res.data.list])
|
|
}
|
|
|
|
useDidShow(() => {
|
|
//获取选择的客户
|
|
let pages = Taro.getCurrentPages();
|
|
let currPage = pages[pages.length - 1]; // 获取当前页面
|
|
//判断是否有跳转选择客户
|
|
if (currPage.data?.clientId && currPage.data?.clientId !== '') {
|
|
setclientObj({
|
|
clientId: currPage.data?.clientId,
|
|
clientName: currPage.data?.clientName,
|
|
})
|
|
}
|
|
//默认客户
|
|
if (currPage.data?.clientId == null) {
|
|
setclientObj({
|
|
clientId: clienList.length > 0 ? clienList[0]?.id : - 1,
|
|
clientName: clienList.length > 0 ? clienList[0]?.name : '',
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
//选择的类型
|
|
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 onj = JSON.parse(Taro.getStorageSync('userInfo'))
|
|
const [search, setSearchObj] = useState({
|
|
modeId: 0,
|
|
goodsId: null,
|
|
code_or_name: '',
|
|
physical_warehouse: onj.physical_warehouse
|
|
})
|
|
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 == 0) {
|
|
item.nums = 1
|
|
item.buyNums = 1
|
|
}
|
|
if (search.modeId == 1) {
|
|
item.nums = 0.5
|
|
item.buyNums = 0.5
|
|
}
|
|
if (search.modeId == 2) {
|
|
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) => {
|
|
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 == 0) {
|
|
if (item.nums < 1) it.showInput = false, it.nums = 1
|
|
}
|
|
if (search.modeId == 1) {
|
|
if (item.nums < 0.5) it.showInput = false, it.nums = 0.5
|
|
}
|
|
if (search.modeId == 2) {
|
|
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[]>([])
|
|
//是否有值输入框
|
|
const [hasFonts, setHasFonts] = useState(false)
|
|
useEffect(() => {
|
|
getHistory()
|
|
}, [])
|
|
//输入了搜索关键字
|
|
const getSearchData = useCallback((e) => {
|
|
if (e) {
|
|
setHasFonts(true)
|
|
getProduct(e)
|
|
} else {
|
|
setHasFonts(false)
|
|
setSearchList([])
|
|
}
|
|
}, [])
|
|
//搜索获取商品数据
|
|
const { fetchData: productFetch } = mpproductlist()
|
|
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({
|
|
delta: 1
|
|
})
|
|
}
|
|
|
|
//输入框失焦
|
|
const onBlur = (e, id) => {
|
|
goodList.map(item => {
|
|
if (item.id == id) {
|
|
if (search.modeId == 0 && (e.detail.value == '' || Number(e.detail.value) == 0)) {
|
|
item.showInput = false
|
|
item.nums = 1
|
|
|
|
} else if (search.modeId == 0 && (e.detail.value != '' || Number(e.detail.value) > 0)) {
|
|
item.nums = e.detail.value
|
|
}
|
|
if (search.modeId == 1 && Number(e.detail.value) < 0.5) {
|
|
item.nums = 0.5
|
|
item.showInput = false
|
|
} else if (search.modeId == 1 && Number(e.detail.value) >= 0.5) {
|
|
item.nums = e.detail.value
|
|
}
|
|
if (search.modeId == 2 && Number(e.detail.value) < 3) {
|
|
item.nums = 3
|
|
item.showInput = false
|
|
|
|
} else if (search.modeId == 2 && Number(e.detail.value) >= 3) {
|
|
item.nums = e.detail.value
|
|
}
|
|
|
|
}
|
|
return item
|
|
})
|
|
setGoodlist([...goodList])
|
|
}
|
|
|
|
//选择中后的值到输入框
|
|
const [defaultvalue, setdefaultvalue] = useState('')
|
|
|
|
//点击关键字搜索内容
|
|
const handItem = (item) => {
|
|
Taro.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
})
|
|
productFetch({ code_or_name: item.search_key }).then((res) => {
|
|
if (res.data) {
|
|
setHasFonts(true)
|
|
setSearchList([...res.data.list])
|
|
Taro.hideLoading()
|
|
}
|
|
})
|
|
setdefaultvalue(item.search_key)
|
|
}
|
|
//点击返回文字
|
|
const handBack = () => {
|
|
setHasFonts(false)
|
|
setSearchList([])
|
|
}
|
|
return (
|
|
<View className={styles.main}>
|
|
<Search placeholder='请输入搜索布料' defaultValue={defaultvalue} showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
|
|
<View className={styles.cancelFont} onClick={() => back()}>取消</View>
|
|
</Search>
|
|
<View className={styles.line}></View>
|
|
{
|
|
!hasFonts && <>
|
|
<View className={styles.topBox}>
|
|
<View className={styles.histroyFonts}>历史搜索</View>
|
|
<View className={classnames('iconfont', 'icon-shaixuan', styles.icon_delect)}></View>
|
|
</View>
|
|
{!!histroyList.length &&
|
|
<View className={styles.bigBox}>
|
|
{histroyList.map((item, index) => {
|
|
return (
|
|
<View onClick={() => handItem(item)} key={index} className={styles.itemBox}>{item.search_key}</View>
|
|
)
|
|
})}
|
|
</View>
|
|
}
|
|
{
|
|
!histroyList.length && <Empty picUrl='https://cdn.zzfzyc.com/empty.png' fonst={'无搜索历史'}></Empty>
|
|
}
|
|
</>
|
|
}
|
|
{
|
|
hasFonts && <>
|
|
<View className={styles.topBox}>
|
|
<View className={styles.histroyLeft}>
|
|
<View className={styles.histroyFonts}>搜索结果</View>
|
|
<View className={styles.back} onClick={() => handBack()}>返回</View>
|
|
</View>
|
|
</View>
|
|
{
|
|
!!searchList.length && searchList.map((item, index) => {
|
|
return (
|
|
<Goods clickItem={() => showCart(item)} key={index} data={item}></Goods>
|
|
)
|
|
})
|
|
}
|
|
{
|
|
!searchList.length && <Empty picUrl='https://cdn.zzfzyc.com/empty.png' fonst={'暂无数据'}></Empty>
|
|
}
|
|
</>
|
|
}
|
|
<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) }}
|