HarmonyOS鸿蒙Next《仿盒马》app开发技术分享 环保金提现

HarmonyOS鸿蒙Next《仿盒马》app开发技术分享环保金提现

技术栈

Appgallery connect

开发准备

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

功能分析

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

代码实现

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

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]

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

//先在组件中定义
@Link userInfo:UserInfo|null
//传入数据
InputItem({userInfo:this.userInfo})

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

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
        }
    })

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

if (this.moneyNum>this.userInfo!.money) {
    showToast('超过最大可提现金额，请重新输入')
}

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

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('超过最大可提现金额，请重新输入')
            }
        }
    })

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

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})
            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%')
    }
}