From 695486e41fae1e457ce8c3b5c01870deb51256b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=B2=E9=B8=BD?= <1020103647@qq.com>
Date: Sat, 11 May 2024 21:26:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=89=E7=A7=8D=E6=96=B9=E5=BC=8F?=
 =?UTF-8?q?=E7=9A=84=E5=9B=BE=E6=A0=87=EF=BC=8Ctabbar=E9=83=BD=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.config.ts                        | 14 ++++++++++----
 src/components/fg-tabbar/fg-tabbar.vue | 17 ++++++++++++++---
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/pages.config.ts b/pages.config.ts
index 43f3ec5..7f4f019 100644
--- a/pages.config.ts
+++ b/pages.config.ts
@@ -28,15 +28,21 @@ export default defineUniPages({
     list: [
       {
         pagePath: 'pages/index/index',
-        icon: 'home',
         text: '首页',
+        icon: 'home',
+        iconType: 'wot',
+      },
+      {
+        pagePath: 'pages/index/about',
+        text: '关于',
+        icon: 'i-carbon-3d-mpr-toggle',
+        iconType: 'unocss',
       },
       {
         pagePath: 'pages/my/index',
-        icon: 'user',
-        // 经过验证发现unocss这样跨文件动态图标，无法显示，所以先用wot icon 吧
-        // isUnocssIcon: true,
         text: '我的',
+        icon: '/static/logo.svg',
+        iconType: 'local',
       },
     ],
   },
diff --git a/src/components/fg-tabbar/fg-tabbar.vue b/src/components/fg-tabbar/fg-tabbar.vue
index c9e734c..d3931b9 100644
--- a/src/components/fg-tabbar/fg-tabbar.vue
+++ b/src/components/fg-tabbar/fg-tabbar.vue
@@ -8,7 +8,12 @@
     @change="selectTabBar"
   >
     <block v-for="(item, idx) in tabbarList" :key="item.path">
-      <!-- <wd-tabbar-item v-if="item.isUnocssIcon" :title="item.text">
+      <wd-tabbar-item
+        v-if="item.iconType === 'wot'"
+        :title="item.text"
+        :icon="item.icon"
+      ></wd-tabbar-item>
+      <wd-tabbar-item v-else-if="item.iconType === 'unocss'" :title="item.text">
         <template #icon>
           <view
             h-40rpx
@@ -16,13 +21,19 @@
             :class="[item.icon, idx === tabbarStore.curIdx ? 'is-active' : 'is-inactive']"
           ></view>
         </template>
-      </wd-tabbar-item> -->
-      <wd-tabbar-item :title="item.text" :icon="item.icon"></wd-tabbar-item>
+      </wd-tabbar-item>
+      <wd-tabbar-item v-else-if="item.iconType === 'local'" :title="item.text">
+        <template #icon>
+          <image :src="item.icon" h-40rpx w-40rpx />
+        </template>
+      </wd-tabbar-item>
     </block>
   </wd-tabbar>
 </template>
 
 <script setup lang="ts">
+// 只需要把外面的icon在这里写一遍就能生效了！注释掉也是生效的，但是必须要有！
+// i-carbon-3d-mpr-toggle
 import { tabBar } from '@/pages.json'
 import { tabbarStore } from './tabbar'