## 技术栈
Appgallery connect
## 开发准备
上一节我们实现了订单列表的所有功能，展示了待取件、已取消、运输中、已完成等订单列表的数据展示，并且在对应的订单中点击功能按钮实现了订单的状态切换，这一节我们就要通过点击对应列表内的订单进入相应的订单详情页，展示当前订单的状态和对应的信息，当进入的是已完成订单时展示当前订单的收益，分别显示收入多少金额和对应的积分
## 功能分析
要实现订单详情查看的功能，首先需要在对应的item添加点击事件，传递当前的订单id过去详情页面，在详情页面接收对应的id，根据id查询当前对应的订单，展示到对应的组件内，然后根据订单内的weightid查询出当前订单的重量，件数，金额收益，积分收益，展示到已完成订单的详情内
## 代码实现
首先我们先吧对应的实体添加一下
```c
//订单
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 };
```
首先添加对应的点击事件，在所有的列表都要添加上
```c
.onClick(()=>{
router.pushUrl({url:"pages/recycle/order/RecycleOrderDetailsPage",params:{code:item.id}})
})
```
然后在订单详情页面接收对应的id
```c
let params = (this.getUIContext().getRouter().getParams() as Record<string, string>)['code']
if (params!=undefined&& params!=''){
this.orderCode=params
}
```
根据id查询出对应的订单详情
```c
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查询出对应的重量、收益、积分等信息
```c
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<void> {
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)
}
}
}
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70046889/viewspace-3089293/ ，如需转载，请注明出处，否则将追究法律责任。
