《仿盒马》app开发技术分享-- 回收金提现（53）

## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了银行卡的绑定跟回显，这一节我们要真正的实现银行卡提现的功能了，在这之前我们还需要对提现页的业务逻辑进行更进一步的优化，同时为了方便我们去进行数据间的交互，我们在个人信息模块新增了金额和积分的字段，方便我们其他页面的展示和隐藏

## 功能分析

要实现这些功能首先我们要获取当前账号下的回收金总额，这样我们在金额输入的时候才能根据他们两个实现用户多填写金额的判断，这样就会少对云数据库少进行一次请求，避免对资源浪费，同时我们提现的时候也要生成对应的记录，我们还需要操作moneyinfo表，因为我们在userinfo中新增了字段，同时还要操作userinfo表

## 代码实现

首先在提现页面先获取当前用户信息表userinfo下的账户总额

```css

let condition1=new cloudDatabase.DatabaseQuery(user_info)

condition1.equalTo("user_id", this.user?.user_id)

let listData1 = await databaseZone.query(condition1)

let json1=JSON.stringify(listData1)

let data1:UserInfo[] = JSON.parse(json1)

this.userInfo=data1[0]

```

拿到之后我们传递给金额填写的自定义组件

```css

//先在组件中定义

@Link userInfo:UserInfo|null

//传入数据

InputItem({userInfo:this.userInfo})

```

修改对应的校验逻辑，展示当前账号回收金总额

```css

TextInput({ text: this.text, placeholder: '输入提现金额', controller: this.controller })

.placeholderColor("#999999")

.placeholderFont({ size: 28, weight: 400 })

.caretColor("#FCDB29")

.width(400)

.height(50)

.backgroundColor(null)

.type(InputType.Number)

.margin(20)

.fontSize(14)

.fontColor(Color.Black)

.onChange((value: string) => {

this.moneyNum=Number(value)

this.text = value

if (this.moneyNum>0&&this.moneyNum<=300) {

if (this.moneyNum>this.userInfo!.money) {

this.isPost=false

}else {

this.isPost=true

}

}else {

this.isPost=false

}

})

}

Divider().width('100%').height(1)

Text("可提现金额¥"+this.userInfo?.money+" (单笔最大提现额度：300)")

.fontSize(15)

.fontColor("#333333")

```

在提交按钮处新增提醒用户

```css

if (this.moneyNum>this.userInfo!.money) {

showToast('超过最大可提现金额，请重新输入')

}

```

这样我们就先处理好了逻辑，然后在确认提现的按钮处操作我们的两张表，分别把已经获取到的数据和填写的提现金额输入进去，我们需要拿账号总额去减去当前提现的额度，并且生成记录

```css

Text("确认提现")

.width('100%')

.fontColor(Color.White)

.borderRadius(15)

.padding(10)

.textAlign(TextAlign.Center)

.fontColor(this.isPost?Color.Black:Color.White)

.backgroundColor(this.isPost?"#ffff6363":$r('app.color.color_999'))

.onClick(async ()=>{

if (this.isPost) {

let money=new money_info()

money.id=Math.floor(Math.random() * 1000000)

money.user_id=this.user!.user_id

money.money=String(this.moneyNum)

money.all_money=''

money.money_type='1'

money.address='银行卡提现'

money.year=this.year

money.month=this.month

money.day=this.day

money.time=this.time

money.create_time=this.year+"-"+this.month+"-"+this.day+" "+this.time

let nums = await databaseZone.upsert(money);

let userData=new user_info()

userData.id=this.userInfo!.id

userData.user_id=this.userInfo!.user_id

userData.sex=this.userInfo!.sex

userData.bind_phone=this.userInfo!.bind_phone

userData.create_time=this.userInfo!.create_time

userData.nickname=this.userInfo!.nickname

userData.head_img=this.userInfo!.head_img

if (this.userInfo?.money!=null) {

userData.money=this.userInfo!.money-this.moneyNum

}else {

userData.money=0

}

if (this.userInfo?.points!=null) {

userData.points=this.userInfo!.points

}else {

userData.points=0

}

let s= await databaseZone.upsert(userData);

if (s>0) {

router.pushUrl({url:'pages/recycle/money/SuccessPage'})

}

}else {

if (this.moneyNum==0){

showToast("提现金额单笔至少1元")

}

if (this.moneyNum>300) {

showToast('单日限额300元，请重新输入')

}

if (this.moneyNum>this.userInfo!.money) {

showToast('超过最大可提现金额，请重新输入')

}

}

})

```

在提现成功后，我们需要给用户一个反馈，这时候我们就新增一个简单的页面展示状态即可

```css

import { CommonTopBar } from '../../widget/CommonTopBar';

import { router } from '@kit.ArkUI';

@Entry

@Component

struct SuccessPage {

@State message: string = 'Hello World';

build() {

Column() {

CommonTopBar({ title: "提现状态", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})

Text("提现成功")

.textAlign(TextAlign.Center)

.fontColor(Color.Black)

.fontSize(20)

.fontWeight(FontWeight.Bold)

.margin({top:100})

Image($r('app.media.success_money'))

.height(100)

.width(100)

.margin({top:20})

Text("确认")

.textAlign(TextAlign.Center)

.width('95%')

.padding(10)

.fontColor(Color.White)

.borderRadius(10)

.backgroundColor("#fffa4444")

.margin({top:100})

.onClick(()=>{

router.back()

})

}

.backgroundColor(Color.White)

.height('100%')

.width('100%')

}

}