鸿蒙 Next：个人中心界面

Screenshot_2024-06-15T172527.png

模型

export class MineViewModel {

  userInfo:UserInfo|undefined
  groups:Array<Array<MineItem>> = []

  constructor() {
    this.getUserInfo()
    this.getMenuItems()
  }

  getMenuItems() {
    let list:Array<Array<MineItem>> = [
      [
        {
          img:$r('app.media.tab_new_select'),
          title:'我的订单',
          desc:'',
          type:MineItemType.order
        },
        {
          img:$r('app.media.tab_new_select'),
          title:'我的中奖',
          desc:'',
          type:MineItemType.winning
        }
      ],
      [
        {
          img:$r('app.media.tab_new_select'),
          title:'会员章程',
          desc:'',
          type:MineItemType.member
        },
        {
          img:$r('app.media.tab_new_select'),
          title:'关于瞬和',
          desc:'',
          type:MineItemType.aboutUs
        },
        {
          img:$r('app.media.tab_new_select'),
          title:'隐私政策',
          desc:'',
          type:MineItemType.privacy
        }
      ],
      [
        {
          img:$r('app.media.tab_new_select'),
          title:'账号设置',
          desc:'',
          type:MineItemType.accountSet
        },
        {
          img:$r('app.media.tab_new_select'),
          title:'账号设置1',
          desc:'',
          type:MineItemType.accountSet
        },
        {
          img:$r('app.media.tab_new_select'),
          title:'账号设置2',
          desc:'',
          type:MineItemType.accountSet
        }
      ]
    ]

    this.groups = list
  }

  getUserInfo(){

    let userInf = new UserInfo()
    userInf.name = "occ"
    userInf.isV = true
    userInf.point = '8'
    this.userInfo = userInf
  }

}

class UserInfo {
  name:string|undefined
  isV:Boolean = false
  avator:string|undefined
  point:string = '0'
}

enum MineItemType {
  unknow = 0,
  order = 1,
  winning,
  member,
  aboutUs,
  privacy,
  accountSet
}

export interface MineItem {
  img:Resource | null
  title:string
  desc:string
  type:MineItemType
}

用户数据模型

@Observed
export class UserInfoModel {
  name:string | undefined
  userToken:string | undefined
  nickName:string |undefined
  img:string|undefined
  sex:string|undefined
  tel:string |undefined
  birthday:string|undefined
  desc:string|undefined
  isVip:boolean|undefined = false
  avatar:string|undefined = ''
  vipDesc:string|undefined = ''
}

界面顶部块

import { Constants } from '../../../common/Constants'
import { UserInfoModel } from '../model/UserInfoModel'
import { router } from '@kit.ArkUI'

@Component
export struct MineNavBarView {

  @Prop userInfo:UserInfoModel

  editBlock:(()=>void)|undefined

  build() {
    Row() {
      Row() {
        Button({ type: ButtonType.Circle, stateEffect: false }) {
          Image(this.userInfo.avatar??$r('app.media.right_head'))
            .size({ width: 80, height: 80 })
            .objectFit(ImageFit.Fill)
            .onComplete(msg=>{

            })
            .onError(()=>{

            })
        }
        .onClick(()=>{
          if (this.editBlock != undefined) {
            this.editBlock()
          }
        })
        .backgroundColor(Color.White)
        .clip(true)

        Blank().width(8)
        Column() {
          Text(this.userInfo.nickName??'佚名')
            .fontColor(Color.Black)
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .textAlign(TextAlign.Start)
          Button() {
            Row() {
              Text('V')
                .fontColor(Constants.COLOR_666666)
                .fontSize(16)
                .fontWeight(FontWeight.Bold)
                .margin({ left: 8 })
              Text('普通会员')
                .fontColor(Constants.COLOR_666666)
                .fontSize(14)
                .margin({ left: 8, right: 8 })
            }
            .height(25)
          }
          .buttonStyle(ButtonStyleMode.NORMAL)
          .margin({ top: 6 })
          .clip(true)
        }
        .alignItems(HorizontalAlign.Start)
        .justifyContent(FlexAlign.SpaceAround)
      }
      .height(100)
      .layoutWeight(7)

      Row() {
        Button() {
          Image($r('app.media.account_message_new'))
            .size({ width: 25, height: 25 })
          // .fillColor(Color.Red)//需要svg图片
        }
        .onClick(()=>{
          router.pushUrl({ url: 'pages/message/MessageListPage' })
        })
        .buttonStyle(ButtonStyleMode.NORMAL)
        .padding(4)
        .margin({ right: 12 })
        .clip(true)

        Button() {
          Image($r('app.media.account_setting'))
            .size({ width: 25, height: 25 })
        }
        .onClick(()=>{
          router.pushUrl({ url: 'pages/setting/SettingPage' })
        })
        .buttonStyle(ButtonStyleMode.NORMAL)
        .padding(4)
        .clip(true)

      }
      .layoutWeight(3)
      .justifyContent(FlexAlign.End)
      .height(50)
    }
    .alignItems(VerticalAlign.Top)
    .justifyContent(FlexAlign.SpaceBetween)
    .height(120)
    .padding({ top: 12, left: 13, right: 13, bottom: 13 })
    .backgroundColor(Constants.COLOR_PAGE_BGC)
  }
}

中间卡片

import { Constants } from '../../../common/Constants'
import { UserInfoModel } from '../model/UserInfoModel'

@Component
export struct MineInfoView {

  @Prop userInfo:UserInfoModel
  build() {
    Column(){
      //top
      Row(){
        Row(){
          Image($r('app.media.home_normal'))
            .size({width:30,height:30})
            .objectFit(ImageFit.ScaleDown)
          Text('VIP')
            .fontSize(24)
            .fontWeight(400)
            .fontColor(Constants.HexColorA('ffcc33',0.9))
          Button(){
            Text('5项权益 >')
              .fontColor(Constants.HexColorA('ffcc33',0.9))
              .fontSize(13)
          }
          .height(24)
          .margin({left:12})
          .padding({left:8,top:3,right:8,bottom:3})
          .backgroundColor(Constants.HexColorA('ffcc33',0.5))
          .borderRadius(12)
        }
        Button('升级攻略')
          .buttonStyle(ButtonStyleMode.NORMAL)
          .width(80)
          .height(24)
          .borderWidth(1)
          .fontColor(Constants.HexColorA('ffcc33',0.9))
          .borderColor(Constants.HexColorA('ffcc33',0.9))
          .padding({left:10,bottom:3,right:10,top:3})
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .height(40)
      .width('100%')

      //中
      Text('当前积分： 0' + Constants.screenWidth)
        .fontColor(Constants.HexColorA('ffcc33',0.9))
        .fontSize(16)
        .fontWeight(Color.White)
        .margin({top:12})

      //下
      Row(){
        Column(){
          Progress({ value: 24, total: 100, type: ProgressType.Linear })
            .width('90%')
            .height(4)
            .backgroundColor(Color.White)
            .color(Constants.HexColorA('ffcc33',0.9))
          Text('恭喜您已达到VIP级会员')
            .fontSize(13)
            .fontColor(Constants.HexColorA('ffcc33',0.9))
            .margin({top:6})
        }
        .alignItems(HorizontalAlign.Start)
        .width('60%')

        Text('NO:C000307')
          .fontColor(Constants.HexColorA('ffcc33',0.9))
          .fontSize(13)
          .margin({top:12})
      }
      .margin({top:30})
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

    }
    .width(Constants.SCREEN_WIDTH() - 26.0)
    .margin(13)
    .padding({left:8,top:12,right:8,bottom:12})
    .borderRadius(16)
    .clip(true)
    .backgroundColor(Constants.HexColorA('663300',1))
    .justifyContent(FlexAlign.SpaceBetween)
    .alignItems(HorizontalAlign.Start)
  }
}

界面视图

import { MineItem, MineViewModel } from '../model/MineViewModel'
import { MineInfoView } from './MineInfoView'
import { MineNavBarView } from './MineNavBarView'
import { router } from '@kit.ArkUI'
import { Constants } from '../../../common/Constants'
import { UserInfoModel } from '../model/UserInfoModel'

@Component
export struct MineMainView {

  @Link userInfo:UserInfoModel

  mineViewModel = new MineViewModel()

  scorllView:Scroller = new Scroller()


  @Builder menuGroupItemView(items:MineItem[]) {

    ForEach(items,(subItem:MineItem,subIndex) => {
      ListItem() {
        Column(){
          Row(){
            Row(){
              Image($r('app.media.tab_new_select'))
                .objectFit(ImageFit.ScaleDown)
                .size({width:24,height:24})
              Text(subItem.title)
                .fontSize(14)
                .fontColor(Color.Black)
                .margin({left:12})
            }
            Image($r('app.media.arrow_right_new'))
              .objectFit(ImageFit.ScaleDown)
              .size({width:24,height:16})

          }
          .height(56)
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          if (subIndex != items.length - 1) {
            Line()
              .height(0.5)
              .backgroundColor(Constants.COLOR_EEEEEE)
              .width('100%')
          }
        }
      }
      .backgroundColor(Color.White)
      .padding({left:12,right:12})
      .onClick(()=> {
        router.pushUrl({url:'pages/mine/ctrl/MyOrderPage'})
      })
    })

  }

  // editUserEvent: (() => void) = ()=>{
  //
  // }
  editUserEvent(){
    router.pushUrl({url:'pages/accountInfo/ctrl/MineInfoPage'})
  }

  build() {
    Stack({ alignContent: Alignment.TopEnd }) {

      Scroll(this.scorllView){
        Column(){
          Column(){
            MineNavBarView({userInfo:this.userInfo,editBlock:this.editUserEvent})

            MineInfoView({userInfo:this.userInfo})
          }
          .justifyContent(FlexAlign.Start)
          .alignItems(HorizontalAlign.Start)
          .width('100%')

          List({space:12}){
            ForEach(this.mineViewModel.groups, (items:Array<MineItem>,index) => {
              ListItemGroup(){
                this.menuGroupItemView(items)
              }
              .borderRadius(16)
              .clip(true)

            },(item:string):string => item)
          }
          .padding({left:13,right:13,top:12,bottom:12})
          // .divider({
          //   strokeWidth: 1,
          //   startMargin: 0,
          //   endMargin: 0,
          //   color: '#ffe9f0f0'
          // })
        }
      }
      .backgroundColor(Constants.COLOR_PAGE_BGC)
      .height('100%')
      .width('100%')
    }
    .height('100%')
    .width('100%')
  }
}

enum MineItemRadiusType {
  top,
  bottom,
  no
}

//自定义样式
@Extend(ListItem) function oprateListItemStyle(radiusType:MineItemRadiusType){
  .borderRadius(radiusType == MineItemRadiusType.top ? {topLeft:16,topRight:16} : (radiusType == MineItemRadiusType.bottom ? {bottomLeft:16,bottomRight:16} : 0))
  .clip(true)

}

页面

import { display } from '@kit.ArkUI';
import { Constants } from '../common/Constants';
import { UserInfoModel } from './accountInfo/model/UserInfoModel';
import { MineMainView } from './accountInfo/view/MineMainView';

@Entry
@Component
export default  struct MinePage {

  @StorageLink(Constants.kStorageLocalUser) localUseInf:UserInfoModel = new UserInfoModel()

  aboutToAppear(): void {
    console.log('========== mine')
    console.log(`=========${Constants.screenWidth}`)

    console.log(`=========${px2vp(display.getDefaultDisplaySync().width)}`)


  }
  onPageShow(): void {
    console.log('========== show')
  }
  build() {
    Column() {
      MineMainView({userInfo:this.localUseInf})
    }
  }
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容