HarmonyOS 申请验证码demo实现

import web_webview from '@ohos.web.webview';
@Component
  /**
   * 隐私协议
   */
struct PrivacyPage {
  @Prop linkUrl:string
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    NavDestination() {
      Column() {
        Stack() {
          Text('xxx用户隐私政策').width('100%').textAlign(TextAlign.Center).fontColor(Color.White)
          Image($r('app.media.startIcon')).width(20).margin({ left: 16 })
        }.width('100%').alignContent(Alignment.Start).padding({ top: 12, bottom: 12 })
        // 组件创建时，就加载linkUrl
        Web({ src: this.linkUrl, controller: this.controller}).width('100%').height('100%')
      }
    }.hideTitleBar(true).backgroundColor('#01ae66')

  }
}
@Component
  /**
   * 消息页面
   */
@Preview
struct MyMessage {
  @State dataSource: number[] = [1,2]

  build() {
    Navigation() {
      Column() {
        Stack() {
          Text('消息').width('100%').textAlign(TextAlign.Center).fontColor(Color.White)
        }.width('100%').alignContent(Alignment.Start).padding({ top: 12, bottom: 12 })

        if (this.dataSource.length === 0){
          Column({space:20}) {
            Image($r('app.media.startIcon')).width(70)
            Text('抱歉，暂无数据').fontColor('#ffa2a1a1')
          }.backgroundColor(Color.White).width('100%').height('100%').justifyContent(FlexAlign.Center)
        }else {
          List() {
            ForEach(this.dataSource, (item: number) => {
              ListItem() {
                Row({space:8}) {
                  Stack(){
                    Image($r('app.media.app_icon')).width(50).margin({right:10})
                    Column().backgroundColor(Color.Red).width(10).borderRadius(5).height(10)
                  }.alignContent(Alignment.TopEnd)
                  Column({space:10}){
                    Text('申请进度通知').width('100%')
                    Text('点击查看详情').fontColor('#ffa2a1a1')
                    Text('2024-06-19 13:56:00').width('100%').textAlign(TextAlign.End).fontColor('#ffa2a1a1')
                  }.layoutWeight(1)
                }.alignItems(VerticalAlign.Top).margin({top:8,bottom:8,left:8,right:8})
              }
            })
          }
          .divider({strokeWidth:1})
          .width('100%')
          .height('100%')
          .visibility(this.dataSource.length === 0 ? Visibility.Hidden : Visibility.Visible)
          .backgroundColor(Color.White)
        }
      }
    }.hideTitleBar(true).backgroundColor('#01ae66').width('100%').height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.