From 791a96ae03cf92478244127b294c1fe520d31e89 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期六, 11 十月 2025 11:17:10 +0800
Subject: [PATCH] 优化
---
entry/src/main/ets/pages/home/Home.ets | 322 ++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 278 insertions(+), 44 deletions(-)
diff --git a/entry/src/main/ets/pages/home/Home.ets b/entry/src/main/ets/pages/home/Home.ets
index 4f6cbe7..f4369e9 100644
--- a/entry/src/main/ets/pages/home/Home.ets
+++ b/entry/src/main/ets/pages/home/Home.ets
@@ -1,16 +1,41 @@
+import { promptAction, router } from "@kit.ArkUI"
+import http from '@ohos.net.http';
+import { HttpResponseResult } from "../../data/HttpResponse";
+import { JSON } from "@kit.ArkTS";
+import { DOMAIN } 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 {
- title: string = ''
- timeScope: string = ''
- signupCount: number = 0
- statusText: string = ''
+ 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 {
@@ -21,32 +46,25 @@
{ title: '璇剧▼' }
]
private tabController: TabsController = new TabsController()
- @State swiperList: ResourceStr[] = [
- $r('app.media.image1'),
- $r('app.media.image1'),
- $r('app.media.image1'),
- ]
+ @State swiperList: SwiperItem[] = []
@State swiperIndex: number = 0
//TabBar鏍峰紡
@State classificationList: Classification[] = [
- { title: '鏁伴��', icon: $r('app.media.classification_shutong') },
- { title: '瀹夊叏', icon: $r('app.media.classification_safety') },
- { title: '浜戣绠�', icon: $r('app.media.classification_cloudcalc') },
- { title: '瀛樺偍', icon: $r('app.media.classification_storage') },
- { title: '椴查箯', icon: $r('app.media.classification_roc') },
- { title: 'AI', icon: $r('app.media.classification_AI') },
- { title: '杩炴帴', icon: $r('app.media.classification_link') },
- { title: '澶ф暟鎹�', icon: $r('app.media.classification_bigdata') },
- { title: '浜戞湇鍔�', icon: $r('app.media.classification_cloudservice') },
- { title: '鏇村', icon: $r('app.media.classification_more') },
+ { 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[] = [
- { title: '鍖椾含浜哄伐鏅鸿兘IE', timeScope: '20250520-20250620', signupCount: 80, statusText: '鎶ュ悕涓�' },
- { title: '鍖椾含浜哄伐鏅鸿兘IE', timeScope: '20250520-20250620', signupCount: 80, statusText: '杩涜涓�' },
- { title: '鍖椾含浜哄伐鏅鸿兘IE', timeScope: '20250520-20250620', signupCount: 80, statusText: '宸茬粨鏉�' },
- { title: '鍖椾含浜哄伐鏅鸿兘IE', timeScope: '20250520-20250620', signupCount: 80, statusText: '鎶ュ悕涓�' },
- { title: '鍖椾含浜哄伐鏅鸿兘IE', timeScope: '20250520-20250620', signupCount: 80, statusText: '宸茬粨鏉�' },
- ]
+ @State activityList: Activity[] = []
+ @State origCourseList: Course[] = []
+ @State courseList: Course[] = []
+ @State @Watch('filterCourseList') searchKeyword: string = ''
@Builder tabBarItem(name:string,index: number){
Row(){
@@ -64,24 +82,133 @@
getTagFontColor(statusText: string) {
switch (statusText) {
- case '鎶ュ悕涓�':
+ case 'signup':
return '#10920e'
- case '杩涜涓�':
+ case 'training':
return '#ffa100'
default :
return '#666666'
}
}
- getTagBgColor(statusText: string) {
- switch (statusText) {
- case '鎶ュ悕涓�':
+ getTagBgColor(status: string) {
+ switch (status) {
+ case 'signup':
return '#d5f2db'
- case '杩涜涓�':
+ 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(
+ `${DOMAIN}/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(
+ `${DOMAIN}/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(
+ `${DOMAIN}/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() {
@@ -94,15 +221,23 @@
Tabs({controller:this.tabController}){
ForEach(this.tabList, (item: TabBarBase, index: number) => {
// 棣栭〉 ------------
- if (item.title == '棣栭〉') {
+ if (this.activeIndex == 0) {
TabContent() {
Column({ space: 10 }){
Swiper() {
- ForEach(this.swiperList, (item: Resource) => {
- Image(item)
+ 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)
@@ -131,6 +266,15 @@
.fontSize(12)
.fontWeight(500)
}
+ .onClick(() => {
+ if (!item.value) return
+ router.pushUrl({
+ url: 'pages/home/ClassificationDetail',
+ params: {
+ moduleName: item.value
+ }
+ })
+ })
}
})
}
@@ -157,14 +301,14 @@
ListItem() {
Row() {
Column({ space: 6 }) {
- Text(item.title)
+ Text(item.name)
.fontSize(12)
.fontWeight(500)
Row() {
Image($r('app.media.date_icon'))
.width(12)
.height(12)
- Text(item.timeScope)
+ Text(`${item.startDate}-${item.endTime}`)
.fontSize(10)
.fontColor('#676767')
.margin({ left: 4 })
@@ -172,13 +316,13 @@
Text(`${item.signupCount || 0}浜哄凡鎶ュ悕`)
.fontSize(10)
.fontColor('#676767')
- Text(item.statusText)
+ Text(this.getStatusText(item.status))
.fontSize(10)
.fontWeight(500)
.padding(6)
.borderRadius(10)
- .fontColor(this.getTagFontColor(item.statusText))
- .backgroundColor(this.getTagBgColor(item.statusText))
+ .fontColor(this.getTagFontColor(item.status))
+ .backgroundColor(this.getTagBgColor(item.status))
}
.height('100%')
.justifyContent(FlexAlign.Start)
@@ -191,8 +335,16 @@
.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)
@@ -200,7 +352,7 @@
.divider({ strokeWidth: 1, color: '#e8e8e8' }) // 姣忚涔嬮棿鐨勫垎鐣岀嚎
.edgeEffect(EdgeEffect.Spring)
.width('100%')
- .height(300)
+ .height(360)
}
.height('100%')
}
@@ -209,10 +361,92 @@
}
// 璇剧▼------------
- if (item.title == '璇剧▼') {
+ if (this.activeIndex == 1) {
TabContent() {
- Text('璇剧▼content')
+ 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)
+ }
+ })
+ }
+ .listDirection(Axis.Vertical) // 鎺掑垪鏂瑰悜
+ .scrollBar(BarState.Off)
+ .friction(0.6)
+ .edgeEffect(EdgeEffect.Spring)
+ .width('100%')
+ .height(580)
+ }
+ .height('100%')
}.tabBar(this.tabBarItem(item.title, index))
}
})
--
Gitblit v1.8.0