## 技术栈
Appgallery connect
## 开发准备
上一节我们实现了回收金的收入、支出记录查询，并且在订单完成后成功创建对应的收支记录，但是我们暂时只有收入记录，并没有支出记录，这一节我们将要实现账号的回收金提现功能，从商业角度实现app应用的正向循环
## 功能分析
要实现提现功能，首先我们需要有对应银行卡信息的绑定，提现的金额，以及当前账号下的回收金总额，从商业角度考虑，我们还要限制一天内回收金额的提取总数，避免在某些情况下造成不必要的损失，首先我们需要判断当前账号是否绑定有对应的信息，然后我们通过对input组件进行条件判断来限制用户一些不正确的操作，然后在添加确认提现和提现记录按钮
## 代码实现
首先我们创建对应的绑定信息表
```css
{
"objectTypeName": "bind_bank",
"fields": [
{"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
{"fieldName": "user_id", "fieldType": "Integer"},
{"fieldName": "bank_name", "fieldType": "String"},
{"fieldName": "bank_card", "fieldType": "String"},
{"fieldName": "bank_people", "fieldType": "String"},
{"fieldName": "is_verify", "fieldType": "Boolean"},
{"fieldName": "verify_id", "fieldType": "Integer"}
],
"indexes": [
{"indexName": "field1Index", "indexList": [{"fieldName":"id","sortType":"ASC"}]}
],
"permissions": [
{"role": "World", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
]
}
```
然后我们实现银行卡绑定模块，我们用组件引入的方式来实现，处理好绑定以及未绑定的展示逻辑
```css
import { BindBank } from "../../entity/BindBank"
@Component
export struct BindAlipay {
@Link bankList:BindBank[]
public callback:()=>void=():void=>{}
public postCallback:()=>void=():void=>{}
@Builder
notAlipay(){
Row(){
Image($r('app.media.tv_card'))
.height(17)
.width(17)
.margin({left:14})
Text("您还未绑定银行卡账号，点击绑定")
.fontColor("#FF4242")
.fontSize(16)
}
.backgroundColor(Color.White)
.padding(10)
.margin({bottom:50})
.onClick(e=>{
this.callback()
})
.height(48)
.width('100%')
}
@Builder bindAlipay(){
Row(){
Column(){
Row(){
Image($r('app.media.tv_card'))
.height(17)
.width(17)
.margin({left:14})
Text("12212")
.fontColor("#333333")
.fontSize(16)
}
Text("预计2小时内到账(以实际到账时间为准)")
.fontColor("#999999")
.fontSize(15)
}
Image($r('app.media.back_right_recycle'))
.height(30)
.width(30)
}
}
build() {
Column() {
if (this.bankList.length>0){
this.bindAlipay()
}else {
this.notAlipay()
}
}
}
}
```
然后我们实现提现金额输入的模块
```css
@Component
export struct InputItem {
@Consume
moneyNum:number
@State text: string = ''
controller: TextInputController = new TextInputController()
@Consume
isPost:boolean
build() {
Column() {
Row() {
Text("提现金额")
.fontSize(16)
.fontColor("#333333")
Text("单笔提现至少1元")
.fontSize(14)
.fontColor("#FF4242")
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row() {
Text("¥")
.fontSize(28)
.fontColor("#333333")
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) {
this.isPost=true
}else {
this.isPost=false
}
})
}
Divider().width('100%').height(1)
Text("可提现金额¥1500.00 (单日最大提现额度：300)")
.fontSize(15)
.fontColor("#333333")
}
.padding(10)
.backgroundColor(Color.White)
.alignItems(HorizontalAlign.Start)
}
}
```
通过定义的@Provide @Consume可以帮助我们跨组件获取值，来更好的进行逻辑判断
```css
Column({space:15}){
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(()=>{
if (this.isPost) {
//拉起弹窗
}else {
if (this.moneyNum==0){
showToast("提现金额单笔至少1元")
}
if (this.moneyNum>300) {
showToast('单日限额300元，请重新输入')
}
}
})
Text("查看提现记录")
.width('100%')
.fontColor(Color.Black)
.textAlign(TextAlign.Center)
.backgroundColor("#ffffff")
.padding(10)
.borderRadius(15)
}
.margin({top:50})
```
然后我们在住页面调用组件
```css
import { BindBank } from "../../entity/BindBank"
import showToast from "../../utils/ToastUtils"
import { CommonTopBar } from "../../widget/CommonTopBar"
import { BindAlipay } from "./BindAlipay"
import { InputItem } from "./InputItem"
@Entry
@Component
export default struct WithdrawMoneyPage {
@State fontColor: string = '#182431'
@State selectedFontColor: string = '#007DFF'
@State currentIndex: number = 0
@State alipayAcc:string=''
@State bindAlipayName:string=''
@State phoneCode:string=''
@Provide
isPost:boolean=false
@Provide
moneyNum:number=0
@State bankList:BindBank[]=[]
@Builder TabBuilder(index: number, name: string) {
Row() {
Image($r('app.media.tv_card'))
.height(17)
.width(17)
.margin({left:15})
Text(name)
.fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize(16)
.fontWeight(this.currentIndex === index ? 500 : 400)
.lineHeight(22)
}
.height(55)
.width('100%')
.alignItems(VerticalAlign.Center)
}
build() {
Column() {
CommonTopBar({ title: "提现", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
Column(){
BindAlipay({bankList:this.bankList,
callback:()=>{},
postCallback:()=>{}})
InputItem()
Column({space:15}){
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(()=>{
if (this.isPost) {
//拉起弹窗
}else {
if (this.moneyNum==0){
showToast("提现金额单笔至少1元")
}
if (this.moneyNum>300) {
showToast('单日限额300元，请重新输入')
}
}
})
Text("查看提现记录")
.width('100%')
.fontColor(Color.Black)
.textAlign(TextAlign.Center)
.backgroundColor("#ffffff")
.padding(10)
.borderRadius(15)
}
.margin({top:50})
}
.backgroundColor('#F1F3F5')
.height('100%')
.justifyContent(FlexAlign.Start)
.padding(10)
}
}
}
```
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70046889/viewspace-3089297/ ，如需转载，请注明出处，否则将追究法律责任。
