《仿盒马》app开发技术分享--未完成订单列表展示逻辑优化(61)

举报
yd_215151764 发表于 2025/06/30 10:43:47 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 前言:上一节我们实现订单与优惠券的联合提交时,我去到订单列表页面查看生成的订单信息,发现现在的订单从信息展示到价格计算全都是有问题的。所以紧急的把对应的问题修改一下。问题来源:```cssasync aboutToAppear(): Promise<void> {    const value = await StorageUtils.g...


## 技术栈

Appgallery connect
## 前言:
上一节我们实现订单与优惠券的联合提交时,我去到订单列表页面查看生成的订单信息,发现现在的订单从信息展示到价格计算全都是有问题的。所以紧急的把对应的问题修改一下。

问题来源:

```css
async aboutToAppear(): Promise<void> {
    const value = await StorageUtils.getAll('user');
    if (value != "") {
      this.user = JSON.parse(value)
    }
    if (this.currentIndexCheck==this.currentIndex) {
      let databaseZone = cloudDatabase.zone('default');
      let condition = new cloudDatabase.DatabaseQuery(order_list);
      condition.equalTo("user_id",this.user?.user_id).and().equalTo("order_status",0)
      let listData = await databaseZone.query(condition);
      let json = JSON.stringify(listData)
      let data1:OrderList[]= JSON.parse(json)
      this.orderInfo=data1


      let condition1 = new cloudDatabase.DatabaseQuery(order_product_list);
      condition1.equalTo("order_product_id",data1[0].order_product_id)
      let listData1 = await databaseZone.query(condition1);
      let json1 = JSON.stringify(listData1)
      this.productList=JSON.parse(json1)

      this.flag=true
    }
  }
```

我们可以看到,当我们进入到待发货页面的时候,我们进行了orderlist所有订单的请求,这里的请求是没有错的,我们继续向下,这时候我们通过条件进行数据查询

```css
condition1.equalTo("order_product_id",data1[0].order_product_id)
```
这里我们直接拿了当前第一条数据放到list中去执行逻辑,这就会导致,我们列表的所有内容展示的都是第一条的相关商品和价格,展示的图片和价格都是一样的。

发现问题之后决定采用map来存储不同order_product_id对应的数据,这样我们在循环的时候用order_product_id来作为key ,取出对应的数据就好了。现在我们来进行修改。

```css
//先定义一个全局的map接收内容
  @State mapList:Map<string,OrderProductList[]>|null=null


//在这里把原先只请求第一条的逻辑替换掉存到map中

```css
const myMap = new Map<string,OrderProductList[]>();
      for (let i = 0; i <data1.length; i++) {
        let condition1 = new cloudDatabase.DatabaseQuery(order_product_list);
        condition1.equalTo("order_product_id",data1[i].order_product_id)
        let listData1 = await databaseZone.query(condition1);
        let json1 = JSON.stringify(listData1)
        myMap.set(data1[i].order_product_id,JSON.parse(json1))

      }
      this.mapList=myMap
```
现在我们就拿到了所有的order_product_list对应的商品数据了,现在我们还缺少对应的价格计算

```css
//因为我们列表是通过循环展示的,这样每次我们都只会取一条数据出来,所以我们只需要取出key 对应的数组中的第一条数据即可


 price(item:OrderList):number{
   const  money= this.mapList!.get(String(item.order_product_id))
    return  money![0].buyAmount*money![0].price
  }
```
在商品流数据展示的list我们也要吧数据源修改一下

```css
  List({space:10}){
                  ForEach(this.mapList?.get(item.order_product_id),(pos:OrderProductList)=>{
                    ListItem(){
                      Column(){
                        Image(pos.img)
                          .height(60)
                          .width(60)
                          .borderRadius(5)
                      }
                    }
                  })
                }
                .padding({left:10})
                .width('100%')
                .listDirection(Axis.Horizontal)
                .height(80)
```
这样我们的列表页面就完成了逻辑优化,变得通顺了

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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