《仿盒马》app开发技术分享-- 商品规格弹窗（11）

技术栈

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()
执行代码看看效果

到这里我们的弹窗就实现了