## 技术栈

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)

```

这样我们的列表页面就完成了逻辑优化，变得通顺了