feat: 完成我的页面相关UI

features/user/src/main/ets/views/Mine.ets

@@ -9,15 +9,8 @@ import { uniformTypeDescriptor } from '@kit.ArkData'
 export struct Mine {
   @StorageProp(YTAvoid.SAFE_TOP_KEY) safeTop: number = 0
   @StorageProp(UserInfo.KEY) userInfo: UserInfo = userInfo
+
   setArr: Array<BasicType> = [
-    {
-      text: '分享给好友',
-      message: '去分享',
-      click: () => {
-        this.shareData()
-      },
-      src: $r('app.media.mine_right_arrow')
-    },
     {
       text: '意见反馈',
       click: () => {
@@ -29,6 +22,14 @@ export struct Mine {
       },
       src: $r('app.media.mine_right_arrow')
     },
+    {
+      text: '分享给好友',
+      message: '去分享',
+      click: () => {
+        this.shareData()
+      },
+      src: $r('app.media.mine_right_arrow')
+    },
     {
       text: '给个好评',
       click: () => {
@@ -53,6 +54,13 @@ export struct Mine {
         yTRouter.router2AboutUS()
       },
       src: $r('app.media.mine_right_arrow')
+    },
+    {
+      text: '退出账号',
+      click: () => {
+        // yTRouter.router2AboutUS()
+      },
+      src: $r('app.media.mine_right_arrow')
     }
   ]
 
@@ -62,64 +70,69 @@ export struct Mine {
 
   build() {
     RelativeContainer() {
-      Image(this.userInfo.getHeadImg())
-        .aspectRatio(1)
-        .height(80)
-        .borderRadius(999)
-        .border({ width: 4, color: Color.White })
+      // 头像 - 用户名
+      Row({space: 16}){
+        Image(this.userInfo.getHeadImg())
+          .aspectRatio(1)
+          .height(80)
+          .borderRadius(999)
+          .border({ width: 4, color: Color.White })
+
+        Text(this.userInfo.getName())
+          .fontSize(18)
+          .fontColor('#FF1C1C1C')
+          .fontWeight(500)
+      }
+      .id('userInfo')
+      .width('100%')
+      .padding({top: 50})
+      .onClick(() => {
+        if (!this.userInfo.checkLogin()) {
+          yTRouter.router2LoginPage()
+        } else {
+          yTRouter.router2SettingPage()
+        }
+      })
+      .alignRules({
+        top: { anchor: "__container__", align: VerticalAlign.Top },
+        left: { anchor: "__container__", align: HorizontalAlign.Start },
+      })
+
+      // 已借阅数量
+      Row(){
+        Text('已借阅')
+          .fontSize(20)
+          .fontWeight(500)
+          .fontColor('#FF000000')
 
+        Text(`${0} 本`)
+          .fontSize(20)
+          .fontWeight(500)
+          .fontColor('#FF000000')
+      }
+      .width("100%")
+      .id('BorrowCount')
+      .padding({top: 40, bottom: 20})
+      .justifyContent(FlexAlign.SpaceBetween)
+      .alignRules({
+        top: { anchor: "userInfo", align: VerticalAlign.Bottom },
+        left: { anchor: "__container__", align: HorizontalAlign.Start },
+      })
+
+      MineBorrow({ userInfo: this.userInfo })
         .alignRules({
-          top: { anchor: "__container__", align: VerticalAlign.Top },
+          top: { anchor: "BorrowCount", align: VerticalAlign.Bottom },
           left: { anchor: "__container__", align: HorizontalAlign.Start },
-          bottom: { anchor: "bottomColumn", align: VerticalAlign.Top },
-          bias: { vertical: 176 / (176 - 40) }
-        })
-        .offset({ x: 28 })
-        .zIndex(999)
-        .id("headerImg")
-      Text(this.userInfo.getName())
-        .fontSize(18)
-        .fontColor('#FF1C1C1C')
-        .fontWeight(500)
-        .alignRules({
-          top: { anchor: "headerImg", align: VerticalAlign.Bottom },
-          left: { anchor: "headerImg", align: HorizontalAlign.Start },
-        })
-        .offset({ x: 28, y: 20 })
-        .zIndex(999)
-
-
-      Text(this.userInfo.checkLogin() ? '编辑' : '登录')
-        .textAlign(TextAlign.Center)
-        .height(29)
-        .width(57)
-        .borderRadius(32)
-        .fontColor(Color.White)
-        .fontSize(14)
-        .fontWeight(400)
-        .alignRules({
-          center: { anchor: "headerImg", align: VerticalAlign.Bottom },
-          right: { anchor: "__container__", align: HorizontalAlign.End },
-        })
-        .zIndex(999)
-        .linearGradient({ angle: 135, colors: [['#CAE2F9', -0.1571], ['#D4D1F4', 0.4709], ['#EDF5FD', 1.1235]] })
-        .offset({ x: -32, y: -2 })
-        .onClick(() => {
-          if (!this.userInfo.checkLogin()) {
-            yTRouter.router2LoginPage()
-          } else {
-            yTRouter.router2SettingPage()
-          }
         })
+
+      // 功能栏
       Column() {
-        List() {
           ForEach(this.setArr, (item: BasicType, index) => {
-            ListItem() {
               Row() {
                 Text(item.text)
                   .fontColor('#FF1C1C1C')
-                  .fontSize(14)
-                if (!index) {
+                  .fontSize(16)
+                if (index == 1) {
                   Text('去分享')
                     .fontColor('#801C1C1C')
                     .fontSize(14)
@@ -131,34 +144,30 @@ export struct Mine {
                 }
               }
               .width('100%')
-              .height(56)
+              .padding({top: 29, bottom: 18})
               .justifyContent(FlexAlign.SpaceBetween)
               .onClick(() => {
                 item.click?.()
               })
-            }
+
+            Divider().height(1).width("100%").backgroundColor('#1A1C1C1C')
           })
-        }
-        .divider({ strokeWidth: 1, color: '#1A1C1C1C', })
-        .width('100%')
-        .height('100%')
       }
-      .backgroundColor(Color.White)
       .width('100%')
-      .height(550)
+      .padding({bottom: 32})
+      .backgroundColor(Color.White)
       .borderRadius({ topRight: 32 })
       .alignRules({
         bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
         left: { anchor: "__container__", align: HorizontalAlign.Start },
       })
       .id("bottomColumn")
-      .padding({ top: 142, left: 24, right: 24 })
-
     }
     .height('100%')
-    .backgroundImage($r('app.media.mine_bgc'))
-    .backgroundImageSize({ width: '100%', height: 305 })
     .backgroundImagePosition(Alignment.Top)
+    .backgroundImage($r('app.media.mine_bgc'))
+    .padding({left: 22, right: 22, top: this.safeTop})
+    .backgroundImageSize({ width: '100%', height: 298 })
   }
 
   async shareData() {
@@ -183,4 +192,67 @@ export struct Mine {
       IBestToast.show({ message: '当前设备不支持', duration: 500 })
     }
   }
+}
+
+// 我的借阅
+@ComponentV2
+struct MineBorrow {
+  @Param @Require userInfo: UserInfo
+
+  forEach: Array<BasicType> = [
+    { text: '全部', src: $r('app.media.icon_mine_all'), click: ()=> {  } },
+    { text: '待支付', src: $r('app.media.icon_mine_pay'), click: ()=> {  } },
+    { text: '待收书', src: $r('app.media.icon_mine_receive'), click: ()=> {  } },
+    { text: '待还书', src: $r('app.media.icon_mine_receive'), click: ()=> {  } },
+    { text: '已完成', src: $r('app.media.icon_mine_complete'), click: ()=> {  } },
+  ]
+
+  build() {
+    Column({space: 14}){
+      Column(){
+        Text('我的借阅')
+          .zIndex(99)
+          .fontSize(16)
+          .fontWeight(600)
+          .textAlign(TextAlign.Center)
+
+        Image($r('[basic].media.icon_SelectBg'))
+          .width(45)
+          .height(16)
+          .margin({top:-10})
+      }
+      .alignItems(HorizontalAlign.Center)
+
+      Row(){
+        ForEach(this.forEach, (item: BasicType, index) => {
+          Badge({
+            count: 0,
+            position: BadgePosition.RightTop,
+            style: { badgeSize: 16, badgeColor: '#FA2A2D' }
+          }){
+            Column({space: 5}){
+              Image(item.src)
+                .width(24)
+                .aspectRatio(1)
+
+              Text(item.text)
+                .width(42)
+                .fontSize(14)
+                .fontWeight(500)
+                .fontColor('#FF000000')
+                .textAlign(TextAlign.Center)
+            }.onClick(item.click)
+          }
+        })
+      }
+      .width("100%")
+      .justifyContent(FlexAlign.SpaceBetween)
+    }
+    .width('100%')
+    .borderRadius(8)
+    .backgroundColor(Color.White)
+    .alignItems(HorizontalAlign.Start)
+    .shadow({radius: 4, color: '#40000000'})
+    .padding({left: 15, right: 15, top: 12, bottom: 12})
+  }
 }