developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yangchenggong1_wd
feaa5e76 1 parent efc781fb

desc:个人中心 UI 界面绘制

Inline Side-by-side
Showing 7 changed files with 425 additions and 328 deletions
... ... @@ -2,11 +2,14 @@ import MinePagePersonalFunctionsItem from '../../viewmodel/MinePagePersonalFunct
import MinePageCreatorFunctionsItem from '../../viewmodel/MinePageCreatorFunctionsItem'
import MinePageMoreFunctionModel from '../../viewmodel/MinePageMoreFunctionModel'
import MinePageDatasModel from '../../model/MinePageDatasModel'
import RouteManager from '../../utils/RouteManager'
import MinePageUserSimpleInfoUI from '../page/mine/MinePageUserSimpleInfoUI'
import MinePagePersonFunctionUI from '../page/mine/MinePagePersonFunctionUI'
import MinePageCardUI from '../page/mine/MinePageCardUI'
import MinePageCreatorFunctionUI from '../page/mine/MinePageCreatorFunctionUI'
import MinePageMoreFunctionUI from '../page/mine/MinePageMoreFunctionUI'
const TAG = 'MinePageComponent';
/**
* 我的页面
*/
... ... @@ -21,6 +24,8 @@ export struct MinePageComponent {
scroller: Scroller = new Scroller()
aboutToAppear(){
//登录信息 TODO
this.getFunctionData()
}
... ... @@ -35,16 +40,16 @@ export struct MinePageComponent {
build() {
Scroll(this.scroller){
Flex({direction:FlexDirection.Column}){
Stack({alignContent:Alignment.Top}){
Stack(){
Image($r('app.media.mine_head_bg'))
.setFullWidth()
.width('100%')
.height('657lpx')
.objectFit(ImageFit.Auto)
this.MinePageUI()
}
}.width('100%')
.alignContent(Alignment.Top)
}
.setFullWidthAndHeight()
.backgroundColor($r('app.color.color_F9F9F9'))
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
... ... @@ -54,308 +59,16 @@ export struct MinePageComponent {
@Builder MinePageUI(){
Column(){
//头像层
this.HeaderUI()
MinePageUserSimpleInfoUI({isLogin:this.isLogin})
//Grid 区域
this.GridUI()
MinePagePersonFunctionUI({personalData:$personalData})
//Card
this.CardUI()
MinePageCardUI()
//创作者区域
this.ActiveUI()
//滑动区域
this.MoreFunctionUI()
}.setFullWidth()
}
@Builder HeaderUI(){
Row(){
//头像
Stack(){
Button({type:ButtonType.Circle})
.backgroundColor($r('app.color.main_red'))
.width('110lpx')
.height('110lpx')
Image($r('app.media.mine_head_icon'))
.width('108lpx')
.height('108lpx')
.objectFit(ImageFit.Cover)
.borderRadius(50)
}.width('110lpx')
.height('110lpx')
.alignContent(Alignment.Center)
.onClick(()=>{
RouteManager.jumpNewPage("pages/TestPage")
})
//昵称信息
Column(){
Row(){
Text("人民日报网友6G5E3T")
.fontColor($r('app.color.color_222222'))
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize('33lpx')
.width('326lpx')
Image($r('app.media.mine_user_edit'))
.width('11lpx')
.height('20lpx')
.margin({left:'15lpx'})
.objectFit(ImageFit.Cover)
MinePageCreatorFunctionUI({creatorData:$creatorData})
//更多功能
MinePageMoreFunctionUI({moreData:$moreData})
}.width('100%')
Stack(){
Image($r('app.media.mine_grade_bg'))
.width('84lpx')
.height('29lpx')
.objectFit(ImageFit.Auto)
Text("等级8")
.textAlign(TextAlign.Center)
.fontColor($r('app.color.white'))
.fontSize('19lpx')
.width('50lpx')
.height('29lpx')
}.margin({top:'15lpx'})
}.alignItems(HorizontalAlign.Start)
.margin({top:'11lpx',left:'17lpx'})
.width('352lpx')
Blank()
Stack({alignContent:Alignment.Start}){
Text("签到")
.textAlign(TextAlign.Start)
.width('108lpx')
.height('46lpx')
.fontColor($r('app.color.color_AD6000'))
.backgroundColor($r('app.color.color_FFC460'))
.fontWeight(500)
.position({x:'23lpx'})
.padding({left:'35lpx'})
Image($r("app.media.mine_sign_icon"))
.width('50lpx')
.height('50lpx')
}.width('131lpx')
}.setBackGroundWhite()
.setFullWidth()
.padding({top:'31lpx',left:'46lpx'})
}
@Builder GridUI(){
Grid(){
ForEach(this.personalData,(item:MinePagePersonalFunctionsItem,index:number)=>{
GridItem(){
Row(){
Column(){
Image(item.imgSrc)
.width('46lpx')
.height('46lpx')
Text(`${item.msg}`)
.margin({top:'8lpx'})
.width('50lpx')
.height('23lpx')
.fontColor($r('app.color.color_222222'))
.fontSize('23lpx')
}
.alignItems(HorizontalAlign.Center)
.width('100%')
Blank()
.layoutWeight(1)
if(index % 4 < 3 && index != this.personalData.length){
Text().backgroundColor($r('app.color.color_222222'))
.opacity(0.1)
.width('2lpx')
.height('29lpx')
}
}
}.onClick(()=>{
console.log(index+"")
}).width('169lpx')
.height('117lpx')
}, item => item)
}
.rowsTemplate('1fr 1fr')
.columnsTemplate('1fr 1fr 1fr 1fr')
.height('338lpx')
.margin({top:'31lpx',left:'23lpx',right:'23lpx' })
}
@Builder ActiveUI(){
Column(){
Row(){
Text("创作者中心")
.fontSize('29lpx')
.width('148lpx')
.height('46lpx')
.fontColor($r('app.color.color_222222'))
Blank()
Row(){
Text("内容管理")
.fontSize('27lpx')
.width('113lpx')
.height('35lpx')
.fontColor($r('app.color.color_222222'))
Image($r('app.media.mine_right_arrow'))
.width('27lpx')
.height('27lpx')
.objectFit(ImageFit.Auto)
}
}.setFullWidth()
.height('92lpx')
.padding({left:'29lpx',top:'23lpx',right:'31lpx'})
Row(){
Grid(){
ForEach(this.creatorData,(item:MinePageCreatorFunctionsItem,index:number)=>{
GridItem(){
Row(){
Column(){
Image(item.imgSrc)
.width('50lpx')
.height('50lpx')
Text(`${item.msg}`)
.margin({top:'15lpx'})
.width('96lpx')
.height('23lpx')
.fontColor($r('app.color.color_666666'))
.fontSize('23lpx')
}
.alignItems(HorizontalAlign.Center)
.width('100%')
Blank()
.layoutWeight(1)
if(index % 4 < 3 && index != this.creatorData.length){
Text().backgroundColor($r('app.color.color_222222'))
.opacity(0.1)
.width('2lpx')
.height('29lpx')
}
}
}.onClick(()=>{
console.log(index+"")
}).width('169lpx')
.height('117lpx')
}, item => item)
}
.rowsTemplate('1fr')
.columnsTemplate('1fr 1fr 1fr 1fr')
.height('88lpx')
}.setFullWidth()
.height('127lpx')
}
.height('219lpx')
.borderRadius(8)
.margin({top:'19lpx',left:'23lpx',right:'23lpx',bottom:'19lpx'})
.setBackGroundWhite()
}
@Builder CardUI(){
Flex(){
Stack(){
Image($r('app.media.mine_card_01'))
.setFullWidthAndHeight()
.objectFit(ImageFit.Auto)
Column(){
Text("积分商城")
.fontColor($r('app.color.color_994D00'))
.width('119lpx')
.height('35lpx')
.textAlign(TextAlign.Start)
.fontSize('29lpx')
Text("华为MATE40手机")
.width('159lpx')
.height('23lpx')
.fontColor($r('app.color.color_FF2E0C'))
.fontSize('19lpx')
.textAlign(TextAlign.Start)
.margin({top:'10lpx'})
}.padding({left:'29lpx'})
.alignItems(HorizontalAlign.Start)
}.alignContent(Alignment.Start)
.width('345lpx')
.height('115lpx')
Stack(){
Image($r('app.media.mine_card_02'))
.setFullWidthAndHeight()
.objectFit(ImageFit.Auto)
Column(){
Text("数字藏品")
.fontColor($r('app.color.color_B15900'))
.width('119lpx')
.height('35lpx')
.textAlign(TextAlign.Start)
.fontSize('29lpx')
Text("黑胶唱片NFT")
.width('159lpx')
.height('23lpx')
.fontColor($r('app.color.color_B15900'))
.fontSize('19lpx')
.textAlign(TextAlign.Start)
.margin({top:'10lpx'})
}.padding({left:'67lpx'})
.alignItems(HorizontalAlign.Start)
}.alignContent(Alignment.Start)
.width('348lpx')
.height('115lpx')
}.setFullWidth()
.height('115lpx')
.setPadding()
}
@Builder MoreFunctionUI(){
Column(){
List(){
ForEach(this.moreData,(item:MinePageMoreFunctionModel,index:number)=>{
ListItem(){
Column(){
Row(){
if(item.imgSrc){
Image(item.imgSrc)
.width('38lpx')
.height('38lpx')
.margin({right:'15lpx'})
}
Text(`${item.msg}`)
.margin({top:'8lpx'})
.width('456lpx')
.height('38lpx')
.fontColor($r('app.color.color_666666'))
.fontSize('29lpx')
Blank()
Image($r('app.media.mine_user_arrow'))
.width('27lpx')
.height('27lpx')
.objectFit(ImageFit.Auto)
.margin({left:'81lpx',right:'29lpx'})
}.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Start)
if(index != this.moreData.length -1 ){
Text().backgroundColor($r('app.color.color_F5F5F5'))
.opacity(0.1)
.width('612lpx')
.height('2lpx')
}
}.height(index === 0 ? '92lpx':'108lpx')
}.padding({left:'27lpx'})
.onClick(()=>{
console.log(index+"")
})
.height('117lpx')
}, item => item)
}.onScrollFrameBegin((offset, state) => {
return { offsetRemain: 0 }
})
}
.setBackGroundWhite()
.backgroundColor($r('app.color.white'))
.setMargining()
.borderRadius(8)
}
@Styles setFullWidthAndHeight(){
... ... @@ -363,26 +76,4 @@ export struct MinePageComponent {
.height('100%')
}
@Styles setFullWidth(){
.width('100%')
}
@Styles setFullHeight(){
.height('100%')
}
@Styles setPadding(){
.padding({left:'23lpx',right:'23lpx'})
}
@Styles setMargining(){
.margin({left:'23lpx',right:'23lpx'})
}
@Styles setBackGroundWhite(){
.backgroundColor($r('app.color.white'))
}
}
... ...
@Component
export default struct MinePageCardUI {
build(){
Flex(){
Stack(){
Image($r('app.media.mine_card_01'))
.setFullWidthAndHeight()
.objectFit(ImageFit.Auto)
Column(){
Text("积分商城")
.fontColor($r('app.color.color_994D00'))
.width('119lpx')
.height('35lpx')
.textAlign(TextAlign.Start)
.fontSize('29lpx')
.fontWeight(600)
Text("华为MATE40手机")
.width('159lpx')
.height('23lpx')
.fontColor($r('app.color.color_994D00'))
.fontSize('19lpx')
.fontWeight(400)
.textAlign(TextAlign.Start)
.margin({top:'10lpx'})
}.padding({left:'29lpx'})
.alignItems(HorizontalAlign.Start)
}.alignContent(Alignment.Start)
.width('349lpx')
.height('115lpx')
Stack(){
Image($r('app.media.mine_card_02'))
.setFullWidthAndHeight()
.objectFit(ImageFit.Auto)
Column(){
Text("数字藏品")
.fontColor($r('app.color.color_B15900'))
.width('119lpx')
.height('35lpx')
.textAlign(TextAlign.Start)
.fontSize('29lpx')
.fontWeight(600)
Text("黑胶唱片NFT")
.width('159lpx')
.height('23lpx')
.fontColor($r('app.color.color_B15900'))
.fontSize('19lpx')
.textAlign(TextAlign.Start)
.margin({top:'10lpx'})
.fontWeight(400)
}.padding({left:'67lpx'})
.alignItems(HorizontalAlign.Start)
}.alignContent(Alignment.Start)
.width('348lpx')
.height('115lpx')
}.setFullWidth()
.height('115lpx')
.padding({left:'23lpx',right:'23lpx'})
.margin({top:'24lpx'})
}
@Styles setFullWidthAndHeight(){
.width('100%')
.height('100%')
}
@Styles setFullWidth(){
.width('100%')
}
@Styles setFullHeight(){
.height('100%')
}
}
\ No newline at end of file
... ...
import MinePageCreatorFunctionsItem from '../../../viewmodel/MinePageCreatorFunctionsItem'
@Component
export default struct MinePageCreatorFunctionUI {
@Link creatorData:MinePageCreatorFunctionsItem[]
build(){
Column(){
Row(){
Text("创作者中心")
.fontSize('29lpx')
.width('148lpx')
.height('46lpx')
.fontWeight(600)
.fontColor($r('app.color.color_222222'))
Blank()
Row(){
Text("内容管理")
.fontSize('27lpx')
.width('113lpx')
.height('35lpx')
.fontColor($r('app.color.color_999999'))
Image($r('app.media.mine_right_arrow'))
.width('27lpx')
.height('27lpx')
.objectFit(ImageFit.Auto)
}
}.setFullWidth()
.height('92lpx')
.padding({left:'29lpx',top:'23lpx',right:'31lpx'})
Row(){
Grid(){
ForEach(this.creatorData,(item:MinePageCreatorFunctionsItem,index:number)=>{
GridItem(){
Row(){
Column(){
Image(item.imgSrc)
.width('50lpx')
.height('50lpx')
Text(`${item.msg}`)
.margin({top:'15lpx'})
.width('96lpx')
.height('23lpx')
.fontColor($r('app.color.color_666666'))
.fontSize('23lpx')
}
.alignItems(HorizontalAlign.Center)
.width('100%')
Blank()
.layoutWeight(1)
if(index % 4 < 3 && index != this.creatorData.length){
Text().backgroundColor($r('app.color.color_222222'))
.opacity(0.1)
.width('2lpx')
.height('29lpx')
}
}
}.onClick(()=>{
console.log(index+"")
}).width('169lpx')
.height('117lpx')
}, item => item)
}
.rowsTemplate('1fr')
.columnsTemplate('1fr 1fr 1fr 1fr')
.height('88lpx')
}.setFullWidth()
.height('127lpx')
}
.height('219lpx')
.borderRadius(8)
.margin({top:'19lpx',left:'23lpx',right:'23lpx'})
.setBackGroundWhite()
}
@Styles setFullWidthAndHeight(){
.width('100%')
.height('100%')
}
@Styles setFullWidth(){
.width('100%')
}
@Styles setFullHeight(){
.height('100%')
}
@Styles setBackGroundWhite(){
.backgroundColor($r('app.color.white'))
}
}
\ No newline at end of file
... ...
import MinePageMoreFunctionModel from '../../../viewmodel/MinePageMoreFunctionModel'
@Component
export default struct MinePageMoreFunctionUI{
@Link moreData:MinePageMoreFunctionModel[]
build(){
Column(){
Column(){
Text(`更多功能`)
.width('456lpx')
.height('38lpx')
.fontColor($r('app.color.color_666666'))
.fontSize('29lpx')
.margin({left:"31lpx"})
.fontWeight(600)
}.height('92lpx')
.width('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Start)
Text().backgroundColor($r('app.color.color_F5F5F5'))
.width('100%')
.height('1lpx')
List(){
ForEach(this.moreData,(item:MinePageMoreFunctionModel,index:number)=>{
ListItem(){
Column(){
Column(){
Row(){
if(item.imgSrc){
Image(item.imgSrc)
.width('38lpx')
.height('38lpx')
.margin({right:'15lpx'})
}
Text(`${item.msg}`)
.width('456lpx')
.height('38lpx')
.fontColor($r('app.color.color_666666'))
.fontSize('29lpx')
.fontWeight(400)
Blank()
Image($r('app.media.mine_user_arrow'))
.width('27lpx')
.height('27lpx')
.objectFit(ImageFit.Auto)
.margin({left:'81lpx',right:'29lpx'})
}.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
}.height('108lpx')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Start)
.padding({left:'27lpx'})
if(index != this.moreData.length -1 ){
Text().backgroundColor($r('app.color.color_F5F5F5'))
.width('612lpx')
.height('1lpx')
}
}
}
.onClick(()=>{
console.log(index+"")
})
.height('117lpx')
}, item => item)
}.onScrollFrameBegin((offset, state) => {
return { offsetRemain: 0 }
})
}
.backgroundColor($r('app.color.white'))
.borderRadius(8)
.margin({left:'23lpx',right:'23lpx',top:"19lpx"})
}
}
\ No newline at end of file
... ...
import MinePagePersonalFunctionsItem from '../../../viewmodel/MinePagePersonalFunctionsItem'
@Component
export default struct MinePagePersonFunctionUI {
@Link personalData:MinePagePersonalFunctionsItem[]
build() {
Grid(){
ForEach(this.personalData,(item:MinePagePersonalFunctionsItem,index:number)=>{
GridItem(){
Row(){
Column(){
Image(item.imgSrc)
.width('46lpx')
.height('46lpx')
Text(`${item.msg}`)
.margin({top:'8lpx'})
.width('50lpx')
.height('23lpx')
.fontColor($r('app.color.color_222222'))
.fontSize('23lpx')
}
.alignItems(HorizontalAlign.Center)
.width('100%')
Blank()
.layoutWeight(1)
if(index % 4 < 3 && index != this.personalData.length-1){
Text().backgroundColor($r('app.color.color_222222'))
.opacity(0.1)
.width('2lpx')
.height('29lpx')
}
}
}.onClick(()=>{
console.log(index+"")
}).width('169lpx')
.height('117lpx')
}, item => item)
}
.rowsTemplate('1fr 1fr')
.columnsTemplate('1fr 1fr 1fr 1fr')
.height('234lpx')
.margin({top:'31lpx',left:'23lpx',right:'23lpx' })
}
}
\ No newline at end of file
... ...
import RouteManager from '../../../utils/RouteManager'
@Component
export default struct MinePageUserSimpleInfoUI {
@Prop isLogin:boolean
build(){
Row(){
//头像
Stack(){
Button({type:ButtonType.Circle})
.backgroundColor($r('app.color.main_red'))
.width('110lpx')
.height('110lpx')
Image($r('app.media.mine_head_icon'))
.width('108lpx')
.height('108lpx')
.objectFit(ImageFit.Cover)
.borderRadius(50)
}.width('110lpx')
.height('110lpx')
.alignContent(Alignment.Center)
.onClick(()=>{
RouteManager.jumpNewPage("pages/TestPage")
})
if(this.isLogin){
//昵称信息
Column(){
Row(){
Text("人民日报6G5E3T")
.fontColor($r('app.color.color_222222'))
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize('33lpx')
Image($r('app.media.mine_user_edit'))
.width('27lpx')
.height('27lpx')
.margin({left:'15lpx'})
.objectFit(ImageFit.Cover)
Blank()
}.width('100%')
Stack(){
Image($r('app.media.mine_grade_bg'))
.width('84lpx')
.height('29lpx')
.objectFit(ImageFit.Auto)
Text("等级8")
.textAlign(TextAlign.Center)
.fontColor($r('app.color.white'))
.fontSize('19lpx')
.width('50lpx')
.height('29lpx')
}.margin({top:'15lpx'})
}.alignItems(HorizontalAlign.Start)
.margin({top:'12lpx',left:'17lpx'})
.width('352lpx')
}else{
Row(){
Text("登录注册")
.fontColor($r('app.color.color_222222'))
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize('33lpx')
Image($r('app.media.mine_user_edit'))
.width('11lpx')
.height('20lpx')
.margin({left:'15lpx'})
.objectFit(ImageFit.Cover)
Blank()
}
.margin({top:'11lpx',left:'17lpx'})
.width('352lpx')
}
Blank()
Stack({alignContent:Alignment.Start}){
Text("签到")
.textAlign(TextAlign.Start)
.width('108lpx')
.height('46lpx')
.fontColor($r('app.color.color_AD6000'))
.backgroundColor($r('app.color.color_FFC460'))
.fontWeight(500)
.position({x:'23lpx'})
.padding({left:'35lpx'})
Image($r("app.media.mine_sign_icon"))
.width('50lpx')
.height('50lpx')
}.width('131lpx')
}.backgroundColor($r('app.color.white'))
.setFullWidth()
.padding({top:'31lpx',left:'46lpx'})
}
@Styles setFullWidthAndHeight(){
.width('100%')
.height('100%')
}
@Styles setFullWidth(){
.width('100%')
}
@Styles setFullHeight(){
.height('100%')
}
}
... ...
... ... @@ -68,10 +68,9 @@ class MinePageDatasModel{
* 包含名字和图标
*/
getMoreFunctionsData():MinePageCreatorFunctionsItem[]{
if(this.moreData.length === 6){
if(this.moreData.length === 5){
return this.moreData
}
this.moreData.push(new MinePageMoreFunctionModel("更多功能",null))
this.moreData.push(new MinePageMoreFunctionModel("扫一扫",$r('app.media.mine_scan')))
this.moreData.push(new MinePageMoreFunctionModel("我的奖品",$r('app.media.mine_mygift')))
this.moreData.push(new MinePageMoreFunctionModel("意见反馈",$r('app.media.mine_suggest')))
... ...