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

✨ feat(发货列表): 初步完成发货列表UI界面

Browse Source
This commit is contained in:
xuan
2022-09-19 19:32:47 +08:00
parent b9c3076f5d
commit fb589f120f
18 changed files with 683 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/delivery/components/ItemList/index.module.scss
+50
View File
@@ -0,0 +1,50 @@
.layoutBlock{
margin: 24px;
}
.topBar {
&__orderNo {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
color: $color_font_one;
font-size: 28px;
}
&__orderType {
color: rgba($color: #000000, $alpha: 0.6);
font-weight: 550;
}
&__orderStatus {
color: #e42945;
}
}
.content {
&__row {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
margin: 16px 0;
font-size: 28px;
color: rgba($color: #000000, $alpha: 0.4);
&__left {
}
&__right {
}
}
}
.bottomBar {
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
padding: 0 24px;
margin-top: 10px;
&__button {
margin: 0 24px;
}
&__button:last-child {
margin: 0;
}
}
.bord {
color: $color_font_one;
}
src/pages/delivery/components/ItemList/index.tsx
+64
View File
@@ -0,0 +1,64 @@
import LayoutBlock from '@/components/layoutBlock'
import Divider from '@/components/divider'
import Tag from '@/components/tag'
import { View, Text } from '@tarojs/components'
import { FC } from 'react'
import NormalButton from '@/components/normalButton'
import styles from './index.module.scss'
type PropsType = {
itemData?: Record<string, any>
}
const ItemList:FC<PropsType> = (props) => {
const { itemData } = props
// 查看详情
const handleDetail = () => {
}
// 确认审核
const handleAudit = () => {
}
return (
<LayoutBlock circle customClassName={styles.layoutBlock}>
<View className={styles.topBar}>
<View className={styles.topBar__orderNo}>
<View>单号：XS-LY-2208220092</View>
<View className={styles.topBar__orderStatus}>待审核</View>
</View>
<Text className={styles.topBar__orderType}>销售发货单</Text>
</View>
<Divider direction='horizontal'></Divider>
<View className={styles.content}>
<View className={styles.content__row}>
<View className={styles.content__row__left}>货品信息：</View>
<View className={styles.content__row__right}>
<Tag type='primary' circle plain>
大货
</Tag>
2种面料，4种颜色，共5米
</View>
</View>
<View className={styles.content__row}>
<View className={styles.content__row__left}>发货地址：</View>
<View className={styles.content__row__right}>永川纺织有限公司</View>
</View>
<View className={styles.content__row}>
<View className={styles.content__row__left}>创建时间：</View>
<View className={styles.content__row__right}>2022-09-01 18:32:32</View>
</View>
</View>
<View className={styles.bottomBar}>
<NormalButton customClassName={styles.bottomBar__button} type='info' round onClick={handleDetail}>
查看详情
</NormalButton>
<NormalButton customClassName={styles.bottomBar__button} type='primary' round onClick={handleAudit}>
确认审核
</NormalButton>
</View>
</LayoutBlock>
)
}
export default ItemList
src/pages/delivery/index.config.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '发货列表',
}
src/pages/delivery/index.module.scss
+113
View File
@@ -0,0 +1,113 @@
page {
background: #f7f7f7;
}
.delivery {
display: flex;
flex-flow: column nowrap;
.searchBox {
display: flex;
align-items: center;
background: #ffffff;
padding: 8px 24px;
}
.listBox {
background-color: #f7f7f7;
}
.itemBox {
margin-left: 24px;
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;
}
}
}
.scanHandler{
width: 40px;
height: 40px;
position: absolute;
right: 40px;
}
.icon__filter{
padding: 0 20px;
padding-right: 10px;
}
src/pages/delivery/index.tsx
+198
View File
@@ -0,0 +1,198 @@
import { View, Text } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, FC } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import Search from '@/components/search'
import { ClientListApi } from '@/api/order'
import Taro from '@tarojs/taro'
import { useRouter } from '@tarojs/taro'
import InfiniteScroll from '@/components/infiniteScroll'
import { dataLoadingStatus, getFilterData } from '@/common/util'
import IconText from '@/components/iconText'
import SegmentedControl from '@/components/SegmentedControl'
import IconFont from '@/components/iconfont/iconfont'
import ItemList from './components/ItemList'
// 发货列表
const Delivery: FC = () => {
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 } = ClientListApi()
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading })
}, [clentList, orderState])
const [clientObj, setclientObj] = useState({
clientId: null,
clientName: '',
})
//输入了搜索关键字
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
})
setclientObj(item)
let pages = Taro.getCurrentPages() // 获取当前的页面栈
let prevPage = pages[pages.length - 2]
prevPage.setData({
//设置上一个页面的值
clientId: item.id,
clientName: item.name,
})
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])
// 筛选列表
const onShowFilter = () => {}
const [statusList, setStatusList] = useState([
{
id: 1,
name: '待发货',
},
{
id: 2,
name: '已完成',
},
])
// //状态改变
const changeStatus = useCallback((e) => {
pageNum.current.page = 1
// setSearchField((value) => ({ ...value, status: e, size: 10 }))
console.log(e, '123123')
// setOrderData(() => ({ list: [], total: 0 }))
}, [])
// 扫描
const handleScan = () => {}
const scanIcon = () => {
return (
<View onClick={handleScan} className={styles.scanHandler}>
<IconFont name='icon-saomiao' size={40}></IconFont>
</View>
)
}
return (
<View className={styles.delivery}>
<View className={styles.searchBox}>
<Search placeholder='请输入或扫描条形码' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} customRightSlot={scanIcon()}>
<View onClick={onShowFilter} className={styles.icon__filter}>
<IconText iconName='icon-shaixuan' text='筛选' customClass={styles['icon--filter']} />
</View>
</Search>
</View>
{/* 状态栏 */}
<SegmentedControl list={statusList} onSelect={changeStatus} defaultId={0} />
<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> */}
<ItemList ></ItemList>
<ItemList ></ItemList>
<ItemList ></ItemList>
<ItemList ></ItemList>
</View>
</View>
)
}
export default Delivery