技术栈
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');
@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)
}
}
添加完成之后，我们把提交方法写到绑定事件上
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
}
}
到这里我们就实现了银行卡的绑定和回显
