## 技术栈

Appgallery connect

## 开发准备

我们已经实现了优惠券的领取和展示，现在已经趋近于一个完整的电商应用了，但是这时候问题又来了，我们领取完优惠券之后，我们的新用户优惠券模块依然存在，他并没有消失，既然我们是从云数据库中查询的数据，那么我们需要找到一个字段跟他对应起来，来实现新用户领券后关闭这个模块的展示，同时我们在未登录的时候他也要保持隐藏，登录后能实现优惠券的领取。然后在结算的时候得出有几张符合的券能用

## 功能分析

因为我们的优惠券展示是用的组件的方式，我们没有登录的情况下组件因为并没有被销毁，aboutToAppear已经不会再执行了，所以获取不到user信息，我们需要解决这个问题，保证user信息能及时的获取，在表创建的时候我们预留了一个字段isvip，现在我们用它来判断是否为新用户即可，去到了确认订单页面我们获取到符合最小金额的可用优惠券

## 代码实现

首先我们在优惠券领取之后，使用回调的方式修改isvip的状态，同时接收登陆后传递的信息，我们传user信息进组件内

```css

 @Link user: User|null

 private  callback?: () => void

  Button('立即领取', { type: ButtonType.Normal })

        .width(240)

        .height(40)

        .backgroundColor('#FF0000')

        .fontColor(Color.White)

        .borderRadius(20)

        .margin({ bottom: 16 })

        .onClick(async ()=>{

            try {

              for (const item of this.couponList) {

                const coupon = new coupon_mall();

                coupon.id=Math.floor(Math.random() * 1000000);

                coupon.user_id=this.user!.user_id

                coupon.coupon_id=item.coupon_id

                coupon.price=Number(item.price)

                coupon.type=0

                coupon.limit_amount=item.limit_amount

                coupon.start_time=this.creatTime()

                coupon.end_time=this.endTime()

                coupon.type_str=item.type

                coupon.txt="全场商品通用"

                const databaseZone = cloudDatabase.zone('default');

                await databaseZone.upsert(coupon); // 等待当前操作完成

              }

              // 所有循环完成后执行

              showToast("优惠券领取成功");

              this.callback!()

            } catch (error) {

              hilog.error(0x0000, 'testTag', `插入失败: ${error}`);

              showToast("领取优惠券出错");

            }

        })

```

实现回调

```css

CouponComponent({home_activity:this.home_new_people_coupon,couponList:this.couponList,callback: async ()=>{

                    let users=new user()

                    users.id=this.user!.id

                    users.user_id=this.user!.user_id

                    users.user_name=this.user!.user_name

                    users.psw=this.user!.psw

                    users.is_vip=false

                    users.user_code=this.user!.user_code

                    users.is_log_off=this.user!.is_vip

                    let num = await databaseZone.upsert(users);

                    StorageUtils.set("user",JSON.stringify(users))

                    if (num>0) {

                        let condition3 = new cloudDatabase.DatabaseQuery(user);

                        condition3.equalTo("user_name",this.user?.user_name).and().equalTo("psw",this.user?.psw)

                        let listData3 = await databaseZone.query(condition3);

                        let json3 = JSON.stringify(listData3)

                        let data3:User[]= JSON.parse(json3)

                        this.user=data3[0]

                    }

                  },user:this.user})

                    .visibility(this.user?.is_vip?Visibility.Visible:Visibility.None)

```

现在我们的显示隐藏需要用isvip来控制了，然后我们接收登陆后的用户信息

```css

 let innerEvent2: emitter.InnerEvent = {

      eventId: 2001

    };

    let callback2: Callback<emitter.EventData> = async (eventData: emitter.EventData) => {

      console.info(`eventData: ${JSON.stringify(eventData)}`);

      const value = await StorageUtils.getAll('user');

      if (value != "") {

        this.user = JSON.parse(value)

      }else {

        this.userInfo=null

        this.user=null

      }

    }

    emitter.on(innerEvent2, callback2);

```

实现自后我们来到确认订单页面，先查询出可用的优惠券

```css

let databaseZone = cloudDatabase.zone('default');

    let condition = new cloudDatabase.DatabaseQuery(coupon_mall);

    condition.equalTo("user_id", this.user?.user_id).and().equalTo("type",0)

    let listData = await databaseZone.query(condition);

    let json = JSON.stringify(listData)

    let data: CouponMall[] = JSON.parse(json)

    this.couponList = data

```

根据结算金额来筛选出有多少张优惠券能够使用

```css

 getCoupon():number{

    let eligibleCoupons = this.couponList.filter(coupon =>

    coupon.limit_amount <= this.price()

    ).length;

    return eligibleCoupons

  }

```

修改ui

```css

    Row(){

            Text("优惠券")

              .fontSize(14)

              .fontColor(Color.Black)

            if (this.getCoupon()>0){

              Text("可用"+this.getCoupon()+"张")

                .fontSize(14)

                .fontColor(Color.Red)

            }else {

              Text("无可用优惠券")

                .fontSize(14)

                .fontColor(Color.Black)

            }

          }

          .padding(10)

          .width('100%')

          .justifyContent(FlexAlign.SpaceBetween)

```

到这里我们的优惠券逻辑已经开始逐渐完善了