《仿盒马》app开发技术分享-- 兑换商品确认揽收&待收货列表展示（78）
## 技术栈
Appgallery connect
## 开发准备
上一节我们实现了订单取消功能，实现了tabs切换时的数据刷新，实现了已取消订单的列表展示。这一节我们要实现揽收功能，并且实现待收货的列表展示功能
## 功能分析
当我们点击确认揽收的时候，修改订单状态ordertype为2，同时刷新待发货订单列表的内容，切换tabs的时候，刷新待收货列表中的数据
## 代码实现
首先实现确认揽收的数据状态修改
```css
Row({space:10}){
Text()
Blank()
Text("确认揽收")
.fontColor(Color.Black)
.fontSize(12)
.padding(5)
.borderRadius(10)
.backgroundColor(Color.Pink)
.onClick(async ()=>{
let order=new points_order_info()
order.id=item.id
order.user_id=String(this.user!.user_id)
order.order_code=item.order_code
order.url=item.url
order.name=item.name
order.order_type=2
order.points=item.points
if (item.msg!='') {
order.msg=item.msg
}else {
order.msg="无"
}
order.amount=1
order.nike_name=item.nike_name
order.address=item.address
order.phone=item.phone
order.crete_time=item.crete_time
order.cancel_time=this.thisTime()
let num = await databaseZone.upsert(order);
if (num>0) {
showToast("您的订单已揽收！")
this.onRefresh()
}
})
Text("取消订单")
.fontColor(Color.Black)
.fontSize(12)
.padding(5)
.borderRadius(10)
.border({width:1,color:Color.Grey})
.onClick(async ()=>{
let order=new points_order_info()
order.id=item.id
order.user_id=String(this.user!.user_id)
order.order_code=item.order_code
order.url=item.url
order.name=item.name
order.order_type=1
order.points=item.points
if (item.msg!='') {
order.msg=item.msg
}else {
order.msg="无"
}
order.amount=1
order.nike_name=item.nike_name
order.address=item.address
order.phone=item.phone
order.crete_time=item.crete_time
order.cancel_time=this.thisTime()
let num = await databaseZone.upsert(order);
if (num>0) {
showToast("兑换取消成功")
this.onRefresh()
}
})
}
.width('100%')
```
然后我们实现待收货页面切换订单刷新
```css
@State currentIndexCheck: number = 2
@Prop @Watch("onRefresh") currentIndex:number=0
@State orderList:PointsOrderInfo[]=[]
@State user: User|null=null
async onRefresh(){
if (this.currentIndexCheck==this.currentIndex) {
if (this.user != null) {
let condition = new cloudDatabase.DatabaseQuery(points_order_info);
condition.equalTo("user_id", this.user?.user_id).and().equalTo("order_type",2)
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData)
let data: PointsOrderInfo[] = JSON.parse(json)
this.orderList=data
}
}
}
async aboutToAppear(): Promise<void> {
const value = await StorageUtils.getAll('user');
if (value != "") {
this.user = JSON.parse(value)
if (this.user != null) {
let condition = new cloudDatabase.DatabaseQuery(points_order_info);
condition.equalTo("user_id", this.user?.user_id).and().equalTo("order_type",2)
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData)
let data: PointsOrderInfo[] = JSON.parse(json)
this.orderList=data
}
}
}
```
数据查询出来之后我们实现订单列表展示，添加上确认收货按钮
```css
List({space:10}){
ForEach(this.orderList,(item:PointsOrderInfo,index:number)=>{
ListItem(){
Column({space:10}){
Row(){
Text("订单编号："+item.order_code)
.fontColor(Color.Black)
.fontSize(14)
Text("待收货")
.fontColor(Color.Black)
.fontSize(14)
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
Row({space:10}){
Image($r('app.media.duihuan'))
.height(40)
.width(40)
.borderRadius(5)
Column({space:10}){
Text("商品类型 积分兑换")
.fontColor(Color.Black)
.fontSize(14)
Text("兑换时间 "+item.crete_time)
.fontColor(Color.Black)
.fontSize(14)
Text("联系方式 "+item.phone)
.fontColor(Color.Black)
.fontSize(14)
Text("取件地址 "+item.address)
.fontColor(Color.Black)
.fontSize(14)
}.alignItems(HorizontalAlign.Start)
}
.margin({top:10})
.alignItems(VerticalAlign.Top)
.width('100%')
.justifyContent(FlexAlign.Start)
Row({space:10}){
Text()
Blank()
Text("确认收货")
.fontColor(Color.Black)
.fontSize(12)
.padding(5)
.borderRadius(10)
.backgroundColor(Color.Pink)
}
.width('100%')
}
.padding(10)
.backgroundColor(Color.White)
.borderRadius(10)
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.onClick(()=>{
})
}
})
}
.padding(10)
```
在tabcontent中引用
```css
TabContent() {
Column(){
LoadingPointsItem({currentIndex:this.currentIndex})
}.width('100%').height('100%')
}.tabBar(this.tabBuilder(2, '待收货'))
```
到这里我们的确认揽收跟待收货列表展示就实现了
- 点赞
- 收藏
- 关注作者
评论（0）