## 技术栈

Appgallery connect

## 开发准备

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

## 功能分析

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

## 代码实现

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

```css

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');

@Entry

@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("开hu名")

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

  }

}

```

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

```css

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

          }

        })

```

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

```css

  @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

    }

  }

```

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