鸿蒙根据输入的金额显示不同单位

// import { NavBar } from '../component/NavBar'

class unitsType {
  value: number = 0
  unit: string = ''
}

// 购买基金
@Entry({ routeName: "PurchaseFunds" })
@Component
export struct PurchaseFunds {
  // 输入金额下方的标签
  @State moneyTags: Array<string> = ['1000', '5000', '10000', '50000']
  // 输入的金额
  @State textInputValue: string = ''
  @State units: unitsType[] = [
    { value: 1e14, unit: "兆" },
    { value: 1e13, unit: "十兆" },
    { value: 1e12, unit: "百兆" },
    { value: 1e11, unit: "千兆" },
    { value: 1e10, unit: "京" },
    { value: 1e9, unit: "十京" },
    { value: 1e8, unit: "亿" },
    { value: 1e7, unit: "千万" },
    { value: 1e6, unit: "百万" },
    { value: 1e5, unit: "十万" },
    { value: 1e4, unit: "万" },
    { value: 1e3, unit: "千" },
  ];
  //金额单位
  @State amountUnit: string = ''

  formatAmount(amount: number) {
    for (let index = 0; index < this.units.length; index++) {
      if (amount >= this.units[index].value) {
        this.amountUnit = this.units[index].unit
        return
      }
    }
  }



  // 买入金额
  @Builder
  BuyAmountBuilder() {
    Column() {
      Text('买入金额').fontColor('#8793a2').margin({ top: 15 }).fontSize(17)
      Row() {
        Text('¥').fontSize(24).fontWeight(600).margin({ right: 5 })
        TextInput({ placeholder: "最低买入金额0.01元", text: this.textInputValue })
          .backgroundColor(Color.White)
          .borderRadius(0)
          .placeholderColor('#c8c8c9')
          .layoutWeight(1)
          .placeholderFont({ size: 24 })
          .fontSize(24)
          .fontWeight(600)
          .onChange((value: string) => {
            this.textInputValue = value
            this.formatAmount(Number(value))
          })
        if (this.textInputValue.length > 0) {
          // 清空图标
          Image($r('app.media.del'))
            .width(18).margin({ right: 10 })
            .onClick(() => {
              this.textInputValue = ''
            })
        } else {
          // 占位符
          Text('').width(18).margin({ right: 5 })
        }
      }.margin({ top: 9 }).margin({ top: 10 })

      //单位
      Text(this.amountUnit).margin({ left: 30, bottom: 10 }).fontColor('#8895a4').fontSize(13)
      // 标签
      Row() {
        ForEach(this.moneyTags, (item: string, i: number) => {
          Text(item.replace('0000', '万'))
            .fontColor(Color.Blue)
            .backgroundColor('#e3f2fc')
            .fontSize(15)
            .padding({
              top: 5,
              bottom: 5,
              left: 15,
              right: 15
            })
            .margin({ left: 7, right: 7 })
            .onClick(() => {
              this.textInputValue = item
            })
        })
      }.margin({ left: 25 })
    }.width('100%').alignItems(HorizontalAlign.Start).padding(10).backgroundColor('#fff')

  }

  build() {
    Column() {

      //   买入金额
      this.BuyAmountBuilder()
    }.width('100%').height('100%').backgroundColor('#f6f7fa')
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值