import { promptAction, router } from "@kit.ArkUI"
|
import http from '@ohos.net.http';
|
import { HttpResponseResult } from "../../data/HttpResponse";
|
import { JSON } from "@kit.ArkTS";
|
import { ROMAIN } from "../../utils/config";
|
|
class TabBarBase {
|
title: string = ''
|
}
|
class SwiperItem {
|
pic: string = ''
|
id: string = ''
|
sort: number = 0
|
}
|
|
class Classification {
|
title: string = ''
|
value: string = ''
|
icon: ResourceStr = ''
|
}
|
class Activity {
|
id: string = ''
|
name: string = ''
|
pic: string = ''
|
startDate: string = ''
|
endTime: string = ''
|
signupCount: string = ''
|
status: string = ''
|
}
|
class Course {
|
name: string = ''
|
pic: string = ''
|
description: string = ''
|
playCount: number = 0
|
duration: number = 0
|
difficulty: number = 0
|
}
|
|
@Entry
|
@Component
|
export struct Home {
|
@State pageHeight: number = 0
|
@State activeIndex:number = 0
|
@State tabList: TabBarBase[] = [
|
{ title: '首页' },
|
{ title: '课程' }
|
]
|
private tabController: TabsController = new TabsController()
|
@State swiperList: SwiperItem[] = []
|
@State swiperIndex: number = 0
|
//TabBar样式
|
@State classificationList: Classification[] = [
|
{ title: '数通', value: 'shutong', icon: $r('app.media.classification_shutong') },
|
{ title: '安全', value: 'safety', icon: $r('app.media.classification_safety') },
|
{ title: '云计算', value: 'cloudcalc', icon: $r('app.media.classification_cloudcalc') },
|
{ title: '存储', value: 'storage', icon: $r('app.media.classification_storage') },
|
{ title: '鲲鹏', value: 'roc', icon: $r('app.media.classification_roc') },
|
{ title: 'AI', value: 'AI', icon: $r('app.media.classification_AI') },
|
{ title: '连接', value: 'link', icon: $r('app.media.classification_link') },
|
{ title: '大数据', value: 'bigdata', icon: $r('app.media.classification_bigdata') },
|
{ title: '云服务', value: 'cloudservice', icon: $r('app.media.classification_cloudservice') },
|
{ title: '更多', value: '', icon: $r('app.media.classification_more') },
|
]
|
@State activityList: Activity[] = []
|
@State origCourseList: Course[] = []
|
@State courseList: Course[] = []
|
@State @Watch('filterCourseList') searchKeyword: string = ''
|
|
@Builder tabBarItem(name:string,index: number){
|
Row(){
|
Text(name)
|
.fontSize(this.activeIndex == index ? 16 : 14)
|
.fontWeight(700)
|
.fontColor(this.activeIndex == index ? '#1756f4' : '#666666')
|
.margin(index == 0 ? { left: '50%' } : { right: '50%' } )
|
}
|
.onClick(() => {
|
this.activeIndex = index
|
this.tabController.changeIndex(index)
|
})
|
}
|
|
getTagFontColor(statusText: string) {
|
switch (statusText) {
|
case 'signup':
|
return '#10920e'
|
case 'training':
|
return '#ffa100'
|
default :
|
return '#666666'
|
}
|
}
|
|
getTagBgColor(status: string) {
|
switch (status) {
|
case 'signup':
|
return '#d5f2db'
|
case 'training':
|
return '#fff0cc'
|
default :
|
return '#ebebeb'
|
}
|
}
|
|
getStatusText(status: string) {
|
if (status == 'signup') {
|
return '报名中'
|
} else if (status == 'training') {
|
return '进行中'
|
} else if (status == 'finished') {
|
return '已结束'
|
}
|
return ''
|
}
|
|
getDifficultText(difficult: number) {
|
if (difficult == 1) {
|
return '简单'
|
} else if (difficult == 2) {
|
return '中等'
|
} else if (difficult == 3) {
|
return '困难'
|
}
|
return ''
|
}
|
|
filterCourseList() {
|
if (this.searchKeyword) {
|
let list = this.origCourseList.filter((ele: Course) => {
|
return ele.name.includes(this.searchKeyword) || ele.description.includes(this.searchKeyword)
|
})
|
this.courseList = list
|
} else {
|
this.courseList = this.origCourseList
|
}
|
}
|
|
aboutToAppear(): void {
|
this.getBannerList()
|
this.getActivityList()
|
this.getCourseList()
|
}
|
|
getBannerList() {
|
let httpRequest = http.createHttp();
|
httpRequest.request(
|
`${ROMAIN}/quiz-community/public/v1.0/home/slideshows`,
|
{
|
method: http.RequestMethod.GET,
|
header: { 'Content-Type': 'application/json', 'x-jwt-token': `Bearer ${AppStorage.get('x-jwt-token')}` },
|
},
|
(err, data) => {
|
console.log('response', '/home/slideshows')
|
console.log(JSON.stringify(data.result))
|
if (data.responseCode == 200) {
|
const resData = (typeof data.result == 'string' ? JSON.parse(data.result) : data.result) as HttpResponseResult<SwiperItem[]>
|
if (resData.code == 200) {
|
this.swiperList = resData.data || []
|
} else {
|
promptAction.showToast({ message: resData.msg })
|
}
|
}
|
}
|
)
|
}
|
|
getActivityList() {
|
let httpRequest = http.createHttp();
|
httpRequest.request(
|
`${ROMAIN}/quiz-community/public/v1.0/home/hotTraining`,
|
{
|
method: http.RequestMethod.GET,
|
header: { 'Content-Type': 'application/json', 'x-jwt-token': `Bearer ${AppStorage.get('x-jwt-token')}` },
|
},
|
(err, data) => {
|
console.log('response', '/home/hotTraining')
|
console.log(JSON.stringify(data.result))
|
if (data.responseCode == 200) {
|
const resData = (typeof data.result == 'string' ? JSON.parse(data.result) : data.result) as HttpResponseResult<Activity[]>
|
if (resData.code == 200) {
|
this.activityList = resData.data || []
|
} else {
|
promptAction.showToast({ message: resData.msg })
|
}
|
}
|
}
|
)
|
}
|
|
getCourseList() {
|
let httpRequest = http.createHttp();
|
httpRequest.request(
|
`${ROMAIN}/quiz-community/public/v1.0/home/courses`,
|
{
|
method: http.RequestMethod.GET,
|
header: { 'Content-Type': 'application/json', 'x-jwt-token': `Bearer ${AppStorage.get('x-jwt-token')}` },
|
},
|
(err, data) => {
|
console.log('response', '/home/courses')
|
console.log(JSON.stringify(data.result))
|
if (data.responseCode == 200) {
|
const resData = (typeof data.result == 'string' ? JSON.parse(data.result) : data.result) as HttpResponseResult<Course[]>
|
if (resData.code == 200) {
|
this.origCourseList = resData.data || []
|
this.filterCourseList()
|
} else {
|
promptAction.showToast({ message: resData.msg })
|
}
|
}
|
}
|
)
|
}
|
|
build() {
|
Column() {
|
Text('鸿蒙实训首页')
|
.width('100%')
|
.textAlign(TextAlign.Center)
|
.fontWeight(800)
|
.fontSize(18)
|
Tabs({controller:this.tabController}){
|
ForEach(this.tabList, (item: TabBarBase, index: number) => {
|
// 首页 ------------
|
if (this.activeIndex == 0) {
|
TabContent() {
|
Column({ space: 10 }){
|
Swiper() {
|
ForEach(this.swiperList, (item: SwiperItem) => {
|
Image(item.pic)
|
.width('100%')
|
.height(120)
|
.backgroundColor(0xAFEEEE)
|
.onClick(() => {
|
router.push({
|
url: 'pages/home/BannerDetail',
|
params: {
|
bannerId: item.id
|
}
|
})
|
})
|
})
|
}
|
.borderRadius(10)
|
.interval(3000)
|
.autoPlay(true)
|
.indicator(
|
Indicator.dot()
|
.itemWidth(8)
|
.itemHeight(8)
|
.selectedItemWidth(16)
|
.selectedItemHeight(8)
|
.color(Color.White)
|
)
|
.onChange((index) => {
|
this.swiperIndex = index;
|
})
|
|
Grid() {
|
ForEach(this.classificationList, (item: Classification ) => {
|
GridItem() {
|
Column({ space: 6 }) {
|
Image(item.icon)
|
.width(26)
|
.height(26)
|
Text(item.title)
|
.fontSize(12)
|
.fontWeight(500)
|
}
|
.onClick(() => {
|
if (!item.value) return
|
router.pushUrl({
|
url: 'pages/home/ClassificationDetail',
|
params: {
|
moduleName: item.value
|
}
|
})
|
})
|
}
|
})
|
}
|
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
|
.columnsGap(14)
|
.rowsGap(14)
|
.width('100%')
|
.height(110)
|
|
Row() {
|
Image($r('app.media.title_decoration_icon'))
|
.width(4)
|
Text('热门培训')
|
.margin({ left: 8 })
|
.fontSize(16)
|
.fontWeight(700)
|
|
}
|
.alignItems(VerticalAlign.Center)
|
.width('100%')
|
|
List({ space: 10, initialIndex: 0 }) {
|
ForEach(this.activityList, (item: Activity, index: number) => {
|
ListItem() {
|
Row() {
|
Column({ space: 6 }) {
|
Text(item.name)
|
.fontSize(12)
|
.fontWeight(500)
|
Row() {
|
Image($r('app.media.date_icon'))
|
.width(12)
|
.height(12)
|
Text(`${item.startDate}-${item.endTime}`)
|
.fontSize(10)
|
.fontColor('#676767')
|
.margin({ left: 4 })
|
}
|
Text(`${item.signupCount || 0}人已报名`)
|
.fontSize(10)
|
.fontColor('#676767')
|
Text(this.getStatusText(item.status))
|
.fontSize(10)
|
.fontWeight(500)
|
.padding(6)
|
.borderRadius(10)
|
.fontColor(this.getTagFontColor(item.status))
|
.backgroundColor(this.getTagBgColor(item.status))
|
}
|
.height('100%')
|
.justifyContent(FlexAlign.Start)
|
.alignItems(HorizontalAlign.Start)
|
Image($r('app.media.active_list_img'))
|
.aspectRatio(16/9)
|
.height('100%')
|
}
|
.width('100%')
|
.height(100)
|
.padding(10)
|
.justifyContent(FlexAlign.SpaceBetween)
|
.onClick(() => {
|
router.pushUrl({
|
url: 'pages/home/ActiveDetail',
|
params: {
|
id: item.id
|
}
|
})
|
})
|
}
|
}, (index: number) => index.toString())
|
}
|
.listDirection(Axis.Vertical) // 排列方向
|
.scrollBar(BarState.Off)
|
.friction(0.6)
|
.divider({ strokeWidth: 1, color: '#e8e8e8' }) // 每行之间的分界线
|
.edgeEffect(EdgeEffect.Spring)
|
.width('100%')
|
.height(360)
|
}
|
.height('100%')
|
}
|
.tabBar(this.tabBarItem(item.title, index))
|
.height('100%')
|
}
|
|
// 课程------------
|
if (this.activeIndex == 1) {
|
TabContent() {
|
Column({ space: 10 }) {
|
Row() {
|
Image($r('app.media.search_icon'))
|
.width(14)
|
.height(14)
|
TextInput({ placeholder: '搜索想要查找的内容', text: $$this.searchKeyword })
|
.placeholderFont({ size: 14})
|
.placeholderColor('#999999')
|
.backgroundColor('#f3f7fe')
|
}
|
.borderRadius(30)
|
.padding({ left: 20, right: 20 })
|
.backgroundColor('#f3f7fe')
|
.width('100%')
|
|
List({ space: 10, initialIndex: 0 }) {
|
ForEach(this.courseList, (item: Course, index: number) => {
|
ListItem() {
|
Row({ space: 10 }) {
|
Column() {
|
Text(item.name)
|
.fontSize(14)
|
.fontWeight(800)
|
.maxLines(1)
|
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
Text(item.description)
|
.fontSize(12)
|
.fontColor('#666666')
|
.maxLines(2)
|
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
Row() {
|
Row({ space: 2 }) {
|
Image($r('app.media.person_icon'))
|
.width(10)
|
.height(10)
|
Text(`${item.playCount}`)
|
.fontSize(10)
|
.fontColor('#666666')
|
}
|
Row({ space: 2 }) {
|
Image($r('app.media.video_icon'))
|
.width(10)
|
.height(10)
|
Text(`${item.duration}`)
|
.fontSize(10)
|
.fontColor('#666666')
|
}
|
Text() {
|
Span('课程难度: ')
|
Span(this.getDifficultText(item.difficulty))
|
}
|
.fontSize(10)
|
.fontColor('#666666')
|
}
|
.width('100%')
|
.justifyContent(FlexAlign.SpaceBetween)
|
}
|
.layoutWeight(0)
|
.width(170)
|
.height('100%')
|
.justifyContent(FlexAlign.SpaceBetween)
|
.alignItems(HorizontalAlign.Start)
|
Image($r('app.media.active_list_img'))
|
.aspectRatio(16/9)
|
.height('100%')
|
.layoutWeight(1)
|
}
|
.width('100%')
|
.height(100)
|
.padding(10)
|
.justifyContent(FlexAlign.SpaceBetween)
|
.border({ width: 1, style: BorderStyle.Solid, color: '#f2f2f2' })
|
.borderRadius(10)
|
}
|
}, (index: number) => index.toString())
|
}
|
.listDirection(Axis.Vertical) // 排列方向
|
.scrollBar(BarState.Off)
|
.friction(0.6)
|
.edgeEffect(EdgeEffect.Spring)
|
.width('100%')
|
.height(580)
|
}
|
.height('100%')
|
}.tabBar(this.tabBarItem(item.title, index))
|
}
|
})
|
}
|
.barHeight(40)
|
.margin({ top: 6 })
|
.width('100%')
|
.height('100%')
|
.padding({ left: 14, right: 14, bottom: 14 })
|
.onChange((index: number) => {
|
this.activeIndex = index
|
})
|
}
|
.width('100%')
|
.height('100%')
|
|
}
|
}
|
