# Imitation Box Horse - Personal Center Page (19)

Technology Stack  
Appgallery Connect

Development Preparation In the previous section, we implemented all linkage effects for the category page. This section focuses on completing a new page: the fourth module of the main interface, the personal center page. This module will display user information and entry points to various user-related functions.

Functional Analysis To implement the personal center page, we first plan the overall layout from top to bottom, divided into three sections:

User information display Key information display Entry list for various user-related functions

Code Implementation

1. Create Entity Class for List Data typescript export class SectionLine { title: string; subtitle: string; url: string | ResourceStr; showDividerLine: boolean;
    

constructor(title: string, subtitle: string, url: string | ResourceStr, showDividerLine: boolean) { this.title = title; this.subtitle = subtitle; this.url = url; this.showDividerLine = showDividerLine; } }

Note: The url type is defined as a union type for flexibility in future modifications. 2. Add Sample Data for Entry Points typescript import { SectionLine } from "../entity/SectionLine";

export class SectionLineViewModel { getSectionListOne(): Array { const listData: SectionLine\[\] = \[ new SectionLine("Orders", "", $r('[app.media](http://app.media).order'), true), new SectionLine("Address Book", "Set frequently used addresses", $r('[app.media](http://app.media).address'), false) \]; return listData; }

getSectionListTwo(): Array { const listData: SectionLine\[\] = \[ new SectionLine("About", "", $r('[app.media](http://app.media).guanyu'), true) \]; return listData; } }

export default new SectionLineViewModel(); 3. Implement the Personal Center Page Layout typescript import { SectionLine } from '../entity/SectionLine'; import SectionLineViewModel from '../model/SectionLineViewModel';

@Component export struct Mine { @State num: number = 0;

@Builder MenuItem(item: SectionLine) { Column() { Row() { Image(item.url) .width(20) .height(20) .objectFit(ImageFit.Cover) .interpolation(ImageInterpolation.High); Text(item.title) .margin({ left: 10 }) .fontColor("#ff333333") .fontSize(16); Blank().layoutWeight(1); Text(item.subtitle) .fontColor($r('app.color.color\_999')) .fontSize(14) .margin({ right: 6 }); Image($r('[app.media](http://app.media).back\_right\_recycle')) .width(7) .height(13) .objectFit(ImageFit.Contain) .interpolation(ImageInterpolation.High); } .padding({ left: 13, right: 13 }) .alignItems([VerticalAlign.Center](http://VerticalAlign.Center)) .height($r('app.float.size\_49')) .width('100%') .backgroundColor(Color.White); if (item.showDividerLine) { Divider() .width('100%') .height(0.8) .color("#e6e6e6"); } } .width('100%'); }

aboutToAppear() {}

build() { Column() { Stack({ alignContent: [Alignment.Top](http://Alignment.Top) }) { Row() .width('100%') .height('100%') .linearGradient({ angle: 180, colors: \[\[0xff0000, 0\], \[0xff6666, 0.2\], \[0xffffff, 1\]\] }); Column() { Row() { Image($r('[app.media](http://app.media).background')) .height(55) .width(55) .borderRadius(27) .objectFit(ImageFit.Contain) .interpolation(ImageInterpolation.High); Column() { Text('User 111') .fontSize(24) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }); Text('vip6') .fontSize(14); } .alignItems(HorizontalAlign.Start) .margin({ left: 10 }); Blank().layoutWeight(1); Image($r('[app.media](http://app.media).ic\_arrow\_bold')) .height(16) .width(16) .margin(20) .objectFit(ImageFit.Contain) .interpolation(ImageInterpolation.High); } .justifyContent(FlexAlign.Start) .margin({ top: 30 });

Row() { Row() { Image($r('[app.media](http://app.media).balance')) .margin({ left: 8 }) .height(34) .width(34) .objectFit(ImageFit.Contain) .interpolation(ImageInterpolation.High); Column() { Text("￥15") .fontSize(16) .fontColor($r('app.color.color\_333')); Row() { Text("Balance") .fontSize(13) .fontColor($r('app.color.color\_999')); Image($r('[app.media](http://app.media).back\_right\_recycle')) .margin({ left: 6 }) .height(14) .width(14) .objectFit(ImageFit.Contain) .interpolation(ImageInterpolation.High); } } .alignItems(HorizontalAlign.Start) .margin({ left: 13 }) .onClick(() => {}); } .width('40%'); Divider() .vertical(true) .height('100%') .margin({ top: 5, bottom: 5 }) .margin({ left: 20 }); Row() { Image($r('[app.media](http://app.media).points')) .height(34) .width(34) .objectFit(ImageFit.Contain) .interpolation(ImageInterpolation.High); Column() { Text("Points Mall") .fontSize(16) .fontColor($r('app.color.color\_333')); Row() { Text("Points Redemption") .fontSize(13) .fontColor($r('app.color.color\_reds')); Image($r('[app.media](http://app.media).back\_right\_recycle')) .margin({ left: 6 }) .height(14) .width(14) .objectFit(ImageFit.Contain) .interpolation(ImageInterpolation.High); } } .margin({ left: 8 }) .alignItems(HorizontalAlign.Start); } .margin({ left: 8 }) .alignItems([VerticalAlign.Center](http://VerticalAlign.Center)) .width('40%'); } .justifyContent(FlexAlign.Start) .height(80) .width('100%') .padding(8) .margin({ top: 40 }) .backgroundColor(Color.White) .borderRadius(8); } .padding({ left: 12, right: 12 }) .height('100%') .justifyContent([FlexAlign.Center](http://FlexAlign.Center)); } .height(180);

Column() { ForEach(SectionLineViewModel.getSectionListOne(), (item: SectionLine) => { this.MenuItem(item); }) } .borderRadius(10) .margin({ top: 35, left: 12, right: 12 });

Column() { ForEach(SectionLineViewModel.getSectionListTwo(), (item: SectionLine) => { this.MenuItem(item); }) } .width('100%') .borderRadius(10) .margin({ top: 10, left: 12, right: 12 }); } .height('100%') .backgroundColor("#f7f7f7") .justifyContent(FlexAlign.Start) .alignItems(HorizontalAlign.Start); } }

Executing the code completes the static implementation of the personal center page, showcasing user information, key balances, and functional entry points as designed.