feat(购物页面): 已完成购物页面的调整条数米数功能并计算预估金额

This commit is contained in:
xuan 2022-10-25 15:27:07 +08:00
parent da5d41cfaa
commit a2697b14af
10 changed files with 263 additions and 101 deletions

1
global.d.ts vendored
View File

@ -20,4 +20,5 @@ declare namespace NodeJS {
declare const CURRENT_VERSION: string
declare const CURRENT_GITHASH: string
declare const CURRENT_ENV: string
declare const CURRENT_BASE_URL: string

View File

@ -1,7 +1,7 @@
import { useRequest } from "@/use/useHttp"
import { useRequest } from '@/use/useHttp'
/**
*
* @returns
* @returns
*/
export const ShoppingCartUpdateApi = () => {
return useRequest({
@ -11,21 +11,31 @@ export const ShoppingCartUpdateApi = () => {
}
/**
*
* @returns
* @returns
*/
export const ShoppingCartDeleteApi = () => {
return useRequest({
url: `/v2/mp/shoppingCart/productColor`,
method: "delete",
})
export const ShoppingCartDeleteApi = () => {
return useRequest({
url: `/v2/mp/shoppingCart/productColor`,
method: 'delete',
})
}
/**
*
* @returns
* @returns
*/
export const ShoppingCartListApi = () => {
return useRequest({
url: `/v2/mp/shoppingCart/productColor`,
method: "get",
})
export const ShoppingCartListApi = () => {
return useRequest({
url: `/v2/mp/shoppingCart/productColor`,
method: 'get',
})
}
/**
*
* @returns
*/
export const AdjestShoppingCartApi = () => {
return useRequest({
url: `/v2/mp/shoppingCart/productColor/list`,
method: 'post',
})
}

View File

@ -38,4 +38,4 @@ export const SCENE = {
SearchScene: 0, //商城面料搜索
}
//支付码单跳转链接
export const PAY_H5_CODE_URL = CURRENT_ENV.includes('production') ? 'https://www.zzfzyc.com/cashier' : 'https://test.zzfzyc.com/cashier'
export const PAY_H5_CODE_URL = CURRENT_ENV.includes('production') ? 'https://www.zzfzyc.com/cashier' : 'https://test.zzfzyc.com/cashier'

View File

@ -0,0 +1,16 @@
购物页面的 组件结构
> Shopping
>
> > ShoppingProvider
> >
> > > ShoppingCartContainer
> > >
> > > > ShoppingCartItem
> > > >
> > > > > GoodsList
> > > > >
> > > > > > ColorKindItem
还用到发布订阅者模式 通知祖先组件请求接口更新数据

View File

@ -8,18 +8,23 @@ import { debounce } from '@/common/util'
import { formatImgUrl, formatPriceDiv } from '@/common/format'
import { EnumSaleMode } from '@/common/Enumerate'
import { selectList } from '../../config'
import { AdjestShoppingCartApi } from '@/api/shopping/index'
import { Goods, ShoppingDispatchType, ShoppingStateContextValue, useShoppingDispatch, useShoppingState } from '../../context'
import { ShoppingStore } from '../../context/shoppingStore'
type PropsType = {
state?: Goods
state?: {
multipleSelection: Goods[]
Observer: ShoppingStore
}
purchaserId: number
itemData: Record<string, any> & object
orderType: EnumSaleMode
}
let ColorKindItem: FC<PropsType> = props => {
console.log('Rerender component: ColorKindItem')
const { state: multipleSelection, purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props
const { state, purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props
console.log('Rerender component: ColorKindItem', itemData.id)
const dispatch = useShoppingDispatch()
// console.log('checked==>', checked)
@ -43,12 +48,12 @@ let ColorKindItem: FC<PropsType> = props => {
type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
data: {
purchaserId: purchaserId,
multipleSelection: { ...multipleSelection, [itemData.id]: itemData },
multipleSelection: { ...state?.multipleSelection, [itemData.id]: itemData },
},
})
}
const handleClose = () => {
const temp = multipleSelection
const temp = state?.multipleSelection
delete temp?.[itemData.id]
dispatch({
type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
@ -58,26 +63,39 @@ let ColorKindItem: FC<PropsType> = props => {
},
})
}
const { fetchData } = AdjestShoppingCartApi()
// TODO需要新增调整条数/米数的接口 并在调整完成后重新请求整个购物车页面
// 调整条数/米数的接口 并在调整完成后重新请求整个购物车页面
const getInputValue = debounce(async (num, itemData) => {
const targetColor: Record<string, any> = {
product_color_id: itemData.product_color_id,
roll: 0,
length: 0,
}
if (itemData.sale_mode === EnumSaleMode.Bulk) {
itemData.roll = num
targetColor.roll = num
} else {
itemData.length = num
targetColor.length = num
}
}, 260)
const res = await fetchData({
color_list: [targetColor],
purchaser_id: purchaserId,
sale_mode: itemData.sale_mode,
sale_offset: itemData.sale_offset,
})
if (res.success) {
state?.Observer?.notify(purchaserId)
}
}, 400)
return (
<MCheckbox
status={multipleSelection?.hasOwnProperty(itemData.id) || false}
status={state?.multipleSelection?.hasOwnProperty(itemData.id) || false}
onSelect={handleSelect}
onClose={handleClose}
customClassName={classnames(styles.checkbox, multipleSelection?.hasOwnProperty(itemData.id) ? styles.selected : '')}
customClassName={classnames(styles.checkbox, state?.multipleSelection?.hasOwnProperty(itemData.id) ? styles.selected : '')}
customTextClass={styles.colorKindItem}>
<View className={styles['colorKindItem__left']}>
<Image className={styles['colorKindItem__left--image']} mode='aspectFill' src={formatImgUrl(itemData.product_color_texture_url)}></Image>
@ -101,8 +119,8 @@ let ColorKindItem: FC<PropsType> = props => {
digits={selectList[orderType].digits}
onClickBtn={e => getInputValue(e, itemData)}
unit={formatUnit(itemData)}
minNum={selectList[orderType].minNum}
maxNum={selectList[orderType].maxNum}
minNum={itemData.min_num}
maxNum={itemData.max_num}
/>
</View>
</View>
@ -120,11 +138,11 @@ const withStateSlice = (comp, slice) => {
return memo(forwardRef(Wrapper))
}
ColorKindItem = withStateSlice(
ColorKindItem,
(state: ShoppingStateContextValue, props: PropsType) => {
return state.colorStore[props.purchaserId]['multipleSelection']
},
)
ColorKindItem = withStateSlice(ColorKindItem, (state: ShoppingStateContextValue, props: PropsType) => {
return {
multipleSelection: state.colorStore[props.purchaserId]['multipleSelection'],
Observer: state.Observer,
}
})
export default ColorKindItem

View File

@ -1,4 +1,4 @@
import { FC, ReactNode, useEffect, useReducer, useRef } from 'react'
import { FC, ReactNode, useEffect, useMemo, useReducer, useRef } from 'react'
import {
ShoppingAction,
ShoppingDispatchContext,
@ -8,6 +8,7 @@ import {
ShoppingStateContext,
} from '../../context'
import { ColorStore, ShoppingStateContextValue } from '../../context'
import { ShoppingStore } from '../../context/shoppingStore'
export type TriggerCheckboxOptions = {
colorStore: ColorStore
@ -15,15 +16,6 @@ export type TriggerCheckboxOptions = {
setSelectedAmount: ShoppingDispatchContextValue['UPDATE_SELECTED_AMOUNT']
}
type InitialState = {
colorStore: ColorStore
currentCheckedPurchaserId: number
currentCheckedSaleMode: number
isManageStatus: boolean
isMultipleSelection: boolean
selectedAmount: number
}
export interface ShoppingCartPropsType {
initialValues?: ColorStore
onTriggerCheckbox?: (options: TriggerCheckboxOptions) => void
@ -35,18 +27,22 @@ export const ShoppingProvider: FC<ShoppingCartPropsType> = props => {
const onTriggerCheckboxRef = useRef(onTriggerCheckbox)
onTriggerCheckboxRef.current = onTriggerCheckbox
// 发布订阅
const Observer = useMemo(() => new ShoppingStore(), [])
const [state, dispatch] = useReducer<(state: ShoppingStateContextValue, action: ShoppingAction) => InitialState>(shoppingReducer, {
const [state, dispatch] = useReducer<(state: ShoppingStateContextValue, action: ShoppingAction) => ShoppingStateContextValue>(shoppingReducer, {
colorStore: initialValues || {},
currentCheckedPurchaserId: -1,
currentCheckedSaleMode: 0,
isManageStatus: false,
isMultipleSelection: false,
selectedAmount: 0,
Observer,
})
// 这里要在 useEffect 也就是刷新 state 后再调用,否则如果在 onFieldsChangeRef 修改值会覆盖掉上次修改
useEffect(() => {
console.log('onTriggerCheckboxRef start run')
onTriggerCheckboxRef.current?.({
colorStore: state.colorStore,
currentCheckedPurchaserId: state.currentCheckedPurchaserId,
@ -54,6 +50,19 @@ export const ShoppingProvider: FC<ShoppingCartPropsType> = props => {
})
}, [state.colorStore, state.currentCheckedPurchaserId])
// 加入一个监听,为 onFieldsChange 回调服务
// useEffect(() => {
// const unsubscribe = Observer.subscribe(() => {
// console.log('onTriggerCheckboxRef start run')
// onTriggerCheckboxRef.current?.({
// colorStore: state.colorStore,
// currentCheckedPurchaserId: state.currentCheckedPurchaserId,
// setSelectedAmount: amount => dispatch({ type: ShoppingDispatchType.UPDATE_SELECTED_AMOUNT, data: amount }),
// })
// })
// return unsubscribe
// }, [Observer])
return (
<ShoppingStateContext.Provider value={state}>
<ShoppingDispatchContext.Provider value={dispatch}>{children}</ShoppingDispatchContext.Provider>

View File

@ -1,5 +1,5 @@
import { Text, View } from '@tarojs/components'
import { FC, forwardRef, memo, useEffect, useMemo, useState, useTransition } from 'react'
import { FC, forwardRef, memo, useEffect, useMemo, useRef, useState, useTransition } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import { formatMeterDiv } from '@/common/format'
@ -14,6 +14,8 @@ import IconFont from '@/components/iconfont/iconfont'
import { isEmptyObject } from '@/common/common'
import classNames from 'classnames'
import LoadingCard from '@/components/loadingCard'
import { ShoppingCartListApi } from '@/api'
import { ShoppingStore } from '../../context/shoppingStore'
interface ButtonPropsType {
isActive: boolean
@ -53,11 +55,13 @@ type PropsType = {
state?: {
multipleSelection?: GoodsMeta['multipleSelection']
currentCheckedPurchaserId?: number
Observer?: ShoppingStore
}
}
let ShoppingCartItem: FC<PropsType> = props => {
const { itemData, state } = props
const { state } = props
const [itemData, setItemData] = useState(props.itemData)
const { multipleSelection, currentCheckedPurchaserId } = state!
const dispatch = useShoppingDispatch()
@ -87,7 +91,10 @@ let ShoppingCartItem: FC<PropsType> = props => {
}
dispatch({ type: ShoppingDispatchType.UPDATE_SELECTED_AMOUNT, data: 0 })
dispatch({ type: ShoppingDispatchType.UPDATE_CURRENT_CHECKED_SALEMODE, data: selected })
dispatch({ type: ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID, data: itemData?.purchaser_id as number })
dispatch({
type: ShoppingDispatchType.UPDATE_CURRENT_CHECKED_PURCHASERID,
data: itemData?.purchaser_id as number,
})
dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION, data: false })
}
@ -131,6 +138,58 @@ let ShoppingCartItem: FC<PropsType> = props => {
}, [multipleSelection, currentCheckedPurchaserId, selected, itemData])
const [isPending, startTransition] = useTransition()
const { fetchData } = ShoppingCartListApi()
// 发布订阅
useEffect(() => {
const unsubscribe = state?.Observer?.subscribe(async id => {
if (itemData?.purchaser_id !== id) return
console.log('request new data start run')
const res = await fetchData({
purchaser_id: id,
})
console.log('res===>', res)
if (res.success) {
const newGoodsKind = Object.fromEntries(
res.data[0]?.[BackEndSaleModeListFieldMap[selected]].map(item => [
item?.id,
{
id: item?.id,
estimate_amount: item.estimate_amount,
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)),
},
]),
)
dispatch({
type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
data: {
purchaserId: id,
goodsKind: newGoodsKind,
multipleSelection: Object.fromEntries(
Object.keys(multipleSelection!).map(id => [
id,
{
id,
estimate_amount: newGoodsKind[id].estimate_amount,
product_code: newGoodsKind[id].product_code,
product_color_code: newGoodsKind[id].product_color_code,
sale_mode: newGoodsKind[id].sale_mode,
count: selected === EnumSaleMode.Bulk ? newGoodsKind[id].roll : Number(formatMeterDiv(newGoodsKind[id].length)),
},
]),
),
},
})
setItemData(res.data[0])
}
})
// 取消订阅
return unsubscribe
}, [multipleSelection])
return (
<LayoutBlock
@ -194,7 +253,13 @@ let ShoppingCartItem: FC<PropsType> = props => {
</View>
</View>
<View className={styles.orderContainer}>
<GoodsList itemData={itemData} selected={selected} isPending={isPending} startTransition={startTransition} />
<GoodsList
multipleSelection={multipleSelection}
itemData={itemData}
selected={selected}
isPending={isPending}
startTransition={startTransition}
/>
</View>
</View>
</>
@ -205,52 +270,78 @@ let ShoppingCartItem: FC<PropsType> = props => {
interface GoodsListPropType {
itemData?: ShoppingCartData
multipleSelection?: GoodsMeta['multipleSelection']
selected: EnumSaleMode
isPending: boolean
startTransition: React.TransitionStartFunction
}
const GoodsList = memo<GoodsListPropType>(props => {
console.log('Rerender component: GoodsList')
const { itemData, selected, isPending, startTransition } = props
console.log('Rerender component: GoodsList', props.multipleSelection)
const { itemData, selected, isPending, startTransition, multipleSelection } = props
const currentSelected = useRef<EnumSaleMode | null>(null)
const dispatch = useShoppingDispatch()
const [component, setComponent] = useState<JSX.Element | null>(null)
// 更新 GoodsList 组件
const updateComponent = () => {
setComponent(
itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? (
itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => {
return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} itemData={item} orderType={selected}></ColorKindItem>
})
) : (
<View className={styles.noList}></View>
),
)
}
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,
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)),
},
},
multipleSelection: {},
},
})
return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} itemData={item} orderType={selected}></ColorKindItem>
})
) : (
<View className={styles.noList}></View>
),
)
})
}, [itemData, selected])
const newGoodsKind = Object.fromEntries(
itemData?.[BackEndSaleModeListFieldMap[selected]].map(item => [
item?.id,
{
id: item?.id,
estimate_amount: item.estimate_amount,
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)),
},
]),
)
// 这里做一层比较是为了 重新渲染的时候如果没有切换订单类型的话就不让面料的选中状态初始化
if (currentSelected.current === selected) {
dispatch({
type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
data: {
purchaserId: itemData?.purchaser_id!,
goodsKind: newGoodsKind,
multipleSelection: multipleSelection,
},
})
updateComponent()
} else {
// 重新把当前的选中状态赋值给ref 作为下一次比较的旧状态
currentSelected.current = selected
dispatch({
type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
data: {
purchaserId: itemData?.purchaser_id!,
goodsKind: newGoodsKind,
multipleSelection: {},
},
})
startTransition(updateComponent)
}
}, [itemData, selected, multipleSelection])
return (
<>
{isPending ? (
<View className='flex-row items-center justify-center' style={{ width: '100%', height: '200px' }}>
<View className={styles.noList} style={{margin: '60rpx 0'}}>
<LoadingCard />
</View>
) : (
@ -262,12 +353,12 @@ const GoodsList = memo<GoodsListPropType>(props => {
// State 分割组件 思路就是把 context 直接通过 props 的形式传给组件,这样的话就解决了 context 强制刷新 memo 的问题了
// 那么当 context 内的 value 被更新的时候react 只会强制渲染 Wrapper
const withStateSlice = (comp, slice) => {
const MemoComp = memo(comp, (prevProps, nextProps)=>{
const MemoComp = memo(comp, (prevProps, nextProps) => {
let needMemo = true
if (JSON.stringify(prevProps.itemData) !== JSON.stringify(nextProps.itemData)) {
needMemo = false
}
if(JSON.stringify(prevProps.state) !== JSON.stringify(nextProps.state)){
if (JSON.stringify(prevProps.state) !== JSON.stringify(nextProps.state)) {
needMemo = false
}
return needMemo
@ -283,6 +374,7 @@ const withStateSlice = (comp, slice) => {
ShoppingCartItem = withStateSlice(ShoppingCartItem, (state: ShoppingStateContextValue, props) => ({
multipleSelection: state.colorStore?.[props.itemData?.purchaser_id]?.['multipleSelection'],
currentCheckedPurchaserId: state.currentCheckedPurchaserId,
Observer: state.Observer,
}))
export default ShoppingCartItem

View File

@ -1,6 +1,7 @@
import { EnumSaleMode } from '@/common/Enumerate'
import React, { Dispatch } from 'react'
import { useContext } from 'react'
import { ShoppingStore } from './shoppingStore'
/**
* 456: {
@ -8,7 +9,13 @@ import { useContext } from 'react'
* colorKind: {
* 4562: {
* id: 4562,
* checked: false
* ...
* }
* },
* multipleSelection: {
* 4562: {
* id: 4562,
* ...
* }
* }
* },
@ -17,7 +24,7 @@ import { useContext } from 'react'
* colorKind: {
* 4562: {
* id: 4562,
* checked: false
* ...
* }
* }
* }
@ -40,9 +47,7 @@ export interface GoodsMeta {
goodsKind?: {
[id: Goods['id']]: Goods
}
multipleSelection: {
[id: Goods['id']]: Goods
}
multipleSelection?: GoodsMeta['goodsKind']
}
export interface ShoppingStateContextValue {
@ -52,6 +57,7 @@ export interface ShoppingStateContextValue {
currentCheckedSaleMode: EnumSaleMode
colorStore: ColorStore
selectedAmount: number
Observer: ShoppingStore
}
export enum ShoppingDispatchType {
@ -63,7 +69,7 @@ export enum ShoppingDispatchType {
UPDATE_SELECTED_AMOUNT = 'UPDATE_SELECTED_AMOUNT',
UPDATE_CHANGED_CHECKBOX = 'UPDATE_CHANGED_CHECKBOX',
}
// UPDATE_MultipleSelection
export interface ShoppingDispatchContextValue {
[ShoppingDispatchType.UPDATE_MANAGE_STATUS]: (isManageStatus: ShoppingStateContextValue['isManageStatus']) => void
[ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION]: (isMultipleSelection: ShoppingStateContextValue['isMultipleSelection']) => void
@ -109,7 +115,7 @@ export function shoppingReducer(state: ShoppingStateContextValue, action: Shoppi
[data.purchaserId as number]: {
purchaserId: data.purchaserId,
goodsKind: { ...state.colorStore[data.purchaserId]?.goodsKind, ...data.goodsKind },
multipleSelection: { ...data.multipleSelection },
multipleSelection: data?.multipleSelection ? data.multipleSelection : state.colorStore[data.purchaserId]?.multipleSelection,
},
},
}

View File

@ -1,7 +1,9 @@
import { GoodsMeta, ColorStore } from '.'
// 用于优化数据流 结合发布订阅 更新组件内部状态可以组件自己处理
export type SubscribeCallback = (changedGoods: GoodsMeta) => void
import { ColorStore } from "."
export type SubscribeCallback = (changedGoods: any) => void
export class ShoppingStore {
// 全局缓存
@ -9,7 +11,7 @@ export class ShoppingStore {
// 监听器数组
private observers: SubscribeCallback[] = []
constructor(initialValue: ColorStore) {
constructor(initialValue?: any) {
initialValue && this.updateStore(initialValue)
}
// 更新全局缓存
@ -27,9 +29,9 @@ export class ShoppingStore {
}
}
// 通知
notify(changedGoods: GoodsMeta) {
notify(changedGoods: any) {
// 循环调用
this.observers.forEach((callback) => {
this.observers.forEach(callback => {
callback(changedGoods)
})
}

View File

@ -21,7 +21,7 @@ export const Shopping: FC = memo(() => {
// 计算总的预估金额
const handleTriggerCheckbox = ({ colorStore, currentCheckedPurchaserId, setSelectedAmount }) => {
const multipleSelection = colorStore?.[currentCheckedPurchaserId]?.multipleSelection
console.log('handleTriggerCheckbox==>', colorStore)
console.log('handleTriggerCheckbox==>', multipleSelection)
if (multipleSelection) {
const result = Object.values(multipleSelection).reduce((prev: number, value: Goods) => {
@ -84,11 +84,18 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
setSearchOptions(prev => ({ ...prev, short_name_or_phone: e }))
}, [])
const [shoppingCartData, setShoppingCartData] = useState<{ list: ShoppingCartData[]; total: number }>({ list: [], total: 0 })
const [shoppingCartData, setShoppingCartData] = useState<{
list: ShoppingCartData[]
total: number
}>({ list: [], total: 0 })
//数据加载状态
const statusMore = useMemo(() => {
const status = 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])
@ -144,7 +151,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
// 批量某个客户的删除商品
const handleDelete = async () => {
const multipleSelection = colorStore?.[currentCheckedPurchaserId]?.['multipleSelection']
let checked: Goods[] = Object.values(multipleSelection)
let checked: Goods[] = Object.values(multipleSelection!)
if (checked.length === 0) {
return Taro.showToast({ title: '请选择商品', icon: 'error' })
}
@ -201,6 +208,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
setRefreshStatus(false)
}
}
return (