import { ComponentContent, promptAction, router } from "@kit.ArkUI"
|
import { PromptActionClass } from '../../utils/PromptActionClass';
|
import { http } from "@kit.NetworkKit";
|
import { HttpResponseResult } from "../../data/HttpResponse";
|
import { common } from "@kit.AbilityKit";
|
import { DOMAIN } from "../../utils/config";
|
|
export class UserInfo {
|
nickName: string = ''
|
mobilePhone: string = ''
|
age: string = ''
|
gender: string = ''
|
job: string = ''
|
preferJob: string = ''
|
introduce: string = ''
|
}
|
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)
|
}
|
|
@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('注册成功')
|
@State userInfo: UserInfo = {
|
nickName: '',
|
mobilePhone: '',
|
age: '',
|
gender: '',
|
job: '',
|
preferJob: '',
|
introduce: '',
|
}
|
@Link selectIndex: number | undefined;
|
|
aboutToAppear(): void {
|
PromptActionClass.setContext(this.ctx);
|
PromptActionClass.setContentNode(this.contentNode);
|
PromptActionClass.setOptions({ alignment: DialogAlignment.Center, offset: { dx: 0, dy: 0 } });
|
this.getUserInfo()
|
}
|
|
getUserInfo() {
|
let httpRequest = http.createHttp();
|
httpRequest.request(
|
`${DOMAIN}/quiz-community/public/v1.0/users/userinfo`,
|
{
|
method: http.RequestMethod.GET,
|
header: { 'Content-Type': 'application/json', 'x-jwt-token': `Bearer ${AppStorage.get('x-jwt-token')}` },
|
},
|
(err, data) => {
|
console.log('response', '/users/userinfo')
|
console.log(JSON.stringify(data.result))
|
if (data.responseCode == 200) {
|
const resData = (typeof data.result == 'string' ? JSON.parse(data.result) : data.result) as HttpResponseResult<UserInfo>
|
if (resData.code == 200) {
|
this.userInfo = resData.data as UserInfo
|
} else {
|
promptAction.showToast({ message: resData.msg })
|
}
|
}
|
}
|
)
|
}
|
|
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(this.userInfo.nickName || '李强')
|
.fontSize(16)
|
.width('100%')
|
.fontWeight(600)
|
.fontColor(Color.Black)
|
.textAlign(TextAlign.Start)
|
Text(`${this.userInfo.gender || '男'} | ${this.userInfo.age || 28}岁 | ${this.userInfo.job || '前端开发工程师'}`)
|
.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(14)
|
.height(14)
|
}
|
.width('100%')
|
.onClick(() =>{
|
router.pushUrl({
|
url: 'pages/account/UserInfoPage'
|
})
|
})
|
|
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')
|
.onClick(() => {
|
this.selectIndex = 1
|
})
|
}
|
.width('100%')
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
Row() {
|
Text('当前学习级别：青铜')
|
.fontColor(Color.White)
|
.fontSize(14)
|
Image($r('app.media.bronze_icon'))
|
.width(20)
|
.height(20)
|
.margin({ left: 6 })
|
}
|
.width('100%')
|
.justifyContent(FlexAlign.Start)
|
|
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)
|
}
|
.onClick(() => {
|
router.pushUrl({
|
url: 'pages/account/LearningRecordPage'
|
})
|
})
|
|
Column({ space: 6 }) {
|
Image($r('app.media.account_course'))
|
.width(40)
|
.height(40)
|
Text('课程收藏')
|
.fontSize(14)
|
.fontWeight(500)
|
.fontColor(Color.Black)
|
}
|
.onClick(() => {
|
router.pushUrl({
|
url: 'pages/account/CourseCollection'
|
})
|
})
|
|
Column({ space: 6 }) {
|
Image($r('app.media.account_vitae'))
|
.width(40)
|
.height(40)
|
Text('个人简历')
|
.fontSize(14)
|
.fontWeight(500)
|
.fontColor(Color.Black)
|
}
|
.onClick(() => {
|
router.pushUrl({
|
url: 'pages/account/PersonVitae'
|
})
|
})
|
|
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: 'pages/account/SettingPage'
|
})
|
} else if (item.title == '消息通知') {
|
router.pushUrl({
|
url: 'pages/account/MessagePushPage'
|
})
|
} 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 == '关于我们') {
|
router.pushUrl({
|
url: 'pages/account/AboutPage'
|
})
|
}
|
})
|
}
|
})
|
}
|
.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')
|
.onClick(() => {
|
(getContext(this) as common.UIAbilityContext)?.terminateSelf()
|
})
|
}
|
.padding(16)
|
.width('100%')
|
.backgroundColor(Color.White)
|
.height(300)
|
|
}
|
.backgroundColor('#f5f5f7')
|
.height('100%')
|
.width('100%')
|
}
|
}
|
