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-01 14:14:18 +08:00
parent b5bd2e1b21
commit 34dd4722c9
8 changed files with 13780 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/api/order.ts
View File

@ -5,3 +5,25 @@ export const mpenumsaleorderstatus = () => {
method: "get",
})
}
/**
* 获取订单列表
* @returns
*/
export const OrderListApi = () => {
return useRequest({
url: `/v1/mp/saleOrder/list`,
method: "get",
})
}
/**
* 客户列表
* @returns
*/
export const ClientListApi = () => {
return useRequest({
url: `/v1/mp/purchaser/list`,
method: "get"
})
}

11
src/components/search/index.tsx
View File

@ -3,7 +3,7 @@ import styles from "./index.module.scss"
import CloseBtn from "@/components/closeBtn"
import classnames from "classnames";
import { debounce } from "@/common/util";
import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
import { Children, forwardRef, memo, ReactElement, ReactNode, useEffect, useImperativeHandle, useRef, useState } from "react";
type Params = {
clickOnSearch?: (val: string) => void
@ -17,7 +17,8 @@ type Params = {
btnStyle?: Object,
btnTitle?: string,
debounceTime?: number //防抖时间，不设默认为零
defaultValue?: string
defaultValue?: string,
children?: ReactNode
}
export default memo(forwardRef(({
@ -31,7 +32,8 @@ export default memo(forwardRef(({
placeIcon = 'inner', //搜索图标位置：inner在里面，out在外面
btnTitle = '搜索', //搜索文字
debounceTime = 0, //防抖时间，不设默认为零
defaultValue = '' //默认值
defaultValue = '',//默认值
children
}: Params, ref) => {
const [inputCon, setInputCon] = useState('')
const debounceTimeRef = useRef(0)
@ -70,13 +72,14 @@ export default memo(forwardRef(({
<>
<View className={styles.search_main}>
<View className={styles.search_con}>
{showIcon&&<View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon=='inner'?styles.icon_inner:styles.icon_out)}></View>}
{showIcon && <View className={classnames('iconfont', 'icon-a-sousuo1', styles.icon_a_sousuo1_self, placeIcon == 'inner' ? styles.icon_inner : styles.icon_out)}></View>}
<Input placeholderStyle='color:#ABABAB; font-size:26rpx' onConfirm={onSearch} className={classnames(placeIcon == 'out' && styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
{!!inputCon && <View className={styles.search_closeBtn}>
<CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />
</View>}
</View>
{showBtn && <View style={btnStyle} className={styles.btn} onClick={onSearch}>{btnTitle}</View>}
{children}
</View>
</>
)

6
src/pages/order/components/orderStatusList/index.module.scss
View File

@ -1,6 +1,6 @@
.order_status_list{
font-size: $font_size;
color: #9E9E9E;
color: #000;
margin-top: 20px;
.order_status_item{
padding: 20px;
@ -8,8 +8,8 @@
}
.selected{
font-weight: 700;
color: #000;
border-bottom: 4px solid #707070;
color: #337FFF;
border-bottom: 4px solid #337FFF;
}
.order_list_scroll{
white-space: nowrap;

129
src/pages/order/index.module.scss Normal file
View File

@ -0,0 +1,129 @@
.flexBox {
display: flex;
width: 200px;
align-items: center;
justify-content: flex-end;
}
.icon_shaixuan {
color: #000;
font-size: 35px;
margin-right: 10px;
}
.shaixuan {
margin-right: 32px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.popupBox {
.topBox {
display: flex;
padding-left: 48px;
.leftTop {
.lefttopTitle {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
margin-bottom: 24px;
}
.lefttopSelectBox {
display: flex;
align-items: center;
width: 319px;
height: 68px;
background: #E9E9E9;
border-radius: 8px;
opacity: 0.4;
justify-content: space-between;
margin-right: 16px;
.lefttopSelectName {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-left: 24px;
}
.icon_more {
margin-right: 24px;
font-size: 30px;
}
}
}
}
}
.popupTwobox {
padding-left: 40px;
padding-right: 40px;
.scrollview {
height: 400px;
.btnBox {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
.itemBox {
width: 213px;
height: 80px;
background: #f5f5f5;
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;
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;
}
}
}
}
.order_list {
height: calc(100vh - 160px);
.bigBpx {
height: 200px;
}
}

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

@ -1,48 +1,215 @@
// import { View } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
// import { mpenumsaleorderstatus } from '@/api/order'
// import OrderStatusList from './components/orderStatusList'
// //页码和页数
// const [searchField, setSearchField] = useState<{ status: number | unknown; page: number; size: number; name: string }>({
// status: null,
// page: 1,
// size: 10,
// name: '',
// })
// const pageNum = useRef({ size: searchField.size, page: searchField.page })
// //获取订单状态
// const { fetchData: orderStatusListFetchData } = mpenumsaleorderstatus()
const [statusList, setStatusList] = useState<any[]>([{ id: -1, name: '全部' }])
// const getOrderStatusList = async () => {
// let res = await orderStatusListFetchData()
// setStatusList((e) => [...e, ...res.data.list])
// }
// //状态改变
// const changeStatus = useCallback((e) => {
// pageNum.current.page = 1
// setSearchField((value) => ({ ...value, status: e, size: 10 }))
// // setOrderData(() => ({ list: [], total: 0 }))
// }, [])
// useEffect(() => {
// getOrderStatusList()
// }, [])
// export default () => {
// return (
// <View>
// {/* <OrderStatusList list={statusList} onSelect={changeStatus} defaultId={-1} /> */}
// 22
// </View>
// )
// }
import { View, ScrollView } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, } from 'react'
import { mpenumsaleorderstatus, OrderListApi, ClientListApi } from '@/api/order'
import OrderStatusList from './components/orderStatusList'
import Search from '@/components/search'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import styles from "./index.module.scss"
import classnames from "classnames";
import Popup from '@/components/popup'
import InfiniteScroll from '@/components/infiniteScroll'
import { compose } from 'redux'
export default () => {
return (<>222</>)
//页码和页数
const [searchField, setSearchField] = useState<{ status: number | unknown; page: number; size: number; name: string }>({
status: -1,
page: 1,
size: 10,
name: '',
})
//获取订单列表
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))
setOrderData((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
setRefresherTriggeredStatus(() => false)
}
//列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => {
pageNum.current.size = 1
setRefresherTriggeredStatus(true)
setSearchField((val) => ({ ...val, size: 10 }))
}
//数据加载状态
const statusMore = useMemo(() => {
console.log({ list: orderData.list, total: orderData.total, status: orderState.loading }, '{ list: orderData.list, total: orderData.total, status: orderState.loading }')
return dataLoadingStatus({ list: orderData.list, total: orderData.total, status: orderState.loading })
}, [orderData, orderState])
//上拉加载数据
const pageNum = useRef({ size: searchField.size, page: searchField.page })
const getScrolltolower = useCallback(() => {
if (orderData.list.length < orderData.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchField({ ...searchField, size })
}
}, [orderData])
// //获取订单状态
const { fetchData: orderStatusListFetchData } = mpenumsaleorderstatus()
const [statusList, setStatusList] = useState<any[]>([{ id: -1, name: '全部' }])
const getOrderStatusList = async () => {
let res = await orderStatusListFetchData()
setStatusList((e) => [...e, ...res.data.list])
}
//监听筛选条件变化
useEffect(() => {
if (searchField.status != null) getOrderList()
}, [searchField])
// //状态改变
const changeStatus = useCallback((e) => {
pageNum.current.page = 1
setSearchField((value) => ({ ...value, status: e, size: 10 }))
console.log(e, '123123')
setOrderData(() => ({ list: [], total: 0 }))
}, [])
//输入了搜索关键字
const getSearchData = useCallback((e) => {
pageNum.current.page = 1
setOrderData(() => ({ list: [], total: 0 }))
setSearchField((val) => ({ ...val, name: e, size: 10 }))
}, [])
//筛选内容展示
const [showPopup, setshowPopup] = useState(false)
const showSelctPopup = () => {
setshowPopup(true)
}
//关闭筛选内容展示
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])
}, [])
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>
</Search>
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={-1} />
<View className={styles.order_list}>
<InfiniteScroll
statusMore={statusMore}
selfonScrollToLower={getScrolltolower}
refresherEnabled={true}
refresherTriggered={refresherTriggeredStatus}
selfOnRefresherRefresh={getRefresherRefresh}>
{orderData?.list?.map((item) => {
return (
<View key={item.id} className={styles.order_item_con}>
<View className={styles.bigBpx}>2222</View>
{/* <Order value={item} onClickBtn={clickOrderBtn} /> */}
</View>
)
})}
</InfiniteScroll>
</View>
<Popup title={'筛选订单'} show={showPopup} onClose={() => closePopup()}>
<View className={styles.popupBox}>
<View className={styles.topBox}>
<View className={styles.leftTop} onClick={() => showPopupDesige(1)}>
<View className={styles.lefttopTitle}>客户信息</View>
<View className={styles.lefttopSelectBox}>
<View className={styles.lefttopSelectName}>请选择客户</View>
<View className={classnames('iconfont', 'icon-more', styles.icon_more)}></View>
</View>
</View>
<View className={styles.leftTop} onClick={() => showPopupDesige(2)}>
<View className={styles.lefttopTitle}>业务员</View>
<View className={styles.lefttopSelectBox}>
<View className={styles.lefttopSelectName}>请选择业务员</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>
</ScrollView>
</View>
</Popup>
</View>
)
}

289
src/styles/iconfont.scss
View File

@ -1,6 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2987621 */
src: url('iconfont.ttf?t=1658997423433') format('truetype');
font-family: "iconfont";
/* Project id 2987621 */
src: url('iconfont.ttf?t=1661926630273') format('truetype');
}
.iconfont {
@ -11,100 +13,24 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-wodekefu:before {
content: "\e67a";
.icon-A:before {
content: "\e6ea";
}
.icon-yaoqingma:before {
content: "\e679";
}
.icon-gengduo:before {
content: "\e677";
}
.icon-shanchu-2:before {
content: "\e678";
}
.icon-shangchuanzhaopian:before {
content: "\e676";
}
.icon-zuzhiziliao:before {
content: "\e66e";
}
.icon-rili:before {
content: "\e66f";
}
.icon-yishoucang:before {
content: "\e670";
}
.icon-tongguorenzheng:before {
content: "\e671";
}
.icon-gerenziliao:before {
content: "\e672";
}
.icon-shuaxin:before {
content: "\e673";
}
.icon-piliangguanli:before {
content: "\e674";
}
.icon-xinzeng:before {
content: "\e675";
}
.icon-yucunkuan:before {
content: "\e66c";
}
.icon-xianxiahuikuan:before {
content: "\e669";
.icon-erweima:before {
content: "\e7b5";
}
.icon-xtianzhangqi:before {
content: "\e66a";
}
.icon-saomazhifu:before {
content: "\e66b";
.icon-yucunkuan:before {
content: "\e66c";
}
.icon-fahuo:before {
content: "\e66d";
}
.icon-zhuyi:before {
content: "\e668";
}
.icon-zhushi:before {
content: "\e667";
}
.icon-zidingyimadan:before {
content: "\e665";
}
.icon-a-yuanmadanmadanguanli:before {
content: "\e666";
}
.icon-daohang:before {
content: "\e664";
}
.icon-shanchu:before {
content: "\e663";
.icon-a-tuikuanshouhou:before {
content: "\e65c";
}
.icon-yifahuo:before {
@ -115,111 +41,194 @@
content: "\e662";
}
.icon-yaoqingtuandui:before {
content: "\e65a";
.icon-guanbi:before {
content: "\e641";
}
.icon-a-tuikuanshouhou:before {
content: "\e65c";
.icon-a-saoyisao2:before {
content: "\e613";
}
.icon-daifukuan:before {
content: "\e65d";
.icon-guanyuquse:before {
content: "\e635";
}
.icon-shezhi:before {
content: "\e65e";
.icon-yangpinduibi:before {
content: "\e631";
}
.icon-yanseduibi:before {
content: "\e65f";
.icon-lingquseka:before {
content: "\e632";
}
.icon-daifahuo:before {
content: "\e660";
.icon-sehaochazhao:before {
content: "\e633";
}
.icon-baoguo:before {
content: "\e661";
.icon-jichuguanli:before {
content: "\e634";
}
.icon-tick-pressed:before {
content: "\e652";
.icon-yuncangkucun:before {
content: "\e630";
}
.icon-wode-pressed:before {
content: "\e655";
.icon-shangchuanzhaopian:before {
content: "\e62f";
}
.icon-fenlei-pressed:before {
content: "\e656";
.icon-zhushi:before {
content: "\e62d";
}
.icon-sousuo:before {
content: "\e647";
.icon-shenqingtuihuo:before {
content: "\e62e";
}
.icon-fenxiang:before {
content: "\e648";
.icon-quxiaodingdanxiao:before {
content: "\e62c";
}
.icon-tuihuo1:before {
content: "\e62a";
}
.icon-a-fenqishangchengyifahuo:before {
content: "\e62b";
}
.icon-peibu:before {
content: "\e626";
}
.icon-dingdanbishu:before {
content: "\e627";
}
.icon-guanyufahuo:before {
content: "\e628";
}
.icon-tuihuo:before {
content: "\e629";
}
.icon-rili:before {
content: "\e625";
}
.icon-jiangpai:before {
content: "\e624";
}
.icon-xiaoshou:before {
content: "\e623";
}
.icon-cangkuguanli:before {
content: "\e61f";
}
.icon-zhibiaoduizhang:before {
content: "\e620";
}
.icon-a-tongji1:before {
content: "\e621";
}
.icon-shaixuan:before {
content: "\e649";
content: "\e622";
}
.icon-gouwuche:before {
content: "\e64a";
.icon-xiangxiagengduo:before {
content: "\e61e";
}
.icon-qingkong:before {
content: "\e64c";
.icon-gongnengdingyi:before {
content: "\e61a";
}
.icon-jia:before {
content: "\e64d";
.icon-rukuguanli:before {
content: "\e61b";
}
.icon-shenqing:before {
content: "\e61c";
}
.icon-kehuguanli:before {
content: "\e61d";
}
.icon-a-phone1:before {
content: "\e619";
}
.icon-a-saoyisao2:before {
content: "\e613";
}
.icon-ico_zhongyaofangguanli_zhongyaopandian:before {
content: "\e615";
}
.icon-seka:before {
content: "\e616";
}
.icon-xiaoshoutongji:before {
content: "\e617";
}
.icon-gengduo:before {
content: "\e618";
}
.icon-lajitong:before {
content: "\e60c";
}
.icon-jian:before {
content: "\e64e";
content: "\e60b";
}
.icon-shoucang-pressed:before {
content: "\e64f";
.icon-jia:before {
content: "\e60a";
}
.icon-shoucang:before {
content: "\e650";
.icon-a-tick1:before {
content: "\e609";
}
.icon-phone:before {
content: "\e651";
.icon-a-cuowuwrong:before {
content: "\e608";
}
.icon-tick:before {
content: "\e653";
}
.icon-a-moreback:before {
content: "\e654";
}
.icon-fenlei:before {
content: "\e657";
.icon-more:before {
content: "\e606";
}
.icon-bianji:before {
content: "\e658";
content: "\e607";
}
.icon-wode:before {
content: "\e659";
content: "\e602";
}
.icon-sort-up-full:before {
content: "\ea4c";
.icon-shangpinguanli:before {
content: "\e603";
}
.icon-sort-down-full:before {
content: "\ea4d";
.icon-dingdan:before {
content: "\e604";
}
.icon-fenlei:before {
content: "\e605";
}
.icon-a-sousuo1:before {
content: "\e601";
}

BIN
src/styles/iconfont.ttf
View File

Binary file not shown.

13244
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff