DEV Community

Lin
Lin

Posted on

Imitation Box Horse "- Recycling Order Details Page (46)

Technical Stack
Appgallery Connect

Development Preparation
In the previous section, we implemented all functions of the order list, displaying data for pending pickup, cancelled, in transit, and completed orders. We also enabled status switching by clicking function buttons on corresponding orders. In this section, we will allow navigating to the order details page by clicking on orders in the list, displaying the current order status and corresponding information. For completed orders, we will show the earnings, including the amount and corresponding points.

Function Analysis
To implement order details viewing:

Add click events to list items to pass the current order ID to the details page.
Receive the order ID on the details page, query the corresponding order by ID, and display it in the component.
Query the order's weight, earnings amount, and points based on the weight_id in the order, and display them in the completed order details.

Code Implementation
First, add the corresponding entity classes:

// Order entity
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;

// Getter and setter methods
setId(id: number): void {
    this.id = id;
}

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

// ... (other methods omitted for brevity) ...

static parseFrom(inputObject: any): RecycleInfo {
    let result = new RecycleInfo();
    if (!inputObject) {
        return result;
    }
    // Parse input object properties
    if (inputObject.id) {
        result.id = inputObject.id;
    }
    // ... (other properties omitted for brevity) ...
    return result;
}
Enter fullscreen mode Exit fullscreen mode

}

export { RecycleInfo };

// Weight specification entity
class WeightInfo {
id: number;
weight_id: number;
weight: string;
txt: string;
integral: number;
money: number;

// Getter and setter methods
setId(id: number): void {
    this.id = id;
}

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

// ... (other methods omitted for brevity) ...
Enter fullscreen mode Exit fullscreen mode

}

export { WeightInfo };

Add click events to all list items to navigate to the details page:

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

Receive the order ID on the order details page:

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

Query order details by 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];

Query weight, earnings, and points based on the order's weight_id:

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];

Fill the queried information into the component:

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)}`);

// Set status title and message based on order_type
if (this.orderInfo?.order_type == 0) {
  this.titleStr = "Pending Pickup";
  this.msgStr = "The courier has been notified to pick up on time, please wait patiently.";
}
if (this.orderInfo?.order_type == 1) {
  this.titleStr = "Cancelled";
  this.msgStr = "Order has been cancelled, thank you for using our service.";
}
if (this.orderInfo?.order_type == 2) {
  this.titleStr = "In Transit";
  this.msgStr = "Package has been sent, rewards will be issued based on the order.";
}
if (this.orderInfo?.order_type == 3) {
  this.titleStr = "Completed";
  this.msgStr = "Rewards have been issued.";
}

this.flag = true;
Enter fullscreen mode Exit fullscreen mode

}

build() {
if (this.flag) {
Column() {
CommonTopBar({ title: "Order Details", 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");

        // ... (address display section omitted for brevity) ...

        if (this.orderInfo?.order_type == 3) {
          Row() {
            Text()
            Blank()
            Text() {
              Span("Order Rewards:")
                .fontSize(16)
                .fontColor(Color.Black);
              Span("¥" + String(this.weightInfo?.money))
                .fontSize(12)
                .fontColor(Color.Red);
              Span("Points:" + String(this.weightInfo?.integral))
                .fontSize(12)
                .fontColor(Color.Red);
            }
          }
          .padding(10)
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween);
        }

        // ... (express information and order details sections omitted for brevity) ...
      }
      .height('100%')
      .margin({ bottom: 50 })
      .backgroundColor(Color.White)
      .alignItems(HorizontalAlign.Start);
    }
    .height('100%')
    .width('100%');
  }
  .backgroundColor(Color.White);
}
Enter fullscreen mode Exit fullscreen mode

}
}

Run the code to view the current order display style.

Top comments (0)