技术栈
Appgallery connect
开发准备
上一节我们实现了商品详情页面，并且成功在页面上展示了商品的图片、商品规格、活动详情等信息，要知道同一种商品大多数都是有多种型号跟规格的，所以这一节我们来实现商品的规格弹窗。这节的要点是自定义弹窗的运用。
功能分析
规格弹窗，我们的数据源需要根据当前商品的specid当条件去规格表里查询对应的数据，需要我们针对id做一个查询。
弹窗的唤起逻辑是我们点击规格列表时，以及点击加入购物车时，这时候我们再去选择对应的规格
代码实现
先创建对应的表结构 { "objectTypeName": "product_details_spec", "fields": [ {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true}, {"fieldName": "spec_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0}, {"fieldName": "name", "fieldType": "String"}, {"fieldName": "url", "fieldType": "String"}, {"fieldName": "price", "fieldType": "Double"}, {"fieldName": "original_price", "fieldType": "Double"}, {"fieldName": "maxLoopAmount", "fieldType": "Integer"}, {"fieldName": "loopAmount", "fieldType": "Integer"}, {"fieldName": "coupon", "fieldType": "Double"} ], "indexes": [ {"indexName": "field1IndexId", "indexList": [{"fieldName":"id","sortType":"ASC"}]} ], "permissions": [ {"role": "World", "rights": ["Read"]}, {"role": "Authenticated", "rights": ["Read", "Upsert"]}, {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]}, {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]} ] } 然后我们填充几条数据进去，可以暂时不用管一致性 { "cloudDBZoneName": "default", "objectTypeName": "product_details_spec", "objects": [ { "id": 10, "spec_id": 10, "name": "红颜草莓", "url": "在线图片链接", "price": 23, "original_price": 27, "maxLoopAmount": 8, "loopAmount": 10, "coupon": 10 }, { "id": 20, "spec_id": 10, "name": "蓝颜草莓", "url": "在线图片链接", "price": 70, "original_price": 99, "maxLoopAmount": 20, "loopAmount": 20, "coupon": 20 }, { "id": 30, "spec_id": 10, "name": "紫颜草莓", "url": "在线图片链接", "price": 19, "original_price": 33, "maxLoopAmount": 10, "loopAmount": 10, "coupon": 10.5 }, { "id": 60, "spec_id": 11, "name": "麒麟", "url": "在线图片链接", "price": 20.5, "original_price": 20.5, "maxLoopAmount": 20, "loopAmount": 20, "coupon": 20.5 }, { "id": 70, "spec_id": 11, "name": "甜王", "url": "在线图片链接", "price": 10.5, "original_price": 10.5, "maxLoopAmount": 10, "loopAmount": 10, "coupon": 10.5 }, { "id": 80, "spec_id": 11, "name": "早春红玉", "url": "在线图片链接", "price": 20.5, "original_price": 20.5, "maxLoopAmount": 20, "loopAmount": 20, "coupon": 20.5 },{ "id": 90, "spec_id": 11, "name": "黑美人", "url": "在线图片链接", "price": 10.5, "original_price": 10.5, "maxLoopAmount": 10, "loopAmount": 10, "coupon": 10.5 } ] }
紧接着我们根据详情页的id 查询出对应的规格集合
let databaseZone = cloudDatabase.zone('default');
let condition = new cloudDatabase.DatabaseQuery(product_details_spec);
condition.equalTo("spec_id",this.productParams.spec_id)
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData)
let data:ProductDetailsSpec[]= JSON.parse(json)
this.specList=data
hilog.error(0x0000, 'testTag', Failed to query data, code: ${this.specList});
然后创建自定义弹窗，把查询的数据传入进去进行页面的绘制
import { ProductDetailsSpec } from "../entity/ProductDetailsSpec"; import showToast from "../utils/ToastUtils";
@CustomDialog export default struct SpecDialog{ @State specList:ProductDetailsSpec[]=[];
controller: CustomDialogController @State productSpec?:ProductDetailsSpec|null=null @State @Watch("onChange") checkIndex:number=0 @State selectedItem:number = -1; // 当前选中的位置 @State addNumber:number=1//商品默认添加数量 aboutToAppear(): void { this.productSpec=this.specList[this.checkIndex] }
onChange(){ this.productSpec=this.specList[this.checkIndex] }
build(){ Column({space:10}){ Row(){ Image(this.productSpec?.url) .height(100) .width(100)
Column(){
Row(){
Text(){
Span("¥")
.fontSize(16)
.fontColor(Color.Red)
Span(this.productSpec?.price+"")
.fontSize(22)
.fontWeight(FontWeight.Bold)
.padding({top:10})
.fontColor(Color.Red)
}
.margin({left:15})
Text("¥"+String(this.productSpec?.original_price))
.fontSize(16)
.fontColor('#999')
.decoration({
type: TextDecorationType.LineThrough,
color: Color.Gray
})
.margin({left:10})
}
}
Blank()
Image($r('app.media.spec_dialog_close'))
.height(20)
.width(20)
}
.alignItems(VerticalAlign.Top)
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Divider().width('90%').height(0.5)
List({space:10}){
ForEach(this.specList,(item:ProductDetailsSpec,index:number)=>{
ListItem(){
Text(item.name)
.backgroundColor(Color.Green)
.padding(3)
.borderRadius(5)
.backgroundColor(this.checkIndex==index?"#FCDB29":Color.Grey)
.fontColor(this.checkIndex==index?"#000000":Color.White)
.onClick(()=>{
this.checkIndex=index
})
}
})
}
.height(50)
.listDirection(Axis.Horizontal)
Row(){
Text("购买数量")
.fontSize(16)
.fontColor(Color.Black)
Blank()
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 (this.addNumber==1) {
showToast("已经是最小数量了～")
}else {
this.addNumber--
}
})
.borderRadius({topLeft:5,bottomLeft:5})
Text(this.addNumber+"")
.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(()=>{
this.addNumber++
})
.border({width:0.5,color:Color.Gray})
.borderRadius({topRight:5,bottomRight:5})
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row(){
Text("加入购物车")
.width('70%')
.borderRadius(30)
.textAlign(TextAlign.Center)
.fontColor(Color.Black)
.margin({top:70})
.height(40)
.fontSize(18)
.fontWeight(FontWeight.Bold)
.backgroundColor("#FCDB29")
}
.width('100%')
.justifyContent(FlexAlign.Center)} .alignItems(HorizontalAlign.Start) .backgroundColor(Color.White) .justifyContent(FlexAlign.Start) .padding(15) .height(400) .width('100%') } } 创建完成之后我们在详情页面初始化弹窗，把查询的数据传进去 specDialogController:CustomDialogController=new CustomDialogController({ builder:SpecDialog({ specList:this.specList }), alignment: DialogAlignment.Bottom, customStyle:true }) 调用弹窗
this.specDialogController.open() 执行代码看看效果
到这里我们的弹窗就实现了
