技术栈
Appgallery connect
开发准备
我们的app主要购物功能已经开发的相对来说比较完善了，接下来就针对各个功能的逻辑性进行迭代和修改，让我们的程序更加的健壮，减少一些逻辑上的bug
功能分析
在之前的开发中我们的购物车功能已经实现，但是在后来的使用中发现当新增商品的时候，会有添加不了商品的情况这主要是因为在商品规格弹窗 SpecDialog中我们的user用了@Provide,这里我们换成@State然后在购物车中当我们有位选中或者全都未选中的时候，我们点击结算，依然能够跳转到订单确认页，这时候我么的逻辑就有问题了，我们针对未选中状态进行逻辑优化
代码实现
首先在规格弹窗中我们优化一下添加逻辑
Row(){
Text("加入购物车")
.width('70%')
.borderRadius(30)
.textAlign(TextAlign.Center)
.fontColor(Color.Black)
.margin({top:70})
.height(40)
.fontSize(18)
.fontWeight(FontWeight.Bold)
.backgroundColor("#FCDB29")
.onClick(async ()=>{
try {
if (this.user==null&&this.user==undefined) {
showToast("请先登录")
return
}
let databaseZone = cloudDatabase.zone('default');
let condition = new cloudDatabase.DatabaseQuery(cart_product_list);
condition.equalTo("productId",this.product?.id).and().equalTo("productSpecId",this.specList[this.checkIndex].id)
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData)
hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${json}`);
let request:CartProductList[]=JSON.parse(json)
let cartPush = new cart_product_list();
if (request.length>0) {
let data:CartProductList=request[0]
cartPush.id=data.id;
if (this.user!=null) {
cartPush.user_id=this.user!.user_id
}
cartPush.productId=data.productId//商品id
cartPush.productSpecId=data.productSpecId//规格id
cartPush.productName=data.productName//商品名称
cartPush.productSpecName=data.productSpecName
cartPush.productImgAddress=data.productImgAddress
cartPush.buyAmount=this.addNumber+data.buyAmount//商品数量
cartPush.isNeedPay=data.isNeedPay//是否选中 默认为true
cartPush.activityType=data.activityType//活动类型 暂无
cartPush.productPrice=data.productPrice//价格
cartPush.productOriginalPrice=data.productOriginalPrice//划线价
cartPush.couponPrice=data.couponPrice
}else {
cartPush.id=Math.floor(Math.random() * 1000000);
cartPush.productId=this.product!.id//商品id
if (this.user!=null) {
cartPush.user_id=this.user!.user_id
}
cartPush.productSpecId=this.specList[this.checkIndex].id//规格id
cartPush.productName=this.product!.name//商品名称
cartPush.productSpecName=this.specList[this.checkIndex].name
cartPush.productImgAddress=this.product!.url//图片地址
cartPush.buyAmount=this.addNumber//商品数量
cartPush.isNeedPay=true//是否选中 默认为true
cartPush.activityType="1"//活动类型 暂无
cartPush.productPrice=this.product!.price//价格
cartPush.productOriginalPrice=this.product!.original_price//划线价
cartPush.couponPrice=0
}
let num = await databaseZone.upsert(cartPush);
hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${num}`);
if (num>0) {
showToast("添加商品成功")
}
let eventData: emitter.EventData = {
data: {}
};
let innerEvent: emitter.InnerEvent = {
eventId: 1011,
priority: emitter.EventPriority.HIGH
};
emitter.emit(innerEvent, eventData);
this.controller.close()
}catch (err) {
hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${err}`);
}
})
}
.width('100%')
.justifyContent(FlexAlign.Center)然后我们实现全都未选中的时候提示用户，并且不跳转订单确认页面
isAllTrue(list: CartProductList[]): boolean {
for (const item of list) {
if (item['isNeedPay'] === true) return true;
}
return false;
}
只要有一条是选中的我们就继续执行后续的逻辑，到了确认订单页面，我们拿到传递过来的数据根据isNeedPay 进行筛选，我们只拿为true的数据，其他的数据我们就不需要了，因为它没被结算依然要存储在购物车中。
onPageShow(): void {
let params = router.getParams() as DataModel
if (params!=null&¶ms.json!=undefined){
let list:CartProductList[]=JSON.parse(params.json)
for (let i = 0; i < list.length; i++) {
if (list[i].isNeedPay) {
this.productList.push(list[i])
}
}
}
let params1 = router.getParams() as AddressModel
if (params1!=null&¶ms1.address!=undefined){
this.addressInfo=JSON.parse(params1.address)
}
}到这里我们就对购物车逻辑进行了第一轮优化
之后我们继续进行逻辑漏洞的寻找，发现当我们选中和取消数据的时候，我们修改数据忘记了传入userid，这会导致我们的数据失去userid，下次在进入购物车查询，这些取消选中的数据都会消失掉，因为我们是根据用户的userid去进行查询的，在这里我们添加对应的逻辑
Image(item.isNeedPay?$r('app.media.cart_check'):$r('app.media.cart_no_check'))
.height(20)
.width(20)
.objectFit(ImageFit.Contain)
.onClick(async ()=>{
let cartPush = new cart_product_list();
let data:CartProductList=item
cartPush.id=data.id;
cartPush.user_id=this.user!.user_id
cartPush.productId=data.productId//商品id
cartPush.productSpecId=data.productSpecId//规格id
cartPush.productName=data.productName//商品名称
cartPush.productSpecName=data.productSpecName
cartPush.productImgAddress=data.productImgAddress
cartPush.buyAmount=data.buyAmount//商品数量
cartPush.activityType=data.activityType//活动类型 暂无
cartPush.productPrice=data.productPrice//价格
cartPush.productOriginalPrice=data.productOriginalPrice//划线价
cartPush.couponPrice=data.couponPrice
if (item.isNeedPay) {
item.isNeedPay=false
this.productList[index] = new CartProductList(item.id,item.user_id, item.productId, item.productSpecId, item.productName, item.productSpecName,
item.buyAmount, item.isNeedPay,item.activityType,item.productImgAddress,
item.productOriginalPrice, item.productPrice, item.couponPrice)
cartPush.isNeedPay=false
}else {
item.isNeedPay=true
this.productList[index] = new CartProductList(item.id,item.user_id, item.productId, item.productSpecId, item.productName, item.productSpecName,
item.buyAmount, item.isNeedPay,item.activityType,item.productImgAddress,
item.productOriginalPrice, item.productPrice, item.couponPrice)
cartPush.isNeedPay=true
}
let num = await databaseZone.upsert(cartPush);
hilog.info(0x0000, 'TAG', `已修改数据条目: ${num}`);
this.getCountPrice()
})继续向下查看，发现在添加或者减少商品数量的时候，我们依旧没有处理userid，添加对应的逻辑
Row(){
Text("-")
.textAlign(TextAlign.Center)
.border({width:0.5,color:Color.Gray})
.fontSize(14)
.height(20)
.padding({left:7,right:7})
.fontColor(Color.Black)
.onClick(async ()=>{
if (item.buyAmount==1) {
showToast("已经是最小数量了")
}else {
item.buyAmount--
let cartPush = new cart_product_list();
let data:CartProductList=item
cartPush.id=data.id;
cartPush.user_id=this.user!.user_id
cartPush.productId=data.productId//商品id
cartPush.productSpecId=data.productSpecId//规格id
cartPush.productName=data.productName//商品名称
cartPush.productSpecName=data.productSpecName
cartPush.productImgAddress=data.productImgAddress
cartPush.buyAmount=item.buyAmount//商品数量
cartPush.activityType=data.activityType//活动类型 暂无
cartPush.productPrice=data.productPrice//价格
cartPush.productOriginalPrice=data.productOriginalPrice//划线价
cartPush.couponPrice=data.couponPrice
cartPush.isNeedPay=data.isNeedPay
let num = await databaseZone.upsert(cartPush);
hilog.info(0x0000, 'TAG', `已修改数据条目: ${num}`);
this.productList[index] = new CartProductList(item.id, item.user_id,item.productId, item.productSpecId, item.productName, item.productSpecName,
item.buyAmount, item.isNeedPay,item.activityType,item.productImgAddress,
item.productOriginalPrice, item.productPrice, item.couponPrice)
this.getCountPrice()
}
})
.borderRadius({topLeft:5,bottomLeft:5})
Text(item.buyAmount+"")
.textAlign(TextAlign.Center)
.fontColor(Color.Black)
.fontSize(14)
.height(20)
.padding({left:10,right:10})
.border({width:0.5,color:Color.Gray})
Text("+")
.textAlign(TextAlign.Center)
.fontColor(Color.Black)
.fontSize(14)
.height(20)
.padding({left:7,right:7})
.onClick(async ()=>{
item.buyAmount++
let cartPush = new cart_product_list();
let data:CartProductList=item
cartPush.id=data.id;
cartPush.user_id=this.user!.user_id
cartPush.productId=data.productId//商品id
cartPush.productSpecId=data.productSpecId//规格id
cartPush.productName=data.productName//商品名称
cartPush.productSpecName=data.productSpecName
cartPush.productImgAddress=data.productImgAddress
cartPush.buyAmount=item.buyAmount//商品数量
cartPush.activityType=data.activityType//活动类型 暂无
cartPush.productPrice=data.productPrice//价格
cartPush.productOriginalPrice=data.productOriginalPrice//划线价
cartPush.couponPrice=data.couponPrice
cartPush.isNeedPay=data.isNeedPay
let num = await databaseZone.upsert(cartPush);
hilog.info(0x0000, 'TAG', `已修改数据条目: ${num}`);
this.productList[index] = new CartProductList(item.id, item.user_id,item.productId, item.productSpecId, item.productName, item.productSpecName,
item.buyAmount, item.isNeedPay,item.activityType,item.productImgAddress,
item.productOriginalPrice, item.productPrice, item.couponPrice)
this.getCountPrice()
})
.border({width:0.5,color:Color.Gray})
.borderRadius({topRight:5,bottomRight:5})
}
.justifyContent(FlexAlign.SpaceBetween)到这里我们的购物车相对来说就变得比较健壮了
