🐞 fix(购物车蒙版问题修复):

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<A extends {} | null>() {
 }
 export const [useCurrenShop, CurrentProvider] = createCtx<params>()
 
-// 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':
+      case 'setRecommendId':
-        return { ...state, recommendSubmitStatus: action.data.recommendSubmitStatus }
+        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 }
 }
 
 // 更新数据

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;
+}

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<submitType>({
+    sale_mode: 0,
+    color_list: [],
+    is_screw_recommend: true,
+  })
+  useEffect(() => {
+    (filter.id !== shopId) && setFilter(e => ({ ...e, id: shopId }))
+  }, [shopId])
+  const [productData, setProductData] = useState<DataType>()
+  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 && <View className={styles.recommended_open}>
+      <View className={styles.search}>
+        <Search onSelect={getSelect} numberStatus={false} defaultIndex={filter.sale_mode} />
+      </View>
+      <RecommendProductItem colorItem={productData!} onChangeNum={onChangeNum} />
+      <View className={styles.onSubmit} onClick={onSubmit}>确认添加</View>
+    </View>}
+    {showOpen && <View catchMove className={styles.mask} onClick={onCloseEven}></View>}
+  </>
+})

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 <View className={styles.shop_main}>
     <View className={styles.shop_header}>
       <Operation onSelect={onSortChange} onChange={onChangeSetting} />
@@ -237,6 +239,9 @@ export default () => {
     <View>
       <OrganizationNameModal showModal={showModal} onClose={handleClose} onShowModalChange={handleShowChange} onConfirm={handleOrganizationNameModalConfirm} />
     </View>
+    <View>
+      <RecommendOpen shopId={state.recommendId || 0} onShow={!!state.recommendId} onClose={onRecommendClose} submitSuccess={onSubmitSuccess} />
+    </View>
     <View className="common_safe_area_y"></View>
   </View>
 }

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;

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({
+    dispatch({ type: 'setRecommendId', data: { list: state.list, recommendId: colorItemNew.id } })
-      title: '添加成功',
+  }, [colorItemNew])
-      icon: 'success',
-      duration: 1000,
-      success: () => {
-        dispatch({ type: 'setRecommendSubmit', data: { list: state.list, recommendSubmitStatus: true } })
-      },
-    })
-  }, [])
   return <Index colorItem={state.list[indexs[0]].color_list[indexs[1]]} onChangeNum={onChangeNum} onSubmitSuccess={onSubmitSuccess} />
 })
 
@@ -116,7 +109,7 @@ const Index = memo((props: IndexItemType) => {
           </View>
         </View>
       </View>
-      {colorItem.has_screw_recommend && <RecommendProduct shopId={colorItem.id} submitSuccess={onSubmitSuccess} />}
+      {colorItem.has_screw_recommend && <RecommendProduct onClick={onSubmitSuccess} />}
     </View>
   </>
 })

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
+  onClick?: () => 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 selectList = SALE_MODE_SETTING
+  const { onClick } = props
-  const { shopId, submitSuccess } = props
-  const [filter, setFilter] = useState({
-    id: 0,
-    sale_mode: 0,
-  })
-  const submitData = useRef<submitType>({
-    sale_mode: 0,
-    color_list: [],
-    is_screw_recommend: true,
-  })
-  useEffect(() => {
-    (filter.id !== shopId) && setFilter(e => ({ ...e, id: shopId }))
-  }, [shopId])
-  const [productData, setProductData] = useState<DataType>()
-  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?.()
-    }
-  }, [])
-
   return <View className={styles.recommended_main}>
-    <View className={styles.recommended} onClick={() => setShowOpen(true)}>
+    <View className={styles.recommended} onClick={onClick}>
       <Text>选择专属一对一配套螺纹推荐</Text>
       <View className={styles.icon}>
         <IconFont name="icon-xiala" size={30} />
       </View>
     </View>
-    {showOpen && <View className={styles.recommended_open}>
-      <View className={styles.search}>
-        <Search onSelect={getSelect} numberStatus={false} defaultIndex={filter.sale_mode} />
-      </View>
-      <RecommendProductItem colorItem={productData!} onChangeNum={onChangeNum} />
-      <View className={styles.onSubmit} onClick={onSubmit}>确认添加</View>
-    </View>}
-    {showOpen && <View catchMove className={styles.mask} onClick={() => setShowOpen(false)}></View>}
   </View>
 })