《仿盒马》app开发技术分享-- 兑换商品详情（69）

## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了兑换商品列表的展示，用户可以在回收之后通过积分页面进入兑换列表页查看当前能够兑换的商品了，我们距离一个完整的app又更近了一步，我们接下来实现后续内容的开发，接下来我们要实现的就是当用户点击列表条目的时候，我们能够根据商品的id查询出数据详情，在当前页面中完成数据的展示

## 功能分析

在数据列表展示的时候其实我们已经获取到了当前商品的大部分数据，但是为了获取内容的实时性，保证跟云端能够匹配，我们还是通过id查询的方式查询用户点击条目的对应商品数据。查询出对应的商品条目数据后，我们在列表上进行展示

## 代码实现

首先我们把兑换商品的id 传递到详情页面，我们需要创建一个实体，在其中添加一个变量，定义为id，在点击事件中我们获取item的id传递出去。

```css

.onClick(() => {

let product: ProductDetailModel = {

id: item.id

};

router.pushUrl({

url: 'pages/recycle/points/PointsDetailsPage',

params: product

}, (err) => {

if (err) {

console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);

return;

}

});

})

```

在商品详情页面中我们接收id，拿到id之后我们根据id进行条件查询，然后我们实现数据查询，id的接受我们要转换为我们定义的类ProductDetailModel，这样才能接受到传递的参数

```css

@State pointsProduct:PointsProduct|null=null

async aboutToAppear(): Promise<void> {

let databaseZone = cloudDatabase.zone('default');

let product = await router.getParams() as ProductDetailModel;

let condition1 = new cloudDatabase.DatabaseQuery(points_product);

condition1.equalTo("id",product.id)

let productDetail = await databaseZone.query(condition1);

let json = JSON.stringify(productDetail)

let list:PointsProduct[]= JSON.parse(json)

this.pointsProduct=list[0]

}

```

展示其他数据到对应的组件，在这里我们的布局就不能用column 和row了，我们选择stack布局，实现我们页面的堆叠效果，接下来我们在组件中插入我们的图片，文本等内容

```css

build() {

Stack({alignContent:Alignment.Bottom}){

Scroll(this.scroller){

Column() {

CommonTopBar({ title: "商品详情", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})

Image(this.pointsProduct?.url)

.width('100%')

.height(300)

.objectFit(ImageFit.Cover)

Column({space:10}){

Row(){

Text(){

Span("$")

.fontSize(14)

.fontColor(Color.Red)

Span(this.pointsProduct?.points+"")

.fontSize(22)

.fontColor(Color.Red)

}

}

.padding(10)

Text(this.pointsProduct?.name)

.fontSize(20)

.fontColor(Color.Black)

.margin({left:10})

.fontWeight(FontWeight.Bold)

Text(this.pointsProduct?.text_message)

.fontSize(14)

.fontColor(Color.Gray)

.margin({left:10})

Row(){

Text()

Text("已兑换 "+this.pointsProduct?.sales_volume)

.fontSize(14)

.fontColor(Color.Black)

}

.padding(10)

.width('100%')

.justifyContent(FlexAlign.SpaceBetween)

Divider().width('100%')

.height(5).backgroundColor("#f7f7f7")

Row(){

Text("发货")

.fontColor(Color.Gray)

.fontSize(14)

Text(this.pointsProduct?.delivery_time+"")

.fontSize(14)

.margin({left:20})

.fontColor(Color.Black)

}

.padding(10)

.width('100%')

.justifyContent(FlexAlign.Start)

Divider().width('100%')

.height(5).backgroundColor("#f7f7f7")

Row(){

Text("参数")

.fontColor(Color.Gray)

.fontSize(14)

Text("储存：")

.margin({left:20})

.fontSize(14)

.fontColor(Color.Black)

Text(this.pointsProduct?.parameter)

.fontSize(14)

.fontColor(Color.Black)

}

.padding(10)

.width('100%')

.justifyContent(FlexAlign.Start)

Divider().width('100%')

.height(5).backgroundColor("#f7f7f7")

Row(){

Text("规格")

.fontColor(Color.Gray)

.fontSize(14)

Column({space:5}){

Text(this.pointsProduct?.spec_str)

.fontSize(14)

.fontColor(Color.Black)

}

.alignItems(HorizontalAlign.Start)

.margin({left:20})

}

.padding(10)

.width('100%')

.justifyContent(FlexAlign.Start)

Divider().width('100%')

.height(5).backgroundColor("#f7f7f7")

}

.alignItems(HorizontalAlign.Start)

}

.alignItems(HorizontalAlign.Start)

.backgroundColor(Color.White)

}

.padding({bottom:80})

.height('100%')

.width('100%')

Row(){

Text()

Blank()

Text("立即兑换")

.padding(10)

.width('45%')

.textAlign(TextAlign.Center)

.backgroundColor("#FCDB29")

.fontColor(Color.White)

.borderRadius(15)

.onClick(()=>{

})

}

.padding(15)

.justifyContent(FlexAlign.SpaceBetween)

.width('100%')

.backgroundColor(Color.White)

}

.backgroundColor(Color.White)

}

```

到这里我们就实现了兑换物品的商品详情页，后续的内容我们继续开发