// 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') } }
鸿蒙根据输入的金额显示不同单位
最新推荐文章于 2024-10-01 10:21:42 发布