373 lines
13 KiB
TypeScript
373 lines
13 KiB
TypeScript
import { View } from '@tarojs/components'
|
|
import Search from '@/components/search'
|
|
import SideBar from '@/components/sideBar'
|
|
import Product from '@/components/product'
|
|
import ShopCart from '@/components/shoppingCart'
|
|
import { goLink } from '@/common/common'
|
|
import styles from './index.module.scss'
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
import { kindListApi, ProductListApi } from '@/api/index'
|
|
// import useLogin from '@/use/useLogin'
|
|
import { mpproductcolorlist, mpshoppingCartproductColorlist } from "@/api/order"
|
|
import { dataLoadingStatus } from '@/common/util'
|
|
import Taro, { useDidShow } from '@tarojs/taro'
|
|
import { getFilterData } from '@/common/util'
|
|
import { ClientListApi } from '@/api/order'
|
|
export default () => {
|
|
|
|
useEffect(() => {
|
|
categoryList()
|
|
getClient()
|
|
}, [])
|
|
|
|
//获取客户
|
|
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])
|
|
}
|
|
|
|
//获取面料种类
|
|
const [kindData, setKindData] = useState<any>({ list: [], defaultId: 0 })
|
|
const { fetchData } = kindListApi()
|
|
const categoryList = async () => {
|
|
const res = await fetchData()
|
|
if (res.data?.list) {
|
|
setKindData({ ...kindData, list: res.data.list, defaultId: res.data.list[0].id })
|
|
setFiltrate({ ...filtrate, product_kind_id: res.data.list[0].id })
|
|
}
|
|
}
|
|
|
|
//获取面料列表
|
|
const [productData, setProductData] = useState({ list: [], total: 0 })
|
|
const [hasMore, setHasMore] = useState(true)
|
|
const [filtrate, setFiltrate] = useState({ product_kind_id: 0, size: 5, page: 1 })
|
|
const pageNum = useRef({ size: filtrate.size, page: filtrate.page })
|
|
const { fetchData: productFetchData, state: productState } = ProductListApi()
|
|
//获取数据方法
|
|
const getProductList = async () => {
|
|
const { data, total } = await productFetchData(filtrate)
|
|
setProductData({ ...productData, list: data.list, total })
|
|
setRefresherTriggeredStatus(() => false)
|
|
}
|
|
//监听查询条件
|
|
useEffect(() => {
|
|
if (filtrate.product_kind_id) getProductList()
|
|
}, [filtrate])
|
|
|
|
//点击面料类型
|
|
const getProductKindId = useCallback((e) => {
|
|
pageNum.current.page = 1
|
|
setProductData({ list: [], total: 0 })
|
|
setFiltrate((list) => ({ ...list, size: 5, product_kind_id: e.id }))
|
|
}, [])
|
|
|
|
//上拉加载数据
|
|
const getScrolltolower = useCallback(() => {
|
|
if (productData.list.length >= productData.total) {
|
|
setHasMore(false)
|
|
} else {
|
|
pageNum.current.page++
|
|
const newSize = pageNum.current.size * pageNum.current.page
|
|
setFiltrate((e) => ({ ...e, size: newSize }))
|
|
}
|
|
}, [productData])
|
|
|
|
const [showShopCart, setShowShopCart] = useState(false)
|
|
|
|
//列表下拉刷新
|
|
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
|
|
const getRefresherRefresh = async () => {
|
|
pageNum.current.page = 1
|
|
setFiltrate({ ...filtrate, size: 5 })
|
|
setHasMore(true)
|
|
setRefresherTriggeredStatus(true)
|
|
}
|
|
|
|
const onj = JSON.parse(Taro.getStorageSync('userInfo') || '{}')
|
|
const [search, setSearchObj] = useState({
|
|
modeId: 0,
|
|
goodsId: null,
|
|
code_or_name: '',
|
|
physical_warehouse: onj.physical_warehouse,
|
|
purchaser_id: -1,
|
|
})
|
|
|
|
//选择的类型
|
|
const [typeList, setTypeList] = useState<any[]>([{ id: 0, name: '大货', checked: true }, { id: 1, name: '剪版', checked: false }, { id: 2, name: '散剪', checked: false }])
|
|
//选择类型
|
|
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 [goodList, setGoodlist] = useState<any[]>([])
|
|
const { fetchData: colorlistFetch } = mpproductcolorlist()
|
|
const ShopCartRef = useRef<any>(null)
|
|
|
|
const [goodObj, setGoodsobj] = useState({})
|
|
//点击对应商品显示购物车
|
|
const showCart = async (item) => {
|
|
setSearchObj((e) => ({ ...e, goodsId: item.id, purchaser_id: clientObj?.clientId }))
|
|
setShowShopCart(true)
|
|
setGoodsobj(item)
|
|
ShopCartRef.current.SearchRef.current.clearInput()
|
|
}
|
|
|
|
const getGoodList = async () => {
|
|
const res = await colorlistFetch({ product_id: search.goodsId, sale_mode: search.modeId, code_or_name: search.code_or_name, physical_warehouse: search?.physical_warehouse, purchaser_id: clientObj?.clientId })
|
|
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])
|
|
}
|
|
//监听选择的类型
|
|
useEffect(() => {
|
|
setSearchObj(search)
|
|
if (search.goodsId) getGoodList()
|
|
}, [search])
|
|
|
|
//关闭弹窗
|
|
const closePoup = () => {
|
|
setShowShopCart(false)
|
|
}
|
|
//数据加载状态
|
|
const statusMore = useMemo(() => {
|
|
return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading })
|
|
}, [productData, productState.loading])
|
|
|
|
//点击加展示输入框
|
|
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 handPlus = useCallback((item) => {
|
|
goodList.map((it) => {
|
|
if (item.id === it.id) {
|
|
it.nums++
|
|
}
|
|
return item
|
|
})
|
|
setGoodlist([...goodList])
|
|
}, [goodList])
|
|
|
|
|
|
//输入了搜索关键字
|
|
const getSearchData = useCallback((eq) => {
|
|
setSearchObj((e) => ({ ...e, code_or_name: eq }))
|
|
}, [])
|
|
|
|
const [clientObj, setclientObj] = useState({
|
|
clientId: -1,
|
|
clientName: ''
|
|
})
|
|
|
|
|
|
//加入购物车
|
|
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 ? Number(it.nums) : 0,
|
|
length: search.modeId !== 0 ? Number(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])
|
|
Taro.hideLoading()
|
|
} else {
|
|
Taro.hideLoading()
|
|
Taro.showToast({
|
|
icon: 'error',
|
|
title: res.msg,
|
|
duration: 2000,
|
|
});
|
|
}
|
|
}
|
|
//输入框失焦
|
|
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 = Number(e.detail.value).toFixed(2)
|
|
}
|
|
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 = Number(e.detail.value).toFixed(2)
|
|
}
|
|
|
|
}
|
|
return item
|
|
})
|
|
setGoodlist([...goodList])
|
|
}
|
|
|
|
useEffect(() => {
|
|
setGoodlist(goodList)
|
|
}, [goodList])
|
|
|
|
|
|
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,
|
|
})
|
|
setSearchObj((val) => ({ ...val, purchaser_id: currPage.data?.clientId }))
|
|
}
|
|
//默认客户
|
|
if (currPage.data?.clientId == null) {
|
|
setclientObj({
|
|
clientId: clienList.length > 0 ? clienList[0]?.id : - 1,
|
|
clientName: clienList.length > 0 ? clienList[0]?.name : '',
|
|
})
|
|
}
|
|
})
|
|
|
|
return (
|
|
// <MoveBtn onClick={() => setShowShopCart(showShopCart)}>
|
|
<View className={styles.main}>
|
|
<View className={styles.search}>
|
|
{/* <View className={styles.search_collect} onClick={() => goLink('/pages/collection/index')}>
|
|
我的收藏
|
|
</View> */}
|
|
<View className={styles.search_input} onClick={() => goLink('/pages/searchPage/index')}>
|
|
<Search disabled={true} style={{ width: '263rpx' }} />
|
|
</View>
|
|
</View>
|
|
<View className={styles.products}>
|
|
<SideBar
|
|
list={kindData.list}
|
|
height='100%'
|
|
defaultValue={kindData.defaultId}
|
|
hasMore={hasMore}
|
|
statusMore={statusMore}
|
|
selfOnScrolltolower={getScrolltolower}
|
|
sideBarOnClick={getProductKindId}
|
|
heightItem={150}
|
|
refresherTriggered={refresherTriggeredStatus}
|
|
selfOnRefresherRefresh={() => getRefresherRefresh()}>
|
|
<Product productList={productData.list} popupShow={(item) => showCart(item)} />
|
|
</SideBar>
|
|
</View>
|
|
{/* <View className='common_safe_area_y'></View> */}
|
|
<ShopCart handSure={() => handSure()}
|
|
clientName={clientObj?.clientName}
|
|
clientId={clientObj?.clientId}
|
|
modeFont={search.modeId}
|
|
handPlus={(item) => handPlus(item)}
|
|
obj={goodObj}
|
|
ref={ShopCartRef}
|
|
getSearchData={(e) => { getSearchData(e) }}
|
|
onBlur={(e, id) => onBlur(e, id)}
|
|
reduceNums={(item) => { reduceNums(item) }}
|
|
addNums={(item) => { handAdd(item) }}
|
|
showPopup={showShopCart}
|
|
handCheck={(item) => { handCheckMode(item) }}
|
|
closePopup={() => closePoup()}
|
|
goodList={goodList}
|
|
typeList={typeList}
|
|
></ShopCart>
|
|
</View>
|
|
// </MoveBtn>
|
|
)
|
|
}
|
|
// oninputEvent={(e, item) => { oninputEvent(e, item) }}
|