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 | 258 +++++++++++++++++++++++++++++++++++----------------
1 files changed, 178 insertions(+), 80 deletions(-)
diff --git a/entry/src/main/ets/pages/home/Home.ets b/entry/src/main/ets/pages/home/Home.ets
index 47cf6dd..f4369e9 100644
--- a/entry/src/main/ets/pages/home/Home.ets
+++ b/entry/src/main/ets/pages/home/Home.ets
@@ -1,81 +1,70 @@
-import { router } from "@kit.ArkUI"
+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 {
- title: string = ''
- desc: string = ''
- count: string = ''
- time: string = ''
- difficult: string = ''
+ 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 = 1
+ @State activeIndex:number = 0
@State tabList: TabBarBase[] = [
{ title: '棣栭〉' },
{ 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 courseList: Course[] = [
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: 'Java楂樼骇锛欽VM娣卞害璋冧紭涓嶫VM娣卞害璋冧紭', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
- { title: '闆跺熀纭�鍒颁紒涓氱骇椤圭洰瀹炴垬', 'desc': '閽堝闆跺熀纭�灏忕櫧鎴栨兂鍗囩骇鎶�鏈爤鐨勫墠绔粠涓氳�咃紝浠庢牳蹇冭娉曞叆鎵嬶紝閫愭娣卞叆Vue3缁勪欢寮�鍙戞墦浠跺紑鍙戜欢寮�鍙�', count: '800', time: '01:30:23', difficult: '绠�鍗�' },
-
- ]
+ @State activityList: Activity[] = []
+ @State origCourseList: Course[] = []
+ @State courseList: Course[] = []
+ @State @Watch('filterCourseList') searchKeyword: string = ''
@Builder tabBarItem(name:string,index: number){
Row(){
@@ -93,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() {
@@ -127,16 +225,16 @@
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(() => {
- this.getUIContext().getRouter().pushUrl({
+ router.push({
url: 'pages/home/BannerDetail',
params: {
- id: index
+ bannerId: item.id
}
})
})
@@ -169,10 +267,11 @@
.fontWeight(500)
}
.onClick(() => {
+ if (!item.value) return
router.pushUrl({
url: 'pages/home/ClassificationDetail',
params: {
- title: item.title
+ moduleName: item.value
}
})
})
@@ -202,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 })
@@ -217,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)
@@ -240,12 +339,12 @@
router.pushUrl({
url: 'pages/home/ActiveDetail',
params: {
- index: index
+ id: item.id
}
})
})
}
- }, (index: number) => index.toString())
+ })
}
.listDirection(Axis.Vertical) // 鎺掑垪鏂瑰悜
.scrollBar(BarState.Off)
@@ -253,7 +352,7 @@
.divider({ strokeWidth: 1, color: '#e8e8e8' }) // 姣忚涔嬮棿鐨勫垎鐣岀嚎
.edgeEffect(EdgeEffect.Spring)
.width('100%')
- .height(300)
+ .height(360)
}
.height('100%')
}
@@ -269,7 +368,7 @@
Image($r('app.media.search_icon'))
.width(14)
.height(14)
- TextInput({ placeholder: '鎼滅储鎯宠鏌ユ壘鐨勫唴瀹�' })
+ TextInput({ placeholder: '鎼滅储鎯宠鏌ユ壘鐨勫唴瀹�', text: $$this.searchKeyword })
.placeholderFont({ size: 14})
.placeholderColor('#999999')
.backgroundColor('#f3f7fe')
@@ -284,12 +383,12 @@
ListItem() {
Row({ space: 10 }) {
Column() {
- Text(item.title)
+ Text(item.name)
.fontSize(14)
.fontWeight(800)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
- Text(item.desc)
+ Text(item.description)
.fontSize(12)
.fontColor('#666666')
.maxLines(2)
@@ -299,7 +398,7 @@
Image($r('app.media.person_icon'))
.width(10)
.height(10)
- Text(item.count)
+ Text(`${item.playCount}`)
.fontSize(10)
.fontColor('#666666')
}
@@ -307,13 +406,13 @@
Image($r('app.media.video_icon'))
.width(10)
.height(10)
- Text(item.time)
+ Text(`${item.duration}`)
.fontSize(10)
.fontColor('#666666')
}
Text() {
Span('璇剧▼闅惧害: ')
- Span(item.difficult)
+ Span(this.getDifficultText(item.difficulty))
}
.fontSize(10)
.fontColor('#666666')
@@ -338,15 +437,14 @@
.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(530)
-
+ .height(580)
}
.height('100%')
}.tabBar(this.tabBarItem(item.title, index))
--
Gitblit v1.8.0