《仿盒马》app开发技术分享-- 绑定银行卡回显（52）

## 技术栈

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("开户名")
          .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

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