HarmonyOS鸿蒙Next《仿盒马》app开发技术分享兑换商品详情

HarmonyOS鸿蒙Next《仿盒马》app开发技术分享兑换商品详情

技术栈

Appgallery connect

开发准备

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

功能分析

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

代码实现

首先我们把兑换商品的id 传递到详情页面

.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进行数据查询

@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]
}

展示其他数据到对应的组件

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)
                            .margin({left:20})
                    }
                    .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)
}

到这里我们就实现了兑换物品的商品详情页