技术栈

Appgallery connect

开发准备

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

功能分析

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

代码实现

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

 @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("领取优惠券出错");
            }



        })

实现回调

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来控制了，然后我们接收登陆后的用户信息

 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);

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

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

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

 getCoupon():number{
    let eligibleCoupons = this.couponList.filter(coupon =>
    coupon.limit_amount <= this.price()
    ).length;
    return eligibleCoupons
  }

修改ui

    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)

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