HarmonyOS实现我的页面_harmony os实现订单支付页面-CSDN博客

本文链接：https://blog.csdn.net/qq_57952018/article/details/135294873

本文详细描述了在HarmonyOS项目中如何使用Vue.js创建组件，展示了`MyIndex`组件的结构，包括用户头像区域、主菜单和下方的列表，以及`menuItems`和`MenuListItems`接口的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

import { MenuListItems, getMenuListItems } from '../../mode/DataModels'
interface menuItems {
  Icon: Resource,
  Name: string,
  Url: string
}
@Component
export struct MyIndex{
  onPageShow() {
    console.log('MyIndexOnPageShow')
  }
  aboutToAppear() {
    console.log('MyIndexAboutToAppear')
  }
  build() {
    Column() {
      Stack() {
        Image($r("app.media.MyIndexBg"))
          .width('100%')
        // 用户的登录信息
        UserTop()
      }
      // 三个主菜单
      MainMenu()
      // 下方列表展示
      MainList()
    }
    .height('100%')
    .backgroundColor('#F7F7F7')
  }
}

@Component
struct UserTop {
  @Extend(Image) @Styles imageStyle() {
    .width(30)
    .height(30)
  }
  build() {
    Row() {
      Row() {
        Column() {
          Image($r('app.media.User'))
            .width(60)
            .height(60)
            .fillColor('#ffffff')
        }
        .margin({
          right: 10
        })
        Column() {
          Row({space: 10}) {
            Text('哈哈哈用户')
              .fontColor('#ffffff')
              .fontSize(18)
            Image($r("app.media.myindexupdate"))
              .width(20)
              .height(20)
              .fillColor('#ffffff')
          }
          .margin({
            bottom: 5
          })
          Row() {
            Text('133****3333')
              .fontColor('#ffffff')
              .fontSize(18)
          }
        }
        .alignItems(HorizontalAlign.Start)
      }
      Blank()
      Column() {
        Row({space: 5}) {
          Image($r("app.media.myindex_kefu"))
            .imageStyle()
            .fillColor('#ffffff')
          Image($r("app.media.myindex_xiaoxi"))
            .imageStyle()
            .fillColor('#ffffff')
          Image($r("app.media.myindex_shezhi"))
            .imageStyle()
            .fillColor('#ffffff')
        }
      }
    }
    .width('100%')
    .padding({
      left: 20,
      right: 20
    })
  }
}
@Component
struct MainMenu {
  private menuItems: Array<menuItems> = [
    {Icon: $r('app.media.MyIndex_wenzhendingdan'), Name: '咨询订单', Url: ''},
    {Icon: $r('app.media.MyIndex_zhiliaodingdan'), Name: '治疗订单', Url: ''},
    {Icon: $r('app.media.MyIndex_tuihuanshebei'), Name: '设备退还', Url: ''},
  ]
  build() {
    Row() {
      ForEach(this.menuItems, (item: menuItems, index) => {
        Column() {
          Image(item.Icon)
            .width(40)
            .height(40)
          Text(item.Name)
            .fontColor('#333333')
            .margin({
              top: 10
            })
        }
      })
    }
    .width('90%')
    .backgroundColor('#ffffff')
    .borderRadius(10)
    .margin({
      top: -30
    })
    .padding(10)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
@Component
struct MainList {
  private menuListItems: Array<MenuListItems> = getMenuListItems()
  build() {
    List() {
      ForEach(this.menuListItems, (item: MenuListItems, index) => {
        ListItem() {
          Row() {
            Image(item.Icon)
              .width(20)
              .height(20)
            Text(item.Title)
              .margin({
                left: 10
              })
            Blank()
            Image($r('app.media.right'))
              .width(15)
              .height(15)
              .fillColor('#000000')
          }
          .width('100%')
          .padding(20)
        }
      })
    }
    .width('90%')
    .backgroundColor('#ffffff')
    .borderRadius(10)
    .margin({
      top: 20,
      bottom: 20
    })
    .layoutWeight(1) // 添加这个才能实现滚动
  }
}

效果：