《仿盒马》app开发技术分享-- 优惠券展示页（57）

## 技术栈

Appgallery connect

## 开发准备
上一节我们实现了优惠券的领取功能，并且在云端已经成功查询出优惠券信息，那么我们需要来实现一个优惠券展示的页面来向用户展示当前账号下的优惠券信息，辅助用户更好的去购买需要的商品，因为优惠券会有多种状态，在展示时也要注意不同状态的区分如何处理

## 功能分析
要实现优惠券的展示我们首先要获取当前登录的用户，因为我们在领取优惠券的时候插入了领券用户的userid，所以在查询的时候也要根据userid进行查询，在进入页面时就要查询出云端对应的优惠券内容展示到list列表中。

## 代码实现

首先我们需要在新建的优惠券展示页面新增topbar

```css
      CommonTopBar({ title: "优惠券", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})

```
我们获取当前已存储的用户信息

```css
 @State user: User|null=null
 const value = await StorageUtils.getAll('user');
    if (value != "") {
      this.user=JSON.parse(value)
    }
```
根据当前用户id去查询对应的优惠券列表

```css
  @State couponList:CouponMall[]=[]

let databaseZone = cloudDatabase.zone('default');
    let condition = new cloudDatabase.DatabaseQuery(coupon_mall);
    condition.equalTo("user_id",this.user?.user_id)
    let listData = await databaseZone.query(condition);
    let json = JSON.stringify(listData)
    let data:CouponMall[]= JSON.parse(json)
    this.couponList=data
```
查询到数据之后，添加list组件

```css
List({space:10}){
        ForEach(this.couponList,(item:CouponMall,index:number)=>{
          ListItem(){
         
          }
        })
      }
      .padding(10)
```
然后我们使用 @Builder 来实现条目的布局

```css
  @Builder
  Item(item:CouponMall){
    Column({space:10}){
      Row({space:10}){
        Column(){
          Text("¥"+item.price)
            .fontSize(30)
            .fontColor(Color.Red)
            .fontWeight(FontWeight.Bold)
          Text("满"+item.limit_amount+"元可用")
            .fontColor(Color.Red)
            .fontWeight(FontWeight.Bold)
            .fontSize(12)
        }

        Column({space:10}){
          Text(item.type_str)
            .fontColor(Color.Black)
            .fontWeight(FontWeight.Bold)
            .fontSize(16)

          Text(item.txt)
            .fontColor(Color.Grey)
            .fontSize(12)

        }
        Blank()
        Text("待使用")
          .width(80)
          .height(80)
          .borderRadius(40)
          .fontSize(14)
          .textAlign(TextAlign.Center)
          .fontColor(Color.White)
          .backgroundColor(Color.Red)
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      Divider().width('100%').height(0.8)
        .color("#e6e6e6")
      Text("有效期至"+item.start_time+"至"+item.end_time)
        .fontSize(12)
        .fontColor(Color.Grey)
    }.padding(10)
    .backgroundColor(Color.White)
    .borderRadius(10)
  }
```
然后把条目布局引用到listitem中

```css
 List({space:10}){
        ForEach(this.couponList,(item:CouponMall,index:number)=>{
          ListItem(){
            this.Item(item)
          }
        })
      }
      .padding(10)
```
执行代码查看当前优惠券列表的展示效果