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

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

技术栈

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)['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)


}

}

}

相关文章
|
22天前
|
存储
《仿盒马》app开发技术分享--未完成订单列表展示逻辑优化(61)
上一节我们实现订单与优惠券的联合提交时,我去到订单列表页面查看生成的订单信息,发现现在的订单从信息展示到价格计算全都是有问题的。所以紧急的把对应的问题修改一下。
116 70
|
17天前
《仿盒马》app开发技术分享-- 兑换提交准备(72)
上一节我们实现了地址的选择,商品数据的展示,我们页面中需要的提交的内容还有所欠缺,我们还需要新增一些展示兑换细节的组件,同时在提交之前还需要实现备注功能,我们还要在页面中展示一些积分相关的内容,告知用户积分的详细情况
22 4
|
17天前
《仿盒马》app开发技术分享-- 兑换商品详情(69)
上一节我们实现了兑换商品列表的展示,用户可以在回收之后通过积分页面进入兑换列表页查看当前能够兑换的商品了,我们距离一个完整的app又更近了一步,现在我们要实现的就是当用户点击列表条目的时候能够查看数据详情。
23 4
|
17天前
《仿盒马》app开发技术分享-- 商品兑换校验(70)
上一节我们实现了可兑换商品的详情,我们能够查看到商品更多的信息,这一节我们来实现商品兑换相关的功能,在进行商品兑换之前,我们在兑换详情页面,点击立即兑换按钮之后我们需要跳转到兑换详情页,但是用户的积分可能达不到我们当前商品的兑换标准,这时候如果我们进入了下个页面,在用户点击确认的时候去校验,就让用户多操作了一步,这样的操作体验非常的不友好,所以我们在兑换前进行校验,通过校验后我们在确认页实现地址添加相关的内容
25 4
|
17天前
《仿盒马》app开发技术分享-- 兑换页地址商品展示(71)
上一节我们实现了商品兑换的校验功能,这能很好的帮助用户节省更多的时间,同时也能减小服务器的开销,同时我们的业务逻辑也会更加的完善功能也更加的丰富了,这一节我们实现校验通过后的内容,实现地址的选择和兑换商品信息的展示
24 4
|
23天前
|
存储 缓存 前端开发
《仿盒马》app开发技术分享-- 用户登录页(业务逻辑)(21)
上一节我们实现了静态的用户登录页,这一节我们需要给他添加上业务逻辑,实现跟云数据库的互通,同时跟整个应用关联起来,因为我们还没有实现用户的注册页面,所以这里我们在云数据库的用户数据插入暂时先不做同用户名的校验,我们在云端先插入几条数据,暂时专注于查询即可
35 5
|
22天前
|
数据库
《仿盒马》app开发技术分享-- 回收金收支查询(49)
上一节我们实现了回收金页面的部分布局填充和内容展示,并且实现了当前订单收益总金额的展示,以及金额的隐藏,这一节我们来实现当前用户收支列表的展示,在这之前,我们先要修改一下我们recycleinfo表,我们把规格相关的内容添加上去,方便我们后续的逻辑编写,不然每次都根据weightid查询确实有一点点不方便
27 3
|
22天前
《仿盒马》app开发技术分享-- 回收金提现准备页(50)
上一节我们实现了回收金的收入、支出记录查询,并且在订单完成后成功创建对应的收支记录,但是我们暂时只有收入记录,并没有支出记录,这一节我们将要实现账号的回收金提现功能,从商业角度实现app应用的正向循环
24 3
|
23天前
《仿盒马》app开发技术分享-- 个人中心页面(19)
上一节我们实现了分类页面的所有联动效果,这一节我们要开始完成一个新的页面,这个页面是我们主界面的第四个板块,就是个人中心页面。在这个模块,我们可以显示一些用户信息,以及用户相关的各类功能的入口
21 4
|
23天前
|
数据安全/隐私保护
《仿盒马》app开发技术分享-- 用户登陆页面(静态)(20)
上一节我们实现了个人中心页面的静态展示,项目进行到这里呢,我们也是时候添加用户相关的内容了, 因为到了后期,我们的数据都是跟用户绑定的,各个用户之间的数据并不互通,现在为了实现我们的用户绑定制度,我们需要给应用添加一个用户登陆的入口的
24 4