xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🦄 refactor:购物车添加虚拟列表

Browse Source
This commit is contained in:
Haiyi 2022-09-07 14:42:31 +08:00
parent d8c8c46a83
commit caf7066663
14 changed files with 805 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/order.ts
View File

@ -41,3 +41,10 @@ export const mpsaleOrderpreView = () => {
method: "put"
})
}
//业务员枚举
export const mpenumsaleUserlist = () => {
return useRequest({
url: `/v1/mp/enum/saleUser/list`,
method: "get"
})
}

9
src/app.config.ts
View File

@ -1,5 +1,12 @@
export default defineAppConfig({
pages: ['pages/user/index', 'pages/index/index', 'pages/order/index', 'pages/shopping/index', 'pages/searchPage/index', 'pages/customerPage/index'],
pages: ['pages/user/index',
'pages/index/index',
'pages/order/index',
'pages/shopping/index',
'pages/searchPage/index',
'pages/customerPage/index',
'pages/saleuserPage/index',
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',

2
src/components/closeBtn/index.tsx
View File

@ -14,7 +14,7 @@ export default memo(({onClose, styleObj = {}}:Params) => {
className={style.icon_a_cuowuwrong_self}
onClick={onClose}
>
<Text className={`iconfont icon-qingkong ${style.icon_a_btn}`}></Text>
<Text className={`iconfont icon-guanbi ${style.icon_a_btn}`}></Text>
</View>
)
})

35
src/components/goodsItem/index.tsx
View File

@ -5,7 +5,7 @@ import classnames from "classnames";
interface props {
clickAdd: (any) => void,
onInputEven: (a: any, c: any) => void,
// onInputEven?: (a: any, c: any) => void,
clickReduce: (any) => void,
handPlus: (any) => void,
modeFont?: number
@ -18,38 +18,53 @@ interface props {
code?: string,
rgb?: { r: number, g: number, b: number },
name?: string,
roll?: number | string
roll?: number | string,
buyNums?: number | string,
}
}
export default memo((props: props) => {
const [value, setValue] = useState<any>({ count: props.value.nums })
const onInputEven = (e) => {
let res = e.detail.value
if (props.modeFont !== 2) {
if (Number(res) == 0 || Number(res) < 1) {
setValue({ count: 1 })
}
} else {
if (Number(res) == 0 || Number(res) < 3) {
setValue({ count: 3 })
}
}
}
const type = useMemo(() => {
if (props.modeFont === 0) {
return 'number'
} else {
return 'type'
return 'digit'
}
}, [props.modeFont])
return (
<View className={styles.goodsBox}>
{
props.value?.rgb?.r == 0 && props.value?.rgb?.g == 0 && props.value?.rgb?.b == 0 && <Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
props?.value?.rgb?.r == 0 && props?.value?.rgb?.g == 0 && props?.value?.rgb?.b == 0 && <Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
}
{
(props.value?.rgb?.r != 0 || props.value?.rgb?.g != 0 || props.value?.rgb?.b != 0) &&
<View className={styles.pic} style={{ backgroundColor: `rgb(${props.value.rgb?.r} ${props.value.rgb?.g} ${props.value.rgb?.b})` }}></View>
(props?.value?.rgb?.r != 0 || props?.value?.rgb?.g != 0 || props?.value?.rgb?.b != 0) &&
<View className={styles.pic} style={{ backgroundColor: `rgb(${props?.value?.rgb?.r} ${props?.value?.rgb?.g} ${props?.value.rgb?.b})` }}></View>
}
<View className={styles.rightGoodbox}>
<View className={styles.leftFontsbox}>
<View className={styles.title}>{props.value.code} {props.value.name}环保黑</View>
<View className={styles.title}>{props.value?.code} {props.value?.name}环保黑</View>
{/* <View className={styles.productName}>0681# 26S全棉平纹</View> */}
<View className={styles.productNums}>剩:{props.value?.roll}件</View>
</View>
<View className={styles.rightFontsbox}>
<View className={styles.money}>¥{props.modeFont === 0 ? Number(props.value?.bulk_price) / 100 : props.modeFont === 1 ? Number(props.value?.length_cut_price) / 100 : Number(props.value?.weight_cut_price) / 100}{props.modeFont === 0 ? '/Kg' : '/m'}</View>
<View className={styles.money}>¥{props?.modeFont === 0 ? Number(props.value?.bulk_price) / 100 : props.modeFont === 1 ? Number(props.value?.length_cut_price) / 100 : Number(props.value?.weight_cut_price) / 100}{props.modeFont === 0 ? '/Kg' : '/m'}</View>
{
props.value.showInput && <View className={styles.inputBox}>
<View className={styles.reduceBox} onClick={() => { props.clickReduce?.(props.value) }}>
@ -57,7 +72,9 @@ export default memo((props: props) => {
</View>
</View>
<View className={styles.numsBox}>
<Input type={type as any} value={props.value.nums} onInput={($event) => props.onInputEven($event, props.value)}></Input>
<Input type={type as any} value={value.count} onInput={onInputEven}></Input>
{/* <Input type={type as any} value={value.count} onInput={($event) => onInputEven($event, props.value)}></Input> */}
</View>
<View className={styles.addBox} onClick={() => { props.handPlus?.(props.value) }}>
+

21
src/components/shoppingCart/index.module.scss
View File

@ -76,7 +76,7 @@
display: flex;
margin-bottom: 24px;
align-items: center;
padding-bottom: 10px;
.kingFont {
font-size: 28px;
@ -91,7 +91,7 @@
width: 148px;
height: 30px;
border-radius: 4px;
border: 1px solid #E42945;
border: 1PX solid #E42945;
font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
@ -106,15 +106,22 @@
margin-bottom: 32px;
}
.scrollview {
height: 500px;
.scrollviewBig {
.scrollview {
height: 300px;
.kongBox {
height: 181px;
width: 100%;
.kongBox {
height: 181px;
width: 100%;
}
}
.kongOne {
height: 100px;
}
}
.posBox {
width: 100%;
position: fixed;

49
src/components/shoppingCart/index.tsx
View File

@ -6,7 +6,7 @@ import classnames from "classnames";
import Popup from '@/components/popup'
import Goods from "@/components/goodsItem"
import BottomCustomer from "@/components/BottomCustomer"
import VirtualList from '@tarojs/components/virtual-list'
interface prosObj {
showPopup?: false | true,
@ -86,9 +86,20 @@ export default memo(forwardRef((props: prosObj, ref) => {
return s;
}, [goodList])
// onInputEven={(e, obj) => oninputEvent?.(e, obj)}
const rows = memo(({ id, index, style, data }: any) => {
let item = data[index]
return (
<>
<Goods modeFont={(modeFont as number)}
handPlus={(item) => handPlus?.(item)}
value={item || {}}
clickAdd={(item) => addNums?.(item)}
clickReduce={(item) => { reduceNums?.(item) }}></Goods>
</>
)
})
return (
<Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}>
@ -114,20 +125,21 @@ export default memo(forwardRef((props: prosObj, ref) => {
<View className={styles.searchBox}>
<Search placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
</View>
<ScrollView
className={styles.scrollview}
scroll-y={true}
>
<View className={styles.scrollviewBig}>
<VirtualList
className={styles.scrollview}
height={300} /* 列表的高度 */
width='100%' /* 列表的宽度 */
itemData={goodList} /* 渲染列表的数据 */
itemCount={goodList.length + 0} /* 渲染列表的长度 */
itemSize={100} /* 列表单项的高度 */
overscanCount={1}>
{rows}
</VirtualList>
<View className={styles.kongOne}></View>
</View>
{
goodList.map((item, index) => {
return (
<Goods modeFont={(modeFont as number)} handPlus={(item) => handPlus?.(item)} key={index} value={item} onInputEven={(e, obj) => oninputEvent?.(e, obj)} clickAdd={(item) => addNums?.(item)} clickReduce={(item) => { reduceNums?.(item) }}></Goods>
)
})
}
<View className={styles.kongBox}></View>
</ScrollView>
<View className={styles.posBox}>
<BottomCustomer clientName={clientName} clientId={clientId} isDisabled={selectTotal > 0 && clientName !== '' ? false : true} handSure={() => { handSure() }}></BottomCustomer>
</View>
@ -135,4 +147,7 @@ export default memo(forwardRef((props: prosObj, ref) => {
</Popup>
)
}))
}))

4
src/pages/customerPage/index.module.scss
View File

@ -20,6 +20,10 @@ page {
}
}
.listBox {
height: 100vh;
}
.itemBox {
margin-left: 24px;
width: 702px;

122
src/pages/customerPage/index.tsx
View File

@ -7,47 +7,68 @@ import { ClientListApi } from '@/api/order'
import { useDidShow } from '@tarojs/taro';
import Taro from '@tarojs/taro'
import { useRouter } from '@tarojs/taro'
import InfiniteScroll from '@/components/infiniteScroll'
import { dataLoadingStatus, getFilterData } from '@/common/util'
export default () => {
const [search, setSearch] = useState({
name: null
name: null,
page: 1,
size: 10,
})
const [clentList, setClientlist] = useState<any[]>([])
const [clentList, setClientlist] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
const { fetchData: clitentFetch, state: orderState } = ClientListApi()
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading })
}, [clentList, orderState])
const [clientObj, setclientObj] = useState({})
const [clientObj, setclientObj] = useState({
clientId: null,
clientName: ''
})
//输入了搜索关键字
const getSearchData = useCallback((eq) => {
setSearch({ name: eq })
pageNum.current.page = 1
setClientlist(() => ({ list: [], total: 0 }))
setSearch((e) => ({ ...e, name: eq, size: 10 }))
}, [])
const router = useRouter()
// useDidShow(() => {
// if (router?.params.clientId) {
// clentList.map(item => {
// if (item.id == router?.params.clientId) {
// item.checked = true
// }else{
// }
// })
// }
// })
useEffect(() => {
setSearch(search)
if (search.name === '') {
setSearch((e) => ({ ...e, name: null }))
}
if (search.name !== '') getCuss()
}, [search])
//上拉加载数据
const pageNum = useRef({ size: search.size, page: search.page })
const getScrolltolower = useCallback(() => {
if (clentList.list.length < clentList.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearch((e) => ({ ...e, size }))
console.log(search, 11111)
}
}, [clentList])
const { fetchData: clitentFetch } = ClientListApi()
//列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => {
pageNum.current.size = 1
setRefresherTriggeredStatus(true)
setSearch((val) => ({ ...val, size: 10 }))
}
const getCuss = async () => {
let res = await clitentFetch({ name: search.name === null ? '' : search.name })
let res = await clitentFetch({ name: search.name === null ? '' : search.name, page: search.page, size: search.size })
if (router?.params.clientId) {
res.data.list.map(item => {
if (item.id == router?.params.clientId) {
@ -58,15 +79,15 @@ export default () => {
return item
})
}
// res.data.list.map(item => {
// item.checked = false
// })
setClientlist([...res.data.list])
setClientlist((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
setRefresherTriggeredStatus(() => false)
}
//选择客户
const selectClient = (item) => {
clentList.map(it => {
clentList.list.map(it => {
if (item.id === it.id) {
it.checked = true
} else {
@ -74,19 +95,30 @@ export default () => {
}
return it
})
setclientObj(item)
let pages = Taro.getCurrentPages(); // 获取当前的页面栈
let prevPage = pages[pages.length - 2];
prevPage.setData({ //设置上一个页面的值
clientId: item.id,
clientName: item.name
clientName: item.name,
});
setClientlist([...clentList])
setclientObj(item)
setClientlist((e) => ({ ...e, list: clentList?.list, total: clentList?.total }))
Taro.navigateBack({
delta: 1
})
}
useEffect(() => {
if (clientObj?.clientId !== null) {
setclientObj(clientObj)
} else {
let pages = Taro.getCurrentPages(); // 获取当前的页面栈
let prevPage = pages[pages.length - 2];
prevPage.setData({ //设置上一个页面的值
clientId: '',
clientName: '',
});
}
}, [clientObj])
return (
<View className={styles.cussBox}>
<View className={styles.searchBox}>
@ -95,17 +127,27 @@ export default () => {
</View>
</View>
{
clentList.map((item, index) => {
return (
<View className={classnames(item.checked ? styles.acticveitemBox : styles.itemBox)} key={index} onClick={() => { selectClient(item) }}>
<View className={styles.cussName}>{item.name}</View>
<View className={styles.phone}>{item.phone}</View>
<View className={styles.woker}>{item.sale_user_name}</View>
</View>
)
})
}
<View className={styles.listBox}>
<InfiniteScroll
statusMore={statusMore}
selfonScrollToLower={getScrolltolower}
refresherEnabled={true}
refresherTriggered={refresherTriggeredStatus}
selfOnRefresherRefresh={getRefresherRefresh}>
{
clentList.list.map((item, index) => {
return (
<View className={classnames(item.checked ? styles.acticveitemBox : styles.itemBox)} key={index} onClick={() => { selectClient(item) }}>
<View className={styles.cussName}>{item.name}</View>
<View className={styles.phone}>{item.phone}</View>
<View className={styles.woker}>{item.sale_user_name}</View>
</View>
)
})
}
</InfiniteScroll>
</View>
</View>
)

46
src/pages/index/index.tsx
View File

@ -14,7 +14,7 @@ import { dataLoadingStatus } from '@/common/util'
import Taro, { useDidShow } from '@tarojs/taro'
import goodsItem from '@/components/goodsItem'
import { WX_APPID } from '@/common/constant'
import { debounce } from "@/common/util";
export default () => {
useEffect(() => {
categoryList()
@ -182,30 +182,6 @@ export default () => {
})
setGoodlist([...goodList])
}, [goodList])
//加减输入框
const oninputEvent = useCallback((e, item) => {
goodList.map((it) => {
if (item.id === it.id) {
if (search.modeId !== 2) {
if (Number(e.detail.value) < item.nums || e.detail.value === '') {
it.nums = 1
} else {
it.nums = Number(e.detail.value)
}
} else {
if (Number(e.detail.value) < item.nums || e.detail.value === '') {
it.nums = 3
} else {
it.nums = Number(e.detail.value)
}
}
}
return item
})
setGoodlist([...goodList])
}, [goodList])
//输入了搜索关键字
@ -262,7 +238,6 @@ export default () => {
return item
})
setGoodlist([...goodList])
setSearchObj((e) => ({ ...e, goodsId: null }))
console.log(search, '000000.0.0.')
Taro.hideLoading()
} else {
@ -300,8 +275,25 @@ export default () => {
</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) }} oninputEvent={(e, item) => { oninputEvent(e, item) }} reduceNums={(item) => { reduceNums(item) }} addNums={(item) => { handAdd(item) }} showPopup={showShopCart} handCheck={(item) => { handCheckMode(item) }} closePopup={() => closePoup()} goodList={goodList} typeList={typeList}></ShopCart>
<ShopCart handSure={() => handSure()}
clientName={clientObj?.clientName}
clientId={clientObj?.clientId}
modeFont={search.modeId}
handPlus={(item) => handPlus(item)}
obj={goodObj}
ref={ShopCartRef}
getSearchData={(e) => { getSearchData(e) }}
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) }}

210
src/pages/order/index.module.scss
View File

@ -6,6 +6,12 @@
}
.icon_shaixuan {
color: #0D7CFF;
font-size: 35px;
margin-right: 10px;
}
.activeshaixuan {
color: #000;
font-size: 35px;
margin-right: 10px;
@ -19,6 +25,14 @@
color: #000000;
}
.activeshai {
color: #0D7CFF;
margin-right: 32px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
}
.popupBox {
.topBox {
display: flex;
@ -38,9 +52,9 @@
align-items: center;
width: 319px;
height: 68px;
background: #E9E9E9;
background: #f6f6f6;
border-radius: 8px;
opacity: 0.4;
// opacity: 0.4;
justify-content: space-between;
margin-right: 16px;
@ -57,73 +71,185 @@
font-size: 30px;
}
}
.activelefttopSelectBox {
width: 319px;
height: 68px;
background: rgba(51, 127, 255, 0.1);
border-radius: 8px;
border: 1px solid #337FFF;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 16px;
.lefttopSelectName {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #337FFF;
margin-left: 24px;
}
.icon_more {
margin-right: 24px;
font-size: 30px;
color: #337FFF;
}
}
}
}
}
.popupTwobox {
padding-left: 40px;
padding-right: 40px;
.secondBox {
margin-top: 40px;
padding-left: 48px;
.scrollview {
height: 400px;
.secondTopfont {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.btnBox {
margin-top: 40px;
.inputBox {
width: 654px;
height: 68px;
background: #f6f6f6;
border-radius: 8px;
// opacity: 0.4;
margin-top: 24px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
.itemBox {
width: 213px;
height: 80px;
background: #f5f5f5;
.orderInput {
margin-left: 24px;
width: 400px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.saomiao {
margin-right: 24px;
font-size: 26px;
color: #000;
}
}
}
.thirdBox {
margin-top: 40px;
padding-left: 48px;
.thirdTopfont {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.flexModebox {
margin-top: 24px;
display: flex;
.activemodeBox {
margin-right: 16px;
width: 152px;
height: 68px;
background: rgba(51, 127, 255, 0.1);
border-radius: 8px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000;
line-height: 80px;
text-align: center;
margin-right: 16px;
box-sizing: border-box;
margin-bottom: 16px;
flex-shrink: 0;
}
.activeitemBox {
border-radius: 8px;
flex-shrink: 0;
font-family: PingFangSC-Regular, PingFang SC;
line-height: 80px;
text-align: center;
width: 213px;
height: 80px;
font-size: 28px;
color: #337FFF;
margin-right: 16px;
background: #e8effd;
text-align: center;
line-height: 68px;
border: 1px solid #337FFF;
margin-bottom: 16px;
box-sizing: border-box;
}
.activeitemBox:nth-child(3n-0) {
margin-right: 0px;
}
.itemBox:nth-child(3n-0) {
margin-right: 0px;
.modeBox {
margin-right: 16px;
width: 152px;
height: 68px;
background: #f6f6f6;
border-radius: 8px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
text-align: center;
line-height: 68px;
box-sizing: border-box;
// opacity: 0.4;
}
}
}
.bottomBox {
width: 750px;
height: 160px;
background: #FFFFFF;
position: fixed;
bottom: 0;
z-index: 99;
display: flex;
padding-top: 16px;
justify-content: space-between;
.resetBox {
margin-left: 48px;
width: 311px;
height: 80px;
border-radius: 44px;
border: 1px solid #087EFF;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #337FFF;
text-align: center;
line-height: 80px;
}
.button {
margin-right: 32px;
width: 311px;
height: 80px;
background: #68b4ff;
border-radius: 44px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 80px;
}
.activeButton {
margin-right: 32px;
width: 311px;
height: 80px;
background: #337FFF;
border-radius: 44px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fff;
text-align: center;
line-height: 80px;
}
}
}
.order_list {
height: calc(100vh - 160px);
.bigBpx {
height: 200px;
}
}

257
src/pages/order/index.tsx
View File

@ -1,6 +1,6 @@
import { View, ScrollView } from '@tarojs/components'
import { View, ScrollView, Input, Button } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, } from 'react'
import { mpenumsaleorderstatus, OrderListApi, ClientListApi } from '@/api/order'
import { mpenumsaleorderstatus, OrderListApi } from '@/api/order'
import OrderStatusList from './components/orderStatusList'
import Search from '@/components/search'
import { dataLoadingStatus, getFilterData } from '@/common/util'
@ -9,6 +9,7 @@ import classnames from "classnames";
import Popup from '@/components/popup'
import InfiniteScroll from '@/components/infiniteScroll'
import { compose } from 'redux'
import Taro, { useDidShow } from '@tarojs/taro'
export default () => {
//页码和页数
@ -23,8 +24,12 @@ export default () => {
const { fetchData: listFetchData, state: orderState } = OrderListApi()
const [orderData, setOrderData] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
const getOrderList = async () => {
let res = await listFetchData(getFilterData(searchField))
let res = await listFetchData({
...getFilterData(searchField),
...getFilterData(searchObj)
})
setOrderData((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
setshowPopup(false)
setRefresherTriggeredStatus(() => false)
}
@ -91,67 +96,143 @@ export default () => {
const closePopup = () => {
setshowPopup(false)
}
//客户筛选内容展示
const [choseTitle, setChoseTitle] = useState('客户')
const [showPopupTwo, setshowPopupTwo] = useState(false)
const showPopupDesige = (index) => {
if (index === 1) {
setChoseTitle('客户')
} else {
setChoseTitle('业务员')
}
setshowPopupTwo(true)
}
//客户关闭筛选内容展示
const closePopupTwo = () => {
setshowPopupTwo(false)
}
//获取客户或者业务员数据
const { fetchData: purchaserFetch } = ClientListApi()
const [itemList, setItemList] = useState<any[]>([{ id: -100, name: '不限' }])
const getPurchaser = async () => {
let res = await purchaserFetch()
res.data.list.map(item => {
if (item.id === -100) {
item.checked = true
} else {
item.checked = false
return item
}
})
setItemList((e) => [...e, ...res.data.list])
}
//选择客户或者业务员
const choseUser = (it, index) => {
itemList.map(item => {
if (item.id === it.id) {
item.checked = true
} else {
item.checked = false
return item
}
})
setItemList(() => [...itemList])
console.log(itemList, 123)
}
//搜索客户或者业务员
const getSearchDataPurchaser = useCallback(async (e) => {
getPurchaser()
// let res = await purchaserFetch({ name: e })
// setItemList((e) => [...e, ...res.data.list])
}, [])
useDidShow(() => {
//获取选择的客户
let pages = Taro.getCurrentPages();
let currPage = pages[pages.length - 1]; // 获取当前页面
console.log(currPage.data, '8888')
setsearchObj((e) => ({
...e,
purchaser_id: currPage.data?.clientId ? currPage.data?.clientId : '',
clientName: currPage.data?.clientName ? currPage.data?.clientName : '',
sale_user_id: currPage.data?.saleuserId ? currPage.data?.saleuserId : '',
saleuserName: currPage.data?.saleuserName ? currPage.data?.saleuserName : '',
}))
})
interface filterObj {
purchaser_id?: string | number,
clientName?: string,
sale_user_id?: string | number,
saleuserName?: string,
orderNo?: string | undefined,
sale_mode?: Number | undefined,
shipment_mode?: Number | undefined
}
//筛选参数
const [searchObj, setsearchObj] = useState<filterObj>({
purchaser_id: '',
clientName: '',
sale_user_id: '',
saleuserName: '',
orderNo: '',
sale_mode: undefined,
shipment_mode: undefined
})
// 跳转选择客户
const navTo = (index) => {
if (index === 1) {
Taro.navigateTo({
url: '/pages/customerPage/index?clientId=' + searchObj?.purchaser_id
})
} else {
Taro.navigateTo({
url: '/pages/saleuserPage/index?saleuserId=' + searchObj?.sale_user_id
})
}
}
//订单号输入框
const handInput = (eq) => {
setsearchObj((e) => ({ ...e, orderNo: eq.detail.value }))
}
//订单类型
const [modeList, setModeList] = useState<any[]>([{ id: -1, name: '不限' }, { id: 0, name: '大货' }, { id: 1, name: '剪版' }, { id: 2, name: '散剪' }])
//选择订单类型
const handCheckMode = (item) => {
modeList.map(it => {
if (it.id === item.id) {
it.checked = true
} else {
it.checked = false
}
return it
})
setModeList([...modeList])
setsearchObj((e) => ({ ...e, sale_mode: item.id }))
}
///发货方式类型
const [deliveryList, setdeliveryList] = useState<any[]>([{ id: -1, name: '不限' }, { id: 1, name: '自提' }, { id: 2, name: '物流' }])
//选择发货方式类型
const handCheckDelivery = (item) => {
deliveryList.map(it => {
if (it.id === item.id) {
it.checked = true
} else {
it.checked = false
}
return it
})
setdeliveryList([...deliveryList])
setsearchObj((e) => ({ ...e, shipment_mode: item.id }))
}
//是否不允许确认筛选
const isDisabled = useMemo(() => {
if (searchObj.clientName !== '' ||
searchObj.orderNo !== '' ||
searchObj.saleuserName !== '' ||
searchObj.sale_mode !== undefined ||
searchObj.shipment_mode !== undefined
) {
return false
} else {
return true
}
}, [searchObj])
//重置
const handReset = () => {
setsearchObj({
purchaser_id: '',
clientName: '',
sale_user_id: '',
saleuserName: '',
orderNo: '',
sale_mode: undefined,
shipment_mode: undefined
})
}
//确认筛选
const handSure = async () => {
getOrderList()
}
//扫描
const handScan = () => {
Taro.scanCode({
success(res) {
setsearchObj((e) => ({ ...e, orderNo: res.result }))
},
fail(res) {
console.log(res);
},
});
}
useEffect(() => {
getOrderStatusList()
getPurchaser()
}, [])
return (
<View>
<Search placeholder='搜索商品/名称/颜色/订单号' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
<View className={styles.flexBox} onClick={() => showSelctPopup()}>
<View className={classnames('iconfont', 'icon-shaixuan', styles.icon_shaixuan)}></View>
<View className={styles.shaixuan}>筛选</View>
<View className={classnames('iconfont', 'icon-shaixuan', !isDisabled ? styles.icon_shaixuan : styles.activeshaixuan)}></View>
<View className={classnames(isDisabled ? styles.shaixuan : styles.activeshai)}>筛选</View>
</View>
</Search>
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={-1} />
@ -175,40 +256,62 @@ export default () => {
<Popup title={'筛选订单'} show={showPopup} onClose={() => closePopup()}>
<View className={styles.popupBox}>
<View className={styles.topBox}>
<View className={styles.leftTop} onClick={() => showPopupDesige(1)}>
<View className={styles.leftTop} onClick={() => navTo(1)}>
<View className={styles.lefttopTitle}>客户信息</View>
<View className={styles.lefttopSelectBox}>
<View className={styles.lefttopSelectName}>请选择客户</View>
<View className={classnames(searchObj.clientName === '' ? styles.lefttopSelectBox : styles.activelefttopSelectBox)}>
<View className={styles.lefttopSelectName}>{searchObj.clientName === '' ? '请选择客户' : searchObj.clientName}</View>
<View className={classnames('iconfont', 'icon-more', styles.icon_more)}></View>
</View>
</View>
<View className={styles.leftTop} onClick={() => showPopupDesige(2)}>
<View className={styles.leftTop} onClick={() => navTo(2)}>
<View className={styles.lefttopTitle}>业务员</View>
<View className={styles.lefttopSelectBox}>
<View className={styles.lefttopSelectName}>请选择业务员</View>
<View className={classnames(searchObj.saleuserName === '' ? styles.lefttopSelectBox : styles.activelefttopSelectBox)}>
<View className={styles.lefttopSelectName}>{searchObj.saleuserName === '' ? '请选择客户' : searchObj.saleuserName}</View>
<View className={classnames('iconfont', 'icon-more', styles.icon_more)}></View>
</View>
</View>
</View>
</View>
</Popup>
<Popup title={choseTitle} show={showPopupTwo} onClose={() => closePopupTwo()}>
<View className={styles.popupTwobox}>
<Search placeholder={`请输入${choseTitle}名称`} showBtn={false} changeOnSearch={getSearchDataPurchaser} debounceTime={300} >
</Search>
<ScrollView
className={styles.scrollview}
scroll-y={true}
showScrollbar={false}
enhanced={true}
>
<View className={styles.btnBox}>
{itemList.map((item, index) => <View className={classnames(item.checked ? styles.activeitemBox : styles.itemBox)} key={index} onClick={() => choseUser(item, index)}>{item.name}</View>)}
<View className={styles.secondBox}>
<View className={styles.secondTopfont}>订单单号</View>
<View className={styles.inputBox}>
<Input onInput={(e) => { handInput(e) }} placeholderStyle='color:#000000; font-size:26rpx' className={styles.orderInput} value={searchObj.orderNo} placeholder={'请输入或扫描条形码'}></Input>
<View className={classnames('iconfont', 'icon-saomiao', styles.saomiao)} onClick={() => { handScan() }}></View>
</View>
</ScrollView>
</View>
<View className={styles.thirdBox}>
<View className={styles.thirdTopfont}>订单类型</View>
<View className={styles.flexModebox}>
{
modeList.map((item, index) => {
return (
<View onClick={() => { handCheckMode(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
)
})
}
</View>
</View>
<View className={styles.thirdBox}>
<View className={styles.thirdTopfont}>发货方式</View>
<View className={styles.flexModebox}>
{
deliveryList.map((item, index) => {
return (
<View onClick={() => { handCheckDelivery(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
)
})
}
</View>
</View>
<View>{isDisabled}</View>
<View style={{ height: '160rpx' }}></View>
<View className={styles.bottomBox}>
<Button className={styles.resetBox} onClick={() => { handReset() }}> 重置</Button >
<Button className={classnames(isDisabled ? styles.button : styles.activeButton)} disabled={isDisabled} onClick={() => { handSure?.() }}> 确认</Button >
</View>
</View>
</Popup>
</View>
)

3
src/pages/saleuserPage/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '选择业务员',
}

110
src/pages/saleuserPage/index.module.scss Normal file
View File

@ -0,0 +1,110 @@
page {
background: #f7f7f7;
}
.cussBox {
.searchBox {
position: sticky;
top: 0;
width: 750px;
height: 96px;
background: #FFFFFF;
display: flex;
align-items: center;
.two {
width: 702px;
height: 72px;
margin-left: 24px;
}
}
.listBox {
height: calc(100vh - 96px);
}
.itemBox {
margin-left: 24px;
width: 702px;
height: 104px;
background: #FFFFFF;
border-radius: 16px;
display: flex;
align-items: center;
margin-top: 24px;
box-sizing: border-box;
.cussName {
margin-left: 48px;
width: 168px;
height: 34px;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.phone {
margin-left: 88px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.woker {
margin-left: 88px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.acticveitemBox {
margin-left: 24px;
width: 702px;
height: 104px;
background: #FFFFFF;
border-radius: 16px;
display: flex;
align-items: center;
margin-top: 24px;
box-sizing: border-box;
border: 1px solid #337FFF;
.cussName {
margin-left: 48px;
width: 168px;
height: 34px;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.phone {
margin-left: 88px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.woker {
margin-left: 88px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
}

151
src/pages/saleuserPage/index.tsx Normal file
View File

@ -0,0 +1,151 @@
import { View, ScrollView, Image, Input, Button } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
import Search from '@/components/search'
import { mpenumsaleUserlist } from '@/api/order'
import { useDidShow } from '@tarojs/taro';
import Taro from '@tarojs/taro'
import { useRouter } from '@tarojs/taro'
import InfiniteScroll from '@/components/infiniteScroll'
import { dataLoadingStatus, getFilterData } from '@/common/util'
export default () => {
const [search, setSearch] = useState({
name: null,
page: 1,
size: 10,
})
const [clentList, setClientlist] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
const { fetchData: clitentFetch, state: orderState } = mpenumsaleUserlist()
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading })
}, [clentList, orderState])
const [clientObj, setclientObj] = useState({
saleuserId: null,
saleuserName: ''
})
//输入了搜索关键字
const getSearchData = useCallback((eq) => {
pageNum.current.page = 1
setClientlist(() => ({ list: [], total: 0 }))
setSearch((e) => ({ ...e, name: eq, size: 10 }))
}, [])
const router = useRouter()
useEffect(() => {
if (search.name === '') {
setSearch((e) => ({ ...e, name: null }))
}
if (search.name !== '') getCuss()
}, [search])
//上拉加载数据
const pageNum = useRef({ size: search.size, page: search.page })
const getScrolltolower = useCallback(() => {
if (clentList.list.length < clentList.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearch((e) => ({ ...e, size }))
console.log(search, 11111)
}
}, [clentList])
//列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => {
pageNum.current.size = 1
setRefresherTriggeredStatus(true)
setSearch((val) => ({ ...val, size: 10 }))
}
const getCuss = async () => {
let res = await clitentFetch({ name: search.name === null ? '' : search.name, page: search.page, size: search.size })
if (router?.params.clientId) {
res.data.list.map(item => {
if (item.id == router?.params.clientId) {
item.checked = true
} else {
item.checked = false
}
return item
})
}
setClientlist((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
setRefresherTriggeredStatus(() => false)
}
//选择业务员
const selectClient = (item) => {
clentList.list.map(it => {
if (item.id === it.id) {
it.checked = true
} else {
it.checked = false
}
return it
})
let pages = Taro.getCurrentPages(); // 获取当前的页面栈
let prevPage = pages[pages.length - 2];
prevPage.setData({ //设置上一个页面的值
saleuserId: item.id,
saleuserName: item.name
});
setClientlist((e) => ({ ...e, list: clentList?.list, total: clentList?.total }))
setclientObj(item)
Taro.navigateBack({
delta: 1
})
}
useEffect(() => {
if (clientObj?.saleuserId !== null) {
setclientObj(clientObj)
} else {
let pages = Taro.getCurrentPages(); // 获取当前的页面栈
let prevPage = pages[pages.length - 2];
prevPage.setData({ //设置上一个页面的值
saleuserId: '',
saleuserName: '',
});
}
}, [clientObj])
return (
<View className={styles.cussBox}>
<View className={styles.searchBox}>
<View className={styles.two}>
<Search placeholder='请输入业务员名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
</View>
</View>
<View className={styles.listBox}>
<InfiniteScroll
statusMore={statusMore}
selfonScrollToLower={getScrolltolower}
refresherEnabled={true}
refresherTriggered={refresherTriggeredStatus}
selfOnRefresherRefresh={getRefresherRefresh}>
{
clentList.list.map((item, index) => {
return (
<View className={classnames(item.checked ? styles.acticveitemBox : styles.itemBox)} key={index} onClick={() => { selectClient(item) }}>
<View className={styles.cussName}>{item.name}</View>
<View className={styles.phone}>{item.phone}</View>
<View className={styles.woker}>{item.sale_user_name}</View>
</View>
)
})
}
</InfiniteScroll>
</View>
</View>
)
}