技术栈
Appgallery connect
开发准备
上一节我们实现了加入购物车和购物车列表的简单展示。对一个电商类的应用来说，这很显然是不够的，我们的购物车内容应该更加的丰富，他需要用户能自主的去选择想要结算的商品，删除一些不需要的商品，或者取消掉一些本次不结算的商品，同时根据选择的不同，我们需要把相对应的价格和选择的数量等信息传递给用户，帮助用户节省更多的时间。
功能分析
1.商品选中
在表中我们定义了多个参数来帮助我们更好的去实现功能，这里我们需要用到这些参数来进行条件判断，当商品选中和未选中时候我们需要修改数据源中isNeedPay的状态的，然后渲染列表，以这样的方式去实现。
2.商品加减
商品的新增和减少我们也需要针对数据源进行操作，增减我们会控制事先预留的buyAmount字段进行加减，同时要对数据做好判断，不要出现减为负数的情况，同时增减都要刷新列表对应条目的状态
3.商品删除
商品删除我们使用ListItem的swipeAction 去实现，我们只需要定义好删除的ui样式，把相关逻辑写到点击事件中即可
4.价格计算
计算选中商品的价格和数量，并且在选中和增减的事件里调用，只要状态变化价格就要有对应的变化。
代码实现
import { CartProductList } from "../entity/CartProductList"
import { cloudDatabase } from "@kit.CloudFoundationKit";
import { cart_product_list } from "../clouddb/cart_product_list";
import { hilog } from "@kit.PerformanceAnalysisKit";
import showToast from "../utils/ToastUtils";
let databaseZone = cloudDatabase.zone('default');
@Preview
@Component
export struct CartList {
@State productList:CartProductList[]=[]
@State flag:boolean=false
@State checkCount:number=0
@State allPrice:number=0
@State allOriginalPrice:number=0
private scroller: ListScroller = new ListScroller();
async aboutToAppear(): Promise {
let condition = new cloudDatabase.DatabaseQuery(cart_product_list);
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData)
this.productList= JSON.parse(json)
hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${listData}`);
this.getCountPrice()
this.flag=true
}
@Builder itemEnd(item:CartProductList) {
Row() {
Button('删除').margin(4)
.onClick(()=>{
let index = this.productList.indexOf(item);
this.productList.splice(index, 1);
})
}.padding(10).justifyContent(FlexAlign.SpaceEvenly)
}
build() {
Column(){
if (this.flag){
List({scroller:this.scroller}){
ForEach(this.productList,(item:CartProductList,index:number)=>{
ListItem(){
Row(){
Image(item.isNeedPay?$r('app.media.cart_check'):$r('app.media.cart_no_check'))
.height(20)
.width(20)
.objectFit(ImageFit.Contain)
.onClick(()=>{
if (item.isNeedPay) {
item.isNeedPay=false
this.productList[index] = new CartProductList(item.id, item.productId, item.productSpecId, item.productName, item.productSpecName,
item.buyAmount, item.isNeedPay,item.activityType,item.productImgAddress,
item.productOriginalPrice, item.productPrice, item.couponPrice)
}else {
item.isNeedPay=true
this.productList[index] = new CartProductList(item.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()
}
})
Image(item.productImgAddress)
.height(120)
.width(120)
.margin({left:10})
Column(){
Text(item.productName)
.fontColor(Color.Black)
.fontSize(16)
Text(item.productSpecName)
.fontColor(Color.Grey)
.fontSize(14)
Text(){
Span("¥ ")
.fontSize(14)
.fontColor(Color.Red)
Span(item.productPrice+"")
.fontSize(22)
.fontColor(Color.Red)
}
Text("¥"+item.productOriginalPrice+"")
.fontColor('#999')
.decoration({
type: TextDecorationType.LineThrough,
color: Color.Gray
})
.fontSize(16)
.margin({left:10})
}
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(()=>{
if (item.buyAmount==1) {
showToast("已经是最小数量了")
}else {
item.buyAmount--
this.productList[index] = new CartProductList(item.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:20,right:20})
.border({width:0.5,color:Color.Gray})
Text(" + ")
.textAlign(TextAlign.Center)
.fontColor(Color.Black)
.fontSize(14)
.height(20)
.padding({left:7,right:7})
.onClick(()=>{
item.buyAmount++
this.productList[index] = new CartProductList(item.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)
}
.padding(10)
.alignItems(VerticalAlign.Center)
}
.swipeAction({
end: {
builder: () => { this.itemEnd(item) },
actionAreaDistance: 56
}
})
})
}
.height('auto')
.layoutWeight(1)
}
Row(){
Text("合计：")
.fontColor(Color.Black)
Text(){
Span("¥ ")
.fontSize(14)
.fontColor(Color.Red)
Span(this.allPrice.toFixed(2))
.fontSize(22)
.fontColor(Color.Red)
}
Blank()
Text("去结算"+"("+this.checkCount+")")
.fontColor(Color.White)
.padding(10)
.borderRadius(20)
.backgroundColor('#ccfa1818')
}
.justifyContent(FlexAlign.SpaceBetween)
.padding(10)
}
}
getCountPrice(){
this.allPrice=0
this.allOriginalPrice=0
this.checkCount=0
for (let i = 0; i < this.productList.length; i++) {
if (this.productList[i].isNeedPay) {
this.checkCount+=this.productList[i].buyAmount
this.allPrice+=this.productList[i].productPricethis.productList[i].buyAmount
this.allOriginalPrice+=this.productList[i].productOriginalPricethis.productList[i].buyAmount
}
}
}
}
到这里列表的展示价格的计算都已经实现了
