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.

1. 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.order'), true),
new SectionLine("Address Book", "Set frequently used addresses", $r('app.media.address'), false)
];
return listData;
}

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

export default new SectionLineViewModel();

1. 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.back_right_recycle'))
.width(7)
.height(13)
.objectFit(ImageFit.Contain)
.interpolation(ImageInterpolation.High);
}
.padding({ left: 13, right: 13 })
.alignItems(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 }) {
Row()
.width('100%')
.height('100%')
.linearGradient({
angle: 180,
colors: [[0xff0000, 0], [0xff6666, 0.2], [0xffffff, 1]]
});
Column() {
Row() {
Image($r('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.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.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.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.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.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)
        .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);
  }
  .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.