From dbcd906a9a687d7d0dafb0c659a030c2e82ab2dc Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Thu, 12 Jan 2023 17:30:27 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix(=E8=B4=AD=E7=89=A9=E8=BD=A6?= =?UTF-8?q?=E8=92=99=E7=89=88=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D):?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/context/ContextShop/index.tsx | 15 +-- .../RecommendOpen/index.module.scss | 43 ++++++++ .../components/RecommendOpen/index.tsx | 103 ++++++++++++++++++ src/pages/shopCar/components/main/index.tsx | 23 ++-- .../components/productBlock/index.module.scss | 3 + .../shopCar/components/productItem/index.tsx | 15 +-- .../components/recommendProduct/index.tsx | 82 +------------- 7 files changed, 178 insertions(+), 106 deletions(-) create mode 100644 src/pages/shopCar/components/RecommendOpen/index.module.scss create mode 100644 src/pages/shopCar/components/RecommendOpen/index.tsx diff --git a/src/context/ContextShop/index.tsx b/src/context/ContextShop/index.tsx index b4590b2..2c86241 100644 --- a/src/context/ContextShop/index.tsx +++ b/src/context/ContextShop/index.tsx @@ -56,13 +56,14 @@ export interface StateType { } sale_mode?: saleModeType checkList?: { [key in number]: boolean } - recommendSubmitStatus?: boolean + recommendId?: number + } export interface ActionsMap { setInitData: StateType updateProduct: StateType - setRecommendSubmit: StateType + setRecommendId: StateType } export type Actions = { @@ -83,7 +84,6 @@ function createCtx() { } export const [useCurrenShop, CurrentProvider] = createCtx() -// https://dev.to/elisealcala/react-context-with-usereducer-and-typescript-4obm export default (props: PropsType) => { const initialState = { list: [], @@ -94,7 +94,8 @@ export default (props: PropsType) => { length_number: 0, price_number: 0, }, - recommendSubmitStatus: false, + recommendId: 0, + } function reducer(state: StateType, action: Actions) { switch (action.type) { @@ -102,8 +103,8 @@ export default (props: PropsType) => { return onInitData(state, action) case 'updateProduct': return onUpdateData(state, action) - case 'setRecommendSubmit': - return { ...state, recommendSubmitStatus: action.data.recommendSubmitStatus } + case 'setRecommendId': + return { ...state, recommendId: action.data.recommendId } default: return state } @@ -126,7 +127,7 @@ const onInitData = (state: StateType, action: Actions) => { citem.checked = false }) }) - return { ...state, list: data.list, sale_mode: data.sale_mode, recommendSubmitStatus: data.recommendSubmitStatus, statistics } + return { ...state, list: data.list, sale_mode: data.sale_mode, recommendId: data.recommendId, statistics } } // 更新数据 diff --git a/src/pages/shopCar/components/RecommendOpen/index.module.scss b/src/pages/shopCar/components/RecommendOpen/index.module.scss new file mode 100644 index 0000000..b782e6e --- /dev/null +++ b/src/pages/shopCar/components/RecommendOpen/index.module.scss @@ -0,0 +1,43 @@ +.recommended_open { + width: 654px; + height: 502px; + position: fixed; + margin: auto; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-color: #fff; + z-index: 1800; + border-radius: 16px; + padding: 32px; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: flex-start; + .search { + padding-bottom: 22px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + } + .onSubmit { + width: 590px; + height: 80px; + background: #337fff; + border-radius: 16px; + text-align: center; + line-height: 80px; + color: #fff; + font-size: 28px; + margin-top: 60px; + justify-self: end; + } +} +.mask { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100vh; + background: rgba(0, 0, 0, 0.6); + z-index: 1700; +} diff --git a/src/pages/shopCar/components/RecommendOpen/index.tsx b/src/pages/shopCar/components/RecommendOpen/index.tsx new file mode 100644 index 0000000..17df52e --- /dev/null +++ b/src/pages/shopCar/components/RecommendOpen/index.tsx @@ -0,0 +1,103 @@ +import { View } from '@tarojs/components' +import { memo, useCallback, useEffect, useRef, useState } from 'react' +import Big from 'big.js' +import type { ItemType } from '../recommendProductItem' +import RecommendProductItem from '../recommendProductItem' +import Search from '../search' +import styles from './index.module.scss' +import type { listType, saleModeType } from '@/common/enum' +import { SALE_MODE_SETTING } from '@/common/enum' +import { AddShoppingCartApi, GetScrewProductApi } from '@/api/shopCart' + +interface ParamType { + shopId: number + onShow?: boolean + onClose?: () => void + submitSuccess?: () => void +} +type DataType = ItemType +interface submitType { + color_list: { product_color_id: number; roll: number; length: number }[] + sale_mode: saleModeType + is_screw_recommend: boolean +} +export default memo((props: ParamType) => { + const { shopId, submitSuccess, onShow = false, onClose } = props + const [filter, setFilter] = useState({ + id: 0, + sale_mode: 0, + }) + const submitData = useRef({ + sale_mode: 0, + color_list: [], + is_screw_recommend: true, + }) + useEffect(() => { + (filter.id !== shopId) && setFilter(e => ({ ...e, id: shopId })) + }, [shopId]) + const [productData, setProductData] = useState() + const { fetchData: getScrewProductFetchData } = GetScrewProductApi() + const getScrewProduct = async() => { + const res = await getScrewProductFetchData({ id: filter.id, sale_mode: filter.sale_mode }) + if (res.success) { + res.data = { + ...res.data, + sale_mode_type: filter.sale_mode, + } + onSubmitData(res.data.defaultNum, res.data.screw_color_id) + setProductData(res.data) + } + } + const [showOpen, setShowOpen] = useState(false) + useEffect(() => { + setShowOpen(() => onShow) + }, [onShow]) + + useEffect(() => { + showOpen && getScrewProduct() + }, [showOpen, filter]) + + const getSelect = useCallback((val: listType) => { + submitData.current.sale_mode = val.value + setFilter(e => ({ ...e, sale_mode: val.value })) + }, []) + + const onChangeNum = useCallback((num) => { + onSubmitData(num, productData?.screw_color_id) + }, [productData]) + + // 整理提交数据 + const onSubmitData = (num = 0, product_color_id = 0) => { + const data = { product_color_id, length: 0, roll: 0 } + if (filter.sale_mode === 0) { + data.roll = num + } + else { + data.length = Big(num).times(100).toNumber() + } + submitData.current.color_list = [data] + } + + const { fetchData: addShoppingCartfetchData } = AddShoppingCartApi() + const onSubmit = useCallback(async() => { + const res = await addShoppingCartfetchData(submitData.current) + if (res.success) { + submitSuccess?.() + } + }, []) + + const onCloseEven = () => { + onClose?.() + setShowOpen(() => false) + } + return <> + {showOpen && + + + + + 确认添加 + } + {showOpen && } + +}) diff --git a/src/pages/shopCar/components/main/index.tsx b/src/pages/shopCar/components/main/index.tsx index 1026108..619ee90 100644 --- a/src/pages/shopCar/components/main/index.tsx +++ b/src/pages/shopCar/components/main/index.tsx @@ -7,6 +7,7 @@ import Operation from '../operation' import type { listType } from '../search' import Search from '../search' import NoShop from '../noShop' +import RecommendOpen from '../RecommendOpen' import styles from './index.module.scss' import { DelShoppingCartApi, GetProductColorApi, GetShoppingCartV2Api } from '@/api/shopCart' import type { ProductType } from '@/context/ContextShop' @@ -45,7 +46,7 @@ export default () => { const res = await getShoppingCartFetchData(filter) if (res.success) { startTransition(() => { - dispatch({ type: 'setInitData', data: { list: JSON.parse(JSON.stringify(res?.data?.product_list)), sale_mode: filter.sale_mode, recommendSubmitStatus: false } }) + dispatch({ type: 'setInitData', data: { list: JSON.parse(JSON.stringify(res?.data?.product_list)), sale_mode: filter.sale_mode, recommendId: 0 } }) }) } } @@ -84,14 +85,6 @@ export default () => { getShoppingCart() }, [filter]) - useEffect(() => { - console.log('state.recommendSubmitStatus::', state.recommendSubmitStatus) - if (state.recommendSubmitStatus) { - getProductColorNum() - getShoppingCart() - } - }, [state.recommendSubmitStatus]) - const onSortChange = useCallback((val) => { setFilter(e => ({ ...e, abstract_sort_key: val.value })) }, []) @@ -214,6 +207,15 @@ export default () => { } }, []) + const onRecommendClose = useCallback(() => { + dispatch({ type: 'setRecommendId', data: { list: state.list, recommendId: 0 } }) + }, []) + + const onSubmitSuccess = useCallback(() => { + getProductColorNum() + getShoppingCart() + }, []) + return @@ -237,6 +239,9 @@ export default () => { + + + } diff --git a/src/pages/shopCar/components/productBlock/index.module.scss b/src/pages/shopCar/components/productBlock/index.module.scss index 3c63b75..87d9ebd 100644 --- a/src/pages/shopCar/components/productBlock/index.module.scss +++ b/src/pages/shopCar/components/productBlock/index.module.scss @@ -31,6 +31,9 @@ display: flex; align-items: center; color: rgba(0, 0, 0, 0.8); + .name { + @include common_ellipsis(); + } .label { width: 60px; height: 28px; diff --git a/src/pages/shopCar/components/productItem/index.tsx b/src/pages/shopCar/components/productItem/index.tsx index e0b7d45..07e813b 100644 --- a/src/pages/shopCar/components/productItem/index.tsx +++ b/src/pages/shopCar/components/productItem/index.tsx @@ -30,7 +30,7 @@ export default memo((props: ColorItemType) => { const { colorItem } = props const { state, dispatch } = useCurrenShop() const indexs = colorItem.index_str.split(',') - const colorItemNew = state.list[indexs[0]].color_list[indexs[1]] + const colorItemNew: ColorType = state.list[indexs[0]].color_list[indexs[1]] const onChangeNum = useCallback(async(val) => { await updateShoppingCartFetchData(val) const res = await getShoppingCartFetchData({ id: colorItem.id }) @@ -41,15 +41,8 @@ export default memo((props: ColorItemType) => { }, [colorItemNew]) const onSubmitSuccess = useCallback(() => { - Taro.showToast({ - title: '添加成功', - icon: 'success', - duration: 1000, - success: () => { - dispatch({ type: 'setRecommendSubmit', data: { list: state.list, recommendSubmitStatus: true } }) - }, - }) - }, []) + dispatch({ type: 'setRecommendId', data: { list: state.list, recommendId: colorItemNew.id } }) + }, [colorItemNew]) return }) @@ -116,7 +109,7 @@ const Index = memo((props: IndexItemType) => { - {colorItem.has_screw_recommend && } + {colorItem.has_screw_recommend && } }) diff --git a/src/pages/shopCar/components/recommendProduct/index.tsx b/src/pages/shopCar/components/recommendProduct/index.tsx index d33edd6..aa9a5f0 100644 --- a/src/pages/shopCar/components/recommendProduct/index.tsx +++ b/src/pages/shopCar/components/recommendProduct/index.tsx @@ -11,93 +11,17 @@ import type { listType, saleModeType } from '@/common/enum' import { SALE_MODE_SETTING } from '@/common/enum' interface ParamType { - shopId: number - submitSuccess?: () => void -} -type DataType = ItemType - -interface submitType { - color_list: { product_color_id: number; roll: number; length: number }[] - sale_mode: saleModeType - is_screw_recommend: boolean + onClick?: () => void } export default memo((props: ParamType) => { - const selectList = SALE_MODE_SETTING - const { shopId, submitSuccess } = props - const [filter, setFilter] = useState({ - id: 0, - sale_mode: 0, - }) - const submitData = useRef({ - sale_mode: 0, - color_list: [], - is_screw_recommend: true, - }) - useEffect(() => { - (filter.id !== shopId) && setFilter(e => ({ ...e, id: shopId })) - }, [shopId]) - const [productData, setProductData] = useState() - const { fetchData: getScrewProductFetchData } = GetScrewProductApi() - const getScrewProduct = async() => { - const res = await getScrewProductFetchData({ id: filter.id, sale_mode: filter.sale_mode }) - if (res.success) { - res.data = { - ...res.data, - sale_mode_type: filter.sale_mode, - } - onSubmitData(res.data.defaultNum, res.data.screw_color_id) - setProductData(res.data) - } - } - const [showOpen, setShowOpen] = useState(false) - useEffect(() => { - showOpen && getScrewProduct() - }, [showOpen, filter]) - - const getSelect = useCallback((val: listType) => { - submitData.current.sale_mode = val.value - setFilter(e => ({ ...e, sale_mode: val.value })) - }, []) - - const onChangeNum = useCallback((num) => { - onSubmitData(num, productData?.screw_color_id) - }, [productData]) - - // 整理提交数据 - const onSubmitData = (num = 0, product_color_id = 0) => { - const data = { product_color_id, length: 0, roll: 0 } - if (filter.sale_mode === 0) { - data.roll = num - } - else { - data.length = Big(num).times(100).toNumber() - } - submitData.current.color_list = [data] - } - - const { fetchData: addShoppingCartfetchData } = AddShoppingCartApi() - const onSubmit = useCallback(async() => { - const res = await addShoppingCartfetchData(submitData.current) - if (res.success) { - submitSuccess?.() - } - }, []) - + const { onClick } = props return - setShowOpen(true)}> + 选择专属一对一配套螺纹推荐 - {showOpen && - - - - - 确认添加 - } - {showOpen && setShowOpen(false)}>} })