add:商品列表缓存处理

c_client/src/components/_tb_comps/GoodsList/GoodsList.jsx

@@ -19,7 +19,8 @@ function GoodsList(props) {
           color: '#181818'
         },
         onOpenDetail,
-        onCompleteTask
+        onCompleteTask,
+        onScrollToLower=()=>{}
       } = props
 
     const goToGoodsDetail = async(item) => {
@@ -43,7 +44,7 @@ function GoodsList(props) {
         })
     }
     return (
-        <ScrollView scrollY className={styles['container__scroll']}>
+        <ScrollView scrollY onScrollToLower={onScrollToLower} className={styles['container__scroll']}>
           <View className={styles['container__content-list']}>
             {
               goodsList.map((item, i) => {

c_client/src/config/config.js

 export default {
     env: 'test', // 云函数环境 test 测试环境 online 线上环境
     requestType: 'cloud', // cloud: 云函数, yapi: yapi 接口, ams: ams接口，tornadoAPI: 风驰台接口
-    cloudName: 'testNewS', // 主云函数项目名 CommonToC
-    sellerId: '2401530034',
+    cloudName: 'HipPopGame', // 主云函数项目名 CommonToC
+    sellerId: '4004811045',
     tornadoAPI: 'https://tornado.duibadev.com.cn/tbServer/api?db=db3000000038851072&proxyIp=172.16.130.158', // 新增：当requestType: 'tornadoAPI'时，找服务端提供地址
-    defaultActivityId: '610cff3f086e659a96b7336c' // 默认活动id
+    defaultActivityId: '617629e4e5c0d73da5bb50db' // 默认活动id
 }
\ No newline at end of file

c_client/src/hooks/useGoods.js

+import {useState, useEffect, useRef} from 'react'
+import API from '@/api'
+import {goodsListInfoModel} from '@/store'
+import { useThrottle } from './useThrottle';
+
+const pageSize = 8;
+
+export const useGoods = (props) => {
+
+    const {key, itemIds} = props;
+
+    const itemIdsArray = useRef(itemIds.split(','));
+
+    // 当前索引值
+    const itemIndex = useRef(0)
+
+    const {listStorage, setListStorage} = goodsListInfoModel();
+
+    const [goodsList, setGoodsList] = useState([]);
+
+    useEffect(()=>{
+        // 小于分页 请求商品数
+        if(itemIdsArray.current.length < pageSize){
+            getGoodsList(itemIds)
+            return
+        }
+        // 存储当前标识 
+        itemIndex.current = pageSize;
+        // 多于分页请求商品数量
+        getGoodsList(itemIdsArray.current.slice(0, pageSize).join(','))
+    },[])
+
+    // 商品列表请求
+    const getGoodsList = async (itemIds,isReset = false) => {
+        // 判断是否存在listStorage[key]
+        if(listStorage?.[key] && listStorage?.[key]?.length > goodsList.length){
+            setGoodsList(listStorage?.[key]);
+            return;
+        }
+        const { data } = await API.getCollectGoods({ key, itemIds })
+        if(data?.list){
+            const list = isReset ? [...data?.list] : [...goodsList, ...data?.list];
+            // 缓存当前key对应的goodslist
+            setListStorage({
+                ...listStorage,
+                [key]:list
+            })
+            setGoodsList(list || [])
+        }
+    }
+    // 下一页 商品列表请求
+    const scrollToNextList = useThrottle(()=>{
+
+        console.log(itemIdsArray.current.length , pageSize,itemIndex.current, itemIdsArray.current.length);
+        // 没有第二页
+        if(itemIdsArray.current.length < pageSize || itemIndex.current == itemIdsArray.current.length) return
+        let curretnIndex = 0;
+        // 第二页是不是最后一页
+        if(itemIndex.current + pageSize > itemIdsArray.current.length) {
+            curretnIndex = itemIdsArray.current.length;
+        } else {
+            // 第二页满数量
+            curretnIndex = itemIndex.current + pageSize;
+        }
+        // 请求接口
+        getGoodsList(itemIdsArray.current.slice(itemIndex.current, curretnIndex).join(','));
+        // 索引值更新
+        itemIndex.current = curretnIndex;
+    })
+
+    const updateGoodsList = async () => {
+        if(itemIdsArray.current.length <= pageSize) {
+            await getGoodsList(itemIds,true)
+            return;
+        }
+        // 当前页面的索引值
+        const preInx = (Math.ceil(itemIndex.current / pageSize) - 1) * pageSize
+        // 当前页面的所有itemId
+        const _itemIds = itemIdStr.current.slice(preInx, itemIdInx.current).join(',')
+        // 更新当前商品的状态
+        const goodRes = await getCollectGoods({ key, itemIds: _itemIds })
+        const newGoodsList = [...(goodList.slice(0,preInx)),...(goodRes?.data?.list || [])]
+
+        setListStorage({
+            ...listStorage,
+            [key]:newGoodsList
+        })
+        
+        setGoodList(newGoodsList)
+    }
+
+     // 完成任务
+    const completeTask = useThrottle( async (callbackFn=()=>{}) => {
+        const res = await API.completeTask({ key, itemId})
+        if(res?.success){
+            updateGoodsList();
+            callbackFn && callbackFn();
+        }
+    })
+
+    return {
+        goodsList,
+        scrollToNextList,
+        completeTask,
+    }
+}
\ No newline at end of file

c_client/src/hooks/useTasks.js

@@ -46,6 +46,9 @@ export function useTasks(props) {
   const fetchTaskList = async () => {
     const isVip = await checkIsMember()
     const { success, data } = await API.getTaskList({ isVip })
+
+    console.log('fetchTaskList', success, data);
+
     if(success && data) {
       const { list = [] } = data
       const _list = list.map(itm => {

c_client/src/pages/packageGood/browseGoods/browseGoods.jsx

@@ -11,6 +11,9 @@ import { TASK_CONFIG, BROSE_GOOD_TYPE } from '@/config/task.config'
 import { BROWSE_CONFIG } from '@/config/browse.config'
 import { GOOD_LIST } from '@/mock'
 
+import {useGoods} from '@/hooks/useGoods'
+
+
 function BrowseGoodsPage() {
   const { params: { itemIds, keepTime } } = useRouter()
   const { browseType, browseTime = 15 } = TASK_CONFIG
@@ -22,11 +25,14 @@ function BrowseGoodsPage() {
   const [accumulateTime, setAccumulateTime] = useState(+keepTime || 15)
 
   const browserTimer = useRef(null)
-  const [goodsList, setGoodsList] = useState(BROWSE_CONFIG.isMock?GOOD_LIST:[])
+  // const [goodsList, setGoodsList] = useState(BROWSE_CONFIG.isMock?GOOD_LIST:[])
+
+  const {goodsList, scrollToNextList, completeTask} = useGoods({key:BROWSE_CONFIG.taskType,itemIds})
+
   
-  useEffect(() => {
-    getGoodsList()
-  }, [])
+  // useEffect(() => {
+  //   getGoodsList()
+  // }, [])
   // 浏览集合页15s
   useEffect(() => {
     if(browseType === BROSE_GOOD_TYPE.PAGE) {
@@ -66,13 +72,20 @@ function BrowseGoodsPage() {
     }
   })
   // 浏览记录
-  const onCompleteTask = async(itemId) => {
-    const { success } = await API.completeTask({ key: BROWSE_CONFIG.taskType, itemId: currentItemId.current, taskType: BROWSE_CONFIG.taskType })
-    if (success) {
-      getGoodsList()
+  // const onCompleteTask = async(itemId) => {
+  //   const { success } = await API.completeTask({ key: BROWSE_CONFIG.taskType, itemId: currentItemId.current, taskType: BROWSE_CONFIG.taskType })
+  //   if (success) {
+  //     getGoodsList()
+  //     showToast({ title: '浏览成功'})
+  //   }
+  // }
+
+  const onCompleteTask = () => {
+    completeTask(()=>{
       showToast({ title: '浏览成功'})
-    }
+    })
   }
+
   // 点击商品 跳转时处理
   const onOpenDetail = (itemId, collected) => {
     const handleFn = {
@@ -118,7 +131,7 @@ function BrowseGoodsPage() {
         <GoodsTitle config={BROWSE_CONFIG.head} position={'bottom'} />
       </View>
       <View className={styles['page-content__list']}>
-        <GoodsList goodsList={goodsList} task={BROWSE_CONFIG} onOpenDetail={(itemId,collected) => onOpenDetail(itemId,collected)} />
+        <GoodsList onScrollToLower={scrollToNextList} goodsList={goodsList} task={BROWSE_CONFIG} onOpenDetail={(itemId,collected) => onOpenDetail(itemId,collected)} />
       </View>
       {
         BROWSE_CONFIG.countDown && 

c_client/src/pages/packageGood/cartGoods/cartGoods.jsx

@@ -12,24 +12,29 @@ import { CART_CONFIG, CART_TYPE } from '@/config/cart.config'
 import { TASK_RATE_TYPE } from '@/config/task.config'
 import { GOOD_LIST } from '@/mock'
 
+import {useGoods} from '@/hooks/useGoods'
+
 const { showSkuModal } = tbccTs.tb
 
 function CartGoodsPage() {
   const router = useRouter()
-  const [goodsList, setGoodsList] = useState(GOOD_LIST)
+  // const [goodsList, setGoodsList] = useState(GOOD_LIST)
   const { item } = router?.params
   const { itemIds, todayCompleteTimes, rateType, times, completeTimes = 0 } = JSON.parse(item)
   // 加购状态
   const initCompleteTimes = rateType === TASK_RATE_TYPE.EVERYDAY? +(todayCompleteTimes || completeTimes) : +completeTimes
   const collectFlag = useRef(initCompleteTimes)
-  useEffect(() => {
-    getGoodsList()
-  }, [])
 
-  const getGoodsList = async () => {
-    const { data } = await API.getCollectGoods({ key: CART_CONFIG.taskType, taskType: CART_CONFIG.taskType, itemIds })
-    data?.list && setGoodsList(data?.list || [])
-  }
+  // useEffect(() => {
+  //   getGoodsList()
+  // }, [])
+
+  const {goodsList, scrollToNextList, completeTask} = useGoods({key:CART_CONFIG.taskType,itemIds})
+
+  // const getGoodsList = async () => {
+  //   const { data } = await API.getCollectGoods({ key: CART_CONFIG.taskType, taskType: CART_CONFIG.taskType, itemIds })
+  //   data?.list && setGoodsList(data?.list || [])
+  // }
   // 加入购物车 // 对应itemId为 574141925233 skuId为4018047819826 数量为4
   const onCompleteTask = useThrottle(async (itemId, collected) => {
     if (collected && CART_CONFIG.type === CART_TYPE.ONE) {
@@ -42,12 +47,16 @@ function CartGoodsPage() {
     }
     const { status, quantity } = await showSkuModal(String(itemId))
     if (status == "addCartSuccess") {
-      const { success } = await API.completeTask({ key: CART_CONFIG.taskType, taskType: CART_CONFIG.taskType, itemId, count: quantity })
-      if (success) {
+      // const { success } = await API.completeTask({ key: CART_CONFIG.taskType, taskType: CART_CONFIG.taskType, itemId, count: quantity })
+      // if (success) {
+      //   collectFlag.current += 1
+      //   getGoodsList()
+      // }
+
+      completeTask(()=>{
         collectFlag.current += 1
-        getGoodsList()
-        // showToast({ title: '加购成功'})
-      }
+      })
+
     }
   }, 2000);
 
@@ -57,7 +66,7 @@ function CartGoodsPage() {
         <TitleImg config={CART_CONFIG.head} position={'bottom'} />
       </View>
       <View className={styles['page-content__list']}>
-        <GoodsList goodsList={goodsList} task={CART_CONFIG} onCompleteTask={(itemId,collected) => onCompleteTask(itemId,collected)} />
+        <GoodsList onScrollToLower={scrollToNextList} goodsList={goodsList} task={CART_CONFIG} onCompleteTask={(itemId,collected) => onCompleteTask(itemId,collected)} />
       </View>
     </ContainerFit>
   )

c_client/src/pages/packageGood/collectGoods/collectGoods.jsx

@@ -13,32 +13,42 @@ import COLLECT_CONFIG from '@/config/collect.config'
 import { TASK_RATE_TYPE } from '@/config/task.config'
 import { GOOD_LIST } from '@/mock'
 
+import {useGoods} from '@/hooks/useGoods'
+
 function CollectGoodsPage() {
   const router = useRouter()
-  const [goodsList, setGoodsList] = useState([])
   const { item } = router?.params
   const { itemIds, todayCompleteTimes = 0, rateType, times, completeTimes = 0 } = JSON.parse(item)
   // 加购状态
   const initCompleteTimes = rateType === TASK_RATE_TYPE.EVERYDAY? +(todayCompleteTimes || completeTimes) : +completeTimes
   const collectFlag = useRef(initCompleteTimes)
 
-  useEffect(() => {
-    getGoodsList()
-  }, [])
-  const getGoodsList = async () => {
-    const { data } = await API.getCollectGoods({ key: COLLECT_CONFIG.taskType, itemIds, taskType: COLLECT_CONFIG.taskType })
-    data?.list && setGoodsList(data?.list || [])
-  }
+  const {goodsList, scrollToNextList, completeTask} = useGoods({key:COLLECT_CONFIG.taskType,itemIds})
+
+  // const [goodsList, setGoodsList] = useState([])
+  // useEffect(() => {
+  //   getGoodsList()
+  // }, [])
+  // const getGoodsList = async () => {
+  //   const { data } = await API.getCollectGoods({ key: COLLECT_CONFIG.taskType, itemIds, taskType: COLLECT_CONFIG.taskType })
+  //   data?.list && setGoodsList(data?.list || [])
+  // }
 
   const onCompleteTask = useThrottle(async(itemId,collected) => {
-    const collectFn = async () => {
-      const { success } = await API.completeTask({ key: COLLECT_CONFIG.taskType, itemId, taskType: COLLECT_CONFIG.taskType })
-      if (success) {
-        collectFlag.current += 1
-        getGoodsList()
-        showToast({ title: '收藏成功'})
-      }
-    }
+    // const collectFn = async () => {
+    //   const { success } = await API.completeTask({ key: COLLECT_CONFIG.taskType, itemId, taskType: COLLECT_CONFIG.taskType })
+    //   if (success) {
+    //     collectFlag.current += 1
+    //     getGoodsList()
+    //     showToast({ title: '收藏成功'})
+    //   }
+    // }
+
+    const collectFn = completeTask(()=>{
+      collectFlag.current += 1
+      showToast({ title: '收藏成功'})
+    })
+
     // 今日是否已收藏过
     if(rateType !== TASK_RATE_TYPE.FOREVER && collectFlag.current >= times) {
       showToast({title: '任务已完成，请明日再来'})
@@ -67,7 +77,7 @@ function CollectGoodsPage() {
         <TitleImg config={COLLECT_CONFIG.head} position={'bottom'} />
       </View>
       <View className={styles['page-content__list']}>
-        <GoodsList goodsList={goodsList} task={COLLECT_CONFIG} onCompleteTask={(itemId,collected) => onCompleteTask(itemId,collected)} />
+        <GoodsList onScrollToLower={scrollToNextList} goodsList={goodsList} task={COLLECT_CONFIG} onCompleteTask={(itemId,collected) => onCompleteTask(itemId,collected)} />
       </View>
     </ContainerFit>
   )

c_client/src/pages/packageGood/orderGoods/orderGoods.jsx

@@ -9,10 +9,14 @@ import API from '@/api'
 import styles from './orderGoods.module.less'
 import ORDER_CONFIG from '@/config/order.config'
 
+import {useGoods} from '@/hooks/useGoods'
+
 function OrderGoodsPage() {
   const router = useRouter()
   const { itemIds } = router?.params
-  const { data } = useRequest(API.getCollectGoods, { key: ORDER_CONFIG.taskType, itemIds, taskType: ORDER_CONFIG.taskType })
+  // const { data } = useRequest(API.getCollectGoods, { key: ORDER_CONFIG.taskType, itemIds, taskType: ORDER_CONFIG.taskType })
+
+  const {goodsList, scrollToNextList} = useGoods({key:ORDER_CONFIG.taskType,itemIds})
 
   return (
     <ContainerFit bg={ORDER_CONFIG.bg} fullScreenFit>
@@ -20,7 +24,8 @@ function OrderGoodsPage() {
         <TitleImg config={ORDER_CONFIG.head} position={'bottom'} />
       </View>
       <View className={styles['page-content__list']}>
-        <GoodsList goodsList={data?.list || []} task={ORDER_CONFIG} />
+        {/* <GoodsList goodsList={data?.list || []} task={ORDER_CONFIG} /> */}
+        <GoodsList onScrollToLower={scrollToNextList} goodsList={goodsList || []} task={ORDER_CONFIG} />
       </View>
     </ContainerFit>
 

c_client/src/store/goodsListInfo.js

+import { useState } from 'react'
+import { createModel } from 'hox'
+
+function goodsListInfo(){
+    const [listStorage,setListStorage] = useState({})
+
+    return {
+        listStorage,
+        setListStorage
+    }
+}
+
+export const goodsListInfoModel = createModel(goodsListInfo)
\ No newline at end of file

c_client/src/store/index.js

 export * from './activityInfo'
 export * from './loginInfo'
+export * from './goodsListInfo'
\ No newline at end of file