处理banner插入

src/container/listContainer/index.tsx

@@ -10,6 +10,7 @@ import { EvaluateScene } from "@/store/evaluateStore";
 import { waitForAuthInit } from "@/utils/authInit";
 import "./index.scss";
 import { useRef, useEffect, useState, useMemo } from "react";
+import { useDictionaryStore } from "@/store/dictionaryStore";
 
 const ListContainer = (props) => {
   const {
@@ -44,7 +45,7 @@ const ListContainer = (props) => {
   const { fetchUserInfo, fetchLastTestResult } = useUserActions();
   // 使用全局状态中的测试结果，避免重复调用接口
   const lastTestResult = useLastTestResult();
-
+  const { bannerListImage, bannerDetailImage, bannerListIndex = 0 } = useDictionaryStore((s) => s.bannerDict) || {};
   useReachBottom(() => {
     // 加载更多方法
     if (loading) {
@@ -130,6 +131,16 @@ const ListContainer = (props) => {
     );
   };
 
+  // 插入 banner 卡片
+  function insertBannerCard(list) {
+    if (!bannerListImage) return list;
+    return [
+      ...list.slice(0, Number(bannerListIndex)), 
+      { type: "banner", banner_image_url: bannerListImage, banner_detail_url: bannerDetailImage }, 
+      ...list.slice(Number(bannerListIndex))
+    ];
+  }
+
   // 对于没有ntrp等级的用户每个月展示一次, 插在第二个位置后面
   function insertEvaluateCard(list) {
     if (!evaluateFlag)
@@ -146,17 +157,23 @@ const ListContainer = (props) => {
       return [...list, { type: "evaluateCard" }];
     }
     const [item1, item2, ...rest] = list;
-    return [
+
+    let result = [
       item1,
       item2,
       { type: "evaluateCard" },
       ...(showNumber !== undefined ? rest.slice(0, showNumber - 3) : rest),
     ];
+
+    if (bannerListImage) {
+      return insertBannerCard(result);
+    }
+    return result;
   }
 
   const memoizedList = useMemo(
     () => insertEvaluateCard(data),
-    [evaluateFlag, data, hasTestInLastMonth, showNumber]
+    [evaluateFlag, data, hasTestInLastMonth, showNumber, bannerListImage, bannerDetailImage, bannerListIndex]
   );
 
   // 渲染 banner 卡片
@@ -165,16 +182,12 @@ const ListContainer = (props) => {
     return (
       <View
         key={item.id || `banner-${index}`}
-        style={{
-          maxHeight: "122px",
-          overflow: "hidden",
-          borderRadius: "12px",
-        }}
+        className="banner-image-wrapper"
       >
         <Image
           src={item.banner_image_url}
           mode="widthFix"
-          style={{ width: "100%", display: "block", maxHeight: "122px" }}
+          className="banner-image"
           onClick={() => {
             const target = item.banner_detail_url;
             if (target) {
@@ -211,10 +224,10 @@ const ListContainer = (props) => {
     return (
       <>
         {memoizedList.map((match, index) => {
-          if (match.type === "banner") {
+          if (match?.type === "banner") {
             return renderBanner(match, index);
           }
-          if (match.type === "evaluateCard") {
+          if (match?.type === "evaluateCard") {
             return (
               <NTRPTestEntryCard key="evaluate" type={EvaluateScene.list} />
             );