🦄 refactor:购物车添加虚拟列表
This commit is contained in:
Haiyi
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
+180
-77
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user