鸿蒙ArkTS/ArkUI电商实战-分类页

鸿蒙ArkTS/ArkUI电商实战系列

• 闪屏页
• 主框架导航
• 首页
• 注册页
• 登录页
• 个人中心
• 分类页
• 聊天页
• 全局添加加载loading提示

本章内容

分类页，列表联动查看分类

效果图：

相关源码：
Items

// CourseItem.ets
import CourseModel from '../model/CourseModel';
@Component
export default struct CourseItem {
  @Prop itemStr: string;
  item?: CourseModel;

  aboutToAppear() {
    this.item = JSON.parse(this.itemStr);
  }

  build() {
    Row() {
      Image(this.item !== undefined ? this.item?.imageUrl : '')
        .height('100%')
        .aspectRatio(1)
        .clip(true)
        .borderRadius(18)
      Column() {
        Text(this.item?.courseName)
          .width('100%')
        Text(this.item?.price === 0 ? "" : "¥" + String(this.item?.price))
          .fontColor(Color.Orange)
      }
      .padding(12)
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.SpaceBetween)
      .height('100%')
    }
    .padding({top: 10, bottom:5})
    .backgroundColor($r('app.color.start_window_background'))
    .width('100%')
    .height(96)
  }
}


// ClassifyItem.ets
@Component
export default struct ClassifyItem {
  classifyName?: string;
  @Prop isSelected: boolean;
  onClickAction = () => {}

  build() {
    Text(this.classifyName)
      .fontSize(16)
      .textAlign(TextAlign.Center)
      .backgroundColor(this.isSelected ? Color.White : '')
      .width('100%')
      .height(56)
      .onClick(this.onClickAction)
  }
}

models

// ClassifyModel.ets
import CourseModel from './CourseModel';

/**
 * course classity model
 */
export default class ClassifyModel {
  /**
   * classify id
   */
  classifyId: number;
  /**
   * classify name
   */
  classifyName: string;
  /**
   * course list of the classify.
   */
  courseList: Array<CourseModel>;

  constructor(classifyId: number, classifyName: string, courseList: Array<CourseModel>) {
    this.classifyId = classifyId;
    this.classifyName = classifyName;
    this.courseList = courseList;
  }
}


// CourseModel.ets
export default class CourseModel {
  classifyId: number;
  courseId: number;
  courseName: string;
  imageUrl: Resource;
  price: number;

  constructor(classifyId: number, courseId: number, courseName: string, imageUrl: Resource, price: number) {
    this.classifyId = classifyId;
    this.courseId = courseId;
    this.courseName = courseName;
    this.imageUrl = imageUrl;
    this.price = price;
  }
}

// LinkDataModel.ets
export default class LinkDataModel {
  /**
   * parentId
   */
  superId: number;
  /**
   * ParentName
   */
  superName: string;
  id: number;
  courseName: string;
  imageUrl: Resource;
  price: number;

  constructor(superId: number, superName: string, id: number, courseName: string, imageUrl: Resource, price: number) {
    this.superId = superId;
    this.superName = superName;
    this.id = id;
    this.courseName = courseName;
    this.imageUrl = imageUrl;
    this.price = price;
  }
}

ClassifyViewModel.ets