目录

案例介绍

本篇文章将介绍如何在商品详情页中实现底部操作栏和评论展示功能，包括客服咨询、购物车、立即购买等操作按钮，以及评论项的展示效果。

代码实现

import router from '@ohos.router';

@Entry
@Component
struct ProductDetailDemo {
  private productInfo = {
    // 产品信息定义省略...
  };

  build() {
    Column() {
      // 评论示例
      Column({ space: 12 }) {
        // 这里可以添加2-3条评论示例
        this.buildCommentItem('用户1234', 5, '非常好用的智能手表，续航特别给力，戴了一周才充一次电，各项功能也很实用。')
        this.buildCommentItem('用户5678', 4, '外观设计很漂亮，功能也比较齐全，就是有时候心率监测不太准。')
      }
      .width('100%')
      .padding(16)
      .backgroundColor('#FFFFFF')
      
      // 底部操作栏
      Row({ space: 16 }) {
        // 联系客服链接
        Column() {
          FormLink() {
            Column({ space: 4 }) {
              Image($r('app.media.ic_service'))
                .width(24)
                .height(24)
              
              Text('客服')
                .fontSize(12)
                .fontColor('#333333')
            }
          }
          .onClick(() => {
            console.info('联系客服');
            router.pushUrl({ url: 'pages/CustomerService' });
          })
        }
        .width(60)
        .height('100%')
        .justifyContent(FlexAlign.Center)
        
        // 加入购物车按钮
        Button('加入购物车')
          .width(140)
          .height(40)
          .borderRadius(20)
          .backgroundColor('#FF9800')
          .fontColor('#FFFFFF')
          .onClick(() => {
            console.info(`添加到购物车: 颜色=${this.selectedColor}, 尺寸=${this.selectedSize}`);
          })
        
        // 立即购买按钮
        Button('立即购买')
          .width(140)
          .height(40)
          .borderRadius(20)
          .backgroundColor('#E53935')
          .fontColor('#FFFFFF')
          .onClick(() => {
            console.info(`立即购买: 颜色=${this.selectedColor}, 尺寸=${this.selectedSize}`);
            router.pushUrl({
              url: 'pages/OrderConfirm',
              params: {
                productId: this.productInfo.id,
                color: this.selectedColor,
                size: this.selectedSize
              }
            });
          })
      }
      .width('100%')
      .height(64)
      .padding({ left: 16, right: 16 })
      .backgroundColor('#FFFFFF')
      .justifyContent(FlexAlign.SpaceEvenly)
      .border({ width: { top: 1 }, color: '#EEEEEE' })
    }
  }

  @Builder
  buildCommentItem(username: string, rating: number, content: string) {
    Column({ space: 8 }) {
      // 用户信息和评分
      Row({ space: 8 }) {
        Text(username)
          .fontSize(14)
          .fontWeight(FontWeight.Medium)
        
        Blank()
        
        Row() {
          ForEach([1, 2, 3, 4, 5], (star: number) => {
            Image($r('app.media.ic_star'))
              .width(14)
              .height(14)
              .fillColor(star <= rating ? '#FF9800' : '#CCCCCC')
              .margin({ right: 2 })
          })
        }
      }
      .width('100%')
      
      // 评论内容
      Text(content)
        .fontSize(14)
        .fontColor('#333333')
        .margin({ top: 4 })
      
      // 评论时间
      Text('2023-06-15')
        .fontSize(12)
        .fontColor('#999999')
        .margin({ top: 4 })
      
      // 分隔线
      Divider()
        .color('#EEEEEE')
        .margin({ top: 8 })
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }
}

代码详解

底部操作栏实现

1. 客服咨询：

   • 使用FormLink组件创建链接
   • 图标和文字垂直布局
   • 点击跳转到客服页面

2. 购物车按钮：

   • 固定宽度和高度
   • 橙色背景突出显示
   • 圆角和文字样式

3. 购买按钮：

   • 红色背景最为醒目
   • 传递商品规格参数
   • 跳转到订单确认页

评论项实现

1. 用户信息区：

   • 用户名和评分布局
   • 动态渲染星级评分
   • 合理的间距控制

2. 评论内容：

   • 主要内容展示
   • 评论时间显示
   • 分隔线分隔评论

样式优化

1. 底部操作栏：

   • 固定在底部显示
   • 白色背景和上边框
   • 均匀分布的按钮

2. 评论样式：

   • 统一的字体大小
   • 层次分明的颜色
   • 适当的留白空间

总结

本篇文章展示了如何实现商品详情页的操作功能：

1. 实现了底部操作栏布局
2. 完成了客服咨询功能
3. 添加了购物和购买按钮
4. 优化了评论展示效果

这些功能的实现，为用户提供了便捷的操作入口和良好的浏览体验。