《仿盒马》app开发技术分享-- 兑换提交准备（72）

技术栈

Appgallery connect

开发准备

上一节我们实现了地址的选择，商品数据的展示，我们页面中需要的提交的内容还有所欠缺，我们还需要新增一些展示兑换细节的组件，同时在提交之前还需要实现备注功能，我们还要在页面中展示一些积分相关的内容，告知用户积分的详细情况，这样我们的准备页面才会比较的完善

功能分析

兑换细节我们展示的数据是商品详情里的数据，所以我们的数据源可以从商品详情里直接获取，获取后我们在当前页面展示数据，备注功能我们需要创建一个自定义弹窗来实现，自定义弹窗创建后，我们创建一个对应的变量，然后在弹窗中实现一个@link修饰的变量，实现双向绑定。这样只要进行数据的修改，两侧的值都能进行同步，通过在当前页面展示积分相关的内容我们需要先查询当前账号的积分，即将使用的积分，剩余积分等信息等，展示给用户查看

代码实现

首先我们展示一些兑换商品的细节到页面上，我们先创建对应的text 组件展示商品的份数，积分计算，用户是否添加了备注，兑换的积分总计等信息

  @State remark:string=''

     Row(){
            Text()
            Blank()
            Text("共1份")
              .fontSize(12)
              .fontColor(Color.Gray)

            Text("积分小计：")
              .fontColor(Color.Gray)
              .fontSize(12)
              .margin({left:15})
            Text() {
              Span("$")
                .fontSize(12)
                .fontColor(Color.Red)
              Span(String(this.pointsProduct?.points))
                .fontSize(12)
                .fontColor(Color.Red)
            }

          }
          .padding(10)
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          Row(){
            Text("订单备注")
              .fontSize(14)
              .fontColor(Color.Black)

            Blank()
            Text(this.remark!=""?this.remark:"选填，请写明备注内容")
              .fontColor(Color.Gray)
              .fontSize(12)
              .onClick(()=>{
              })

            Image($r('app.media.right'))
              .height(15)
              .width(15)
          }
          .width('100%')
          .padding(10)
          .justifyContent(FlexAlign.SpaceBetween)

          Divider()
            .width('100%')
            .height(10)
            .backgroundColor("#f7f7f7")

          Row(){
            Text("积分总记")
              .fontSize(14)
              .fontColor(Color.Black)

            Text() {
              Span("¥ ")
                .fontSize(12)
                .fontColor(Color.Black)
              Span(this.pointsProduct?.points+"")
                .fontSize(12)
                .fontColor(Color.Black)
            }
          }
          .padding(10)
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
        }
        .layoutWeight(1)
        Row({space:10}){
          Text("共1份")
            .fontSize(14)
            .fontColor(Color.Black)

          Blank()
          Text() {
            Span("积分扣除：")
            Span("$ ")
              .fontSize(10)
              .fontColor(Color.Red)
            Span(this.pointsProduct?.points+"")
              .fontSize(16)
              .fontColor(Color.Red)
          }

          Text("确认兑换")
            .fontColor(Color.White)
            .padding(10)
            .borderRadius(10)
            .backgroundColor("#d81e06")
            .fontSize(14)
            .onClick(async ()=>{

            })

        }
        .padding(20)
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')

然后我们实现备注弹窗，备注弹窗我们使用自定义弹窗@CustomDialog，在页面内创建控制器，控制弹窗的展示和隐藏，在确认按钮处，我们获取textinput的输入框填充的内容，实现数据同步

import showToast from "../utils/ToastUtils";

@Preview
@CustomDialog
export struct PointsOrderRemarkDialog {
  controller: CustomDialogController;
  @Link str: string ;
  build() {
    Column({space:20}) {

      Text("备注")
        .fontSize($r('app.float.size_20'))
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)
        .margin({top:20})

      TextArea({text:this.str})
        .backgroundColor("#f6f6f6")
        .placeholderColor("#ff999595")
        .fontColor("#333333")
        .height(150)
        .maxLength(50)
        .onChange((value: String) => {
          if (value.length>50) {
            showToast("最多50个字呦~")
            return
          }else {
            this.str = value.toString()
          }
        })
        .margin(20)
      Row(){
        Text("取消")
          .width('30%')
          .textAlign(TextAlign.Center)
          .height(40)
          .fontSize(18)
          .fontColor(Color.White)
          .backgroundColor(0xff0000)
          .borderRadius(30)
          .margin({top:30})
          .onClick(()=>{
            this.str=''
              this.controller.close()
          })

        Text("确认")
          .width('30%')
          .textAlign(TextAlign.Center)
          .height(40)
          .fontSize(18)
          .fontColor(Color.White)
          .backgroundColor(0xff0000)
          .borderRadius(30)
          .margin({top:30})
          .onClick(async ()=>{
            if (this.str!='') {
             this.controller.close()
            }else {
              this.str=''
              this.controller.close()

            }
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)


    }
    .borderRadius({topLeft:20,topRight:20})
    .justifyContent(FlexAlign.Start)
    .backgroundColor(Color.White)
    .height(400)
    .width('100%')
  }
}

在提交页面中引用我们创建的自定义弹窗，把创建的变量传递进去，以供使用

  orderController: CustomDialogController| null = new CustomDialogController({
    builder: PointsOrderRemarkDialog({
      str:this.remark

    }),
    alignment: DialogAlignment.Bottom,
    customStyle:true
  });
Text(this.remark!=""?this.remark:"选填，请写明备注内容")
              .fontColor(Color.Gray)
              .fontSize(12)
              .onClick(()=>{
                this.orderController?.open()
              })

剩余积分我们进行查询，首先获取用户信息，根据用户信息的id查询对应的积分信息，展示到页面上

  @State userInfo:UserInfo|null=null

 const value = await StorageUtils.getAll('user');
    if (value!='') {
      this.user=JSON.parse(value)
    }
 let condition = new cloudDatabase.DatabaseQuery(user_info);
    condition.equalTo("user_id",this.user?.user_id)
    let listData = await databaseZone.query(condition);
    let json1 = JSON.stringify(listData)
    let data2:UserInfo[]= JSON.parse(json1)
    this.userInfo=data2[0]



  Row(){
            Text("剩余积分")
              .fontSize(14)
              .fontColor(Color.Black)

            Text() {
              Span("$ ")
                .fontSize(12)
                .fontColor(Color.Black)
              Span(this.userInfo!.points-this.pointsProduct!.points+"")
                .fontSize(12)
                .fontColor(Color.Black)
            }
          }
          .padding(10)
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)

到这里我们的准备提交工作就已经完成了。