🦄 refactor:购物车添加虚拟列表
This commit is contained in:
Haiyi
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '选择业务员',
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user