完善功能

wwf

6 天以前 e794ed885a75be8ab5c789c2ea8db902ce338b0b

 entry/src/main/ets/pages/home/Home.ets

@@ -1,3 +1,5 @@
import { router } from "@kit.ArkUI"

class TabBarBase {
  title: string = ''
}
@@ -11,11 +13,19 @@
  signupCount: number = 0
  statusText: string = ''
}
class Course {
  title: string = ''
  desc: string = ''
  count: string = ''
  time: string = ''
  difficult: string = ''
}

@Entry
@Component
export struct Home {
  @State pageHeight: number = 0
  @State activeIndex:number = 0
  @State activeIndex:number = 1
  @State tabList: TabBarBase[] = [
    { title: '首页' },
    { title: '课程' }
@@ -46,6 +56,25 @@
    { 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: '简单' },

  ]

  @Builder tabBarItem(name:string,index: number){
@@ -94,7 +123,7 @@
      Tabs({controller:this.tabController}){
        ForEach(this.tabList, (item: TabBarBase, index: number) => {
          // 首页 ------------
          if (item.title == '首页') {
          if (this.activeIndex == 0) {
            TabContent() {
              Column({ space: 10 }){
                Swiper() {
@@ -103,6 +132,14 @@
                      .width('100%')
                      .height(120)
                      .backgroundColor(0xAFEEEE)
                      .onClick(() => {
                        this.getUIContext().getRouter().pushUrl({
                          url: 'pages/home/BannerDetail',
                          params: {
                            id: index
                          }
                        })
                      })
                  })
                }
                .borderRadius(10)
@@ -131,6 +168,14 @@
                          .fontSize(12)
                          .fontWeight(500)
                      }
                      .onClick(() => {
                        router.pushUrl({
                          url: 'pages/home/ClassificationDetail',
                          params: {
                            title: item.title
                          }
                        })
                      })
                    }
                  })
                }
@@ -191,6 +236,14 @@
                      .height(100)
                      .padding(10)
                      .justifyContent(FlexAlign.SpaceBetween)
                      .onClick(() => {
                        router.pushUrl({
                          url: 'pages/home/ActiveDetail',
                          params: {
                            index: index
                          }
                        })
                      })
                    }
                  }, (index: number) => index.toString())
                }
@@ -209,10 +262,93 @@
          }

          // 课程------------
          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: '搜索想要查找的内容' })
                    .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.title)
                            .fontSize(14)
                            .fontWeight(800)
                            .maxLines(1)
                            .textOverflow({ overflow: TextOverflow.Ellipsis })
                          Text(item.desc)
                            .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.count)
                                .fontSize(10)
                                .fontColor('#666666')
                            }
                            Row({ space: 2 }) {
                              Image($r('app.media.video_icon'))
                                .width(10)
                                .height(10)
                              Text(item.time)
                                .fontSize(10)
                                .fontColor('#666666')
                            }
                            Text() {
                              Span('课程难度: ')
                              Span(item.difficult)
                            }
                            .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(530)

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