Browse Source

Merge branch 'master' of codehub-cn-south-1.devcloud.huaweicloud.com:web3000003/web-0210402

flowaaa 1 year ago
parent
commit
953b983aad

+ 37 - 5
app-angular/src/modules/lesson/page-lesson/page-lesson.component.html

@@ -1,12 +1,39 @@
 <!--侧边栏-->
 <ion-menu contentId="main-content">
     <ion-header>
-        <ion-toolbar>
-            <ion-title>Menu Content</ion-title>
-        </ion-toolbar>
+      <ion-toolbar>
+        <ion-title>食物分类</ion-title>
+      </ion-toolbar>
     </ion-header>
-    <ion-content class="ion-padding">This is the menu content.</ion-content>
-</ion-menu>
+    <ion-content class="ion-padding">
+      <ion-item (click)="scrollToCardSection('热门')">
+        热门
+      </ion-item>
+      <ion-item (click)="scrollToCardSection('水果')">
+        水果
+      </ion-item>
+      <ion-item (click)="scrollToCardSection('零食')">
+        零食
+      </ion-item>
+      <ion-item (click)="scrollToCardSection('零食')">
+        主食
+      </ion-item>
+      <ion-item (click)="scrollToCardSection('零食')">
+        果蔬类
+      </ion-item>
+      <ion-item (click)="scrollToCardSection('零食')">
+        肉蛋类
+      </ion-item>
+      <ion-item (click)="scrollToCardSection('零食')">
+        菌菇类
+      </ion-item>
+      <ion-item (click)="scrollToCardSection('零食')">
+        调味品
+      </ion-item>
+      <!-- 其他分类项 -->
+    </ion-content>
+  </ion-menu>
+  
 <!--主页面-->
 <div class="ion-page" id="main-content">
     <!--搜索栏-->
@@ -21,6 +48,7 @@
     </ion-header>
     <!--课程卡片区-->
     <ion-content>
+        <div id="card-section-热门">
         <ion-grid>
             <ion-row>
                 <ng-container *ngFor="let course of courseList; let i = index">
@@ -46,6 +74,10 @@
                 </ng-container>
             </ion-row>
         </ion-grid>
+    </div>
+        
     </ion-content>
 
+    
+
 </div>

+ 26 - 0
app-angular/src/modules/lesson/page-lesson/page-lesson.component.ts

@@ -52,7 +52,33 @@ export class PageLessonComponent {
     this.courseList = this.courseList.concat(list)
     infiScroll?.complete();
   }
+  scrollToCardSection(category: string) {
+    const cardSection = document.getElementById(`card-section-${category}`);
+    if (cardSection) {
+      cardSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }
+  
+  groupedCourseList: any[] = [];
 
+  // 在获取课程数据后,将课程按照每4个为一组进行分组
+  // groupCoursesByCategory() {
+  //   const coursesPerCategory = 4;
+  //   const totalCourses = this.courseList.length;
+  //   const totalCategories = Math.ceil(totalCourses / coursesPerCategory);
+  
+  //   for (let i = 0; i < totalCategories; i++) {
+  //     const startIndex = i * coursesPerCategory;
+  //     const endIndex = startIndex + coursesPerCategory;
+  //     const categoryCourses = this.courseList.slice(startIndex, endIndex);
+  //     this.groupedCourseList.push(categoryCourses);
+  //   }
+  // }
+  // ngOnInit() {
+  //   this.groupCoursesByCategory();
+  // }
+  
+  
 
   goLessonDetail(lesson: any) {
     this.router.navigate(["/lesson/lesson/detail"], { queryParams: lesson })