## 技术栈
Appgallery connect
开发准备
上一节我们实现了兑换商品订单的确认揽收功能，实现了tabs切换时的数据刷新，实现了待收货订单的列表展示。这一节我们要实现确认收货功能，并且实现待收货的列表展示功能
功能分析
当我们点击确认揽收的时候，修改订单状态ordertype为3，同时刷新待收货订单列表的内容，切换tabs的时候，刷新已完成列表中的数据
代码实现
首先我们在待收货列表确认收货按钮实现修改订单状态的逻辑
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=3
order.points=item.points
order.msg=item.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.success_time=this.thisTime()
let num = await databaseZone.upsert(order);
if (num>0) {
showToast("您的订单已完成！")
this.onRefresh()
}
})
修改完成之后我们查询已完成列表
@State currentIndexCheck: number = 3
@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",3)
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",3)
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData)
let data: PointsOrderInfo[] = JSON.parse(json)
this.orderList=data
}
}
}
加载列表内容
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("完成时间:"+item.success_time)
.fontColor(Color.Black)
.fontSize(12)
.padding(5)
}
.width('100%')
}
.padding(10)
.backgroundColor(Color.White)
.borderRadius(10)
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
})
}
.padding(10)
到这里我们就实现了兑换商品的确认收货功能，展示了已完成兑换商品列表
