消息、个人中心

wwf

5 天以前 8e1b89c65db438797d2d89c508f3e9883bbd7c20

 entry/src/main/ets/pages/account/AccountPage.ets

@@ -1,22 +1,212 @@
class accountListItem {
  title: string = ''
  icon: string | Resource = ''
}

@Entry
@Component
export struct AccountPage {
  @State message: string = 'Hello World';

  @State ListItems: accountListItem[] = [
    { title: '隐私设置', icon: $r('app.media.account_setting') },
    { title: '消息通知', icon: $r('app.media.account_message') },
    { title: '帮助中心', icon: $r('app.media.account_help') },
    { title: '关于我们', icon: $r('app.media.account_info') },
  ]
  build() {
    RelativeContainer() {
      Text(this.message)
        .id('AccountPageHelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
    Column() {
      Text('个人中心')
        .fontSize(20)
        .fontWeight(700)
        .textAlign(TextAlign.Center)
        .width('100%')
        .backgroundColor(Color.White)
        .padding({ top: 10,  bottom: 10 })

      Column({ space: 10 }) {
        Row() {
          Image($r('app.media.me_icon'))
            .width(50)
            .height(50)
          Column() {
            Text('李强')
              .fontSize(16)
              .width('100%')
              .fontWeight(600)
              .fontColor(Color.Black)
              .textAlign(TextAlign.Start)
            Text('男 | 28岁 | 前端开发工程师')
              .fontColor('#333333')
              .fontSize(14)
              .width('100%')
              .textAlign(TextAlign.Start)
          }
          .width(100)
          .height(40)
          .margin({ left: 10 })
          .justifyContent(FlexAlign.SpaceBetween)
          .layoutWeight(1)
          Image($r('app.media.chevron_right'))
            .width(18)
            .height(18)
        }
        .width('100%')

        Column({ space: 16 }) {
          Row() {
            Text('学习记录')
              .fontSize(16)
              .fontColor(Color.White)
              .fontWeight(700)
            Text('去应聘 > ')
              .fontSize(13)
              .borderRadius(20)
              .fontWeight(500)
              .backgroundColor(Color.White)
              .padding({ left: 10, right: 10, top: 4, bottom: 4 })
              .fontColor('#1756f4')
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)

          Text('当前学习级别：青铜')
            .width('100%')
            .fontColor(Color.White)
            .fontSize(14)
          Row() {
            Column({ space: 4 }) {
              Text('学习时长')
                .fontColor(Color.White)
                .fontSize(12)
                .width('100%')
              Text() {
                Span('10').fontWeight(700).fontSize(14)
                Span('分钟').fontSize(12)
              }
              .width('100%')
              .fontColor(Color.White)
            }
            .width(80)
            Column({ space: 4 }) {
              Text('学习最长的课程')
                .fontColor(Color.White)
                .fontSize(12)
                .width('100%')
              Text('全栈开发：前后端打通实战')
                .fontWeight(700)
                .fontSize(14)
                .width('100%')
                .fontColor(Color.White)
            }
          }
          .width('100%')
        }
        .width('100%')
        .padding(16)
        .borderRadius(14)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [['#36BCFF', 0.0], ['#2D74FF', 1.0]]
        })
    }
      .backgroundColor(Color.White)
      .padding(16)
      .margin({ top: 1 })

      Row() {
        Column({ space: 6 }) {
          Image($r('app.media.account_learning'))
            .width(40)
            .height(40)
          Text('学习记录')
            .fontSize(14)
            .fontWeight(500)
            .fontColor(Color.Black)
        }
        Column({ space: 6 }) {
          Image($r('app.media.account_course'))
            .width(40)
            .height(40)
          Text('课程收藏')
            .fontSize(14)
            .fontWeight(500)
            .fontColor(Color.Black)
        }
        Column({ space: 6 }) {
          Image($r('app.media.account_jianli'))
            .width(40)
            .height(40)
          Text('个人简历')
            .fontSize(14)
            .fontWeight(500)
            .fontColor(Color.Black)
        }
        Column({ space: 6 }) {
          Image($r('app.media.account_communicated'))
            .width(40)
            .height(40)
          Text('已沟通')
            .fontSize(14)
            .fontWeight(500)
            .fontColor(Color.Black)
        }
      }
      .width('100%')
      .backgroundColor(Color.White)
      .padding({ bottom: 10 })
      .justifyContent(FlexAlign.SpaceEvenly)

      Column() {
        List({ space: 10, initialIndex: 0 }){
          ForEach(this.ListItems, (item: accountListItem) => {
            ListItem() {
              Row() {
                Image(item.icon)
                  .width(20)
                  .height(20)
                Text(item.title)
                  .fontSize(13)
                  .fontWeight(500)
                  .fontColor(Color.Black)
                  .layoutWeight(1)
                  .margin({ left: 8 })

                Image($r('app.media.chevron_right'))
                  .width(12)
                  .height(12)
              }
              .width('100%')
              .padding(8)
            }
          })
        }
        .listDirection(Axis.Vertical) // 排列方向
        .scrollBar(BarState.Off)
        .friction(0.6)
        .edgeEffect(EdgeEffect.Spring)
        .width('100%')
        .divider({strokeWidth: 1,color: '#f0f0f0'})
      }
      .padding(16)
      .backgroundColor(Color.White)
      .margin({ top: 1 })

      Column() {
        Button('退出应用')
          .fontSize(14)
          .height(36)
          .type(ButtonType.Normal)
          .borderRadius(6)
          .width('100%')
          .fontColor(Color.White)
          .backgroundColor('#1761f4')
      }
      .padding(16)
      .width('100%')
      .background(Color.White)
      .height(300)

    }
    .backgroundColor('#f5f5f7')
    .height('100%')
    .width('100%')
  }