From e0a85b84ebfae1c878dbb9660392337111c69836 Mon Sep 17 00:00:00 2001
From: liujiajun <liujiajun@seu.edu.cn>
Date: Thu, 7 Mar 2024 19:31:31 +0800
Subject: [PATCH] =?UTF-8?q?mynews=20=E9=A6=96=E9=A1=B5=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8tab=E7=9A=84=E5=8F=B3=E4=B8=8A=E8=A7=92?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: liujiajun <liujiajun@seu.edu.cn>
---
 scenario/arkui/MyNews/README.md               |  3 ++
 .../MyNews/entry/src/main/ets/pages/Index.ets | 44 ++++++++++++-------
 .../main/ets/viewmodel/IndexBottomNavItem.ets |  4 +-
 3 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/scenario/arkui/MyNews/README.md b/scenario/arkui/MyNews/README.md
index ddbb0c6cc..ebe78aebd 100644
--- a/scenario/arkui/MyNews/README.md
+++ b/scenario/arkui/MyNews/README.md
@@ -38,3 +38,6 @@
    RecommendedUserList.ets
    RecommendedVideoList.ets
 ```
+
+## TODO
+
diff --git a/scenario/arkui/MyNews/entry/src/main/ets/pages/Index.ets b/scenario/arkui/MyNews/entry/src/main/ets/pages/Index.ets
index 17aff0a74..a75987dd7 100644
--- a/scenario/arkui/MyNews/entry/src/main/ets/pages/Index.ets
+++ b/scenario/arkui/MyNews/entry/src/main/ets/pages/Index.ets
@@ -51,12 +51,14 @@ const bottomNavItemList: IndexBottomNavItem[] = [{
   title: '任务',
   normalIcon: $r('app.media.ic_public_calendar'),
   selectedIcon: $r('app.media.ic_public_calendar_filled'),
-  btnId: 'indexTaskPageBtn'
+  btnId: 'indexTaskPageBtn',
+  label: '开宝箱'
 }, {
   title: '商城',
   normalIcon: $r('app.media.ic_public_appstore'),
   selectedIcon: $r('app.media.ic_public_appstore_filled'),
-  btnId: 'indexMallPageBtn'
+  btnId: 'indexMallPageBtn',
+  label: ''
 }, {
   title: '个人',
   normalIcon: $r('app.media.ic_public_contacts'),
@@ -103,7 +105,7 @@ struct Index {
         .width('100%')
         .height('100%')
         .align(Alignment.Top)
-        .tabBar(this.TabBuilder(item.title, itemIndex, item.normalIcon, item.selectedIcon, item.btnId))
+        .tabBar(this.TabBuilder(item.title, itemIndex, item.normalIcon, item.selectedIcon, item.btnId, item.label))
       })
     }
     .width('100%')
@@ -118,20 +120,32 @@ struct Index {
    * 底部导航栏中自定义按钮样式（图标+文字）
    */
   @Builder
-  TabBuilder(title: string, targetIndex: number, normalIcon: Resource, selectedIcon: Resource, btnId: string) {
+  TabBuilder(title: string, targetIndex: number, normalIcon: Resource, selectedIcon: Resource, btnId: string, label: string) {
     Button() {
-      Column() {
-        // 当被选中时变色，图标变为填充型
-        Image(this.curNavIdx === targetIndex ? selectedIcon : normalIcon)
-          .size({ width: 20, height: 20 })
-          .fillColor(this.curNavIdx === targetIndex ? $r('app.color.primary') : $r('app.color.light_fg'))
-        Text(title)
-          .fontSize(8)
-          .fontColor(this.curNavIdx === targetIndex ? $r('app.color.primary') : $r('app.color.light_fg'))
+      Stack({alignContent: Alignment.TopEnd}) {
+        Column() {
+          // 当被选中时变色，图标变为填充型
+          Image(this.curNavIdx === targetIndex ? selectedIcon : normalIcon)
+            .size({ width: 20, height: 20 })
+            .fillColor(this.curNavIdx === targetIndex ? $r('app.color.primary') : $r('app.color.light_fg'))
+          Text(title)
+            .fontSize(8)
+            .fontColor(this.curNavIdx === targetIndex ? $r('app.color.primary') : $r('app.color.light_fg'))
+        }
+        .width('100%')
+        .height('100%')
+        .justifyContent(FlexAlign.Center)
+        if(label) {
+          Text(label)
+            .borderRadius(999)
+            .backgroundColor('red')
+            .fontColor('white')
+            .fontSize(8)
+            .padding(2)
+            .margin({top: 2})
+        }
+
       }
-      .width('100%')
-      .height('100%')
-      .justifyContent(FlexAlign.Center)
     }
     .id(btnId)
     .commonBtnStyle(() => {
diff --git a/scenario/arkui/MyNews/entry/src/main/ets/viewmodel/IndexBottomNavItem.ets b/scenario/arkui/MyNews/entry/src/main/ets/viewmodel/IndexBottomNavItem.ets
index 4f1388ff5..908504ec8 100644
--- a/scenario/arkui/MyNews/entry/src/main/ets/viewmodel/IndexBottomNavItem.ets
+++ b/scenario/arkui/MyNews/entry/src/main/ets/viewmodel/IndexBottomNavItem.ets
@@ -25,5 +25,7 @@ export interface IndexBottomNavItem {
   /* 被选中时替换为填充型图标 */
   selectedIcon: Resource
   /* 对应的按钮id（测试用例中使用） */
-  btnId: string
+  btnId: string,
+  /* 右上角标签 */
+  label?: string
 }
-- 
Gitee