《仿盒马》app开发技术分享-- 回收订单详情页（46）

鸿蒙小林
• 阅读 3

技术栈

Appgallery connect

开发准备

上一节我们实现了订单列表的所有功能，展示了待取件、已取消、运输中、已完成等订单列表的数据展示，并且在对应的订单中点击功能按钮实现了订单的状态切换，这一节我们就要通过点击对应列表内的订单进入相应的订单详情页，展示当前订单的状态和对应的信息，当进入的是已完成订单时展示当前订单的收益，分别显示收入多少金额和对应的积分

功能分析

要实现订单详情查看的功能，首先需要在对应的item添加点击事件，传递当前的订单id过去详情页面，在详情页面接收对应的id，根据id查询当前对应的订单，展示到对应的组件内，然后根据订单内的weightid查询出当前订单的重量，件数，金额收益，积分收益，展示到已完成订单的详情内

代码实现

首先我们先吧对应的实体添加一下

//订单
class RecycleInfo {
    id: number;
    user_id: number = 0;
    nike_name: string;
    phone: string;
    address: string;
    day: string;
    start_time: string;
    end_time: string;
    msg: string;
    weight_id: string;
    create_time: string;
    express_code: string;
    express_people: string;
    express_company: string;
    order_type: number;
    logistics_id: number;

    constructor() {
    }



    setId(id: number): void {
        this.id = id;
    }

    getId(): number  {
        return this.id;
    }

    setUser_id(user_id: number): void {
        this.user_id = user_id;
    }

    getUser_id(): number  {
        return this.user_id;
    }

    setNike_name(nike_name: string): void {
        this.nike_name = nike_name;
    }

    getNike_name(): string  {
        return this.nike_name;
    }

    setPhone(phone: string): void {
        this.phone = phone;
    }

    getPhone(): string  {
        return this.phone;
    }

    setAddress(address: string): void {
        this.address = address;
    }

    getAddress(): string  {
        return this.address;
    }

    setDay(day: string): void {
        this.day = day;
    }

    getDay(): string  {
        return this.day;
    }

    setStart_time(start_time: string): void {
        this.start_time = start_time;
    }

    getStart_time(): string  {
        return this.start_time;
    }

    setEnd_time(end_time: string): void {
        this.end_time = end_time;
    }

    getEnd_time(): string  {
        return this.end_time;
    }

    setMsg(msg: string): void {
        this.msg = msg;
    }

    getMsg(): string  {
        return this.msg;
    }

    setWeight_id(weight_id: string): void {
        this.weight_id = weight_id;
    }

    getWeight_id(): string  {
        return this.weight_id;
    }

    setCreate_time(create_time: string): void {
        this.create_time = create_time;
    }

    getCreate_time(): string  {
        return this.create_time;
    }

    setExpress_code(express_code: string): void {
        this.express_code = express_code;
    }

    getExpress_code(): string  {
        return this.express_code;
    }

    setExpress_people(express_people: string): void {
        this.express_people = express_people;
    }

    getExpress_people(): string  {
        return this.express_people;
    }

    setExpress_company(express_company: string): void {
        this.express_company = express_company;
    }

    getExpress_company(): string  {
        return this.express_company;
    }

    setOrder_type(order_type: number): void {
        this.order_type = order_type;
    }

    getOrder_type(): number  {
        return this.order_type;
    }

    setLogistics_id(logistics_id: number): void {
        this.logistics_id = logistics_id;
    }

    getLogistics_id(): number  {
        return this.logistics_id;
    }

    static parseFrom(inputObject: any): RecycleInfo {
        let result = new RecycleInfo();
        if (!inputObject) {
            return result;
        }
        if (inputObject.id) {
            result.id = inputObject.id;
        }
        if (inputObject.user_id) {
            result.user_id = inputObject.user_id;
        }
        if (inputObject.nike_name) {
            result.nike_name = inputObject.nike_name;
        }
        if (inputObject.phone) {
            result.phone = inputObject.phone;
        }
        if (inputObject.address) {
            result.address = inputObject.address;
        }
        if (inputObject.day) {
            result.day = inputObject.day;
        }
        if (inputObject.start_time) {
            result.start_time = inputObject.start_time;
        }
        if (inputObject.end_time) {
            result.end_time = inputObject.end_time;
        }
        if (inputObject.msg) {
            result.msg = inputObject.msg;
        }
        if (inputObject.weight_id) {
            result.weight_id = inputObject.weight_id;
        }
        if (inputObject.create_time) {
            result.create_time = inputObject.create_time;
        }
        if (inputObject.express_code) {
            result.express_code = inputObject.express_code;
        }
        if (inputObject.express_people) {
            result.express_people = inputObject.express_people;
        }
        if (inputObject.express_company) {
            result.express_company = inputObject.express_company;
        }
        if (inputObject.order_type) {
            result.order_type = inputObject.order_type;
        }
        if (inputObject.logistics_id) {
            result.logistics_id = inputObject.logistics_id;
        }
        return result;
    }
}

export { RecycleInfo };


//规格
class WeightInfo {
    id: number;
    weight_id: number;
    weight: string;
    txt: string;
    integral: number;
    money: number;

    constructor() {
    }


    setId(id: number): void {
        this.id = id;
    }

    getId(): number  {
        return this.id;
    }

    setWeight_id(weight_id: number): void {
        this.weight_id = weight_id;
    }

    getWeight_id(): number  {
        return this.weight_id;
    }

    setWeight(weight: string): void {
        this.weight = weight;
    }

    getWeight(): string  {
        return this.weight;
    }

    setTxt(txt: string): void {
        this.txt = txt;
    }

    getTxt(): string  {
        return this.txt;
    }

    setIntegral(integral: number): void {
        this.integral = integral;
    }

    getIntegral(): number  {
        return this.integral;
    }

    setMoney(money: number): void {
        this.money = money;
    }

    getMoney(): number  {
        return this.money;
    }

}

export { WeightInfo };

首先添加对应的点击事件，在所有的列表都要添加上

 .onClick(()=>{
                router.pushUrl({url:"pages/recycle/order/RecycleOrderDetailsPage",params:{code:item.id}})
              })

然后在订单详情页面接收对应的id

 let params = (this.getUIContext().getRouter().getParams() as Record<string, string>)['code']
    if (params!=undefined&& params!=''){
      this.orderCode=params
    }

根据id查询出对应的订单详情

let databaseZone = cloudDatabase.zone('default');
    let condition = new cloudDatabase.DatabaseQuery(recycle_info);
    condition.equalTo("id",this.orderCode!)
    let listData = await databaseZone.query(condition);
    let json = JSON.stringify(listData)
    let data1:RecycleInfo[]= JSON.parse(json)
    this.orderInfo=data1[0]

拿到id对应的订单之后，我们根据当前订单的weightid查询出对应的重量、收益、积分等信息

    let condition1 = new cloudDatabase.DatabaseQuery(weight_info);
    condition1.equalTo("weight_id",data1[0].weight_id)
    let listData1 = await databaseZone.query(condition1);
    let json1 = JSON.stringify(listData1)
    let data:WeightInfo[]= JSON.parse(json1)
    this.weightInfo=data[0]

然后我们把对应的信息填充到组件上

```c import { hilog } from '@kit.PerformanceAnalysisKit'; import { cloudDatabase } from '@kit.CloudFoundationKit'; import { CommonTopBar } from '../../widget/CommonTopBar'; import { recycle_info } from '../../clouddb/recycle_info'; import { RecycleInfo } from '../../entity/RecycleInfo'; import { weight_info } from '../../clouddb/weight_info'; import { WeightInfo } from '../../entity/WeightInfo';

@Entry @Component struct OrderDetailsPage {

@State orderInfo:RecycleInfo|null=null @State orderCode:string='' @State flag:boolean=false @State titleStr:string='' @State msgStr:string='' @State weightInfo:WeightInfo|null=null

async aboutToAppear(): Promise { let params = (this.getUIContext().getRouter().getParams() as Record<string, string>)['code'] if (params!=undefined&& params!=''){ this.orderCode=params } let databaseZone = cloudDatabase.zone('default'); let condition = new cloudDatabase.DatabaseQuery(recycle_info); condition.equalTo("id",this.orderCode!) let listData = await databaseZone.query(condition); let json = JSON.stringify(listData) let data1:RecycleInfo[]= JSON.parse(json) this.orderInfo=data1[0]

let condition1 = new cloudDatabase.DatabaseQuery(weight_info);
condition1.equalTo("weight_id",data1[0].weight_id)
let listData1 = await databaseZone.query(condition1);
let json1 = JSON.stringify(listData1)
let data:WeightInfo[]= JSON.parse(json1)
this.weightInfo=data[0]



hilog.info(0x0000, 'testTag', `Succeeded in querying data, result: ${JSON.parse(json)}`);
if (this.orderInfo?.order_type==0) {
  this.titleStr="待取件"
  this.msgStr='已通知快递小哥按时上门取件，请耐心等候'
}
if (this.orderInfo?.order_type==1) {
  this.titleStr="已取消"
  this.msgStr='订单已取消，感谢您的使用'
}
if (this.orderInfo?.order_type==2) {
  this.titleStr="运输中"
  this.msgStr='包裹已寄出，将会根据订单发放奖励'
}

if (this.orderInfo?.order_type==3) {
  this.titleStr="已完成"
  this.msgStr='奖励已发放'
}

this.flag=true

} build() { if (this.flag){ Column(){ CommonTopBar({ title: "订单详情", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true}) Scroll(){ Column() { Column({space:15}){ Text(this.titleStr) .fontSize(20) .width('100%') .textAlign(TextAlign.Center) .fontColor(Color.Black) .fontWeight(FontWeight.Bold)

          Text(this.msgStr)
            .fontSize(16)
            .fontColor(Color.Black)
            .width('100%')
            .textAlign(TextAlign.Center)
        }.width('100%')
        .padding(15)
        .backgroundColor("#fff3574a")
        .alignItems(HorizontalAlign.Start
        )
        Divider().width('100%').height(5)
          .color("#e6e6e6")
        Column(){
          Row({space:20}){
            Image($r('app.media.order_location'))
              .height(20)
              .width(20)
            Column(){
              Row(){
                Text(this.orderInfo?.nike_name)
                  .fontColor(Color.Black)
                  .fontSize(16)
                  .fontWeight(FontWeight.Bold)
                Text(this.orderInfo?.phone)
                  .fontColor(Color.Black)
                  .fontSize(16)
                  .fontWeight(FontWeight.Bold)
                  .margin({left:20})
              }
              Text(this.orderInfo?.address)
                .fontColor(Color.Black)
                .fontSize(16)
                .margin({top:10})
            }
            .padding(10)
            .alignItems(HorizontalAlign.Start)
            .width('100%')

          }
        }
        .padding(10)
        .alignItems(HorizontalAlign.Start)
        .width('100%')
        Divider().width('100%').height(0.8)
          .color("#e6e6e6")
              Column(){
                Row() {
                  Row({ space: 10 }) {
                    Image($r('app.media.background'))
                      .height(70)
                      .width(70)
                      .margin({ left: 10 })
                      .borderRadius(10)
                    Column({ space: 5 }) {
                      Text("衣帽鞋包")
                        .fontColor(Color.Black)
                        .fontSize(14)

                      Text("回收重量："+this.weightInfo?.weight)
                        .fontColor(Color.Grey)
                        .fontSize(14)
                    }
                    .alignItems(HorizontalAlign.Start)

                  }

                  .justifyContent(FlexAlign.Start)
                  .alignItems(VerticalAlign.Top)


                }
                .padding(10)
                .width('100%')
                .alignItems(VerticalAlign.Top)
                .justifyContent(FlexAlign.SpaceBetween)


                Divider()
                  .width('100%')
                  .height(1)
                  .backgroundColor("#f7f7f7")

              }

              if (this.orderInfo?.order_type==3){
                Row(){
                  Text()
                  Blank()
                  Text() {
                    Span("订单奖励：")
                      .fontSize(16)
                      .fontColor(Color.Black)
                    Span("¥"+String(this.weightInfo?.money))
                      .fontSize(12)
                      .fontColor(Color.Red)
                    Span("积分:"+String(this.weightInfo?.integral))
                      .fontSize(12)
                      .fontColor(Color.Red)
                  }
                }
                .padding(10)
                .width('100%')
                .justifyContent(FlexAlign.SpaceBetween)
              }

        Divider().width('100%').height(5)
          .color("#e6e6e6")



        Text("快递信息")
          .fontSize(18)
          .fontColor(Color.Black)
          .fontWeight(FontWeight.Bold)
          .margin({left:15})
        Divider().width('100%').height(5)
          .color("#e6e6e6")
        Row(){
          Text("运单编号：")
            .fontSize(16)
            .fontColor(Color.Black)
          Blank()
          Text(this.orderInfo?.express_code)
            .fontColor(Color.Black)
            .fontSize(14)
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .padding(10)

        Divider().width('100%').height(0.8)
          .color("#e6e6e6")

        Row(){
          Text("快递公司：")
            .fontSize(16)
            .fontColor(Color.Black)
          Blank()
          Text(this.orderInfo?.express_company)
            .fontColor(Color.Black)
            .fontSize(14)
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .padding(10)
        Divider().width('100%').height(0.8)
          .color("#e6e6e6")
        Row(){
          Text("快递员：")
            .fontSize(16)
            .fontColor(Color.Black)
          Blank()
          Text(this.orderInfo?.express_people)
            .fontSize(16)
            .fontColor(Color.Black)
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .padding(10)
        Divider().width('100%').height(5)
          .color("#e6e6e6")








        Text("下单信息")
          .fontSize(18)
          .fontColor(Color.Black)
          .fontWeight(FontWeight.Bold)
          .margin({left:15})
        Divider().width('100%').height(5)
          .color("#e6e6e6")
        Row(){
          Text("联系人：")
            .fontSize(16)
            .fontColor(Color.Black)
          Blank()
          Text(this.orderInfo?.nike_name+" "+this.orderInfo?.phone)
            .fontColor(Color.Black)
            .fontSize(14)
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .padding(10)

        Divider().width('100%').height(0.8)
          .color("#e6e6e6")

        Row(){
          Text("取件地址：")
            .fontSize(16)
            .fontColor(Color.Black)
          Blank()
          Text(this.orderInfo?.address)
            .fontColor(Color.Black)
            .fontSize(14)
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .padding(10)
        Divider().width('100%').height(0.8)
          .color("#e6e6e6")
        Row(){
          Text("预约时间：")
            .fontSize(16)
            .fontColor(Color.Black)
          Blank()
          Text(this.orderInfo!.day+this.orderInfo?.start_time+"--"+this.orderInfo?.end_time)
            .fontSize(16)
            .fontColor(Color.Black)
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .padding(10)
        Divider().width('100%').height(0.8)
          .color("#e6e6e6")
        Row(){
          Text("备注：")
            .fontSize(16)
            .fontColor(Color.Black)
          Blank()
          Text(this.orderInfo?.msg!=''?this.orderInfo?.msg:"无")
            .fontColor(Color.Black)
            .fontSize(14)
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .padding(10)
        Divider().width('100%').height(0.8)
          .color("#e6e6e6")
        Row(){
          Text("订单编号：")
            .fontSize(16)
            .fontColor(Color.Black)
          Blank()
          Text(String(this.orderInfo?.id))
            .fontColor(Color.Black)
            .fontSize(14)
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .padding(10)



        Row(){
          Text("创建时间：")
            .fontSize(16)
            .fontColor(Color.Black)
          Blank()
          Text(this.orderInfo!.day+this.orderInfo?.start_time)
            .fontColor(Color.Black)
            .fontSize(14)
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .padding(10)
      }
      .height('100%')
      .margin({bottom:50})
      .backgroundColor(Color.White)
      .alignItems(HorizontalAlign.Start)
    }
    .height('100%')
    .width('100%')
  }
  .backgroundColor(Color.White)


}

}

}

鸿蒙开发
点赞
收藏
评论区
推荐文章
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 确认订单页（业务逻辑）（30）
技术栈Appgalleryconnect开发准备上一节我们实现了确认订单页的页面绘制和价格计算优惠计算，订单列表展示等功能，这一节我们来实现确认订单页的整个业务逻辑。首先我们要实现的就是地址的选择，然后把我们计算的价格，商品列表等数据保存起来，然后我们开始
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 旧物回收订单列表（43）
技术栈Appgalleryconnect开发准备上一节我们实现了订单的创建，并且成功吧数据提交到云数据库中，这一节我们实现的内容是展示我们提交的订单列表功能分析要实现订单列表的展示，首先我们要查询对应用户下的订单列表，查询出对应的订单列表后，展示出对应的数
5
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 回收订单页功能完善（45）
技术栈Appgalleryconnect开发准备上一节我们实现了订单的待取件、已取消状态展示，并且成功实现了修改订单状态后的列表刷新，实现了云端数据的修改，这一节我们来实现订单页剩下的两个板块的业务逻辑，分别是运输中、已完成状态下的列表展示以及订单状态的修
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 回收记录页（47）
技术栈Appgalleryconnect开发准备上一节我们实现了在订单列表中查看订单详情，但是我们的回收相关的营收就必须要进入到商品详情页才能够进行查看，如果我们在订单较多的情况下，一个一个的查看订单的详情就会变得非常的麻烦了，现在我们需要实现一个订单记录
3
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 兑换订单提交（73）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换提交前的准备页面，向用户展示了兑换相关的所有信息，这一节我们就可以实现兑换订单的提交了功能分析订单提交我们需要创建对应的兑换商品订单提交信息表，我们需要把地址，商品信息，积分，备注，订单状
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 兑换订单列表框架（75）
技术栈Appgalleryconnect开发准备上一节我们针对订单兑换的业务逻辑进行了完善，成功的在兑换物品之后修改了用户信息的修改，新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架。功能分析兑换商品的订单列表框架我们选择使用tabs，
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 待发货兑换订单列表（76）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换订单展示页面的框架，这一节我们要进行兑换订单的展示，在兑换订单提交后，默认的状态是待发货状态，我们用列表的方式展示出来功能分析进入页面时我们就要通过用户的userid去查询对应的订单，获取
3
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 兑换商品取消订单&取消列表展示（77）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换订单待发货列表的展示逻辑，成功的在列表中展示出来，我们在订单条目中新增了两个按钮，确认揽收与取消订单，这一节我们要实现的功能是订单的取消，以及订单取消后取消列表的展示功能分析要实现订单取消
3
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 兑换商品确认揽收&待收货列表展示（78）
技术栈Appgalleryconnect开发准备上一节我们实现了订单取消功能，实现了tabs切换时的数据刷新，实现了已取消订单的列表展示。这一节我们要实现揽收功能，并且实现待收货的列表展示功能功能分析当我们点击确认揽收的时候，修改订单状态ordertype
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 兑换商品收货确认&已完成列表展示（79）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换商品订单的确认揽收功能，实现了tabs切换时的数据刷新，实现了待收货订单的列表展示。这一节我们要实现确认收货功能，并且实现待收货的列表展示功能功能分析当我们点击确认揽收的时候，修改订单状态
4
0
0
鸿蒙小林
鸿蒙小林
Lv1
鸿蒙原生应用系列开发
文章
90
粉丝
0
获赞
0
热门文章
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗（16）
《仿盒马》app开发技术分享-- 购物车基础功能实现（13）
《仿盒马》app开发技术分享-- 商品详情页（10）
《仿盒马》app开发技术分享-- 首页地址选择&会员码（8）
《仿盒马》app开发技术分享-- 订单地址修改（31）