✨ feat(发货列表): 初步完成发货列表UI界面
This commit is contained in:
xuan
parent
b9c3076f5d
commit
fb589f120f
@ -18,7 +18,7 @@ module.exports = {
|
||||
args: [
|
||||
{
|
||||
terserOptions: {
|
||||
compress: true, // 默认使用terser压缩
|
||||
compress: false, // 默认使用terser压缩
|
||||
// compress: {
|
||||
// drop_console: true, // 去掉打印
|
||||
// }, // 默认使用terser压缩
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"es6": false,
|
||||
"postcss": false,
|
||||
"minified": false,
|
||||
"postcss": true,
|
||||
"minified": true,
|
||||
"coverView": true,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
"preloadBackgroundData": false,
|
||||
|
||||
@ -9,6 +9,13 @@
|
||||
"condition": {
|
||||
"miniprogram": {
|
||||
"list": [
|
||||
{
|
||||
"name": "发货列表",
|
||||
"pathName": "pages/delivery/index",
|
||||
"query": "",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
},
|
||||
{
|
||||
"name": "购物页面",
|
||||
"pathName": "pages/shopping/index",
|
||||
|
||||
@ -1,11 +1,5 @@
|
||||
export default defineAppConfig({
|
||||
pages: [
|
||||
'pages/index/index',
|
||||
'pages/order/index',
|
||||
'pages/shopping/index',
|
||||
'pages/user/index',
|
||||
'pages/login/index',
|
||||
],
|
||||
pages: ['pages/index/index', 'pages/order/index', 'pages/shopping/index', 'pages/user/index', 'pages/login/index'],
|
||||
window: {
|
||||
backgroundTextStyle: 'light',
|
||||
navigationBarBackgroundColor: '#fff',
|
||||
@ -42,55 +36,41 @@ export default defineAppConfig({
|
||||
'custom-wrapper': '/custom-wrapper',
|
||||
},
|
||||
subPackages: [
|
||||
{
|
||||
root: 'pages/delivery',
|
||||
pages: ['index'],
|
||||
},
|
||||
{
|
||||
root: 'pages/colorRelated',
|
||||
pages: [
|
||||
'sampleComparison/index',
|
||||
'takeColor/index',
|
||||
'findColor/index'
|
||||
],
|
||||
pages: ['sampleComparison/index', 'takeColor/index', 'findColor/index'],
|
||||
},
|
||||
{
|
||||
root: "pages/addAddress",
|
||||
pages: [
|
||||
"index"
|
||||
]
|
||||
root: 'pages/addAddress',
|
||||
pages: ['index'],
|
||||
},
|
||||
{
|
||||
root: "pages/addressManager",
|
||||
pages: [
|
||||
"index"
|
||||
]
|
||||
root: 'pages/addressManager',
|
||||
pages: ['index'],
|
||||
},
|
||||
{
|
||||
root: "pages/customerPage",
|
||||
pages: [
|
||||
"index"
|
||||
]
|
||||
root: 'pages/customerPage',
|
||||
pages: ['index'],
|
||||
},
|
||||
{
|
||||
root: "pages/orderDetails",
|
||||
pages: [
|
||||
"index"
|
||||
]
|
||||
root: 'pages/orderDetails',
|
||||
pages: ['index'],
|
||||
},
|
||||
{
|
||||
root: "pages/saleuserPage",
|
||||
pages: [
|
||||
"index"
|
||||
]
|
||||
root: 'pages/saleuserPage',
|
||||
pages: ['index'],
|
||||
},
|
||||
{
|
||||
root: "pages/searchPage",
|
||||
pages: [
|
||||
"index"
|
||||
]
|
||||
root: 'pages/searchPage',
|
||||
pages: ['index'],
|
||||
},
|
||||
{
|
||||
root: "pages/submitOrder",
|
||||
pages: [
|
||||
"index"
|
||||
]
|
||||
root: 'pages/submitOrder',
|
||||
pages: ['index'],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
19
src/components/SegmentedControl/index.module.scss
Normal file
19
src/components/SegmentedControl/index.module.scss
Normal file
@ -0,0 +1,19 @@
|
||||
.status_list{
|
||||
background-color: #fff;
|
||||
font-size: $font_size;
|
||||
color: #000;
|
||||
// margin-top: 20px;
|
||||
.status_item{
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.selected{
|
||||
font-weight: 700;
|
||||
color: #337FFF;
|
||||
border-bottom: 4px solid #337FFF;
|
||||
}
|
||||
.list_scroll{
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
59
src/components/SegmentedControl/index.tsx
Normal file
59
src/components/SegmentedControl/index.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import { ScrollView, View } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type PropsType = {
|
||||
list: { id: number; name: string }[]
|
||||
defaultId?: number | null
|
||||
onSelect?: (val: number) => void
|
||||
}
|
||||
|
||||
const segmentedControl: FC<PropsType> = (props) => {
|
||||
const [selectInfo, setSelectInfo] = useState({
|
||||
selected: -1, //当前选中的id
|
||||
tabId: '', //需要滚动到的id
|
||||
})
|
||||
const { list, defaultId, onSelect } = props
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof defaultId === 'number' && defaultId >= 0) {
|
||||
console.log('defaultId:::', defaultId)
|
||||
const index = list?.findIndex((item) => {
|
||||
return item.id == defaultId
|
||||
})
|
||||
if (index !== -1) {
|
||||
const num = index > 0 ? index - 1 : 0
|
||||
setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString() }))
|
||||
}
|
||||
}
|
||||
setSelectInfo((e) => ({ ...e, selected: defaultId || -1 }))
|
||||
}, [defaultId])
|
||||
|
||||
const clickEvent = ({ item, index }: { item: any; index: number }) => {
|
||||
const num = index > 0 ? index - 1 : 0
|
||||
setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString(), selected: item.id }))
|
||||
onSelect?.(item.id)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.status_list}>
|
||||
<ScrollView scrollX scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
|
||||
<View className={styles.list_scroll}>
|
||||
{list.map((item, index) => {
|
||||
return (
|
||||
<View
|
||||
key={item.id}
|
||||
id={`tabs_${item.id}`}
|
||||
onClick={() => clickEvent({ item, index })}
|
||||
className={classnames(styles.status_item, selectInfo.selected == item.id && styles.selected)}>
|
||||
{item.name}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default segmentedControl
|
||||
@ -12,7 +12,7 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
input{
|
||||
font-size: 27px;
|
||||
background: #eee;
|
||||
|
||||
@ -18,7 +18,8 @@ type Params = {
|
||||
btnTitle?: string,
|
||||
debounceTime?: number //防抖时间，不设默认为零
|
||||
defaultValue?: string,
|
||||
children?: ReactNode
|
||||
children?: ReactNode,
|
||||
customRightSlot?: ReactNode
|
||||
}
|
||||
|
||||
export default memo(forwardRef(({
|
||||
@ -33,7 +34,8 @@ export default memo(forwardRef(({
|
||||
btnTitle = '搜索', //搜索文字
|
||||
debounceTime = 0, //防抖时间，不设默认为零
|
||||
defaultValue = '',//默认值
|
||||
children
|
||||
children,
|
||||
customRightSlot
|
||||
}: Params, ref) => {
|
||||
const [inputCon, setInputCon] = useState('')
|
||||
const debounceTimeRef = useRef(0)
|
||||
@ -72,13 +74,35 @@ 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>}
|
||||
<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}>
|
||||
{showIcon && (
|
||||
<View
|
||||
className={classnames(
|
||||
'iconfont',
|
||||
'icon-sousuo',
|
||||
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>}
|
||||
)}
|
||||
{customRightSlot}
|
||||
</View>
|
||||
{showBtn && (
|
||||
<View style={btnStyle} className={styles.btn} onClick={onSearch}>
|
||||
{btnTitle}
|
||||
</View>
|
||||
)}
|
||||
{children}
|
||||
</View>
|
||||
</>
|
||||
|
||||
50
src/pages/delivery/components/ItemList/index.module.scss
Normal file
50
src/pages/delivery/components/ItemList/index.module.scss
Normal 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;
|
||||
}
|
||||
64
src/pages/delivery/components/ItemList/index.tsx
Normal file
64
src/pages/delivery/components/ItemList/index.tsx
Normal 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
|
||||
3
src/pages/delivery/index.config.ts
Normal file
3
src/pages/delivery/index.config.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '发货列表',
|
||||
}
|
||||
113
src/pages/delivery/index.module.scss
Normal file
113
src/pages/delivery/index.module.scss
Normal 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;
|
||||
}
|
||||
198
src/pages/delivery/index.tsx
Normal file
198
src/pages/delivery/index.tsx
Normal 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
|
||||
@ -14,7 +14,7 @@ export default memo(({ list = [], defaultId = null, onSelect }: Param) => {
|
||||
tabId: '', //需要滚动到的id
|
||||
})
|
||||
useEffect(() => {
|
||||
if (defaultId) {
|
||||
if (typeof defaultId === 'number' && defaultId >= 0) {
|
||||
console.log('defaultId:::', defaultId)
|
||||
const index = list?.findIndex((item) => {
|
||||
return item.id == defaultId
|
||||
|
||||
@ -580,14 +580,14 @@ export default () => {
|
||||
return (
|
||||
<View>
|
||||
<View style={{ background: '#FFFFFF', paddingLeft: '20rpx', paddingBottom: '20rpx', position: 'sticky', top: '0', zIndex: '99' }}>
|
||||
<Search placeholder='搜索商品/名称/颜色/订单号' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
|
||||
<Search placeholder='搜索商品/名称/颜色/订单号' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}>
|
||||
<View className={styles.flexBox} onClick={() => showSelctPopup()}>
|
||||
<View className={classnames('iconfont', 'icon-shaixuan', !isDisabled ? styles.icon_shaixuan : styles.activeshaixuan)}></View>
|
||||
<View className={classnames(isDisabled ? styles.shaixuan : styles.activeshai)}>筛选</View>
|
||||
</View>
|
||||
</Search>
|
||||
</View>
|
||||
<View style={{ background: '#FFFFFF', }}>
|
||||
<View style={{ background: '#FFFFFF' }}>
|
||||
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={-1} />
|
||||
</View>
|
||||
<View className={styles.order_list}>
|
||||
@ -605,8 +605,7 @@ export default () => {
|
||||
key={index}
|
||||
cancle={(e, item) => cancle(e, item)}
|
||||
nextBuy={(e, item) => nextBuy(e, item)}
|
||||
toPay={(e, item) => toPay(e, item)}
|
||||
></ItemList>
|
||||
toPay={(e, item) => toPay(e, item)}></ItemList>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
@ -634,41 +633,76 @@ export default () => {
|
||||
<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>
|
||||
<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>
|
||||
</View>
|
||||
<View className={styles.thirdBox}>
|
||||
<View className={styles.thirdTopfont}>订单类型</View>
|
||||
<View className={styles.flexModebox}>
|
||||
{
|
||||
modeList.map((item, index) => {
|
||||
{modeList.map((item, index) => {
|
||||
return (
|
||||
<View onClick={() => { handCheckMode(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
|
||||
<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) => {
|
||||
{deliveryList.map((item, index) => {
|
||||
return (
|
||||
<View onClick={() => { handCheckDelivery(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
|
||||
<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 >
|
||||
<Button
|
||||
className={styles.resetBox}
|
||||
onClick={() => {
|
||||
handReset()
|
||||
}}>
|
||||
{' '}
|
||||
重置
|
||||
</Button>
|
||||
<Button
|
||||
className={classnames(isDisabled ? styles.button : styles.activeButton)}
|
||||
disabled={isDisabled}
|
||||
onClick={() => {
|
||||
handSure?.()
|
||||
}}>
|
||||
{' '}
|
||||
确认
|
||||
</Button>
|
||||
</View>
|
||||
{/* <View className={styles.areaBox}></View> */}
|
||||
</View>
|
||||
@ -682,9 +716,8 @@ export default () => {
|
||||
handsurePay={(obj) => handsurePay(obj)}
|
||||
showSide={showSide}
|
||||
title={title}
|
||||
picUrl={picUrl}
|
||||
></PayPopup>
|
||||
picUrl={picUrl}></PayPopup>
|
||||
<OfflinePay show={showOffline} onClose={() => setShowOffine(false)} offlineInfo={itemObj}></OfflinePay>
|
||||
</View >
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'
|
||||
import { FC, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import { formatPriceDiv } from '@/common/format'
|
||||
@ -27,9 +27,8 @@ const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
|
||||
)
|
||||
})
|
||||
|
||||
export default memo((props: PropsType) => {
|
||||
|
||||
// const { handleSelectedItem } = useLayoutBlockContext()
|
||||
export default memo<PropsType>((props) => {
|
||||
console.log('props==>', props)
|
||||
const { itemData, selectedId } = props
|
||||
|
||||
console.log('重新渲染 shoppingCartItem', selectedId)
|
||||
@ -45,8 +44,7 @@ export default memo((props: PropsType) => {
|
||||
setSelect(type)
|
||||
}
|
||||
|
||||
const [mockList, setMockList] = useState(
|
||||
{
|
||||
const [mockList, setMockList] = useState({
|
||||
0: [
|
||||
{ id: 0, sale_mode: 0, roll: 5, length: 0, checked: true },
|
||||
{ id: 1, sale_mode: 0, roll: 6, length: 0, checked: false },
|
||||
@ -61,9 +59,7 @@ export default memo((props: PropsType) => {
|
||||
{ id: 8, sale_mode: 2, roll: 0, length: 11100, checked: false },
|
||||
{ id: 9, sale_mode: 2, roll: 0, length: 8540, checked: true },
|
||||
],
|
||||
}
|
||||
)
|
||||
// const [mockList, setMockList] = useState(itemData?.color_list)
|
||||
})
|
||||
|
||||
const handleChecked = useCallback(
|
||||
(current) => {
|
||||
@ -120,11 +116,11 @@ export default memo((props: PropsType) => {
|
||||
console.log('itemData===>', itemData)
|
||||
}
|
||||
|
||||
const {isManager} = useContext(ShoppingContext)
|
||||
// const { isManager } = useContext(ShoppingContext)
|
||||
|
||||
return (
|
||||
<LayoutBlock circle customClassName={classnames(styles.layout, itemData?.purchaser_id === selectedId ? styles.selected : '')} onClick={handleClickLayout}>
|
||||
<MCheckbox customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false} hidden={isManager}>
|
||||
<MCheckbox customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false}>
|
||||
<View className='flex-row justify-between' onClick={handleOpenDetail}>
|
||||
<View className={styles.topItem}>
|
||||
<View className='flex-row items-center'>
|
||||
@ -135,7 +131,7 @@ export default memo((props: PropsType) => {
|
||||
</View>
|
||||
<View className={styles.summary}>
|
||||
<Text>
|
||||
已选 {mockList[selected].filter(item=>item.checked).length} 种面料，1 个颜色，共 {selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
|
||||
已选 {mockList[selected].filter((item) => item.checked).length} 种面料，1 个颜色，共 {selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@ -33,7 +33,7 @@ export const Shopping: FC = () => {
|
||||
// 管理
|
||||
const onStartToManage = () => {
|
||||
setManage((isManage) => !isManage)
|
||||
ShoppingContext.Consumer
|
||||
// ShoppingContext.Consumer
|
||||
}
|
||||
|
||||
const [selectedAmount, setSelectedAmount] = useState(0)
|
||||
@ -59,28 +59,31 @@ export const Shopping: FC = () => {
|
||||
}, [shoppingCartData, state])
|
||||
|
||||
useDidShow(() => {
|
||||
fetchData()
|
||||
(async () => {
|
||||
await fetchData()
|
||||
let query = Taro.createSelectorQuery()
|
||||
console.log('query', query)
|
||||
query.select('#shoppingContainer').boundingClientRect()
|
||||
query.select('#topBar').boundingClientRect()
|
||||
query.select('#bottomBar').boundingClientRect()
|
||||
query.exec((res) => {
|
||||
console.log('res==>', res)
|
||||
const containerHeight = res[0].height
|
||||
const topBarHeight = res[1].height
|
||||
const bottomBarHeight = res[2].height
|
||||
const listHeight = containerHeight - topBarHeight - bottomBarHeight
|
||||
setListHeight(listHeight + 'px')
|
||||
})
|
||||
})()
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setShoppingCartData({ list: state.data, total: state.data.length })
|
||||
}, [state])
|
||||
|
||||
useEffect(() => {
|
||||
let query = Taro.createSelectorQuery()
|
||||
console.log(query)
|
||||
query.select('#shoppingContainer').boundingClientRect()
|
||||
query.select('#topBar').boundingClientRect()
|
||||
query.select('#bottomBar').boundingClientRect()
|
||||
query.exec((res) => {
|
||||
const containerHeight = res[0].height
|
||||
const topBarHeight = res[1].height
|
||||
const bottomBarHeight = res[2].height
|
||||
const listHeight = containerHeight - topBarHeight - bottomBarHeight
|
||||
console.log('res==>', listHeight)
|
||||
setListHeight(listHeight + 'px')
|
||||
useDidShow(() => {
|
||||
|
||||
})
|
||||
}, [])
|
||||
|
||||
const [selectedId, setSelectedId] = useState<number>()
|
||||
|
||||
@ -105,8 +108,9 @@ export const Shopping: FC = () => {
|
||||
<View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeight }}>
|
||||
<ShoppingContext.Provider value={{isManager:false}}>
|
||||
<InfiniteScroll statusMore={statusMore}>
|
||||
{!!shoppingCartData.list?.length &&
|
||||
shoppingCartData.list?.map((item, index) => {
|
||||
{!!shoppingCartData?.list?.length &&
|
||||
shoppingCartData?.list?.map((item, index) => {
|
||||
console.log('item==>', item)
|
||||
return <ItemList itemData={item} key={index} selectedId={selectedId}></ItemList>
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
|
||||
@ -103,7 +103,7 @@ const defaultOptions = {
|
||||
*/
|
||||
export const useNeedMemoCallback = (options: Options = defaultOptions) => {
|
||||
return (prevProps: NormalPropsType, nextProps: NormalPropsType) => {
|
||||
// console.log(options)
|
||||
console.log(options)
|
||||
console.log('memo==>', prevProps, nextProps)
|
||||
let needMemoized = true
|
||||
// 引用类型
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user