目录

案例介绍

本篇文章将介绍如何在产品详情页中使用FormLink组件实现售后服务区域和底部操作栏的功能，包括服务政策查看、客服咨询和购买操作等功能的实现。

代码实现

import router from '@ohos.router';

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

  build() {
    Column() {
      // 基础布局结构省略...
      
      // 售后服务
      Column() {
        Text('售后服务')
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .margin({ bottom: 16 })
        
        Row({ space: 8 }) {
          Image($r('app.media.ic_warranty'))
            .width(20)
            .height(20)
          
          Text('12个月官方质保')
            .fontSize(14)
            .fontColor('#333333')
          
          Blank()
          
          FormLink() {
            Text('查看详情')
              .fontSize(14)
              .fontColor('#2196F3')
          }
          .onClick(() => {
            console.info('点击了查看售后详情');
            this.showServicePolicyDialog();
          })
        }
        .width('100%')
        .padding({ top: 8, bottom: 8 })
        
        Divider().color('#EEEEEE').width('100%')
        
        Row({ space: 8 }) {
          Image($r('app.media.ic_return'))
            .width(20)
            .height(20)
          
          Text('7天无理由退货')
            .fontSize(14)
            .fontColor('#333333')
        }
        .width('100%')
        .padding({ top: 8, bottom: 8 })
        
        Divider().color('#EEEEEE').width('100%')
        
        Row({ space: 8 }) {
          Image($r('app.media.ic_support'))
            .width(20)
            .height(20)
          
          Text('专业客服团队')
            .fontSize(14)
            .fontColor('#333333')
          
          Blank()
          
          FormLink() {
            Text('联系客服')
              .fontSize(14)
              .fontColor('#2196F3')
          }
          .onClick(() => {
            console.info('点击了联系客服');
            router.pushUrl({ url: 'pages/CustomerService' });
          })
        }
        .width('100%')
        .padding({ top: 8, bottom: 8 })
      }
      .width('100%')
      .padding(16)
      .backgroundColor('#FFFFFF')
      .borderRadius(8)
      
      // 底部购买栏
      Row() {
        Row({ space: 16 }) {
          Column() {
            Image($r('app.media.ic_store'))
              .width(24)
              .height(24)
            
            Text('店铺')
              .fontSize(12)
              .fontColor('#666666')
              .margin({ top: 4 })
          }
          .onClick(() => {
            console.info('点击了店铺');
          })
          
          Column() {
            Image($r('app.media.ic_favorite'))
              .width(24)
              .height(24)
            
            Text('收藏')
              .fontSize(12)
              .fontColor('#666666')
              .margin({ top: 4 })
          }
          .onClick(() => {
            console.info('点击了收藏');
          })
          
          Column() {
            Image($r('app.media.ic_cart'))
              .width(24)
              .height(24)
            
            Text('购物车')
              .fontSize(12)
              .fontColor('#666666')
              .margin({ top: 4 })
          }
          .onClick(() => {
            console.info('点击了购物车');
          })
        }
        .padding({ left: 16 })
        
        Blank()
        
        Button('加入购物车')
          .height(40)
          .backgroundColor('#FF9800')
          .fontColor('#FFFFFF')
          .borderRadius(20)
          .margin({ right: 12 })
          .onClick(() => {
            console.info('点击了加入购物车');
          })
        
        Button('立即购买')
          .height(40)
          .backgroundColor('#FF5722')
          .fontColor('#FFFFFF')
          .borderRadius(20)
          .margin({ right: 16 })
          .onClick(() => {
            console.info('点击了立即购买');
          })
      }
      .width('100%')
      .height(64)
      .backgroundColor('#FFFFFF')
      .padding({ top: 8, bottom: 8 })
      .border({ width: { top: 1 }, color: { top: '#EEEEEE' } })
    }
  }

  // 显示售后政策对话框
  showServicePolicyDialog() {
    AlertDialog.show({
      title: '售后服务政策',
      message: '1. 自签收之日起7天内，商品完好且包装未拆封，可申请无理由退货。\n\n' +
               '2. 自签收之日起15天内，商品出现性能故障，可申请退货或换货。\n\n' +
               '3. 自签收之日起12个月内，商品出现性能故障，可申请免费保修。\n\n' +
               '4. 人为损坏、擅自拆机或改装导致的故障不在保修范围内。',
      confirm: {
        value: '我知道了',
        action: () => {
          console.info('关闭售后政策对话框');
        }
      }
    });
  }
}

代码详解

售后服务区域实现

1. 服务政策展示：

   • 使用Row布局展示服务项
   • 图标和文本的组合显示
   • FormLink实现详情查看功能

2. 服务项布局：

   • 统一的间距和对齐方式
   • 分隔线分隔不同服务项
   • 图标和文本的尺寸规范

3. 客服咨询功能：

   • FormLink实现客服链接
   • 点击跳转到客服页面
   • 右对齐显示链接文本

底部操作栏实现

1. 快捷操作区：

   • 店铺、收藏、购物车三个功能
   • 图标和文本垂直布局
   • 统一的点击事件处理

2. 购买按钮区：

   • 加入购物车和立即购买按钮
   • 不同的背景色区分
   • 圆角和内边距处理

对话框实现

showServicePolicyDialog方法：

• 使用AlertDialog显示政策内容
• 格式化的政策条款展示
• 简单的确认按钮交互

总结

本篇文章展示了如何实现产品详情页的服务功能：

1. 完成了售后服务区域的布局
2. 实现了服务政策的查看功能
3. 集成了客服咨询入口
4. 添加了底部购买操作栏

这些服务功能的实现，为用户提供了完整的产品购买和售后保障体验。