HarmonyOS 鸿蒙Next中《仿盒马》app开发技术分享绑定银行卡回显

HarmonyOS 鸿蒙Next中《仿盒马》app开发技术分享绑定银行卡回显

技术栈

Appgallery connect

开发准备

上一节我们实现了安全锁的绑定，这一切都是为了帮助用户在提现流程上能有更好更安全的体验，现在我们开始正式着手提现相关的流程，我们先进行提现银行卡的绑定，绑定成功后我们关闭页面把数据回显到提现页

功能分析

首先我们要实现相应信息的录入，我们需要新建对应的银行卡绑定页面来填充信息，信息填充完成后把银行卡数据提交到云端的bindbank表中，然后我们在提现页面的onPageShow方法中查询对应的数据，展示到卡信息显示模块中，操作的时候一定要跟我们的userid进行关联

代码实现

首先我们创建对应的卡信息录入页面

import { bind_bank } from '../../clouddb/bind_bank';
import { User } from '../../entity/User';
import { StorageUtils } from '../../utils/StorageUtils';
import { cloudDatabase } from '@kit.CloudFoundationKit';
import showToast from '../../utils/ToastUtils';
import { router, Router } from '@kit.ArkUI';
import { CommonTopBar } from '../../widget/CommonTopBar';

let databaseZone = cloudDatabase.zone('default');

@Component
struct BindCardPage {
  @State cardNum: string = '';
  @State bankName: string = '';
  @State peopleName: string = '';
  @State user: User | null = null

  async aboutToAppear(): Promise<void> {
    const value = await StorageUtils.getAll('user');
    if (value != "") {
      this.user = JSON.parse(value)
    }
  }

  build() {
    Column({ space: 5 }) {
      CommonTopBar({ title: "添加银行卡", alpha: 0, titleAlignment: TextAlign.Center, backButton: true })
      Row() {
        Text("卡 号")
          .fontColor(Color.Black)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
        TextInput({ text: this.cardNum, placeholder: '请输入银行卡号' })
          .placeholderColor("#999999")
          .placeholderFont({ size: 16, weight: 400 })
          .caretColor("#FCDB29")
          .width(400)
          .height(50)
          .backgroundColor(null)
          .type(InputType.Number)
          .margin(20)
          .fontSize(14)
          .fontColor(Color.Black)
          .onChange((value: string) => {
            this.cardNum = value
          })
      }
      Divider().width('100%').height(0.8)
        .color("#e6e6e6")
        .width('100%')
      Row() {
        Text("银 行")
          .fontColor(Color.Black)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
        TextInput({ text: this.bankName, placeholder: '请输入所属银行' })
          .placeholderColor("#999999")
          .placeholderFont({ size: 16, weight: 400 })
          .caretColor("#FCDB29")
          .width(400)
          .height(50)
          .backgroundColor(null)
          .margin(20)
          .fontSize(14)
          .fontColor(Color.Black)
          .onChange((value: string) => {
            this.bankName = value
          })
      }
      Divider().width('100%').height(0.8)
        .color("#e6e6e6")
        .width('100%')
      Row() {
        Text("开户名")
          .fontColor(Color.Black)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
        TextInput({ text: this.peopleName, placeholder: '请输入银行卡号' })
          .placeholderColor("#999999")
          .placeholderFont({ size: 16, weight: 400 })
          .caretColor("#FCDB29")
          .width(400)
          .height(50)
          .backgroundColor(null)
          .margin(20)
          .fontSize(14)
          .fontColor(Color.Black)
          .onChange((value: string) => {
            this.peopleName = value
          })
      }
      Text("绑定")
        .width('95%')
        .padding(10)
        .borderRadius(10)
        .textAlign(TextAlign.Center)
        .fontColor(Color.White)
        .backgroundColor("#ffe03636")
    }
    .height('100%')
    .backgroundColor(Color.White)
  }
}

添加完成之后，我们把提交方法写到绑定事件上

Text("绑定")
  .width('95%')
  .padding(10)
  .borderRadius(10)
  .textAlign(TextAlign.Center)
  .fontColor(Color.White)
  .backgroundColor("#ffe03636")
  .onClick(async () => {
    let cardInfo = new bind_bank()
    cardInfo.id = Math.floor(Math.random() * 1000000)
    cardInfo.user_id = this.user!.user_id
    cardInfo.bank_name = this.bankName
    cardInfo.bank_card = this.cardNum
    cardInfo.bank_people = this.peopleName
    let num = await databaseZone.upsert(cardInfo);
    if (num > 0) {
      showToast("绑定成功")
      router.back()
    }
  })

绑定成功后我们关闭当前页面，回到提现页面进行数据查询

@State bankList: BindBank[] = []

async onPageShow(): Promise<void> {
  const value = await StorageUtils.getAll('user');
  if (value != "") {
    this.user = JSON.parse(value)
  }
  let databaseZone = cloudDatabase.zone('default');
  let condition = new cloudDatabase.DatabaseQuery(bind_bank);
  condition.equalTo("user_id", this.user?.user_id)
  let listData = await databaseZone.query(condition);
  let json = JSON.stringify(listData)
  let data: BindBank[] = JSON.parse(json)
  if (data.length > 0) {
    this.bankList = data
  }
}

到这里我们就实现了银行卡的绑定和回显