HarmonyOS鸿蒙Next《仿盒马》app开发技术分享之环保记录页

HarmonyOS鸿蒙Next《仿盒马》app开发技术分享之环保记录页

技术栈

Appgallery connect

开发准备

上一节我们实现了在订单列表中查看订单详情，但是我们的环保相关的营收就必须要进入到商品详情页才能够进行查看，如果我们在订单较多的情况下，一个一个的查看订单的详情就会变得非常的麻烦了，现在我们需要实现一个订单记录查看页面，针对正在进行的订单，和已完成的订单，展示预估收益和收益统计。

功能分析

要实现这些功能首先我们在环保订单创建页面用环保记录按钮作为入口进入环保记录页面，然后我们查询运输中的订单计算出预估收益，展示到页面上，我们继续查询出已完成订单计算出已获得收益展示到页面上，同时通过列表的形式展示出已完成订单明细以及订单创建的时间

代码实现

首先我们拿到用户信息然后查询出对应的运输中订单跟已完成订单列表

@State user: User|null=null;
@State orderList_type_3:RecycleInfo[]=[];
@State orderList_type_2:RecycleInfo[]=[];
const value = await StorageUtils.getAll('user');
if (value != "") {
    this.user = JSON.parse(value)
}
let condition = new cloudDatabase.DatabaseQuery(recycle_info);
condition.equalTo("user_id",this.user?.user_id).and().equalTo("order_type","3")
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData)
let data:RecycleInfo[]= JSON.parse(json)
this.orderList_type_3=data

let condition1 = new cloudDatabase.DatabaseQuery(recycle_info);
condition1.equalTo("user_id",this.user?.user_id).and().equalTo("order_type","2")
let listData1 = await databaseZone.query(condition1);
let json1 = JSON.stringify(listData1)
let data1:RecycleInfo[]= JSON.parse(json1)
this.orderList_type_2=data1

然后我们定义接收对应数据的参数根据查询到订单列表的weightid查询出对应的收益和积分

@State execute_money:number=0
@State success_money:number=0
@State execute_integral:number=0
@State success_integral:number=0

async executeOrder(){
    for (let i = 0; i < this.orderList_type_2.length; i++) {
        let condition = new cloudDatabase.DatabaseQuery(weight_info);
        condition.equalTo("weight_id",this.orderList_type_2[i].weight_id)
        let listData = await databaseZone.query(condition);
        let json = JSON.stringify(listData)
        let weightList:WeightInfo[]= JSON.parse(json)
        for (let j = 0; j <weightList.length; j++) {
            this.execute_money+=weightList[j].money
            this.execute_integral+=weightList[j].integral
        }
    }
}

async successOrder(){
    for (let i = 0; i < this.orderList_type_3.length; i++) {
        let condition = new cloudDatabase.DatabaseQuery(weight_info);
        condition.equalTo("weight_id",this.orderList_type_3[i].weight_id)
        let listData = await databaseZone.query(condition);
        let json = JSON.stringify(listData)
        let weightList:WeightInfo[]= JSON.parse(json)
        for (let j = 0; j <weightList.length; j++) {
            this.success_money+=weightList[j].money
            this.success_integral+=weightList[j].integral
        }
    }
}

async aboutToAppear(): Promise<void> {
    this.executeOrder()
    this.successOrder()
}

获取到内容之后我们填充到页面上

build() {
    if (this.flag){
        Column() {
            CommonTopBar({ title: "环保记录", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
            Row(){
                Column({space:10}) {
                    Text("待结算收益")
                        .fontSize(14)
                        .fontColor(Color.Black)
                        .fontWeight(FontWeight.Bold)
                    Text("¥"+String(this.execute_money))
                        .fontSize(14)
                        .fontColor(Color.Red)
                    Text(String(this.execute_integral))
                        .fontSize(14)
                        .fontColor(Color.Black)
                }
                .alignItems(HorizontalAlign.Center)
                .justifyContent(FlexAlign.Center)
                .height(100)
                .width('45%')
                .borderRadius(10)
                .border({width:1,color:Color.Grey})
                Column({space:10}) {
                    Text("已结算收益统计")
                        .fontSize(14)
                        .fontColor(Color.Black)
                        .fontWeight(FontWeight.Bold)
                    Text("¥"+String(this.success_money))
                        .fontSize(14)
                        .fontColor(Color.Black)
                    Text(String(this.success_integral))
                        .fontSize(14)
                        .fontColor(Color.Black)
                }
                .alignItems(HorizontalAlign.Center)
                .justifyContent(FlexAlign.Center)
                .height(100)
                .width('45%')
                .borderRadius(10)
                .border({width:1,color:Color.Grey})
            }
            .padding(10)
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)
            Text("已完成订单")
                .textAlign(TextAlign.Start)
                .fontSize(18)
                .fontColor(Color.Black)
                .padding(10)
            List({space:10}) {
                ForEach(this.orderList_type_3,(item:RecycleInfo,index:number)=>{
                    ListItem(){
                        Column(){
                            Column({space:10}) {
                                Row(){
                                    Text(item.nike_name)
                                        .fontColor(Color.Black)
                                        .fontSize(16)
                                        .fontWeight(FontWeight.Bold)
                                    Text(item?.phone)
                                        .fontColor(Color.Black)
                                        .fontSize(16)
                                        .fontWeight(FontWeight.Bold)
                                        .margin({left:20})
                                }
                                Text(item.create_time)
                                    .fontSize(14)
                                    .fontColor(Color.Gray)
                                Row(){
                                    Text()
                                    Blank()
                                }
                                .width('100%')
                            }
                            .padding(10)
                            .alignItems(HorizontalAlign.Start)
                            .width('100%')
                        }
                    }
                })
            }
        }
        .backgroundColor(Color.White)
        .height('100%')
        .width('100%')
    }
}