功能完善

wwf

3 天以前 23fa268f56dcd99c8dcd46f50f3ffcaa4cdcbc49

 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 { 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 {
  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高级：JVM深度调优与JVM深度调优', '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(
      `${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() {
@@ -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,7 +339,7 @@
                        router.pushUrl({
                          url: 'pages/home/ActiveDetail',
                          params: {
                            index: index
                            id: item.id
                          }
                        })
                      })
@@ -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')
@@ -345,8 +444,7 @@
                .friction(0.6)
                .edgeEffect(EdgeEffect.Spring)
                .width('100%')
                .height(530)

                .height(580)
              }
              .height('100%')
            }.tabBar(this.tabBarItem(item.title, index))