优化

wwf

2 天以前 791a96ae03cf92478244127b294c1fe520d31e89

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

@@ -1,22 +1,399 @@
@Entry
import { ComponentContent, promptAction, router } from "@kit.ArkUI"
import { PromptActionClass } from '../../utils/PromptActionClass';
import { http } from "@kit.NetworkKit";
import { HttpResponseResult } from "../../data/HttpResponse";
import { common } from "@kit.AbilityKit";
import { DOMAIN } from "../../utils/config";

export class UserInfo {
  nickName: string = ''
  mobilePhone: string = ''
  age: string = ''
  gender: string = ''
  job: string = ''
  preferJob: string = ''
  introduce: string = ''
}
class accountListItem {
  title: string = ''
  icon: string | Resource = ''
}
class DialogParams {
  text: string = "";

  constructor(text: string) {
    this.text = text;
  }
}
@Builder
function buildText(params: DialogParams) {
  Column({ space: 12 }) {
    Text('已沟通')
      .width('100%')
      .fontSize(18)
      .fontWeight(700)
      .textAlign(TextAlign.Center)
    Text('4')
      .fontSize(26)
      .fontWeight(700)
      .fontColor('#1761f4')
      .width('100%')
      .textAlign(TextAlign.Center)
    Text('累计沟通岗位数')
      .fontSize(14)
      .fontColor('#666666')
    Text('您是职场中的中流砥柱')
      .width('100%')
      .textAlign(TextAlign.Center)
      .padding(16)
      .fontSize(14)
      .fontColor(Color.Black)
      .fontWeight(500)
      .backgroundColor('#f6f7fa')
  }
  .width(300)
  .padding(20)
  .borderRadius(14)
  .backgroundColor(Color.White)
}

@Builder
function buildText1(params: DialogParams) {
  Column({ space: 12 }) {
    Text('帮助中心')
      .width('100%')
      .fontSize(18)
      .fontWeight(700)
      .fontColor(Color.Black)
      .textAlign(TextAlign.Center)
    Text('400-100-1212')
      .fontSize(26)
      .fontWeight(700)
      .fontColor(Color.Black)
      .width('100%')
      .textAlign(TextAlign.Center)
    Button('拨打电话')
      .width('100%')
      .type(ButtonType.Normal)
      .borderRadius(8)
  }
  .width(300)
  .padding(20)
  .borderRadius(14)
  .backgroundColor(Color.White)
}

@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') },
  ]
  @State dialogMessage: string = '注册成功';
  private ctx: UIContext = this.getUIContext();
  private contentNode: ComponentContent<Object> =
    new ComponentContent(this.ctx, wrapBuilder(buildText), new DialogParams((this.dialogMessage)));
  params: DialogParams = new DialogParams('注册成功')
  @State userInfo: UserInfo = {
    nickName: '',
    mobilePhone: '',
    age: '',
    gender: '',
    job: '',
    preferJob: '',
    introduce: '',
  }
  @Link selectIndex: number | undefined;

  aboutToAppear(): void {
    PromptActionClass.setContext(this.ctx);
    PromptActionClass.setContentNode(this.contentNode);
    PromptActionClass.setOptions({ alignment: DialogAlignment.Center, offset: { dx: 0, dy: 0 } });
    this.getUserInfo()
  }

  getUserInfo() {
    let httpRequest = http.createHttp();
    httpRequest.request(
      `${DOMAIN}/quiz-community/public/v1.0/users/userinfo`,
      {
        method: http.RequestMethod.GET,
        header: { 'Content-Type': 'application/json', 'x-jwt-token': `Bearer ${AppStorage.get('x-jwt-token')}` },
      },
      (err, data) => {
        console.log('response', '/users/userinfo')
        console.log(JSON.stringify(data.result))
        if (data.responseCode == 200) {
          const resData = (typeof data.result == 'string' ? JSON.parse(data.result) : data.result) as HttpResponseResult<UserInfo>
          if (resData.code == 200) {
            this.userInfo = resData.data as UserInfo
          } else {
            promptAction.showToast({ message: resData.msg })
          }
        }
      }
    )
  }

  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 }
    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(this.userInfo.nickName || '李强')
              .fontSize(16)
              .width('100%')
              .fontWeight(600)
              .fontColor(Color.Black)
              .textAlign(TextAlign.Start)
            Text(`${this.userInfo.gender || '男'} | ${this.userInfo.age || 28}岁 | ${this.userInfo.job || '前端开发工程师'}`)
              .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(14)
            .height(14)
        }
        .width('100%')
        .onClick(() =>{
          router.pushUrl({
            url: 'pages/account/UserInfoPage'
          })
        })

        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')
              .onClick(() => {
                this.selectIndex = 1
              })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)

          Row() {
            Text('当前学习级别：青铜')
              .fontColor(Color.White)
              .fontSize(14)
            Image($r('app.media.bronze_icon'))
              .width(20)
              .height(20)
              .margin({ left: 6 })
          }
          .width('100%')
          .justifyContent(FlexAlign.Start)

          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)
        }
        .onClick(() => {
          this.message = 'Welcome';
          router.pushUrl({
            url: 'pages/account/LearningRecordPage'
          })
        })

        Column({ space: 6 }) {
          Image($r('app.media.account_course'))
            .width(40)
            .height(40)
          Text('课程收藏')
            .fontSize(14)
            .fontWeight(500)
            .fontColor(Color.Black)
        }
        .onClick(() => {
          router.pushUrl({
            url: 'pages/account/CourseCollection'
          })
        })

        Column({ space: 6 }) {
          Image($r('app.media.account_vitae'))
            .width(40)
            .height(40)
          Text('个人简历')
            .fontSize(14)
            .fontWeight(500)
            .fontColor(Color.Black)
        }
        .onClick(() => {
          router.pushUrl({
            url: 'pages/account/PersonVitae'
          })
        })

        Column({ space: 6 }) {
          Image($r('app.media.account_communicated'))
            .width(40)
            .height(40)
          Text('已沟通')
            .fontSize(14)
            .fontWeight(500)
            .fontColor(Color.Black)
        }
        .onClick(() => {
          console.log('点击')
          this.contentNode = new ComponentContent(this.ctx, wrapBuilder(buildText), new DialogParams((this.dialogMessage)));
          PromptActionClass.setContentNode(this.contentNode);
          PromptActionClass.openDialog()
        })
      }
      .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)
              .onClick(() => {
                if (item.title == '隐私设置') {
                  router.pushUrl({
                    url: 'pages/account/SettingPage'
                  })
                } else if (item.title == '消息通知') {
                  router.pushUrl({
                    url: 'pages/account/MessagePushPage'
                  })
                } else if (item.title == '帮助中心') {
                  this.contentNode = new ComponentContent(this.ctx, wrapBuilder(buildText1), new DialogParams((this.dialogMessage)));
                  PromptActionClass.setContentNode(this.contentNode);
                  PromptActionClass.openDialog()
                } else if (item.title == '关于我们') {
                  router.pushUrl({
                    url: 'pages/account/AboutPage'
                  })
                }
              })
            }
          })
        }
        .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')
          .onClick(() => {
            (getContext(this) as common.UIAbilityContext)?.terminateSelf()
          })
      }
      .padding(16)
      .width('100%')
      .backgroundColor(Color.White)
      .height(300)

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