基于ark-ts的电商app的商品详情界面设计

---

接上回，首页的设计已经接近完成，具体的商品详情界面还需要补充。

---

商品详情界面的设计

基于设计需求，我选择将商品详情界面的设计划分为两个阶段，

第一阶段 实现页面跳转

在Flowltem中使用一个onClick()函数调用router pushUrl方法发送参数,通过router路由，来传这个参数。第一给参数是目标url，第二个参数目标页面的参数。然后在文件中配置url，然后在card detailpage这接受参数，并根据取到的值获取相应的商品信息，最后构建一下ui就完成了，接下来是onclick函数的具体使用。

 .onClick(()=>{
          router.pushUrl({ url: 'pages/components/CardDetailPage', params: { cardId : item.others } })
        })

pushurl是传这个参数，而params是参数，传递了cardid这么一个数值，通过cardid去查具体的商品信息并进行输出。通过router.getparams来获得传的参数，也就是cardid。最后设置一下页面ui，第一阶段就完成了。

struct CardDetailPage {
  @State cardId : string  = router.getParams()['cardId'];
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm'
  private cardInfo: CardInfo = getCardInfo(this.cardId);

第二阶段：商品详情页的ui设计

  商品详情界面，我想应该得包括

• 商品名
• 商品价格
• 商品尺码以及数量
• 返回键

  先设计一个返回上一页的返回按钮吧，一般这个按钮得放在左上角的位置，所以优先设计。

主要是用了一个pagetitle组件定义了一个简单的row设置了一个向左返回的图标，然后设计了一个onclick读取点击事件，router路由返回格式来实现返回的功能。代码如下：

struct PageTitle {
  build() {
    Row() {
      Image($r('app.media.back'))
        .width(20)
        .height(20)
        .onClick(() => {
          router.back()
        })
    }
    .padding(12)
    .width('100%')
  }
}

因为之前我们设计了一个cardid读取参数获取值，这里我们还需要使用一个getcardinfo组件，然后使用find方式查找cardid位置的carddata，就相当于获取了目标的cardinfo。就比如用ithis.cardinfo就已经做到了读取相应数据，用cardimagedisplay中，就可以接受相应数据图片，就可以显示图片和进行ui设计了。同理，商品名和金额以及商品的详细描述也是一样的。放三个text就能够显示以上三个数据了。具体代码实现如下：

/*展示价格+标题*/
@Component
struct CardContentDisplay {
  private cardInfo : CardInfo = new CardInfo(1,'','',null);
  @State imageBgColorA: number = 0
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'lg'

  build() {
    Column({ space: CommonConstants.COMMON_SPACE }) {
      Text('¥' +this.cardInfo.price)
        .fontSize(20)
        .fontColor($r('app.color.red'))
        .fontWeight(FontWeight.Bold)
        .margin({top: 18 })
      Text(this.cardInfo.name)
        .fontSize($r('app.float.margin_top'))
        .fontWeight(FontWeight.Bold)
      Text(this.cardInfo.desc)
        .fontSize($r('app.float.margin_top'))
    }
    .padding({ left:$r('app.float.home_swiper_borderRadius') , bottom: $r('app.float.home_swiper_borderRadius') , right : $r('app.float.home_swiper_borderRadius') })
    .alignItems(HorizontalAlign.Start)
    .backgroundColor($r('app.color.white'))
    .borderRadius($r('app.float.home_swiper_borderRadius'))
    .width(CommonConstants.FULL_PARENT)
    .height(150)
  }
}

对于尺码和颜色具体的设计，用Column，row三个不同的text然后设计一下大小和颜色。

build() {
    Column({ space: CommonConstants.COMMON_SPACE }) {
      /*颜色*/
      Row(){Text(CommonConstants.COLOR_TITLE).fontSize(20).fontWeight(FontWeight.Bolder).padding({left:$r('app.float.home_grid_padding')})}
      GridProperColorData();
      /*尺码*/
      Row(){Text(CommonConstants.SIZE_TITLE).fontSize(20).fontWeight(FontWeight.Bolder).padding({left:$r('app.float.home_grid_padding')})}
      GridProperSizeData();
      /*数量*/
      Row(){
        Text(CommonConstants.ORDER_SIZE_TITLE).fontSize(20)
          .fontWeight(FontWeight.Bolder)
          .padding({left:$r('app.float.home_grid_padding'), right:'50%'})

对于商品应该还应该有买两件及以上的需求，于是我引入了一个累计购买的操作，可以增加自己购买的数量。button相应的“+”和“-”，设计按钮尺寸大小背景色等ui格式，左边是减号，中间是购买数量，右边是加号，通过onclick记录事件，以及一个if判断操作来增加自己或者减少自己购买的商品数量。

/*减操作 - Button*/
        Button('-', { type: ButtonType.Capsule, stateEffect: true })
          .backgroundColor($r('app.color.white'))
          .width(30)
          .height(20)
          .border({width:1})
          .fontColor($r('app.color.title_text_color'))
          .padding({right:$r('app.float.home_swiper_borderRadius')})
          .onClick(()=>{
            if (this.cardSize > 1) {
              this.cardSize = this.cardSize - 1;
            }
          })
        /*数量值*/
        Text(this.cardSize+'').fontSize(20)
          .fontWeight(FontWeight.Normal)
          .padding({left:$r('app.float.home_grid_padding'), right:$r('app.float.home_grid_padding')})
        /*加操作 - Button*/
        Button('+', { type: ButtonType.Capsule, stateEffect: true })
          .backgroundColor($r('app.color.white'))
          .width(30)
          .height(20)
          .border({width:1})
          .fontColor($r('app.color.title_text_color'))
          .padding({right:$r('app.float.home_grid_padding')})
          .onClick(()=>{
            this.cardSize = this.cardSize + 1;
          })
      }
      .height('50vp')
    }
    .borderRadius($r('app.float.home_swiper_borderRadius'))
    .backgroundColor(Color.White)
    .height('350vp')
    .alignItems(HorizontalAlign.Start)
  }
}

（此处鉴于篇幅原因省略了尺码和颜色的参数传递和读取设计）

最终设计效果如下：