《仿盒马》app开发技术分享-- 个人中心页面(19)

简介: 上一节我们实现了分类页面的所有联动效果,这一节我们要开始完成一个新的页面,这个页面是我们主界面的第四个板块,就是个人中心页面。在这个模块,我们可以显示一些用户信息,以及用户相关的各类功能的入口

技术栈

Appgallery connect

开发准备

上一节我们实现了分类页面的所有联动效果,这一节我们要开始完成一个新的页面,这个页面是我们主界面的第四个板块,就是个人中心页面。在这个模块,我们可以显示一些用户信息,以及用户相关的各类功能的入口

功能分析

要实现个人中心页面,首先我们要规划好整体的布局,我们选择从上到下实现,分为三块,一块显示用户信息,一块显示关键信息,一块用来展示用户相关的各种入口列表

代码实现

因为我们要实现列表所以我们需要先创建实体类并且填充对应的数据

export class SectionLine {
title: string;
subtitle: string;
url: string|ResourceStr;
showDividerLine: boolean

constructor(title: string, subtitle: string, url: string|ResourceStr,showDividerLine:boolean) {
this.title = title;
this.subtitle = subtitle;
this.url = url;
this.showDividerLine=showDividerLine;
}

}
这里的url 类型我们注意写成多类型,这样后期我们的内容要修改,我们的改动就会比较小

然后添加数据,我们暂时只添加三个入口

import { SectionLine } from "../entity/SectionLine";

export class SectionLineViewModel {
getSectionListOne():Array{
let listData:SectionLine[]=[
new SectionLine("订单",
"",
$r('app.media.order'),
true),
new SectionLine("地址簿",
"设置常用地址",
$r('app.media.address'),
false),
]
return listData
}

getSectionListTwo():Array{
let listData:SectionLine[]=[

  new SectionLine("关于",
    "",
    $r('app.media.guanyu'),
    true),
]
return listData

}
}

export default new SectionLineViewModel();
添加完成后我们来到页面完善我们设计的三块内容

import { SectionLine } from '../entity/SectionLine';
import SectionLineViewModel from '../model/SectionLineViewModel';

@Component
export struct Mine {

@State num:number=0
@Builder MenuItem(item: SectionLine){
Column(){
Row(){
Image(item.url).width(20).height(20)
.objectFit(ImageFit.Cover)
.interpolation(ImageInterpolation.High)
Text(item.title)
.margin({left:10})
.fontColor("#ff333333")
.fontSize(16)

    Blank()
    Text(item.subtitle)
      .fontColor($r('app.color.color_999'))
      .fontSize(14)
      .margin({right:6})
    Image($r('app.media.back_right_recycle'))
      .width(7).height(13)
      .objectFit(ImageFit.Contain)
      .interpolation(ImageInterpolation.High)
  }
  .padding({left:13,right:13})
  .alignItems(VerticalAlign.Center)
  .height($r('app.float.size_49'))
  .width('100%')
  .backgroundColor(Color.White)
  if (item.showDividerLine){
    Divider().width('100%').height(0.8)
      .color("#e6e6e6")
  }

}
.width('100%')

}

aboutToAppear(){

}

build() {
Column() {

  Stack({alignContent:Alignment.Top}){
    Row().width('100%')
      .height('100%')
      .linearGradient({
        angle:180,
        colors: [[0xff0000, 0], [0xff6666, 0.2], [0xffffff, 1]]
      })
    Column(){
      Row() {
        Image($r('app.media.background'))
          .height(55)
          .width(55)
          .borderRadius(27)
          .objectFit(ImageFit.Contain)
          .interpolation(ImageInterpolation.High)
        Column() {
          Text('用户111')
            .fontSize(24)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
          Text('vip6')
            .fontSize(14)
        }
        .alignItems(HorizontalAlign.Start)
        .margin({ left: 10 })
        Blank()
          .layoutWeight(1)
        Image($r('app.media.ic_arrow_bold'))
          .height(16)
          .width(16)
          .margin(20)
          .objectFit(ImageFit.Contain)
          .interpolation(ImageInterpolation.High)
      }
      .justifyContent(FlexAlign.Start)
      .margin({top: 30 })

      Row(){
        Row(){
          Image($r('app.media.balance'))
            .margin({left:8})
            .height(34)
            .width(34)
            .objectFit(ImageFit.Contain)
            .interpolation(ImageInterpolation.High)
          Column(){
            Text("¥15")
              .fontSize(16)
              .fontColor($r('app.color.color_333'))
            Row(){
              Text("余额")
                .fontSize(13)
                .fontColor($r('app.color.color_999'))
              Image($r('app.media.back_right_recycle'))
                .margin({left:6})
                .height(14)
                .width(14)
                .objectFit(ImageFit.Contain)
                .interpolation(ImageInterpolation.High)
            }
          }
          .alignItems(HorizontalAlign.Start)
          .margin({left:13})
          .onClick(()=>{
          })
        }
        .width('40%')
        Divider()
          .vertical(true)
          .height('100%').margin({top:5,bottom:5})
          .margin({left:20})
        Row(){
          Image($r('app.media.points'))
            .height(34)
            .width(34)
            .objectFit(ImageFit.Contain)
            .interpolation(ImageInterpolation.High)
          Column(){
            Text("积分商城")
              .fontSize(16)
              .fontColor($r('app.color.color_333'))
            Row(){
              Text("积分兑换")
                .fontSize(13)
                .fontColor($r('app.color.color_reds'))
              Image($r('app.media.back_right_recycle'))
                .margin({left:6})
                .height(14)
                .width(14)
                .objectFit(ImageFit.Contain)
                .interpolation(ImageInterpolation.High)
            }

          }
          .margin({left:8})
          .alignItems(HorizontalAlign.Start)
        }
        .margin({left:8})
        .alignItems(VerticalAlign.Center)
        .width('40%')

      }
      .justifyContent(FlexAlign.Start)
      .height(80)
      .width('100%')
      .padding(8)
      .margin({top:40})
      .backgroundColor(Color.White)
      .borderRadius(8)
    }
    .padding({left:12,right:12})
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
  .height(180)

  Column(){
    ForEach(SectionLineViewModel.getSectionListOne(),(item:SectionLine)=>{
      this.MenuItem(item)
    })
  }
  .borderRadius(10)
  .margin({top:35,left:12,right:12})
  Column(){
    ForEach(SectionLineViewModel.getSectionListTwo(),(item:SectionLine)=>{
      this.MenuItem(item)
    })
  }
  .width('100%')
  .borderRadius(10)
  .margin({top:10,left:12,right:12})

}
.height('100%')
.backgroundColor("#f7f7f7")
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Start)

}
}
到这里我们就实现了个人中心的静态页面了

相关文章
|
4月前
《仿盒马》app开发技术分享-- 确认订单页(数据展示)(29)
上一节我们实现了地址的添加,那么有了地址之后我们接下来的重点就可以放到订单生成上了,我们在购物车页面,点击结算会跳转到一个 订单确认页面,在这个页面我们需要有地址选择、加购列表展示、价格计算、优惠计算、商品数量展示等信息。
106 3
|
4月前
|
存储 缓存 前端开发
《仿盒马》app开发技术分享-- 用户登录页(业务逻辑)(21)
上一节我们实现了静态的用户登录页,这一节我们需要给他添加上业务逻辑,实现跟云数据库的互通,同时跟整个应用关联起来,因为我们还没有实现用户的注册页面,所以这里我们在云数据库的用户数据插入暂时先不做同用户名的校验,我们在云端先插入几条数据,暂时专注于查询即可
100 5
|
4月前
|
定位技术
《仿盒马》app开发技术分享-- 地图选点(27)
上一节我们实现了地图的简单展示,这一节我们要实现的内容是,根据展示的地图,实现当前定位功能,当前位置的poi地址功能,以及列表的展示,给地图添加标记,展示自己的当前定位
105 4
|
4月前
|
定位技术 API
《仿盒马》app开发技术分享-- 原生地图展示(26)
上一节我们实现了获取当前用户的位置,并且成功的拿到了经纬度,这一节我们就要根据拿到的经纬度,结合我们其他的知识点来实现地图的展示。
109 4
|
4月前
|
JSON 数据格式
《仿盒马》app开发技术分享-- 分类右侧商品列表(18)
上一节我们实现了分类页左侧二级分类列表功能,并实现了顶部列表&弹窗跟左侧列表的联动,这一节我们需要在它们联动的基础上继续添加右侧列表的联动效果
89 4
|
4月前
|
JSON 数据挖掘 数据格式
《仿盒马》app开发技术分享-- 分类左侧列表(17)
上一节我们实现了分类页面的顶部导航栏全选弹窗列表,并实现了跟顶部列表的点击选中联动效果,这一节我们要实现的功能是,分类模块的左侧列表,它同样也需要跟弹窗列表的点击,顶部列表的点击有联动的效果
85 4
|
4月前
|
数据库
《仿盒马》app开发技术分享-- 确认订单页(业务逻辑)(30)
上一节我们实现了确认订单页的页面绘制和价格计算优惠计算,订单列表展示等功能,这一节我们来实现确认订单页的整个业务逻辑。首先我们要实现的就是地址的选择,然后把我们计算的价格,商品列表等数据保存起来,然后我们开始创建订单表实体类等,把这些数据提交到订单表中
123 3
|
4月前
|
存储 定位技术 数据库
《仿盒马》app开发技术分享-- 新增地址(28)
上一节我们实现了地图选点,获取当前位置,在地图上添加标记,根据当前的定位获取poi地址列表等功能,这些全部都为了我们这一节而铺垫,这一节我们要实现的是新增地址,把我们的用户信息,填写收件人、门牌号、手机号、经纬度、详细地址等信息添加到我们的云数据库中,然后在地址查询列表里展示出来。
100 2
|
4月前
|
前端开发
《仿盒马》app开发技术分享-- 个人中心页or静态头像选择(业务逻辑)(22)
上一节我们实现了登录页面的业务逻辑,并且成功的实现了数据的查询,同时我们新增了用户首选项的工具类,现在主界面往登录页面跳转,登录成功后我们关闭登录页面,这时候我们就会回到个人中心页面,那么现在我们的业务逻辑是一种什么样的形式?登录成功后我们需要显示用户的信息,并且在下次登录时依旧展示个人信息。同时我们还新增了一个头像选择的静态弹窗,丰富个人信息页面
100 1
|
4月前
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗(16)
上一节我们实现了分类页面的顶部导航栏列表,并且实现了首页金刚区跟首页导航栏的联动,这一节我们实现导航栏列表的弹窗功能,需要学习的知识点有自定义弹窗,同时我们的数据源需要跟分类页保持一一致。
90 1

热门文章

最新文章