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

## 技术栈

Appgallery connect

开发准备

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

功能分析

兑换细节我们可以从商品详情里直接获取展示，备注功能我们需要创建一个自定义弹窗来实现，积分相关的内容我们需要先查询当前账号的积分，即将使用的积分，剩余积分等信息等，展示给用户查看

代码实现

首先我们展示一些兑换商品的细节到页面上

  @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%')

然后我们实现备注弹窗

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()
              })

剩余积分我们也展示到页面上

  @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)

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