消息、个人中心

wwf

5 天以前 8e1b89c65db438797d2d89c508f3e9883bbd7c20

消息、个人中心

 entry/src/main/ets/pages/MainPage.ets

@@ -1,6 +1,7 @@
import { Home } from './home/Home'
import { MessagePage } from './message/MessagePage'
import { SearchPage } from './search/SearchPage'
import { AccountPage } from  './account/AccountPage'

/**
 * @Description : 底部导航，APP模块
@@ -19,7 +20,7 @@
    { icon: 'tabs_message_icon', title: '消息' },
    { icon: 'tabs_account_icon', title: '我的' }
  ]
  @State selectIndex: number = 2
  @State selectIndex: number = 3
  private tabController: TabsController = new TabsController()

  @Builder tabItem(icon: ResourceStr,title: string,index: number){
@@ -47,8 +48,8 @@
              SearchPage()
            } else if (this.selectIndex == 2){
              MessagePage()
            } else if (index === 3){
              // AccountPage()
            } else if (this.selectIndex == 3){
              AccountPage()
            }
          }
        })

 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%')
  }

 entry/src/main/ets/pages/message/MessageDetailsPage.ets

@@ -1,131 +1,124 @@
import { CommonConstantWX } from '../../common/CommonConstantWX'
import { WxMessageBase } from '../../data/WxMessageBase'
import { WxUserInfoBase } from '../../data/WxUserInfoBase'
import { TitleUtils } from '../../utils/TitleUtils'
import { router } from '@kit.ArkUI'

/**
  * @ProjectName : HealthNS
   * @FileName : MessageDetailsPage
   * @UserName : 修梦
  * @Time : 2025/9/14 16:35
  * @Description : 文件描述 
 */
class Message {
  avatar: string | Resource = ''
  content: string = ''
  isMe: boolean = false
}

@Entry
@Component
struct MessageDetailsPage {
  @State msgData: Array<WxMessageBase> = CommonConstantWX.mUserMessage
  @State mContent:string = ''
  private mScroller: Scroller = new Scroller()
  @State mUserInfo: WxUserInfoBase = new WxMessageBase()
  @State messageList: Message[] = [
    { avatar: '', content: '请发一下你的简历给我。', isMe: false },
    { avatar: '', content: '这个岗位我十分感兴趣，请看一下我的简历，我觉得我可以胜任这个岗位', isMe: true },

  ]
  aboutToAppear(): void {
    let params = this.getUIContext().getRouter().getParams() as Record<string,WxUserInfoBase>
    this.mUserInfo = params.userInfo

  }
  build() {
    RelativeContainer(){
      TitleUtils({titleName:this.mUserInfo.name})
        .id('heard')
      List({space: 15,scroller:this.mScroller}){
        ForEach(this.msgData,(item: WxMessageBase) => {
         ListItem(){
           MessageDetailsItem({item: item,icon: this.mUserInfo.img})
         }
        })
      }
      .id('list')
      .alignRules({
        top:{anchor: 'heard',align: VerticalAlign.Bottom},
        bottom: {anchor: 'rowBottom',align: VerticalAlign.Top}
      })
      .padding(10)
      Row({space: 5}){
        Image($r('app.media.wx_voice_icon')).MessageImageSty()
        TextArea({text: this.mContent})
          .backgroundColor(Color.White)
          .borderRadius(5)
          .width('70%')
          .offset({y: 5})
          .onChange((value: string) => {
            this.mContent = value
          })
        Image($r('app.media.wx_smile_icon')).MessageImageSty()
        if (this.mContent.trim().length === 0 || !this.mContent){
          Image($r('app.media.wx_more_icon')).MessageImageSty()
        } else {
          Button(){
            Text('发送')
              .fontSize(15)
              .fontColor(Color.White)
          }
          .padding(5)
          //发送数据，添加到了聊天列表
    Column() {
      Row() {
        Image($r('app.media.left_icon'))
          .width(20)
          .height(20)
          .onClick(() =>{
            this.msgData.push({
              id: 99,
              content: this.mContent,
              img: $r('app.media.avatar_icon1'),
              category: 1
            router.back()
            })
            this.mContent = ''
            //滚动到底部
            this.mScroller.scrollToIndex(this.msgData.length - 1)
          })
        Column() {
          Text('李女士')
            .fontSize(16)
            .fontWeight(700)
          Text('摩米移动科技')
            .fontSize(12)
            .fontColor('#666666')
            .margin({ top: 4 })
        }

        Row()
      }
      .width('100%')
      .padding(10)
      .justifyContent(FlexAlign.SpaceBetween)
      .backgroundColor('#fff')

      Column() {
        List({ space: 20, initialIndex: 0 }){
          ForEach(this.messageList, (item: Message) => {
            ListItem() {
              if (item.isMe) {
                Row({ space: 10 }) {
                  Text(item.content)
                    .fontSize(14)
                    .fontColor(Color.White)
                    .fontWeight(500)
                    .backgroundColor('#1761f4')
                    .padding(10)
                    .borderRadius({ topLeft: 12, topRight: 12, bottomLeft: 12 })
                    .constraintSize({ maxWidth: 250 })
                  Image($r('app.media.me_icon'))
                    .width(32)
                    .height(32)
                }
                .width('100%')
                .justifyContent(FlexAlign.End)
                .alignItems(VerticalAlign.Bottom)
              } else {
                Row({ space: 10 }) {
                  Image($r('app.media.avatar'))
                    .width(32)
                    .height(32)
                  Text(item.content)
                    .fontSize(14)
                    .fontColor(Color.Black)
                    .fontWeight(500)
                    .backgroundColor('#FFF')
                    .padding(10)
                    .borderRadius({ topLeft: 12, topRight: 12, bottomRight: 12 })
                    .constraintSize({ maxWidth: 250 })
      }
      .width('100%')
      .alignItems(VerticalAlign.Bottom)
      .padding(10)
      .backgroundColor("#ffe9e6e6")
      .id('rowBottom')
      .alignRules({
        bottom: {anchor: '__container__',align: VerticalAlign.Bottom}
                .justifyContent(FlexAlign.Start)
              }
            }
      })
        }
        .listDirection(Axis.Vertical) // 排列方向
        .scrollBar(BarState.Off)
        .friction(0.6)
        .edgeEffect(EdgeEffect.Spring)
        .width('100%')
      }
      .padding(16)
      .width('100%')
      .height(600)

      Row({ space: 8 }) {
        Image($r('app.media.audio_icon'))
          .width(24)
          .height(24)
        TextInput()
          .width(240)
          .placeholderColor('#999999')
          .backgroundColor('#f3f7fe')
        Image($r('app.media.expression_icon'))
          .width(24)
          .height(24)
        Image($r('app.media.add_icon'))
          .width(24)
          .height(24)
      }
      .backgroundColor('#FFF')
      .width('100%')
      .height(60)
      .padding(10)
      .alignItems(VerticalAlign.Center)

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

@Component
struct MessageDetailsItem {
  @Prop item: WxMessageBase
  @Prop icon: ResourceStr
  build() {
    if (this.item.category === 0){
      Row({space:5}){
        Image(this.icon)
          .width(40)
          .height(40)
        Text(this.item.content)
          .backgroundColor(Color.White)
          .padding(5)
      }
      .width('78%')
    } else {
      Row({space:5}){
       Row(){
         Text(this.item.content)
           .backgroundColor("#ff3cc12e")
           .padding(5)
       }
       .justifyContent(FlexAlign.End)
       .width('78%')
        Image($r('app.media.avatar_icon1'))
          .width(40)
          .height(40)
      }
      .width('100%')
      .justifyContent(FlexAlign.End)
    }

  }
}

@Extend(Image)
function MessageImageSty() {
  .width(25)
  .height(25)
  .objectFit(ImageFit.Fill)
}

 entry/src/main/ets/pages/message/MessagePage.ets

@@ -1,18 +1,31 @@
import { router } from "@kit.ArkUI"

class Message {
  avatar: string | Resource = ''
  name: string = ''
  company: string = ''
  desc: string = ''
  price: string = ''
}

@Entry
@Component
export struct MessagePage {
  @State messageList: Message[] = [
    { avatar: '', name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...' },
    { avatar: '', name: '林先生', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...' },
    { avatar: '', name: '吴女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...' }
    { avatar: '', name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '林先生', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '吴女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K' },
    { avatar: '', name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '林先生', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '吴女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K' },
    { avatar: '', name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '林先生', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '吴女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K' },
    { avatar: '', name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '林先生', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '吴女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K' },
    { avatar: '', name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '林先生', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '吴女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K' },
  ]

  build() {
@@ -40,14 +53,59 @@

      List({ space: 10, initialIndex: 0 }){
        ForEach(this.messageList, (item: Message) => {

        })
          ListItem() {
            Row() {
              Image($r('app.media.avatar'))
                .width(40)
                .height(40)
                .margin({ right: 10 })
              Column() {
                Row({ space: 6 }) {
                  Text(item.name)
                    .fontSize(14)
                  Text(item.company)
                    .maxLines(1)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                    .fontColor('#999999')
                    .width(150)
                    .fontSize(12)
                  Text(item.price)
                    .width(80)
                    .fontColor('#999999')
                    .fontSize(12)
                    .textAlign(TextAlign.End)
                }
                .width('100%')
                .justifyContent(FlexAlign.Start)
                Text(item.desc)
                  .fontColor('#999999')
                  .fontSize(13)
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })
                  .width('100%')
      }
      .height('100%')
      .padding({top:10})
      .margin({bottom: 30})
      .backgroundColor(Color.White)
      .divider({strokeWidth: 2,color: '#ccc'})
              .justifyContent(FlexAlign.SpaceBetween)
              .width(290)
            }
            .width('100%')
            .height(40)
            .margin({ top: 10, bottom: 10 })
            .onClick(() => {
              router.pushUrl({
                url: 'pages/message/MessageDetailsPage'
              })
            })
          }
        })
      }
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .edgeEffect(EdgeEffect.Spring)
      .width('100%')
      .height(560)
      .divider({strokeWidth: 1,color: '#f0f0f0'})
    }
    .height('100%')
    .width('100%')

 entry/src/main/resources/base/media/account_communicated.png

 entry/src/main/resources/base/media/account_course.png

 entry/src/main/resources/base/media/account_help.png

 entry/src/main/resources/base/media/account_info.png

 entry/src/main/resources/base/media/account_jianli.png

 entry/src/main/resources/base/media/account_learning.png

 entry/src/main/resources/base/media/account_message.png

 entry/src/main/resources/base/media/account_setting.png

 entry/src/main/resources/base/media/add_icon.png

 entry/src/main/resources/base/media/audio_icon.png

 entry/src/main/resources/base/media/avatar.png

 entry/src/main/resources/base/media/chevron_right.png

 entry/src/main/resources/base/media/expression_icon.png

 entry/src/main/resources/base/media/me_icon.png

 entry/src/main/resources/base/media/right_icon.png

 entry/src/main/resources/base/profile/main_pages.json

@@ -9,6 +9,7 @@
    "pages/home/ClassificationDetail",
    "pages/home/ActiveDetail",
    "pages/search/SearchPage",
    "pages/message/MessagePage"
    "pages/message/MessagePage",
    "pages/message/MessageDetailsPage"
  ]
}