desc:个人中心 UI 界面绘制

 import router from '@ohos.router';
 import router from '@ohos.router';
-import common from '@ohos.app.ability.common';
-import MineFunctionModel from '../../viewmodel/MineFunctionModel';
+
+import MinePagePersonalFunctionsItem from '../../viewmodel/MinePagePersonalFunctionsItem'
+import MinePageCreatorFunctionsItem from '../../viewmodel/MinePageCreatorFunctionsItem'
+import MinePageMoreFunctionModel from '../../viewmodel/MinePageMoreFunctionModel'
+import MinePageDatasModel from '../../model/MinePageDatasModel'
+
 const TAG = 'PageComponent';
 const TAG = 'PageComponent';
 
 
+
+
 /**
 /**
  * 我的页面
  * 我的页面
  */
  */
 @Component
 @Component
 export struct MinePageComponent {
 export struct MinePageComponent {
   //是否是创作者
   //是否是创作者
-  @State isActive:boolean = false
+  @State isCreator:boolean = false
   @State isLogin:boolean = true
   @State isLogin:boolean = true
-  @State icons:MineFunctionModel[] = []
+  @State personalData:MinePagePersonalFunctionsItem[] = []
+  @State creatorData:MinePageCreatorFunctionsItem[] = []
+  @State moreData:MinePageMoreFunctionModel[] = []
   scroller: Scroller = new Scroller()
   scroller: Scroller = new Scroller()
 
 
-  private context = getContext(this) as common.UIAbilityContext
-
   aboutToAppear(){
   aboutToAppear(){
-    // TODO 获取用户信息
-    //初始化 icon
-    this.initIconDatas()
+    this.getFunctionData()
   }
   }
 
 
-  /**
-   * 初始化 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')))
+  getFunctionData(){
+    //个人功能数据
+    this.personalData = MinePageDatasModel.getPersonalFunctionsData()
+    //创作者功能数据
+    this.creatorData = MinePageDatasModel.getCreatorFunctionsData()
+    //更多功能数据
+    this.moreData = MinePageDatasModel.getMoreFunctionsData()
   }
   }
 
 
-
   build() {
   build() {
-    Column(){
+    Scroll(this.scroller){
+      Flex({direction:FlexDirection.Column}){
         Stack({alignContent:Alignment.Top}){
         Stack({alignContent:Alignment.Top}){
           Image($r('app.media.mine_head_bg'))
           Image($r('app.media.mine_head_bg'))
             .setFullWidth()
             .setFullWidth()
-          .height('50%')
+            .height('657lpx')
             .objectFit(ImageFit.Auto)
             .objectFit(ImageFit.Auto)
-        this.TopUI()
-      }.setFullWidthAndHeight()
-      .backgroundColor($r('app.color.color_F5F5F5'))
-    }.setFullWidthAndHeight()
-
+          this.MinePageUI()
+        }
+      }.width('100%')
+    }
+    .backgroundColor($r('app.color.color_F9F9F9'))
+    .scrollable(ScrollDirection.Vertical)
+    .scrollBar(BarState.Off)
   }
   }
 
 
 
 
-  @Builder TopUI(){
+  @Builder MinePageUI(){
     Column(){
     Column(){
       //头像层
       //头像层
       this.HeaderUI()
       this.HeaderUI()
@@ -59,11 +61,11 @@ export struct MinePageComponent {
       this.GridUI()
       this.GridUI()
       //Card
       //Card
       this.CardUI()
       this.CardUI()
+      //创作者区域
+      this.ActiveUI()
       //滑动区域
       //滑动区域
-      this.ScrollUI()
-    }
-    .padding({left:11,right:11})
-    .setFullWidthAndHeight()
+      this.MoreFunctionUI()
+    }.setFullWidth()
   }
   }
 
 
   @Builder HeaderUI(){
   @Builder HeaderUI(){
@@ -71,144 +73,288 @@ export struct MinePageComponent {
       //头像
       //头像
       Stack(){
       Stack(){
         Button({type:ButtonType.Circle})
         Button({type:ButtonType.Circle})
-          .backgroundColor($r('app.color.white'))
-          .width(74)
-          .height(74)
-
+          .backgroundColor($r('app.color.main_red'))
+          .width('110lpx')
+          .height('110lpx')
         Image($r('app.media.mine_head_icon'))
         Image($r('app.media.mine_head_icon'))
-          .width(70)
-          .height(70)
+          .width('108lpx')
+          .height('108lpx')
           .objectFit(ImageFit.Cover)
           .objectFit(ImageFit.Cover)
           .borderRadius(50)
           .borderRadius(50)
-      }.width(74)
-      .height(74)
+      }.width('110lpx')
+      .height('110lpx')
+      .alignContent(Alignment.Center)
 
 
       //昵称信息
       //昵称信息
       Column(){
       Column(){
         Row(){
         Row(){
-          Text("人民日报网友ABCDEF")
-            .fontColor($r('app.color.white'))
-
+          Text("人民日报网友6G5E3T")
+            .fontColor($r('app.color.color_222222'))
+            .maxLines(1)
+            .textOverflow({ overflow: TextOverflow.Ellipsis })
+            .fontSize('33lpx')
+            .width('326lpx')
           Image($r('app.media.mine_user_edit'))
           Image($r('app.media.mine_user_edit'))
-            .width(20)
-            .height(20)
-        }
+            .width('11lpx')
+            .height('20lpx')
+            .margin({left:'15lpx'})
+            .objectFit(ImageFit.Cover)
+        }.width('100%')
+
+        Stack(){
+          Image($r('app.media.mine_grade_bg'))
+            .width('84lpx')
+            .height('29lpx')
+            .objectFit(ImageFit.Auto)
           Text("等级8")
           Text("等级8")
             .textAlign(TextAlign.Center)
             .textAlign(TextAlign.Center)
-          .backgroundImage($r('app.media.mine_grade_bg'))
-          .backgroundImageSize({width:55})
             .fontColor($r('app.color.white'))
             .fontColor($r('app.color.white'))
-          .fontSize(12)
-          .width(40)
-          .margin({top:20})
+            .fontSize('19lpx')
+            .width('50lpx')
+            .height('29lpx')
+        }.margin({top:'15lpx'})
       }.alignItems(HorizontalAlign.Start)
       }.alignItems(HorizontalAlign.Start)
-      .width(200)
-      .margin({left:10})
+      .margin({top:'11lpx',left:'17lpx'})
+      .width('352lpx')
 
 
       Blank()
       Blank()
 
 
       Stack({alignContent:Alignment.Start}){
       Stack({alignContent:Alignment.Start}){
         Text("签到")
         Text("签到")
-          .textAlign(TextAlign.Center)
-          .borderRadius({ topLeft:10,bottomLeft:10})
-          .width(50)
-          .fontColor($r('app.color.white'))
+          .textAlign(TextAlign.Start)
+          .width('108lpx')
+          .height('46lpx')
+          .fontColor($r('app.color.color_AD6000'))
           .backgroundColor($r('app.color.color_FFC460'))
           .backgroundColor($r('app.color.color_FFC460'))
-          .margin({left:20})
+          .fontWeight(500)
+          .position({x:'23lpx'})
+          .padding({left:'35lpx'})
         Image($r("app.media.mine_sign_icon"))
         Image($r("app.media.mine_sign_icon"))
-          .width(30)
-          .height(30)
-      }.width(60)
-
-    }
+          .width('50lpx')
+          .height('50lpx')
+      }.width('131lpx')
+    }.setBackGroundWhite()
     .setFullWidth()
     .setFullWidth()
-    .margin({top:30})
+    .padding({top:'31lpx',left:'46lpx'})
   }
   }
 
 
   @Builder GridUI(){
   @Builder GridUI(){
-    Column(){
     Grid(){
     Grid(){
-        ForEach(this.icons,(item:MineFunctionModel,index:number)=>{
+      ForEach(this.personalData,(item:MinePagePersonalFunctionsItem,index:number)=>{
         GridItem(){
         GridItem(){
           Row(){
           Row(){
             Column(){
             Column(){
               Image(item.imgSrc)
               Image(item.imgSrc)
-                  .width(30)
-                  .height(30)
-
+                .width('46lpx')
+                .height('46lpx')
               Text(`${item.msg}`)
               Text(`${item.msg}`)
-                  .margin({top:2})
-                  .fontColor($r('app.color.white'))
+                .margin({top:'8lpx'})
+                .width('50lpx')
+                .height('23lpx')
+                .fontColor($r('app.color.color_222222'))
+                .fontSize('23lpx')
             }
             }
             .alignItems(HorizontalAlign.Center)
             .alignItems(HorizontalAlign.Center)
             .width('100%')
             .width('100%')
             Blank()
             Blank()
               .layoutWeight(1)
               .layoutWeight(1)
-              if(index % 4 < 3 && index != this.icons.length){
-                Text().backgroundColor($r('app.color.white'))
-                  .width(2)
-                  .height(15)
+            if(index % 4 < 3 && index != this.personalData.length){
+              Text().backgroundColor($r('app.color.color_222222'))
+                .opacity(0.1)
+                .width('2lpx')
+                .height('29lpx')
             }
             }
           }
           }
         }.onClick(()=>{
         }.onClick(()=>{
           console.log(index+"")
           console.log(index+"")
-          })
+        }).width('169lpx')
+        .height('117lpx')
       }, item => item)
       }, item => item)
     }
     }
     .rowsTemplate('1fr 1fr')
     .rowsTemplate('1fr 1fr')
     .columnsTemplate('1fr 1fr 1fr 1fr')
     .columnsTemplate('1fr 1fr 1fr 1fr')
-      // .columnsGap(10)
-      .height(140)
-      .margin({top:15 })
+    .height('338lpx')
+    .margin({top:'31lpx',left:'23lpx',right:'23lpx' })
   }
   }
+
+  @Builder ActiveUI(){
+    Column(){
+      Row(){
+        Text("创作者中心")
+          .fontSize('29lpx')
+          .width('148lpx')
+          .height('46lpx')
+          .fontColor($r('app.color.color_222222'))
+
+        Blank()
+
+        Row(){
+          Text("内容管理")
+            .fontSize('27lpx')
+            .width('113lpx')
+            .height('35lpx')
+            .fontColor($r('app.color.color_222222'))
+
+          Image($r('app.media.mine_right_arrow'))
+            .width('27lpx')
+            .height('27lpx')
+            .objectFit(ImageFit.Auto)
         }
         }
 
 
-  @Builder CardUI(){
+      }.setFullWidth()
+      .height('92lpx')
+      .padding({left:'29lpx',top:'23lpx',right:'31lpx'})
+
       Row(){
       Row(){
+        Grid(){
+          ForEach(this.creatorData,(item:MinePageCreatorFunctionsItem,index:number)=>{
+            GridItem(){
+              Row(){
+                Column(){
+                  Image(item.imgSrc)
+                    .width('50lpx')
+                    .height('50lpx')
+                  Text(`${item.msg}`)
+                    .margin({top:'15lpx'})
+                    .width('96lpx')
+                    .height('23lpx')
+                    .fontColor($r('app.color.color_666666'))
+                    .fontSize('23lpx')
+                }
+                .alignItems(HorizontalAlign.Center)
+                .width('100%')
+                Blank()
+                  .layoutWeight(1)
+                if(index % 4 < 3 && index != this.creatorData.length){
+                  Text().backgroundColor($r('app.color.color_222222'))
+                    .opacity(0.1)
+                    .width('2lpx')
+                    .height('29lpx')
+                }
+              }
+            }.onClick(()=>{
+              console.log(index+"")
+            }).width('169lpx')
+            .height('117lpx')
+          }, item => item)
+        }
+        .rowsTemplate('1fr')
+        .columnsTemplate('1fr 1fr 1fr 1fr')
+        .height('88lpx')
+      }.setFullWidth()
+      .height('127lpx')
+    }
+    .height('219lpx')
+    .borderRadius(8)
+    .margin({top:'19lpx',left:'23lpx',right:'23lpx',bottom:'19lpx'})
+    .setBackGroundWhite()
+  }
+
+  @Builder CardUI(){
+    Flex(){
       Stack(){
       Stack(){
         Image($r('app.media.mine_card_01'))
         Image($r('app.media.mine_card_01'))
-          .width(170)
+          .setFullWidthAndHeight()
           .objectFit(ImageFit.Auto)
           .objectFit(ImageFit.Auto)
         Column(){
         Column(){
           Text("积分商城")
           Text("积分商城")
-            .fontColor($r('app.color.color_FF2E0C'))
-            .width(120)
+            .fontColor($r('app.color.color_994D00'))
+            .width('119lpx')
+            .height('35lpx')
+            .textAlign(TextAlign.Start)
+            .fontSize('29lpx')
           Text("华为MATE40手机")
           Text("华为MATE40手机")
-            .width(120)
+            .width('159lpx')
+            .height('23lpx')
             .fontColor($r('app.color.color_FF2E0C'))
             .fontColor($r('app.color.color_FF2E0C'))
-            .fontSize(14)
-            .margin({top:3})
-        }.padding({left:20})
+            .fontSize('19lpx')
+            .textAlign(TextAlign.Start)
+            .margin({top:'10lpx'})
+        }.padding({left:'29lpx'})
+        .alignItems(HorizontalAlign.Start)
       }.alignContent(Alignment.Start)
       }.alignContent(Alignment.Start)
+      .width('345lpx')
+      .height('115lpx')
+
       Stack(){
       Stack(){
         Image($r('app.media.mine_card_02'))
         Image($r('app.media.mine_card_02'))
-          .width(170)
+          .setFullWidthAndHeight()
           .objectFit(ImageFit.Auto)
           .objectFit(ImageFit.Auto)
         Column(){
         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})
+          Text("数字藏品")
+            .fontColor($r('app.color.color_B15900'))
+            .width('119lpx')
+            .height('35lpx')
+            .textAlign(TextAlign.Start)
+            .fontSize('29lpx')
+          Text("黑胶唱片NFT")
+            .width('159lpx')
+            .height('23lpx')
+            .fontColor($r('app.color.color_B15900'))
+            .fontSize('19lpx')
+            .textAlign(TextAlign.Start)
+            .margin({top:'10lpx'})
+        }.padding({left:'67lpx'})
+        .alignItems(HorizontalAlign.Start)
       }.alignContent(Alignment.Start)
       }.alignContent(Alignment.Start)
-    }.width('100%')
-    .height(70)
+      .width('348lpx')
+      .height('115lpx')
+    }.setFullWidth()
+    .height('115lpx')
+    .setPadding()
   }
   }
 
 
-  @Builder ScrollUI(){
-    Scroll(this.scroller){
+  @Builder MoreFunctionUI(){
+    Column(){
+      List(){
+        ForEach(this.moreData,(item:MinePageMoreFunctionModel,index:number)=>{
+          ListItem(){
             Column(){
             Column(){
+              Row(){
+                if(item.imgSrc){
+                  Image(item.imgSrc)
+                    .width('38lpx')
+                    .height('38lpx')
+                    .margin({right:'15lpx'})
+                }
+                Text(`${item.msg}`)
+                  .margin({top:'8lpx'})
+                  .width('456lpx')
+                  .height('38lpx')
+                  .fontColor($r('app.color.color_666666'))
+                  .fontSize('29lpx')
 
 
-      }.height(600)
-      .setFullWidth()
+                Blank()
+
+                Image($r('app.media.mine_user_arrow'))
+                  .width('27lpx')
+                  .height('27lpx')
+                  .objectFit(ImageFit.Auto)
+                  .margin({left:'81lpx',right:'29lpx'})
+              }.alignItems(VerticalAlign.Center)
+              .justifyContent(FlexAlign.Start)
+
+              if(index != this.moreData.length -1 ){
+                Text().backgroundColor($r('app.color.color_F5F5F5'))
+                  .opacity(0.1)
+                  .width('612lpx')
+                  .height('2lpx')
+              }
+            }.height(index === 0 ? '92lpx':'108lpx')
+          }.padding({left:'27lpx'})
+          .onClick(()=>{
+            console.log(index+"")
+          })
+          .height('117lpx')
+        }, item => item)
+      }.onScrollFrameBegin((offset, state) => {
+        return { offsetRemain: 0 }
+      })
+    }
+    .setBackGroundWhite()
     .backgroundColor($r('app.color.white'))
     .backgroundColor($r('app.color.white'))
-    }.setFullWidth()
-    .layoutWeight(1)
-    .scrollable(ScrollDirection.Vertical)
-    .scrollBar(BarState.Off)
-    .edgeEffect(EdgeEffect.None)
+    .setMargining()
+    .borderRadius(8)
   }
   }
 
 
   @Styles setFullWidthAndHeight(){
   @Styles setFullWidthAndHeight(){
@@ -221,13 +367,25 @@ export struct MinePageComponent {
   }
   }
 
 
   @Styles setFullHeight(){
   @Styles setFullHeight(){
-    .width('100%')
+    .height('100%')
+  }
+
+  @Styles setPadding(){
+    .padding({left:'23lpx',right:'23lpx'})
+  }
+  @Styles setMargining(){
+    .margin({left:'23lpx',right:'23lpx'})
+  }
+
+  @Styles setBackGroundWhite(){
+    .backgroundColor($r('app.color.white'))
   }
   }
 
 
   change(){
   change(){
     router.pushUrl({
     router.pushUrl({
       url: 'pages/IndexPage',
       url: 'pages/IndexPage',
       params: {
       params: {
+
       }
       }
     }).catch((error: Error) => {
     }).catch((error: Error) => {
     });
     });

+
+import MinePagePersonalFunctionsItem from '../viewmodel/MinePagePersonalFunctionsItem'
+import MinePageCreatorFunctionsItem from '../viewmodel/MinePageCreatorFunctionsItem'
+import MinePageMoreFunctionModel from '../viewmodel/MinePageMoreFunctionModel';
+
+/**
+ * 我的页面 所有数据 获取封装类
+ */
+class MinePageDatasModel{
+  private static instance: MinePageDatasModel;
+  personalData:MinePagePersonalFunctionsItem[] = []
+  creatorData:MinePageCreatorFunctionsItem[] = []
+  moreData:MinePageMoreFunctionModel[] = []
+
+
+  private constructor() { }
+
+  /**
+   * 单例模式
+   * @returns
+   */
+  public static getInstance(): MinePageDatasModel {
+    if (!MinePageDatasModel.instance) {
+      MinePageDatasModel.instance = new MinePageDatasModel();
+    }
+    return MinePageDatasModel.instance;
+  }
+
+
+
+
+  /**
+   * 评论 关注 收藏 等7个数据
+   * 包含名字和图标
+   */
+  getPersonalFunctionsData():MinePagePersonalFunctionsItem[]{
+    if(this.personalData.length === 7){
+      return this.personalData
+    }
+    this.personalData.push(new MinePagePersonalFunctionsItem("评论",$r('app.media.mine_comment_icon')))
+    this.personalData.push(new MinePagePersonalFunctionsItem("关注",$r('app.media.mine_order_icon')))
+    this.personalData.push(new MinePagePersonalFunctionsItem("收藏",$r('app.media.mine_collect_icon')))
+    this.personalData.push(new MinePagePersonalFunctionsItem("历史",$r('app.media.mine_history_icon')))
+    this.personalData.push(new MinePagePersonalFunctionsItem("消息",$r('app.media.mine_msg_icon')))
+    this.personalData.push(new MinePagePersonalFunctionsItem("留言板",$r('app.media.mine_msgboard_icon')))
+    this.personalData.push(new MinePagePersonalFunctionsItem("预约",$r('app.media.mine_order_icon')))
+    return this.personalData
+  }
+
+
+  /**
+   * 发布文章 发布视频 等4个数据
+   * 包含名字和图标
+   */
+  getCreatorFunctionsData():MinePageCreatorFunctionsItem[]{
+    if(this.creatorData.length === 4){
+      return this.creatorData
+    }
+    this.creatorData.push(new MinePageCreatorFunctionsItem("发布文章",$r('app.media.mine_active_create_article')))
+    this.creatorData.push(new MinePageCreatorFunctionsItem("发布视频",$r('app.media.mine_active_create_video')))
+    this.creatorData.push(new MinePageCreatorFunctionsItem("发布动态",$r('app.media.mine_active_create_video')))
+    this.creatorData.push(new MinePageCreatorFunctionsItem("发布图集",$r('app.media.mine_active_create_pics')))
+    return this.creatorData
+  }
+
+  /**
+   * 更多功能 扫一扫 我的奖品 等6个数据
+   * 包含名字和图标
+   */
+  getMoreFunctionsData():MinePageCreatorFunctionsItem[]{
+    if(this.moreData.length === 6){
+      return this.moreData
+    }
+    this.moreData.push(new MinePageMoreFunctionModel("更多功能",null))
+    this.moreData.push(new MinePageMoreFunctionModel("扫一扫",$r('app.media.mine_scan')))
+    this.moreData.push(new MinePageMoreFunctionModel("我的奖品",$r('app.media.mine_mygift')))
+    this.moreData.push(new MinePageMoreFunctionModel("意见反馈",$r('app.media.mine_suggest')))
+    this.moreData.push(new MinePageMoreFunctionModel("设置",$r('app.media.mine_setting')))
+    this.moreData.push(new MinePageMoreFunctionModel("关于",$r('app.media.mine_about')))
+    return this.moreData
+  }
+
+
+}
+
+const minePageDatasModel = MinePageDatasModel.getInstance()
+export default minePageDatasModel as MinePageDatasModel

 
 
 
 
-export default class MineFunctionModel {
+export default class FunctionsItem {
   imgSrc:Resource
   imgSrc:Resource
   msg:string
   msg:string
 
 

+
+import FunctionsItem from './FunctionsItem';
+
+export default class MinePageCreatorFunctionsItem extends  FunctionsItem{
+}

+
+import FunctionsItem from './FunctionsItem'
+
+export default class MinePageMoreFunctionModel extends  FunctionsItem{
+}

+
+import FunctionsItem from './FunctionsItem'
+
+export default class MinePagePersonalFunctionsItem extends  FunctionsItem {
+}

@@ -63,6 +63,22 @@
     {
     {
       "name": "color_AD6000",
       "name": "color_AD6000",
       "value": "#AD6000"
       "value": "#AD6000"
+    },
+    {
+      "name": "color_F9F9F9",
+      "value": "#F9F9F9"
+    },
+    {
+      "name": "color_994D00",
+      "value": "#994D00"
+    },
+    {
+      "name":"color_B15900",
+      "value": "#B15900"
+    },
+    {
+      "name": "main_red",
+      "value": "#E84026"
     }
     }
   ]
   ]
 }
 }