- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

《仿盒马》app开发技术分享-- 兑换商品订单详情页（80）

yd_215151764 发表于 2025/06/30 10:52:04 2025/06/30

【摘要】 ## 技术栈Appgallery connect## 开发准备我们的兑换商品列表相关的功能都已经实现的差不多了，现在我们还缺少一个订单详情查看的功能，为了ui一致性，我们的订单详情页样式要保持一致性，外观要跟订单、回收单的详情页相似。## 功能分析要实现订单详情首先我们需要拿到订单id，根据订单id去查询出对应的订单信息，拿到订单信息之后，根据ordertype去展示不同的订单状态，根据订单...

## 技术栈

Appgallery connect

## 开发准备
我们的兑换商品列表相关的功能都已经实现的差不多了，现在我们还缺少一个订单详情查看的功能，为了ui一致性，我们的订单详情页样式要保持一致性，外观要跟订单、回收单的详情页相似，我们把对应的数据填充到组件内

## 功能分析
接下来我们实现订单数据展示的内容，要实现订单详情首先我们需要拿到订单id，拿到订单id之后，我们通过订单id，根据云数据库的查询api去查询出对应的订单信息，拿到订单信息之后，根据ordertype去展示不同的订单状态，根据订单的状态展示不同的时间戳。

## 代码实现
首先我们在订单列表条目上添加对应的点击事件，传递订单id到详情页，因为我们只需要传递一个id过去，就不创建一个新的对象了

```css
.onClick(()=>{
router.pushUrl({url:"pages/recycle/points/PointsOrderDetailsPage",params:{code:item.id}})
})
```
在订单详情页，我们创建对应的变量，通过getParams来接收id，根据id查询订单数据，然后我们把数据赋值给我们创建的变量

```css
@State orderInfo:PointsOrderInfo|null=null
@State orderCode:string=''
@State flag:boolean=false
@State titleStr:string=''
@State msgStr:string=''
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(points_order_info);
condition.equalTo("id",this.orderCode!)
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData)
let data1:PointsOrderInfo[]= JSON.parse(json)
this.orderInfo=data1[0]
```
查询出数据后根据ordertype展示订单状态，根据不同的状体展示不同的字符串，我们在后台设置了0-3的不同状态，只需要根据type设置对应的字符串即可

```css
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='商品兑换订单已完成'
}

```
接下来根据获取的内容，我们选择最外层的滚动组件，因为我们的订单详情页内容非常多，不能在一个屏幕中展示完全，所以使用Scroll，展示订单内容

```css
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.duihuan'))
.height(70)
.width(70)
.margin({ left: 10 })
.borderRadius(10)
Column({ space: 5 }) {
Text("积分兑换")
.fontColor(Color.Black)
.fontSize(14)

Text("积分扣除："+this.orderInfo?.points)
.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")

}

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?.order_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?.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!.crete_time)
.fontColor(Color.Black)
.fontSize(14)
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.padding(10)

Row(){
Text("取消时间：")
.fontSize(16)
.fontColor(Color.Black)
Blank()
Text(this.orderInfo!.crete_time)
.fontColor(Color.Black)
.fontSize(14)
}
.visibility(this.orderInfo?.cancel_time!=null?Visibility.Hidden:Visibility.None)
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.padding(10)
Row(){
Text("完成时间：")
.fontSize(16)
.fontColor(Color.Black)
Blank()
Text(this.orderInfo!.success_time)
.fontColor(Color.Black)
.fontSize(14)
}
.visibility(this.orderInfo?.success_time!=null?Visibility.Hidden:Visibility.None)
.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)
```
这样我们就实现了兑换商品订单的详情页

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

《仿盒马》app开发技术分享-- 兑换商品订单详情页（80）

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

《仿盒马》app开发技术分享-- 兑换商品订单详情页（80）

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品