developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yangchenggong1_wd
b1726e5f 1 parent bae45389

desc:个人中心 UI 界面绘制

Inline Side-by-side
Showing 26 changed files with 385 additions and 109 deletions
import router from '@ohos.router';
import common from '@ohos.app.ability.common';
import MineFunctionModel from '../../viewmodel/MineFunctionModel';
import MinePagePersonalFunctionsItem from '../../viewmodel/MinePagePersonalFunctionsItem'
import MinePageCreatorFunctionsItem from '../../viewmodel/MinePageCreatorFunctionsItem'
import MinePageMoreFunctionModel from '../../viewmodel/MinePageMoreFunctionModel'
import MinePageDatasModel from '../../model/MinePageDatasModel'
const TAG = 'PageComponent';
/**
* 我的页面
*/
@Component
export struct MinePageComponent {
//是否是创作者
@State isActive:boolean = false
@State isCreator:boolean = false
@State isLogin:boolean = true
@State icons:MineFunctionModel[] = []
@State personalData:MinePagePersonalFunctionsItem[] = []
@State creatorData:MinePageCreatorFunctionsItem[] = []
@State moreData:MinePageMoreFunctionModel[] = []
scroller: Scroller = new Scroller()
private context = getContext(this) as common.UIAbilityContext
aboutToAppear(){
// TODO 获取用户信息
//初始化 icon
this.initIconDatas()
this.getFunctionData()
}
/**
* 初始化 icon
*/
initIconDatas(){
this.icons.push(new MineFunctionModel("评论",$r('app.media.mine_comment_icon')))
this.icons.push(new MineFunctionModel("关注",$r('app.media.mine_order_icon')))
this.icons.push(new MineFunctionModel("收藏",$r('app.media.mine_collect_icon')))
this.icons.push(new MineFunctionModel("历史",$r('app.media.mine_history_icon')))
this.icons.push(new MineFunctionModel("消息",$r('app.media.mine_msg_icon')))
this.icons.push(new MineFunctionModel("留言板",$r('app.media.mine_msgboard_icon')))
this.icons.push(new MineFunctionModel("预约",$r('app.media.mine_order_icon')))
getFunctionData(){
//个人功能数据
this.personalData = MinePageDatasModel.getPersonalFunctionsData()
//创作者功能数据
this.creatorData = MinePageDatasModel.getCreatorFunctionsData()
//更多功能数据
this.moreData = MinePageDatasModel.getMoreFunctionsData()
}
build() {
Column(){
Scroll(this.scroller){
Flex({direction:FlexDirection.Column}){
Stack({alignContent:Alignment.Top}){
Image($r('app.media.mine_head_bg'))
.setFullWidth()
.height('50%')
.height('657lpx')
.objectFit(ImageFit.Auto)
this.TopUI()
}.setFullWidthAndHeight()
.backgroundColor($r('app.color.color_F5F5F5'))
}.setFullWidthAndHeight()
this.MinePageUI()
}
}.width('100%')
}
.backgroundColor($r('app.color.color_F9F9F9'))
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
}
@Builder TopUI(){
@Builder MinePageUI(){
Column(){
//头像层
this.HeaderUI()
... ... @@ -59,11 +61,11 @@ export struct MinePageComponent {
this.GridUI()
//Card
this.CardUI()
//创作者区域
this.ActiveUI()
//滑动区域
this.ScrollUI()
}
.padding({left:11,right:11})
.setFullWidthAndHeight()
this.MoreFunctionUI()
}.setFullWidth()
}
@Builder HeaderUI(){
... ... @@ -71,144 +73,288 @@ export struct MinePageComponent {
//头像
Stack(){
Button({type:ButtonType.Circle})
.backgroundColor($r('app.color.white'))
.width(74)
.height(74)
.backgroundColor($r('app.color.main_red'))
.width('110lpx')
.height('110lpx')
Image($r('app.media.mine_head_icon'))
.width(70)
.height(70)
.width('108lpx')
.height('108lpx')
.objectFit(ImageFit.Cover)
.borderRadius(50)
}.width(74)
.height(74)
}.width('110lpx')
.height('110lpx')
.alignContent(Alignment.Center)
//昵称信息
Column(){
Row(){
Text("人民日报网友ABCDEF")
.fontColor($r('app.color.white'))
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(20)
.height(20)
}
.width('11lpx')
.height('20lpx')
.margin({left:'15lpx'})
.objectFit(ImageFit.Cover)
}.width('100%')
Stack(){
Image($r('app.media.mine_grade_bg'))
.width('84lpx')
.height('29lpx')
.objectFit(ImageFit.Auto)
Text("等级8")
.textAlign(TextAlign.Center)
.backgroundImage($r('app.media.mine_grade_bg'))
.backgroundImageSize({width:55})
.fontColor($r('app.color.white'))
.fontSize(12)
.width(40)
.margin({top:20})
.fontSize('19lpx')
.width('50lpx')
.height('29lpx')
}.margin({top:'15lpx'})
}.alignItems(HorizontalAlign.Start)
.width(200)
.margin({left:10})
.margin({top:'11lpx',left:'17lpx'})
.width('352lpx')
Blank()
Stack({alignContent:Alignment.Start}){
Text("签到")
.textAlign(TextAlign.Center)
.borderRadius({ topLeft:10,bottomLeft:10})
.width(50)
.fontColor($r('app.color.white'))
.textAlign(TextAlign.Start)
.width('108lpx')
.height('46lpx')
.fontColor($r('app.color.color_AD6000'))
.backgroundColor($r('app.color.color_FFC460'))
.margin({left:20})
.fontWeight(500)
.position({x:'23lpx'})
.padding({left:'35lpx'})
Image($r("app.media.mine_sign_icon"))
.width(30)
.height(30)
}.width(60)
}
.width('50lpx')
.height('50lpx')
}.width('131lpx')
}.setBackGroundWhite()
.setFullWidth()
.margin({top:30})
.padding({top:'31lpx',left:'46lpx'})
}
@Builder GridUI(){
Column(){
Grid(){
ForEach(this.icons,(item:MineFunctionModel,index:number)=>{
ForEach(this.personalData,(item:MinePagePersonalFunctionsItem,index:number)=>{
GridItem(){
Row(){
Column(){
Image(item.imgSrc)
.width(30)
.height(30)
.width('46lpx')
.height('46lpx')
Text(`${item.msg}`)
.margin({top:2})
.fontColor($r('app.color.white'))
.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.icons.length){
Text().backgroundColor($r('app.color.white'))
.width(2)
.height(15)
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')
// .columnsGap(10)
.height(140)
.margin({top:15 })
.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)
}
@Builder CardUI(){
}.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'))
.width(170)
.setFullWidthAndHeight()
.objectFit(ImageFit.Auto)
Column(){
Text("积分商城")
.fontColor($r('app.color.color_FF2E0C'))
.width(120)
.fontColor($r('app.color.color_994D00'))
.width('119lpx')
.height('35lpx')
.textAlign(TextAlign.Start)
.fontSize('29lpx')
Text("华为MATE40手机")
.width(120)
.width('159lpx')
.height('23lpx')
.fontColor($r('app.color.color_FF2E0C'))
.fontSize(14)
.margin({top:3})
}.padding({left:20})
.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'))
.width(170)
.setFullWidthAndHeight()
.objectFit(ImageFit.Auto)
Column(){
Text("数字藏品").fontColor($r('app.color.color_AD6000'))
.width(120)
Text("黑胶唱片NFT").width(120)
.fontColor($r('app.color.color_AD6000'))
.fontSize(14)
.margin({top:3})
}.padding({left:30})
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('100%')
.height(70)
.width('348lpx')
.height('115lpx')
}.setFullWidth()
.height('115lpx')
.setPadding()
}
@Builder ScrollUI(){
Scroll(this.scroller){
@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')
}.height(600)
.setFullWidth()
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'))
}.setFullWidth()
.layoutWeight(1)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)
.setMargining()
.borderRadius(8)
}
@Styles setFullWidthAndHeight(){
... ... @@ -221,13 +367,25 @@ export struct MinePageComponent {
}
@Styles setFullHeight(){
.width('100%')
.height('100%')
}
@Styles setPadding(){
.padding({left:'23lpx',right:'23lpx'})
}
@Styles setMargining(){
.margin({left:'23lpx',right:'23lpx'})
}
@Styles setBackGroundWhite(){
.backgroundColor($r('app.color.white'))
}
change(){
router.pushUrl({
url: 'pages/IndexPage',
params: {
}
}).catch((error: Error) => {
});
... ...
import MinePagePersonalFunctionsItem from '../viewmodel/MinePagePersonalFunctionsItem'
import MinePageCreatorFunctionsItem from '../viewmodel/MinePageCreatorFunctionsItem'
import MinePageMoreFunctionModel from '../viewmodel/MinePageMoreFunctionModel';
/**
* 我的页面 所有数据 获取封装类
*/
class MinePageDatasModel{
private static instance: MinePageDatasModel;
personalData:MinePagePersonalFunctionsItem[] = []
creatorData:MinePageCreatorFunctionsItem[] = []
moreData:MinePageMoreFunctionModel[] = []
private constructor() { }
/**
* 单例模式
* @returns
*/
public static getInstance(): MinePageDatasModel {
if (!MinePageDatasModel.instance) {
MinePageDatasModel.instance = new MinePageDatasModel();
}
return MinePageDatasModel.instance;
}
/**
* 评论 关注 收藏 等7个数据
* 包含名字和图标
*/
getPersonalFunctionsData():MinePagePersonalFunctionsItem[]{
if(this.personalData.length === 7){
return this.personalData
}
this.personalData.push(new MinePagePersonalFunctionsItem("评论",$r('app.media.mine_comment_icon')))
this.personalData.push(new MinePagePersonalFunctionsItem("关注",$r('app.media.mine_order_icon')))
this.personalData.push(new MinePagePersonalFunctionsItem("收藏",$r('app.media.mine_collect_icon')))
this.personalData.push(new MinePagePersonalFunctionsItem("历史",$r('app.media.mine_history_icon')))
this.personalData.push(new MinePagePersonalFunctionsItem("消息",$r('app.media.mine_msg_icon')))
this.personalData.push(new MinePagePersonalFunctionsItem("留言板",$r('app.media.mine_msgboard_icon')))
this.personalData.push(new MinePagePersonalFunctionsItem("预约",$r('app.media.mine_order_icon')))
return this.personalData
}
/**
* 发布文章 发布视频 等4个数据
* 包含名字和图标
*/
getCreatorFunctionsData():MinePageCreatorFunctionsItem[]{
if(this.creatorData.length === 4){
return this.creatorData
}
this.creatorData.push(new MinePageCreatorFunctionsItem("发布文章",$r('app.media.mine_active_create_article')))
this.creatorData.push(new MinePageCreatorFunctionsItem("发布视频",$r('app.media.mine_active_create_video')))
this.creatorData.push(new MinePageCreatorFunctionsItem("发布动态",$r('app.media.mine_active_create_video')))
this.creatorData.push(new MinePageCreatorFunctionsItem("发布图集",$r('app.media.mine_active_create_pics')))
return this.creatorData
}
/**
* 更多功能 扫一扫 我的奖品 等6个数据
* 包含名字和图标
*/
getMoreFunctionsData():MinePageCreatorFunctionsItem[]{
if(this.moreData.length === 6){
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')))
this.moreData.push(new MinePageMoreFunctionModel("设置",$r('app.media.mine_setting')))
this.moreData.push(new MinePageMoreFunctionModel("关于",$r('app.media.mine_about')))
return this.moreData
}
}
const minePageDatasModel = MinePageDatasModel.getInstance()
export default minePageDatasModel as MinePageDatasModel
\ No newline at end of file
... ...
import FunctionsItem from './FunctionsItem';
export default class MinePageCreatorFunctionsItem extends FunctionsItem{
}
\ No newline at end of file
... ...
import FunctionsItem from './FunctionsItem'
export default class MinePageMoreFunctionModel extends FunctionsItem{
}
\ No newline at end of file
... ...
import FunctionsItem from './FunctionsItem'
export default class MinePagePersonalFunctionsItem extends FunctionsItem {
}
\ No newline at end of file
... ...
... ... @@ -63,6 +63,22 @@
{
"name": "color_AD6000",
"value": "#AD6000"
},
{
"name": "color_F9F9F9",
"value": "#F9F9F9"
},
{
"name": "color_994D00",
"value": "#994D00"
},
{
"name":"color_B15900",
"value": "#B15900"
},
{
"name": "main_red",
"value": "#E84026"
}
]
}
\ No newline at end of file
... ...