HarmonyOS NEXT Development Case: Converting Numbers to Chinese Numerals

// Import necessary modules

import { promptAction } from '@kit.ArkUI'; // For displaying toast messages

import { pasteboard } from '@kit.BasicServicesKit'; // Clipboard operations

import { toChineseNumber } from '@nutpi/chinese-finance-number'; // Convert numbers to Chinese financial uppercase

import {

  toChineseWithUnits, // Convert numbers to Chinese with units

  toUpperCase, // Convert Chinese lowercase to uppercase

} from '@nutpi/chinese-number-format';



@Entry // Mark as entry component

@Component // Define component

struct NumberToChineseConverter {

  @State private exampleNumber: number = 88.8; // Default example number

  @State private textColor: string = "#2e2e2e"; // Primary text color

  @State private lineColor: string = "#d5d5d5"; // Divider color

  @State private basePadding: number = 30; // Base padding value

  @State private chineseLowercase: string = ""; // Lowercase Chinese result

  @State private chineseUppercase: string = ""; // Uppercase Chinese result

  @State private chineseUppercaseAmount: string = ""; // Financial uppercase result

  @State @Watch('inputChanged') private inputText: string = ""; // Watched input field



  // Handle input changes

  inputChanged() {

    this.chineseLowercase = toChineseWithUnits(Number(this.inputText), 'zh-CN');

    this.chineseUppercase = toUpperCase(this.chineseLowercase, 'zh-CN');

    this.chineseUppercaseAmount = toChineseNumber(Number(this.inputText));

  }



  // Copy text to clipboard

  private copyToClipboard(text: string): void {

    const pasteboardData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text);

    const systemPasteboard = pasteboard.getSystemPasteboard();

    systemPasteboard.setData(pasteboardData);

    promptAction.showToast({ message: 'Copied' });

  }



  // UI construction

  build() {

    Column() {

      // Header section

      Text('Number to Chinese Converter')

        .fontColor(this.textColor)

        .fontSize(18)

        .width('100%')

        .height(50)

        .textAlign(TextAlign.Center)

        .backgroundColor(Color.White)

        .shadow({

          radius: 2,

          color: this.lineColor,

          offsetX: 0,

          offsetY: 5

        });



      Scroll() {

        Column() {

          // Introduction section

          Column() {

            Text('Tool Introduction').fontSize(20).fontWeight(600).fontColor(this.textColor);

            Text('Convert numbers to Chinese formats for financial documents, contracts, and reports. Supports conversion from "cent" to "trillion".')

              .textAlign(TextAlign.JUSTIFY)

              .fontSize(18).fontColor(this.textColor).margin({ top: `${this.basePadding / 2}lpx` });

          }

          .alignItems(HorizontalAlign.Start)

          .width('650lpx')

          .padding(`${this.basePadding}lpx`)

          .margin({ top: `${this.basePadding}lpx` })

          .borderRadius(10)

          .backgroundColor(Color.White)

          .shadow({ radius: 10, color: this.lineColor });



          // Input section

          Column() {

            Row() {

              Text('Example')

                .fontColor("#5871ce")

                .fontSize(18)

                .padding(`${this.basePadding / 2}lpx`)

                .backgroundColor("#f2f1fd")

                .borderRadius(5)

                .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })

                .onClick(() => { this.inputText = `${this.exampleNumber}`; });

              Blank();

              Text('Clear')

                .fontColor("#e48742")

                .fontSize(18)

                .padding(`${this.basePadding / 2}lpx`)

                .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })

                .backgroundColor("#ffefe6")

                .borderRadius(5)

                .onClick(() => { this.inputText = ""; });

            }.height(45).justifyContent(FlexAlign.SpaceBetween);

            Divider().margin({ top: 5, bottom: 5 });

            TextInput({ text: $$this.inputText, placeholder: `Enter number, e.g.: ${this.exampleNumber}` })

              .width('100%')

              .fontSize(18)

              .caretColor(this.textColor)

              .margin({ top: `${this.basePadding}lpx` })

              .type(InputType.NUMBER_DECIMAL);

          }

          .width('650lpx')

          .padding(`${this.basePadding}lpx`)

          .margin({ top: `${this.basePadding}lpx` })

          .backgroundColor(Color.White)

          .shadow({ radius: 10, color: this.lineColor });



          // Result section

          Column() {

            // ... (similar structure for result rows with copy buttons)

          }

          .width('650lpx')

          .padding(`${this.basePadding}lpx`)

          .margin({ top: `${this.basePadding}lpx` })

          .backgroundColor(Color.White)

          .shadow({ radius: 10, color: this.lineColor });

        }

      }.scrollBar(BarState.Off);

    }

    .height('100%')

    .width('100%')

    .backgroundColor("#f4f8fb");

  }

}