《仿盒马》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

}

}

```

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