技术栈
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)
到这里我们的优惠券逻辑已经开始逐渐完善了
