151. [HarmonyOS NEXT 实战案例十二:List系列] 卡片样式列表组件实战：打造精美电商应用 基础篇

// 商品数据类型定义
type ProductType = {
  id: number,
  name: string,
  image: Resource,
  price: number,
  originalPrice: number,
  discount: string,
  sales: number,
  isNew: boolean,
  isHot: boolean,
  category: string
}

// 分类数据类型
type CategoryType = {
  id: number,
  name: string
}

// 排序选项类型
type SortOptionType = {
  id: number,
  name: string
}

Grid() {
  ForEach(this.productList, (product: ProductType) => {
    GridItem() {
      // 商品卡片内容
      this.ProductCard(product)
    }
  })
}
.columnsTemplate('1fr 1fr') // 两列布局
.columnsGap(8) // 列间距
.rowsGap(8) // 行间距
.padding({ left: 8, right: 8, top: 8, bottom: 8 })

@Builder
ProductCard(product: ProductType) {
  Column() {
    // 商品图片区域
    Stack() {
      Image(product.image)
        .width('100%')
        .aspectRatio(1) // 保持1:1的宽高比
        .objectFit(ImageFit.Cover) // 填充模式
        .borderRadius({ topLeft: 8, topRight: 8 })
      
      // 商品标签（新品/热卖）
      Row() {
        if (product.isNew) {
          Text('新品')
            .fontSize(12)
            .fontColor('#FFFFFF')
            .backgroundColor('#FF5722')
            .padding({ left: 6, right: 6, top: 2, bottom: 2 })
            .borderRadius(4)
            .margin({ right: 4 })
        }
        
        if (product.isHot) {
          Text('热卖')
            .fontSize(12)
            .fontColor('#FFFFFF')
            .backgroundColor('#FF9800')
            .padding({ left: 6, right: 6, top: 2, bottom: 2 })
            .borderRadius(4)
        }
      }
      .position({ x: 8, y: 8 })
    }
    .width('100%')
    
    // 商品信息区域
    Column() {
      // 商品名称
      Text(product.name)
        .fontSize(14)
        .fontColor('#333333')
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .width('100%')
      
      // 价格信息
      Row() {
        Text(`¥${product.price.toFixed(2)}`)
          .fontSize(16)
          .fontColor('#FF5722')
          .fontWeight(FontWeight.Bold)
        
        Text(`¥${product.originalPrice.toFixed(2)}`)
          .fontSize(12)
          .fontColor('#999999')
          .decoration({ type: TextDecorationType.LineThrough })
          .margin({ left: 4 })
      }
      .width('100%')
      .margin({ top: 4 })
      
      // 折扣和销量
      Row() {
        Text(product.discount)
          .fontSize(12)
          .fontColor('#FF5722')
          .backgroundColor('#FFF0E6')
          .padding({ left: 4, right: 4, top: 1, bottom: 1 })
          .borderRadius(2)
        
        Text(`${product.sales}人已购买`)
          .fontSize(12)
          .fontColor('#999999')
          .margin({ left: 4 })
      }
      .width('100%')
      .margin({ top: 4 })
    }
    .width('100%')
    .padding({ left: 8, right: 8, top: 8, bottom: 8 })
  }
  .width('100%')
  .backgroundColor('#FFFFFF')
  .borderRadius(8)
  .onClick(() => {
    // 点击商品卡片的处理逻辑
    console.info(`Product clicked: ${product.name}`);
  })
}

.backgroundColor('#FFFFFF') // 白色背景
.borderRadius(8) // 圆角
.shadow({ // 阴影效果
  radius: 4,
  color: 'rgba(0, 0, 0, 0.1)',
  offsetX: 0,
  offsetY: 2
})
.stateStyles({ // 点击状态样式
  pressed: {
    scale: { x: 0.98, y: 0.98 },
    opacity: 0.9
  }
})

// 分类数据
private categories: CategoryType[] = [
  { id: 0, name: '全部' },
  { id: 1, name: '手机' },
  { id: 2, name: '电脑' },
  { id: 3, name: '家电' },
  { id: 4, name: '服饰' },
  { id: 5, name: '美妆' },
  { id: 6, name: '食品' }
]

// 当前选中的分类
@State currentCategory: number = 0

// 分类选项卡UI
@Builder
CategoryTabs() {
  Scroll() {
    Row() {
      ForEach(this.categories, (category: CategoryType) => {
        Text(category.name)
          .fontSize(14)
          .fontColor(this.currentCategory === category.id ? '#FF5722' : '#333333')
          .fontWeight(this.currentCategory === category.id ? FontWeight.Bold : FontWeight.Normal)
          .height(40)
          .padding({ left: 16, right: 16 })
          .margin({ right: 8 })
          .onClick(() => {
            this.currentCategory = category.id;
            this.filterProducts();
          })
      })
    }
  }
  .scrollable(ScrollDirection.Horizontal)
  .scrollBar(BarState.Off)
  .width('100%')
}

// 排序选项数据
private sortOptions: SortOptionType[] = [
  { id: 0, name: '综合' },
  { id: 1, name: '销量' },
  { id: 2, name: '价格' }
]

// 当前选中的排序选项
@State currentSort: number = 0

// 排序选项UI
@Builder
SortOptions() {
  Row() {
    ForEach(this.sortOptions, (option: SortOptionType) => {
      Text(option.name)
        .fontSize(14)
        .fontColor(this.currentSort === option.id ? '#FF5722' : '#333333')
        .height(40)
        .padding({ left: 12, right: 12 })
        .onClick(() => {
          this.currentSort = option.id;
          this.sortProducts();
        })
    })
  }
  .width('100%')
  .justifyContent(FlexAlign.SpaceAround)
  .borderRadius(20)
  .backgroundColor('#F5F5F5')
  .padding({ left: 8, right: 8 })
  .margin({ top: 8, bottom: 8 })
}

// 过滤商品列表
filterProducts() {
  if (this.currentCategory === 0) { // 全部分类
    this.filteredProductList = this.productList;
  } else {
    // 根据分类过滤
    this.filteredProductList = this.productList.filter(product => {
      return product.category === this.categories[this.currentCategory].name;
    });
  }
  
  // 应用当前的排序
  this.sortProducts();
}

// 排序商品列表
sortProducts() {
  switch (this.currentSort) {
    case 0: // 综合排序（默认顺序）
      // 可以根据多个因素综合排序，这里简单实现为按ID排序
      this.filteredProductList.sort((a, b) => a.id - b.id);
      break;
    case 1: // 销量排序
      this.filteredProductList.sort((a, b) => b.sales - a.sales);
      break;
    case 2: // 价格排序
      this.filteredProductList.sort((a, b) => a.price - b.price);
      break;
  }
}

@Builder
BottomNavigationBar() {
  Row() {
    // 首页
    Column() {
      Image($r('app.media.ic_home'))
        .width(24)
        .height(24)
        .fillColor('#FF5722') // 当前选中页面的图标颜色
      
      Text('首页')
        .fontSize(12)
        .fontColor('#FF5722') // 当前选中页面的文字颜色
        .margin({ top: 4 })
    }
    .layoutWeight(1)
    .onClick(() => {
      // 切换到首页
    })
    
    // 分类
    Column() {
      Image($r('app.media.ic_category'))
        .width(24)
        .height(24)
        .fillColor('#999999')
      
      Text('分类')
        .fontSize(12)
        .fontColor('#999999')
        .margin({ top: 4 })
    }
    .layoutWeight(1)
    .onClick(() => {
      // 切换到分类页面
    })
    
    // 购物车
    Column() {
      Image($r('app.media.ic_cart'))
        .width(24)
        .height(24)
        .fillColor('#999999')
      
      Text('购物车')
        .fontSize(12)
        .fontColor('#999999')
        .margin({ top: 4 })
    }
    .layoutWeight(1)
    .onClick(() => {
      // 切换到购物车页面
    })
    
    // 我的
    Column() {
      Image($r('app.media.ic_profile'))
        .width(24)
        .height(24)
        .fillColor('#999999')
      
      Text('我的')
        .fontSize(12)
        .fontColor('#999999')
        .margin({ top: 4 })
    }
    .layoutWeight(1)
    .onClick(() => {
      // 切换到个人中心页面
    })
  }
  .width('100%')
  .height(56)
  .padding({ left: 16, right: 16 })
  .backgroundColor('#FFFFFF')
  .border({ width: { top: 0.5 }, color: '#E5E5E5' })
}

build() {
  Column() {
    // 标题栏
    Row() {
      Text('商品列表')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height(56)
    .padding({ left: 16, right: 16 })
    .backgroundColor('#FFFFFF')
    
    // 分类选项卡
    this.CategoryTabs()
    
    // 排序选项
    this.SortOptions()
    
    // 商品列表
    Grid() {
      ForEach(this.filteredProductList, (product: ProductType) => {
        GridItem() {
          this.ProductCard(product)
        }
      })
    }
    .columnsTemplate('1fr 1fr')
    .columnsGap(8)
    .rowsGap(8)
    .padding({ left: 8, right: 8, top: 8, bottom: 8 })
    .layoutWeight(1)
    
    // 底部导航栏
    this.BottomNavigationBar()
  }
  .width('100%')
  .height('100%')
  .backgroundColor('#F5F5F5')
}