desc:个人中心 UI 界面绘制

 import router from '@ohos.router';
 import router from '@ohos.router';
 import common from '@ohos.app.ability.common';
 import common from '@ohos.app.ability.common';
+import MineFunctionModel from '../../viewmodel/MineFunctionModel';
 const TAG = 'PageComponent';
 const TAG = 'PageComponent';
 
 
 /**
 /**
@@ -10,13 +11,31 @@ export struct MinePageComponent {
   //是否是创作者
   //是否是创作者
   @State isActive:boolean = false
   @State isActive:boolean = false
   @State isLogin:boolean = true
   @State isLogin:boolean = true
+  @State icons:MineFunctionModel[] = []
+  scroller: Scroller = new Scroller()
 
 
   private context = getContext(this) as common.UIAbilityContext
   private context = getContext(this) as common.UIAbilityContext
 
 
   aboutToAppear(){
   aboutToAppear(){
     // TODO 获取用户信息
     // TODO 获取用户信息
+    //初始化 icon
+    this.initIconDatas()
   }
   }
 
 
+  /**
+   * 初始化 icon
+   */
+  initIconDatas(){
+    this.icons.push(new MineFunctionModel("评论",$r('app.media.mine_comment_icon')))
+    this.icons.push(new MineFunctionModel("关注",$r('app.media.mine_order_icon')))
+    this.icons.push(new MineFunctionModel("收藏",$r('app.media.mine_collect_icon')))
+    this.icons.push(new MineFunctionModel("历史",$r('app.media.mine_history_icon')))
+    this.icons.push(new MineFunctionModel("消息",$r('app.media.mine_msg_icon')))
+    this.icons.push(new MineFunctionModel("留言板",$r('app.media.mine_msgboard_icon')))
+    this.icons.push(new MineFunctionModel("预约",$r('app.media.mine_order_icon')))
+  }
+
+
   build() {
   build() {
     Column(){
     Column(){
       Stack({alignContent:Alignment.Top}){
       Stack({alignContent:Alignment.Top}){
@@ -108,22 +127,88 @@ export struct MinePageComponent {
 
 
   @Builder GridUI(){
   @Builder GridUI(){
     Column(){
     Column(){
+      Grid(){
+        ForEach(this.icons,(item:MineFunctionModel,index:number)=>{
+          GridItem(){
+            Row(){
+              Column(){
+                Image(item.imgSrc)
+                  .width(30)
+                  .height(30)
 
 
+                Text(`${item.msg}`)
+                  .margin({top:2})
+                  .fontColor($r('app.color.white'))
+              }
+              .alignItems(HorizontalAlign.Center)
+              .width('100%')
+              Blank()
+                .layoutWeight(1)
+              if(index % 4 < 3 && index != this.icons.length){
+                Text().backgroundColor($r('app.color.white'))
+                  .width(2)
+                  .height(15)
+              }
+            }
+          }.onClick(()=>{
+            console.log(index+"")
+          })
+        }, item => item)
+      }
+      .rowsTemplate('1fr 1fr')
+      .columnsTemplate('1fr 1fr 1fr 1fr')
+      // .columnsGap(10)
+      .height(140)
+      .margin({top:15 })
     }
     }
   }
   }
 
 
   @Builder CardUI(){
   @Builder CardUI(){
     Row(){
     Row(){
-
-    }
+      Stack(){
+        Image($r('app.media.mine_card_01'))
+          .width(170)
+          .objectFit(ImageFit.Auto)
+        Column(){
+          Text("积分商城")
+            .fontColor($r('app.color.color_FF2E0C'))
+            .width(120)
+          Text("华为MATE40手机")
+            .width(120)
+            .fontColor($r('app.color.color_FF2E0C'))
+            .fontSize(14)
+            .margin({top:3})
+        }.padding({left:20})
+      }.alignContent(Alignment.Start)
+      Stack(){
+        Image($r('app.media.mine_card_02'))
+          .width(170)
+          .objectFit(ImageFit.Auto)
+        Column(){
+          Text("数字藏品").fontColor($r('app.color.color_AD6000'))
+            .width(120)
+          Text("黑胶唱片NFT").width(120)
+            .fontColor($r('app.color.color_AD6000'))
+            .fontSize(14)
+            .margin({top:3})
+        }.padding({left:30})
+      }.alignContent(Alignment.Start)
+    }.width('100%')
+    .height(70)
   }
   }
 
 
   @Builder ScrollUI(){
   @Builder ScrollUI(){
+    Scroll(this.scroller){
       Column(){
       Column(){
-      Scroll(){
 
 
-      }
-    }
+      }.height(600)
+      .setFullWidth()
+      .backgroundColor($r('app.color.white'))
+    }.setFullWidth()
+    .layoutWeight(1)
+    .scrollable(ScrollDirection.Vertical)
+    .scrollBar(BarState.Off)
+    .edgeEffect(EdgeEffect.None)
   }
   }
 
 
   @Styles setFullWidthAndHeight(){
   @Styles setFullWidthAndHeight(){

+
+
+export default class MineFunctionModel {
+   imgSrc:Resource
+   msg:string
+
+   constructor(msg:string,imgSrc:Resource){
+      this.msg = msg
+      this.imgSrc = imgSrc
+   }
+
+}

@@ -55,6 +55,14 @@
     {
     {
       "name": "color_FFC460",
       "name": "color_FFC460",
       "value": "#FFC460"
       "value": "#FFC460"
+    },
+    {
+      "name": "color_FF2E0C",
+      "value": "#FF2E0C"
+    },
+    {
+      "name": "color_AD6000",
+      "value": "#AD6000"
     }
     }
   ]
   ]
 }
 }