From bfb248a4ebe4c55b0ec923febc2f7dfc866c6cf2 Mon Sep 17 00:00:00 2001
From: maqian <maqian@shopex.cn>
Date: Fri, 25 Jul 2025 15:16:20 +0800
Subject: [PATCH] =?UTF-8?q?ui(custom):=20tabbar=E5=85=BC=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sp-tabbar/index.js   | 93 ++++++++++++++++-------------
 src/components/sp-tabbar/index.scss |  3 +
 2 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/src/components/sp-tabbar/index.js b/src/components/sp-tabbar/index.js
index 2a841ccba..1414e90d4 100755
--- a/src/components/sp-tabbar/index.js
+++ b/src/components/sp-tabbar/index.js
@@ -80,52 +80,59 @@ function SpTabbar() {
 
   return (
     <View className='sp-tabbar' style={{ backgroundColor: backgroundColor }}>
-      {tabList?.map((item, index) => (
-        <View className='sp-tabbar__item' key={index} onClick={() => handleTabbarClick(index)}>
-          {/* {index == 0 &&
-            (index !== currentIndex ? (
-              <>
-                <SpImage src={item.iconPath} className='sp-tabbar__item-image' mode='aspectFill' />
-                <View
-                  className='sp-tabbar__item-text'
-                  style={{ color: index == currentIndex ? selectedColor : color }}
-                >
-                  {item.text}
+      {tabList?.map((item, index) => {
+        const iconPath = index == currentIndex ? item.selectedIconPath : item.iconPath
+        return (
+          <View className='sp-tabbar__item' key={index} onClick={() => handleTabbarClick(index)}>
+            {/* {index == 0 &&
+              (index !== currentIndex ? (
+                <>
+                  <SpImage src={item.iconPath} className='sp-tabbar__item-image' mode='aspectFill' />
+                  <View
+                    className='sp-tabbar__item-text'
+                    style={{ color: index == currentIndex ? selectedColor : color }}
+                  >
+                    {item.text}
+                  </View>
+                </>
+              ) : (
+                <SpImage
+                  src={item.selectedIconPath}
+                  className='sp-tabbar__item-cover-image'
+                  mode='aspectFill'
+                />
+              ))} */}
+
+            <View className='sp-tabbar__item-image-wrapper'>
+              {/^http/.test(iconPath) ? (
+                <SpImage
+                  src={iconPath}
+                  className='sp-tabbar__item-image'
+                  mode='aspectFill'
+                />
+              ) : (
+                <Text className={`iconfont ${index == currentIndex ? `icon-${TABBAR_ICON[item.name]}-fill` : `icon-${TABBAR_ICON[item.name]}`}`}></Text>
+              )}
+
+              {item.name == 'cart' && cartCount > 0 && (
+                <View className={`sp-tabbar__item-badge${cartCount > 99 ? '1' : ''}`}>
+                  {cartCount > 0 && cartCount <= 99 && (
+                    <Text className='cart-count'>{cartCount}</Text>
+                  )}
+                  {cartCount > 99 && <Text className='cart-count1'>99+</Text>}
                 </View>
-              </>
-            ) : (
-              <SpImage
-                src={item.selectedIconPath}
-                className='sp-tabbar__item-cover-image'
-                mode='aspectFill'
-              />
-            ))} */}
+              )}
+            </View>
 
-          <View className='sp-tabbar__item-image-wrapper'>
-            <SpImage
-              src={index == currentIndex ? item.selectedIconPath : item.iconPath}
-              className='sp-tabbar__item-image'
-              mode='aspectFill'
-            />
-
-            {item.name == 'cart' && cartCount > 0 && (
-              <View className={`sp-tabbar__item-badge${cartCount > 99 ? '1' : ''}`}>
-                {cartCount > 0 && cartCount <= 99 && (
-                  <Text className='cart-count'>{cartCount}</Text>
-                )}
-                {cartCount > 99 && <Text className='cart-count1'>99+</Text>}
-              </View>
-            )}
+            <View
+              className='sp-tabbar__item-text'
+              style={{ color: index == currentIndex ? selectedColor : color }}
+            >
+              {item.text}
+            </View>
           </View>
-
-          <View
-            className='sp-tabbar__item-text'
-            style={{ color: index == currentIndex ? selectedColor : color }}
-          >
-            {item.text}
-          </View>
-        </View>
-      ))}
+        )
+      })}
     </View>
   )
 }
diff --git a/src/components/sp-tabbar/index.scss b/src/components/sp-tabbar/index.scss
index 60f434c20..f2e50c8d3 100755
--- a/src/components/sp-tabbar/index.scss
+++ b/src/components/sp-tabbar/index.scss
@@ -79,6 +79,9 @@
     }
     &-image-wrapper {
       position: relative;
+      .iconfont {
+        font-size: 56px;
+      }
     }
     &-image {
       // position: relative;