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

Merge branch 'dev' of ssh://git.online.zzfzyc.com:10022/mp/spider_cloud_warehouse into 订单页

Browse Source
This commit is contained in:
Haiyi 2022-10-19 17:37:31 +08:00
commit a115787a02
13 changed files with 370 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
project.private.config.json
View File

@ -169,6 +169,13 @@
"query": "orderId=28503",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/saleStatistic/index",
"query": "",
"launchMode": "default",
"scene": null
}
]
}

29
src/common/util.ts
View File

@ -61,16 +61,16 @@ export const getFilterData = (val = {}, arr: string[] = []) => {
* @param {*} object
* @returns
*/
export const copyObject = (object) => {
export const copyObject = object => {
if (object.constructor == Object) {
let keys = Object.keys(object)
let newObject = {}
keys.map((key) => {
keys.map(key => {
newObject[key] = copyObject(object[key])
})
return newObject
} else if (object.constructor == Array) {
return object.map((item) => {
return object.map(item => {
return copyObject(item)
})
} else {
@ -93,9 +93,17 @@ export const copyObject = (object) => {
export const screenshot = (url, suffix = '!w200') => {
return url + suffix
}
interface DataLoadingStatus {
list: any[]
total: number
status: boolean
}
//获取数据加载状态 //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
export const dataLoadingStatus = ({ list = [], total = 0, status = false }: { list: any[]; total: number; status: true | false }) => {
export const dataLoadingStatus = ({ list = [], total = 0, status = true }: DataLoadingStatus) => {
// 类型校验
if (Object.prototype.toString.call(list) !== '[object Array]') {
list = []
}
if (list.length == 0 && status) {
return 0
} else if (list.length == 0 && !status) {
@ -107,7 +115,6 @@ export const dataLoadingStatus = ({ list = [], total = 0, status = false }: { li
}
}
function delay(delayTime = 25): Promise<null> {
return new Promise(resolve => {
setTimeout(() => {
@ -117,10 +124,7 @@ function delay(delayTime = 25): Promise<null> {
})
}
export function delayQuerySelector(
selectorStr: string,
delayTime = 500
): Promise<any[]> {
export function delayQuerySelector(selectorStr: string, delayTime = 500): Promise<any[]> {
return new Promise(resolve => {
const selector: SelectorQuery = Taro.createSelectorQuery()
delay(delayTime).then(() => {
@ -134,7 +138,6 @@ export function delayQuerySelector(
})
}
//全局分享监听
export const shareShop = () => {
const page = Taro.getCurrentInstance().page
@ -143,7 +146,7 @@ export const shareShop = () => {
analysisShortCodeApi(page.options.share)
}
if (page && page.onShareAppMessage) {
page.onShareAppMessage = (res) => {
page.onShareAppMessage = res => {
let path = ''
let title = ''
let imageUrl = ''
@ -170,5 +173,3 @@ export const shareShop = () => {
}
}
}

30
src/components/infiniteScroll/index.tsx
View File

@ -1,10 +1,10 @@
import { ScrollView, View } from "@tarojs/components"
import React, { memo, ReactNode, useMemo, useState } from "react"
import style from "./index.module.scss"
import DotLoading from "@/components/dotLoading"
import LoadingCard from "../loadingCard"
import { ScrollView, View } from '@tarojs/components'
import React, { memo, ReactNode, useMemo, useState } from 'react'
import style from './index.module.scss'
import DotLoading from '@/components/dotLoading'
import LoadingCard from '../loadingCard'
export type StatusParam = 0|1|2|3
export type StatusParam = 0 | 1 | 2 | 3
type Params = {
styleObj?: React.CSSProperties
@ -36,7 +36,7 @@ export default memo(
selfOnRefresherRefresh,
selfOnRefresherRestore,
selfOnRefresherAbort,
safeAreaInsetBottom=true,
safeAreaInsetBottom = true,
enableLoadMoreStatus = true,
children,
lowerThresholdNum = 5,
@ -76,28 +76,29 @@ export default memo(
}
}, [statusMore])
const component = () => {
if(enableLoadMoreStatus){
if (!moreStatus){
if (enableLoadMoreStatus) {
if (!moreStatus) {
return (
<View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
{children}
</View>
)
}else{
} else {
return (
<>
{(statusMore == 2 || statusMore == 3) && (
<View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
{children}
<View className={style.infinite_scroll}>
{(statusMore == 2 && (
{statusMore == 2 ? (
<View className={style.loading_more}>
加载中
<DotLoading />
</View>
)) || <View className={style.noMore}>没有更多数据了</View>}
) : (
<View className={style.noMore}>没有更多数据了</View>
)}
</View>
</View>
)}
@ -106,8 +107,7 @@ export default memo(
</>
)
}
}else{
} else {
return (
<View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
{children}

5
src/pages/shopping/components/bottomSettleBar/index.tsx
View File

@ -8,8 +8,9 @@ type PropsType = {
onSettleAccount?: Function
}
export default memo<PropsType>(props => {
export default props => {
const { onSettleAccount, amount = 0 } = props
console.log('amount==>', amount)
const handleSettle = () => {
onSettleAccount && onSettleAccount()
@ -31,4 +32,4 @@ export default memo<PropsType>(props => {
</View>
</View>
)
})
}

53
src/pages/shopping/components/colorKindItem/index.tsx
View File

@ -9,7 +9,7 @@ import { formatImgUrl, formatPriceDiv } from '@/common/format'
import { EnumSaleMode } from '@/common/Enumerate'
import { useNeedMemoCallback } from '@/use/useCommon'
import { selectList } from '../../config'
import { useShoppingContext, useWatch } from '../../context'
import { ShoppingDispatchType, useShoppingDispatch, useShoppingState } from '../../context'
type PropsType = {
purchaserId: number
itemData: Record<string, any> & object
@ -19,39 +19,55 @@ type PropsType = {
// 注意：如果在表单控件内部使用 useWatch，由于是直接从Context中取值，memo也会直接失去作用。
const ColorKindItem: FC<PropsType> = memo(
(props) => {
props => {
console.log('Rerender component: ColorKindItem')
const { purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props
const { setChangedCheckbox, colorStore } = useShoppingContext()
const { colorStore } = useShoppingState()
const dispatch = useShoppingDispatch()
// @ts-ignore
const { checked } = useWatch(purchaserId, itemData?.id)
const { checked } = colorStore[purchaserId]['goodsKind']![itemData.id] || { checked: false }
//格式化金额
const formatPrice = useCallback((price) => {
const formatPrice = (price: number) => {
return Number(formatPriceDiv(price))
}, [])
}
//格式化数量
const formatCount = useCallback((itemData) => {
const formatCount = itemData => {
return itemData.sale_mode == EnumSaleMode.Bulk ? itemData.roll : itemData.length / 100
}, [])
}
//格式化单位
const formatUnit = useCallback((itemData) => {
const formatUnit = itemData => {
return itemData.sale_mode == EnumSaleMode.Bulk ? '条' : '米'
}, [])
}
const handleSelect = () => {
// console.log('handleSelect')
setChangedCheckbox({
purchaserId: purchaserId,
goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: true } },
dispatch({
type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
data: {
purchaserId: purchaserId,
goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: true } },
},
})
// setChangedCheckbox({
// purchaserId: purchaserId,
// goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: true } },
// })
}
const handleClose = () => {
setChangedCheckbox({
purchaserId: purchaserId,
goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: false } },
dispatch({
type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
data: {
purchaserId: purchaserId,
goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: false } },
},
})
// setChangedCheckbox({
// purchaserId: purchaserId,
// goodsKind: { [itemData.id]: { ...colorStore[purchaserId].goodsKind?.[itemData.id]!, checked: false } },
// })
}
const getInputValue = debounce(async (num, itemData) => {
@ -85,11 +101,11 @@ const ColorKindItem: FC<PropsType> = memo(
<View className={styles['colorKindItem__right--price']}>￥ {formatPrice(itemData.sale_price)}/kg</View>
<View className={styles['colorKindItem__right--counter']}>
<Counter
onBlue={(e) => getInputValue(e, itemData)}
onBlue={e => getInputValue(e, itemData)}
defaultNum={formatCount(itemData)}
step={selectList[orderType].step}
digits={selectList[orderType].digits}
onClickBtn={(e) => getInputValue(e, itemData)}
onClickBtn={e => getInputValue(e, itemData)}
unit={formatUnit(itemData)}
minNum={selectList[orderType].minNum}
maxNum={selectList[orderType].maxNum}
@ -97,6 +113,7 @@ const ColorKindItem: FC<PropsType> = memo(
</View>
</View>
</MCheckbox>
// <View>1111</View>
)
},
(preProp, nextProp) => {

101
src/pages/shopping/components/shoppingCart/index.tsx
View File

@ -1,92 +1,55 @@
import { FC, ReactNode, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
import { InternalShoppingCartAction, ShoppingCartAction, ShoppingContext, useShoppingCart } from '../../context'
import { GoodsMeta, ColorStore, ShoppingContextValue } from '../../context'
import { Dispatch, FC, ReactNode, useEffect, useMemo, useReducer, useRef, useState } from 'react'
import { ShoppingAction, ShoppingCartAction, ShoppingDispatchContext, ShoppingDispatchContextValue, ShoppingDispatchType, shoppingReducer, ShoppingStateContext } from '../../context'
import { GoodsMeta, ColorStore, ShoppingStateContextValue } from '../../context'
export type TriggerCheckboxOptions = {
colorStore: ColorStore
changedCheckbox: GoodsMeta
currentCheckedPurchaserId: ShoppingContextValue['currentCheckedPurchaserId']
setSelectedAmount: ShoppingContextValue['setSelectedAmount']
currentCheckedPurchaserId: ShoppingStateContextValue['currentCheckedPurchaserId']
setSelectedAmount: ShoppingDispatchContextValue['UPDATE_SELECTED_AMOUNT']
}
type InitialState = {
colorStore: ColorStore
currentCheckedPurchaserId: number
currentCheckedSaleMode: number
isManageStatus: boolean
selectedAmount: number
}
export interface ShoppingCartPropsType {
initialValues?: ColorStore
onTriggerCheckbox?: (options: TriggerCheckboxOptions) => void
children?: ReactNode
ref?: ShoppingCartAction
}
// 购物车上下文组件
export const ShoppingCart: FC<ShoppingCartPropsType> = (props) => {
const { children, onTriggerCheckbox, initialValues, ref: refProps } = props
const defaultShoppingCart = useShoppingCart()
const ref = (refProps || defaultShoppingCart) as InternalShoppingCartAction
export const ShoppingProvider: FC<ShoppingCartPropsType> = props => {
const { children, onTriggerCheckbox, initialValues } = props
const onTriggerCheckboxRef = useRef(onTriggerCheckbox)
onTriggerCheckboxRef.current = onTriggerCheckbox
const [colorStore, setColorStore] = useState<ColorStore>(() => initialValues || {})
// 客户的选中状态
const [changedCheckbox, setChangedCheckbox] = useState<GoodsMeta>({} as GoodsMeta)
// 当前高亮的客户
const [currentCheckedPurchaserId, setCurrentCheckedPurchaserId] = useState<number>(-1)
const [currentCheckedSaleMode, setCurrentCheckedSaleMode] = useState<number>(0)
// 是否管理状态
const [isManageStatus, setManageStatus] = useState(false)
const [state, dispatch] = useReducer<(state: ShoppingStateContextValue, action: ShoppingAction) => InitialState>(shoppingReducer, {
colorStore: initialValues || {},
currentCheckedPurchaserId: -1,
currentCheckedSaleMode: 0,
isManageStatus: false,
selectedAmount: 0,
})
const [selectedAmount, setSelectedAmount] = useState(0)
const ctx: ShoppingContextValue = useMemo(() => {
// console.log('useMemo ShoppingContextValue')
return {
isManageStatus,
setManageStatus,
currentCheckedPurchaserId, // 当前高亮的客户
setCurrentCheckedPurchaserId, // 设置高亮当前客户
currentCheckedSaleMode,
setCurrentCheckedSaleMode,
colorStore,
setChangedCheckbox(changedGoods) {
// console.log('changedGoods==>', colorStore, changedGoods)
setColorStore((prev) => {
const currentGoodsKind = { ...prev[changedGoods.purchaserId]?.goodsKind, ...changedGoods.goodsKind }
return {
...prev,
[changedGoods.purchaserId as number]: {
purchaserId: changedGoods.purchaserId,
goodsKind: currentGoodsKind,
},
}
})
setChangedCheckbox(changedGoods)
},
setColorStore,
selectedAmount,
setSelectedAmount,
}
}, [colorStore, currentCheckedPurchaserId, isManageStatus, selectedAmount])
// 暴露给外界
useImperativeHandle(
ref.__INTERNAL__,
() => ({
getManageStatus() {
return ctx.isManageStatus
},
setManageStatus: ctx.setManageStatus,
}),
[ctx.isManageStatus, ctx.setManageStatus],
)
// 这里要在 useEffect 也就是刷新 state 后再调用，否则如果在 onFieldsChangeRef 修改值会覆盖掉上次修改
useEffect(() => {
onTriggerCheckboxRef.current?.({
colorStore,
changedCheckbox,
currentCheckedPurchaserId,
setSelectedAmount,
colorStore: state.colorStore,
currentCheckedPurchaserId: state.currentCheckedPurchaserId,
setSelectedAmount: (amount) => dispatch({ type: ShoppingDispatchType.UPDATE_SELECTED_AMOUNT,data: amount }),
})
}, [colorStore, changedCheckbox, currentCheckedPurchaserId])
}, [state.colorStore, state.currentCheckedPurchaserId])
return <ShoppingContext.Provider value={ctx}>{children}</ShoppingContext.Provider>
return (
<ShoppingStateContext.Provider value={state}>
<ShoppingDispatchContext.Provider value={dispatch}>{children}</ShoppingDispatchContext.Provider>
</ShoppingStateContext.Provider>
)
}

5
src/pages/shopping/components/shoppingCartItem/index.module.scss
View File

@ -1,10 +1,11 @@
.layout {
margin: 24px;
// padding-left: 0;
// padding-right: 0;
padding-left: 0;
padding-right: 0;
border: 1px solid transparent;
.checkbox {
padding: 0 24px;
box-sizing: border-box;
&--text {
width: 100%;
margin-left: 20px;

163
src/pages/shopping/components/shoppingCartItem/index.tsx
View File

@ -1,20 +1,19 @@
import { Text, View } from '@tarojs/components'
import { FC, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
import { FC, memo, useEffect, useMemo, useState, useTransition } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import { formatMeterDiv, formatPriceDiv } from '@/common/format'
import Taro, { useDidShow } from '@tarojs/taro'
import { formatMeterDiv } from '@/common/format'
import LayoutBlock from '@/components/layoutBlock'
import MCheckbox from '@/components/checkbox'
import Tag from '@/components/tag'
import Divider from '@/components/divider'
import ColorKindItem from '../colorKindItem'
import { EnumSaleMode } from '@/common/Enumerate'
import { useNeedMemoCallback } from '@/use/useCommon'
import { selectList } from '../../config'
import { Goods, useShoppingContext } from '../../context'
import { Goods, ShoppingDispatchType, useShoppingDispatch, useShoppingState } from '../../context'
import IconFont from '@/components/iconfont/iconfont'
import { isEmptyObject } from '@/common/common'
import classNames from 'classnames'
import LoadingCard from '@/components/loadingCard'
type PropsType = {
itemData?: ShoppingCartData
@ -37,7 +36,7 @@ enum BackEndSaleModeListFieldMap {
export default memo<PropsType>(props => {
const { itemData } = props
const { setCurrentCheckedSaleMode } = useShoppingContext()
const dispatch = useShoppingDispatch()
const [openDetail, setOpenDetail] = useState(false)
@ -49,57 +48,55 @@ export default memo<PropsType>(props => {
const [selected, setSelect] = useState<EnumSaleMode>(0)
const onSelectOrderType = (type: EnumSaleMode) => {
if (isPending) return
setSelect(type)
setCurrentCheckedSaleMode(type)
dispatch({ type: ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE, data: type })
// 重置预估金额
setSelectedAmount(0)
dispatch({ type: ShoppingDispatchType.UPDATE_SELECTED_AMOUNT, data: 0 })
}
const saleModeList = useRef({
bulk_color_list: itemData?.bulk_color_list,
length_cut_color_list: itemData?.length_cut_color_list,
weight_cut_color_list: itemData?.weight_cut_color_list,
})
saleModeList.current = {
bulk_color_list: itemData?.bulk_color_list,
length_cut_color_list: itemData?.length_cut_color_list,
weight_cut_color_list: itemData?.weight_cut_color_list,
}
const { currentCheckedPurchaserId, colorStore } = useShoppingState()
const { setChangedCheckbox, currentCheckedPurchaserId, setCurrentCheckedPurchaserId, setSelectedAmount, colorStore } = useShoppingContext()
console.log('Rerender component: shoppingCartItem')
const memoList = useMemo(() => {
// 向 context 中初始化数据
return itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? (
itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => {
setChangedCheckbox({
purchaserId: itemData?.purchaser_id!,
goodsKind: {
[item?.id]: {
id: item?.id,
estimate_amount: item.estimate_amount,
checked: false,
product_code: item.product_code,
product_color_code: item.product_color_code,
sale_mode: item.sale_mode,
count: selected === EnumSaleMode.Bulk ? item.roll : Number(formatMeterDiv(item.length)),
},
},
})
return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} itemData={item} orderType={selected}></ColorKindItem>
})
) : (
<View className={styles.noList}>暂无数据</View>
)
}, [itemData, selected])
// const memoList = useMemo(() => {
// console.log('ext useMemo')
// const component = itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => {
// dispatch({
// type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
// data: {
// purchaserId: itemData?.purchaser_id!,
// goodsKind: {
// [item?.id]: {
// id: item?.id,
// estimate_amount: item.estimate_amount,
// checked: false,
// product_code: item.product_code,
// product_color_code: item.product_color_code,
// sale_mode: item.sale_mode,
// count: selected === EnumSaleMode.Bulk ? item.roll : Number(formatMeterDiv(item.length)),
// },
// },
// },
// })
// return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} itemData={item} orderType={selected}></ColorKindItem>
// })
// // 向 context 中初始化数据
// const result = itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? component : <View className={styles.noList}>暂无数据</View>
// return result
// }, [itemData, selected])
const handleClickLayout = () => {
if (currentCheckedPurchaserId === itemData?.purchaser_id) {
return
}
setSelectedAmount(0)
setCurrentCheckedSaleMode(selected)
setCurrentCheckedPurchaserId(itemData?.purchaser_id as number)
dispatch({ type: ShoppingDispatchType.UPDATE_SELECTED_AMOUNT, data: 0 })
// setSelectedAmount(0)
// setCurrentCheckedSaleMode(selected)
dispatch({ type: ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE, data: selected })
dispatch({ type: ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID, data: itemData?.purchaser_id as number })
// setCurrentCheckedPurchaserId(itemData?.purchaser_id as number)
}
// 统计已选面料
@ -144,12 +141,14 @@ export default memo<PropsType>(props => {
)
}, [colorStore, currentCheckedPurchaserId, selected, itemData])
const [isPending, startTransition] = useTransition()
return (
<LayoutBlock
circle
customClassName={classnames(styles.layout, itemData?.purchaser_id === currentCheckedPurchaserId ? styles.selected : '')}
onClick={handleClickLayout}>
<View className='flex-row justify-between' onClick={handleOpenDetail}>
<View className={classNames(styles.checkbox, 'flex-row', 'justify-between')} onClick={handleOpenDetail}>
<View className={styles.topItem}>
<View className='flex-row items-center'>
<View className={styles.topTitle}>{itemData?.purchaser_name}</View>
@ -169,8 +168,10 @@ export default memo<PropsType>(props => {
{/* 减少节点渲染 */}
{openDetail && (
<>
<Divider customClassName={styles.line}></Divider>
<View className={classnames(styles.detailBox, openDetail ? styles.drawerOpen : styles.drawerClose)}>
<View className={styles.checkbox}>
<Divider customClassName={styles.line}></Divider>
</View>
<View className={styles.orderType}>
<View className={styles.orderTitle}>订单类型</View>
<View className={styles.orderTypeDetail}>
@ -203,13 +204,73 @@ export default memo<PropsType>(props => {
</Tag>
</View>
</View>
<View className={styles.orderContainer}>{memoList}</View>
<View className={styles.orderContainer}>
{/* <GoodsList itemData={itemData} selected={selected} /> */}
<GoodsList itemData={itemData} selected={selected} isPending={isPending} startTransition={startTransition} />
</View>
</View>
</>
)}
</LayoutBlock>
)
}, useNeedMemoCallback())
})
interface GoodsListPropType {
itemData?: ShoppingCartData
selected: EnumSaleMode
isPending: boolean
startTransition: React.TransitionStartFunction
}
const GoodsList = memo<GoodsListPropType>(props => {
console.log('Rerender component: GoodsList')
const { itemData, selected, isPending, startTransition } = props
const dispatch = useShoppingDispatch()
const [component, setComponent] = useState<JSX.Element | null>(null)
useEffect(() => {
startTransition(() => {
setComponent(
itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? (
itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => {
dispatch({
type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
data: {
purchaserId: itemData?.purchaser_id!,
goodsKind: {
[item?.id]: {
id: item?.id,
estimate_amount: item.estimate_amount,
checked: false,
product_code: item.product_code,
product_color_code: item.product_color_code,
sale_mode: item.sale_mode,
count: selected === EnumSaleMode.Bulk ? item.roll : Number(formatMeterDiv(item.length)),
},
},
},
})
return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} itemData={item} orderType={selected}></ColorKindItem>
})
) : (
<View className={styles.noList}>暂无数据</View>
),
)
})
}, [itemData, selected])
return (
<>
{isPending ? (
<View className='flex-row items-center justify-center' style={{ width: '100%', height: '200px' }}>
<LoadingCard />
</View>
) : (
component
)}
</>
)
})
interface ButtonPropsType {
isActive: boolean

117
src/pages/shopping/context/index.ts
View File

@ -1,4 +1,4 @@
import React, { useRef } from 'react'
import React, { Dispatch, useRef } from 'react'
import { useContext } from 'react'
/**
@ -27,50 +27,110 @@ export type ColorStore = {
export type Goods = {
id: number
product_code: number // 面料编号
product_code: number // 面料编号
product_color_code: number // 颜色编号
estimate_amount: number // 预估金额
count: number // 已选的条数或米数
count: number // 已选的条数或米数
sale_mode: number
checked: boolean
}
// 分组
export interface GoodsMeta {
purchaserId: number
// materialChecked: number // 已选 x 种面料
// colorChecked: number // 已选 x 颜色
// lengthOrRollChecked: number // 共 x 条 共 x 米
goodsKind?: {
[id: number]: Goods
}
}
export interface ShoppingContextValue {
export interface ShoppingStateContextValue {
isManageStatus: boolean
setManageStatus: (isManageStatus: boolean) => void
currentCheckedPurchaserId: number // 当前高亮的客户ID
setCurrentCheckedPurchaserId: (purchaserId: number) => void
currentCheckedSaleMode: number
setCurrentCheckedSaleMode: (saleMode: number) => void
colorStore: ColorStore
setColorStore: (colorStore: React.SetStateAction<ColorStore>) => void
setChangedCheckbox: (changedGoods: GoodsMeta) => void
selectedAmount: number
setSelectedAmount: (amount: React.SetStateAction<number>) => void
}
export const ShoppingContext = React.createContext<ShoppingContextValue | null>(null)
export enum ShoppingDispatchType {
UPDATE_MANAGE_STATUS = 'UPDATE_MANAGE_STATUS',
UPDATE_CURRENT_CHECKED_PURCHASERID = 'UPDATE_CURRENT_CHECKED_PURCHASERID',
UPDATE_CURRENT_CHECKED_SALEMODE = 'UPDATE_CURRENT_CHECKED_SALEMODE',
UPDATE_COLOR_STORE = 'UPDATE_COLOR_STORE',
UPDATE_SELECTED_AMOUNT = 'UPDATE_SELECTED_AMOUNT',
UPDATE_CHANGED_CHECKBOX = 'UPDATE_CHANGED_CHECKBOX',
}
export function useShoppingContext() {
const ctx = useContext(ShoppingContext)
export interface ShoppingDispatchContextValue {
[ShoppingDispatchType.UPDATE_MANAGE_STATUS]: (isManageStatus: boolean) => void
[ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID]: (purchaserId: number) => void
[ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE]: (saleMode: number) => void
[ShoppingDispatchType.UPDATE_COLOR_STORE]: (colorStore: React.SetStateAction<ColorStore>) => void
[ShoppingDispatchType.UPDATE_SELECTED_AMOUNT]: (amount: React.SetStateAction<number>) => void
[ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX]: (amount: React.SetStateAction<number>) => void
}
export type ShoppingAction = {
type: ShoppingDispatchType
data?: any
}
export function shoppingReducer(state: ShoppingStateContextValue, action: ShoppingAction) {
const { type, data } = action
switch (type) {
case ShoppingDispatchType.UPDATE_MANAGE_STATUS: {
return { ...state, isManageStatus: data }
}
case ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID: {
return { ...state, currentCheckedPurchaserId: data }
}
case ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE: {
return { ...state, currentCheckedSaleMode: data }
}
case ShoppingDispatchType.UPDATE_COLOR_STORE: {
return { ...state, colorStore: data }
}
case ShoppingDispatchType.UPDATE_SELECTED_AMOUNT: {
return { ...state, selectedAmount: data }
}
case ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX: {
return {
...state,
colorStore: {
...state.colorStore,
[data.purchaserId as number]: {
purchaserId: data.purchaserId,
goodsKind: { ...state.colorStore[data.purchaserId]?.goodsKind, ...data.goodsKind },
},
},
}
}
default:
throwError()
}
}
export const ShoppingStateContext = React.createContext<ShoppingStateContextValue | null>(null)
export const ShoppingDispatchContext = React.createContext<Dispatch<ShoppingAction> | null>(null)
export function useShoppingState() {
const ctx = useContext(ShoppingStateContext)
if (!ctx) {
throw new Error('没有获取到shopping context')
}
return ctx
}
export function useShoppingDispatch() {
const ctx = useContext(ShoppingDispatchContext)
if (!ctx) {
throw new Error('没有获取到shopping dispatch')
}
return ctx
}
export function useWatch(purchaserId: GoodsMeta['purchaserId'], id: number) {
const { colorStore } = useShoppingContext()
const { colorStore } = useShoppingState()
return id ? colorStore[purchaserId]['goodsKind']![id] : colorStore[purchaserId]['goodsKind']
}
@ -84,26 +144,5 @@ export interface InternalShoppingCartAction extends ShoppingCartAction {
}
function throwError(): never {
throw new Error('有没有用 ref 这个props？')
}
export function useShoppingCart(): ShoppingCartAction {
const __INTERNAL__ = useRef<ShoppingCartAction | null>(null)
return {
__INTERNAL__,
setManageStatus(manageStatus: boolean) {
const action = __INTERNAL__.current
if (!action) {
throwError()
}
action.setManageStatus(manageStatus)
},
getManageStatus() {
const action = __INTERNAL__.current
if (!action) {
throwError()
}
return action.getManageStatus()
},
} as InternalShoppingCartAction
throw new Error('没有这个action.type')
}

92
src/pages/shopping/index.tsx
View File

@ -1,7 +1,7 @@
import Search from '@/components/search'
import { View } from '@tarojs/components'
import Taro, { useDidHide, useDidShow } from '@tarojs/taro'
import { FC, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { FC, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useTransition } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import IconText from '@/components/iconText'
@ -12,15 +12,16 @@ import BottomSettleBar from './components/bottomSettleBar'
import BottomEditBar from './components/bottomEditBar'
import { ShoppingCartDeleteApi, ShoppingCartListApi } from '@/api/index'
import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
import { ShoppingCart } from './components/shoppingCart/index'
import { Goods, useShoppingContext } from './context'
import { ShoppingProvider } from './components/shoppingCart/index'
import { Goods, ShoppingDispatchType, useShoppingDispatch, useShoppingState } from './context'
import { alert, goLink, isEmptyObject } from '@/common/common'
import LoadingCard from '@/components/loadingCard'
export const Shopping: FC = memo(() => {
// 计算总的预估金额
const handleTriggerCheckbox = useCallback(({ colorStore, changedCheckbox, currentCheckedPurchaserId, setSelectedAmount }) => {
console.log('handleTriggerCheckbox==>', colorStore, changedCheckbox)
const handleTriggerCheckbox = ({ colorStore, currentCheckedPurchaserId, setSelectedAmount }) => {
const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind']
console.log('handleTriggerCheckbox==>', colorStore)
if (targetGoodsKind) {
const result = Object.values(targetGoodsKind).reduce((prev: number, value: Goods) => {
@ -35,11 +36,11 @@ export const Shopping: FC = memo(() => {
} else {
setSelectedAmount(0)
}
}, [])
}
return (
<ShoppingCart onTriggerCheckbox={handleTriggerCheckbox}>
<ShoppingProvider onTriggerCheckbox={handleTriggerCheckbox}>
<ShoppingCartContainer />
</ShoppingCart>
</ShoppingProvider>
)
})
@ -48,19 +49,13 @@ interface InternalContainer {}
const ShoppingCartContainer: FC<InternalContainer> = () => {
let isFirst = useRef(true)
const {
setChangedCheckbox,
isManageStatus,
setManageStatus,
selectedAmount,
currentCheckedPurchaserId,
currentCheckedSaleMode,
colorStore,
} = useShoppingContext()
const { isManageStatus, selectedAmount, currentCheckedPurchaserId, currentCheckedSaleMode, colorStore } = useShoppingState()
const dispatch = useShoppingDispatch()
// 管理
const onStartToManage = () => {
setManageStatus(!isManageStatus)
dispatch({ type: ShoppingDispatchType.UPDATE_MANAGE_STATUS, data: !isManageStatus })
}
const listHeightRef = useRef('auto')
@ -75,7 +70,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
fetchData(searchOptions)
}
})
console.log('rerender')
console.log('Rerender component: ShoppingCartContainer')
useEffect(() => {
console.log('useEffect fetchData')
@ -93,7 +88,9 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({ list: shoppingCartData.list, total: shoppingCartData.total, status: state.loading })
const status = dataLoadingStatus({ list: shoppingCartData.list, total: shoppingCartData.total, status: state.loading })
console.log('status==>', status)
return status
}, [shoppingCartData, state])
// useLayoutEffect 执行在DOM更新之后，浏览器绘制之前 如果放在 useEffect 里面会产生多一次不必要的回流和重绘，可能会引起视图闪现
@ -118,8 +115,12 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
})()
}, [])
const [isPending, startTransition] = useTransition()
useEffect(() => {
setShoppingCartData({ list: state.data, total: state.data.length })
startTransition(() => {
setShoppingCartData({ list: state.data, total: state.data.length })
})
}, [state])
// 结算
@ -186,10 +187,18 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
}
})
console.log('tempObject==>', tempObject)
setChangedCheckbox({
purchaserId: currentCheckedPurchaserId,
goodsKind: tempObject,
dispatch({
type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
data: {
purchaserId: currentCheckedPurchaserId,
goodsKind: tempObject,
},
})
// setChangedCheckbox({
// purchaserId: currentCheckedPurchaserId,
// goodsKind: tempObject,
// })
}
// 加载刷新数据
@ -226,10 +235,14 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
<View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
<View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeightRef.current }}>
<InfiniteScroll statusMore={statusMore} refresherEnabled={true} selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus}>
{!!shoppingCartData?.list?.length &&
{isPending ? (
<LoadingCard />
) : (
!!shoppingCartData?.list?.length &&
shoppingCartData?.list?.map((item, index) => {
return <ItemList itemData={item} key={index}></ItemList>
})}
})
)}
</InfiniteScroll>
</View>
</View>
@ -246,5 +259,30 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
</View>
)
}
// interface ScrollListPropType {
// height: string
// }
// const ScrollList = memo<ScrollListPropType>((props) => {
// const { height } = props
// const [shoppingCartData, setShoppingCartData] = useState<{ list: ShoppingCartData[]; total: number }>({ list: [], total: 0 })
// //数据加载状态
// const statusMore = useMemo(() => {
// return dataLoadingStatus({ list: shoppingCartData.list, total: shoppingCartData.total, status: state.loading })
// }, [shoppingCartData, state])
// return (
// <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
// <View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: height }}>
// <InfiniteScroll statusMore={statusMore} refresherEnabled={true} selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus}>
// {!!shoppingCartData?.list?.length &&
// shoppingCartData?.list?.map((item, index) => {
// return <ItemList itemData={item} key={index}></ItemList>
// })}
// </InfiniteScroll>
// </View>
// </View>
// )
// })
export default Shopping

2
src/pages/user/index.tsx
View File

@ -180,7 +180,7 @@ const UserInfo: FC = () => {
</View>
</View>
<View className={styles.bottomBar}>
<Tag type='primary' size='normal' circle plain customStyle={{ marginRight: '10px' }}>
<Tag type='primary' size='normal' circle customStyle={{ marginRight: '10px' }}>
{userInfo.userInfo.department_name}
</Tag>
<Divider direction='vertical'></Divider>

3
src/styles/common.scss
View File

@ -52,6 +52,9 @@ $customTabBarHeight: 100px;
.justify-between {
justify-content: space-between
}
.justify-center {
justify-content: center
}
.items-center{
align-items: center;
}

2
src/use/useHttp.ts
View File

@ -110,7 +110,7 @@ export const useRequest = (
success: false, // 请求是否成功
data: {},
msg: '',
loading: false,
loading: true,
error: null,
query: {},
filter: null,