import { ComponentContent, router } from "@kit.ArkUI"
|
import { PromptActionClass } from '../../utils/PromptActionClass';
|
|
class accountListItem {
|
title: string = ''
|
icon: string | Resource = ''
|
}
|
class DialogParams {
|
text: string = "";
|
|
constructor(text: string) {
|
this.text = text;
|
}
|
}
|
@Builder
|
function buildText(params: DialogParams) {
|
Column({ space: 12 }) {
|
Text('已沟通')
|
.width('100%')
|
.fontSize(18)
|
.fontWeight(700)
|
.textAlign(TextAlign.Center)
|
Text('4')
|
.fontSize(26)
|
.fontWeight(700)
|
.fontColor('#1761f4')
|
.width('100%')
|
.textAlign(TextAlign.Center)
|
Text('累计沟通岗位数')
|
.fontSize(14)
|
.fontColor('#666666')
|
Text('您是职场中的中流砥柱')
|
.width('100%')
|
.textAlign(TextAlign.Center)
|
.padding(16)
|
.fontSize(14)
|
.fontColor(Color.Black)
|
.fontWeight(500)
|
.backgroundColor('#f6f7fa')
|
}
|
.width(300)
|
.padding(20)
|
.borderRadius(14)
|
.backgroundColor(Color.White)
|
}
|
|
@Builder
|
function buildText1(params: DialogParams) {
|
Column({ space: 12 }) {
|
Text('帮助中心')
|
.width('100%')
|
.fontSize(18)
|
.fontWeight(700)
|
.fontColor(Color.Black)
|
.textAlign(TextAlign.Center)
|
Text('400-100-1212')
|
.fontSize(26)
|
.fontWeight(700)
|
.fontColor(Color.Black)
|
.width('100%')
|
.textAlign(TextAlign.Center)
|
Button('拨打电话')
|
.width('100%')
|
.type(ButtonType.Normal)
|
.borderRadius(8)
|
}
|
.width(300)
|
.padding(20)
|
.borderRadius(14)
|
.backgroundColor(Color.White)
|
}
|
|
@Entry
|
@Component
|
export struct AccountPage {
|
@State ListItems: accountListItem[] = [
|
{ title: '隐私设置', icon: $r('app.media.account_setting') },
|
{ title: '消息通知', icon: $r('app.media.account_message') },
|
{ title: '帮助中心', icon: $r('app.media.account_help') },
|
{ title: '关于我们', icon: $r('app.media.account_info') },
|
]
|
@State dialogMessage: string = '注册成功';
|
private ctx: UIContext = this.getUIContext();
|
private contentNode: ComponentContent<Object> =
|
new ComponentContent(this.ctx, wrapBuilder(buildText), new DialogParams((this.dialogMessage)));
|
params: DialogParams = new DialogParams('注册成功')
|
|
aboutToAppear(): void {
|
PromptActionClass.setContext(this.ctx);
|
PromptActionClass.setContentNode(this.contentNode);
|
PromptActionClass.setOptions({ alignment: DialogAlignment.Center, offset: { dx: 0, dy: 0 } });
|
}
|
build() {
|
Column() {
|
Text('个人中心')
|
.fontSize(20)
|
.fontWeight(700)
|
.textAlign(TextAlign.Center)
|
.width('100%')
|
.backgroundColor(Color.White)
|
.padding({ top: 10, bottom: 10 })
|
|
Column({ space: 10 }) {
|
Row() {
|
Image($r('app.media.me_icon'))
|
.width(50)
|
.height(50)
|
Column() {
|
Text('李强')
|
.fontSize(16)
|
.width('100%')
|
.fontWeight(600)
|
.fontColor(Color.Black)
|
.textAlign(TextAlign.Start)
|
Text('男 | 28岁 | 前端开发工程师')
|
.fontColor('#333333')
|
.fontSize(14)
|
.width('100%')
|
.textAlign(TextAlign.Start)
|
}
|
.width(100)
|
.height(40)
|
.margin({ left: 10 })
|
.justifyContent(FlexAlign.SpaceBetween)
|
.layoutWeight(1)
|
Image($r('app.media.chevron_right'))
|
.width(18)
|
.height(18)
|
}
|
.width('100%')
|
.onClick(() =>{
|
router.pushUrl({
|
url: ''
|
})
|
})
|
|
Column({ space: 16 }) {
|
Row() {
|
Text('学习记录')
|
.fontSize(16)
|
.fontColor(Color.White)
|
.fontWeight(700)
|
Text('去应聘 > ')
|
.fontSize(13)
|
.borderRadius(20)
|
.fontWeight(500)
|
.backgroundColor(Color.White)
|
.padding({ left: 10, right: 10, top: 4, bottom: 4 })
|
.fontColor('#1756f4')
|
}
|
.width('100%')
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
Text('当前学习级别：青铜')
|
.width('100%')
|
.fontColor(Color.White)
|
.fontSize(14)
|
Row() {
|
Column({ space: 4 }) {
|
Text('学习时长')
|
.fontColor(Color.White)
|
.fontSize(12)
|
.width('100%')
|
Text() {
|
Span('10').fontWeight(700).fontSize(14)
|
Span('分钟').fontSize(12)
|
}
|
.width('100%')
|
.fontColor(Color.White)
|
}
|
.width(80)
|
Column({ space: 4 }) {
|
Text('学习最长的课程')
|
.fontColor(Color.White)
|
.fontSize(12)
|
.width('100%')
|
Text('全栈开发：前后端打通实战')
|
.fontWeight(700)
|
.fontSize(14)
|
.width('100%')
|
.fontColor(Color.White)
|
}
|
}
|
.width('100%')
|
}
|
.width('100%')
|
.padding(16)
|
.borderRadius(14)
|
.linearGradient({
|
direction: GradientDirection.Right,
|
colors: [['#36BCFF', 0.0], ['#2D74FF', 1.0]]
|
})
|
}
|
.backgroundColor(Color.White)
|
.padding(16)
|
.margin({ top: 1 })
|
|
Row() {
|
Column({ space: 6 }) {
|
Image($r('app.media.account_learning'))
|
.width(40)
|
.height(40)
|
Text('学习记录')
|
.fontSize(14)
|
.fontWeight(500)
|
.fontColor(Color.Black)
|
}
|
Column({ space: 6 }) {
|
Image($r('app.media.account_course'))
|
.width(40)
|
.height(40)
|
Text('课程收藏')
|
.fontSize(14)
|
.fontWeight(500)
|
.fontColor(Color.Black)
|
}
|
Column({ space: 6 }) {
|
Image($r('app.media.account_vitae'))
|
.width(40)
|
.height(40)
|
Text('个人简历')
|
.fontSize(14)
|
.fontWeight(500)
|
.fontColor(Color.Black)
|
}
|
Column({ space: 6 }) {
|
Image($r('app.media.account_communicated'))
|
.width(40)
|
.height(40)
|
Text('已沟通')
|
.fontSize(14)
|
.fontWeight(500)
|
.fontColor(Color.Black)
|
}
|
.onClick(() => {
|
console.log('点击')
|
this.contentNode = new ComponentContent(this.ctx, wrapBuilder(buildText), new DialogParams((this.dialogMessage)));
|
PromptActionClass.setContentNode(this.contentNode);
|
PromptActionClass.openDialog()
|
})
|
}
|
.width('100%')
|
.backgroundColor(Color.White)
|
.padding({ bottom: 10 })
|
.justifyContent(FlexAlign.SpaceEvenly)
|
|
Column() {
|
List({ space: 10, initialIndex: 0 }){
|
ForEach(this.ListItems, (item: accountListItem) => {
|
ListItem() {
|
Row() {
|
Image(item.icon)
|
.width(20)
|
.height(20)
|
Text(item.title)
|
.fontSize(13)
|
.fontWeight(500)
|
.fontColor(Color.Black)
|
.layoutWeight(1)
|
.margin({ left: 8 })
|
|
Image($r('app.media.chevron_right'))
|
.width(12)
|
.height(12)
|
}
|
.width('100%')
|
.padding(8)
|
.onClick(() => {
|
if (item.title == '隐私设置') {
|
router.pushUrl({
|
url: ''
|
})
|
} else if (item.title == '消息通知') {
|
|
} else if (item.title == '帮助中心') {
|
this.contentNode = new ComponentContent(this.ctx, wrapBuilder(buildText1), new DialogParams((this.dialogMessage)));
|
PromptActionClass.setContentNode(this.contentNode);
|
PromptActionClass.openDialog()
|
} else if (item.title == '关于我们') {
|
|
}
|
})
|
}
|
})
|
}
|
.listDirection(Axis.Vertical) // 排列方向
|
.scrollBar(BarState.Off)
|
.friction(0.6)
|
.edgeEffect(EdgeEffect.Spring)
|
.width('100%')
|
.divider({strokeWidth: 1,color: '#f0f0f0'})
|
}
|
.padding(16)
|
.backgroundColor(Color.White)
|
.margin({ top: 1 })
|
|
Column() {
|
Button('退出应用')
|
.fontSize(14)
|
.height(36)
|
.type(ButtonType.Normal)
|
.borderRadius(6)
|
.width('100%')
|
.fontColor(Color.White)
|
.backgroundColor('#1761f4')
|
}
|
.padding(16)
|
.width('100%')
|
.background(Color.White)
|
.height(300)
|
|
}
|
.backgroundColor('#f5f5f7')
|
.height('100%')
|
.width('100%')
|
}
|
}
|
