HarmonyOS学习 实验七：在页面上面添加警告弹窗、自定义弹窗、选择类弹窗、文本选择弹窗、日期选择等等

于 2025-04-03 12:03:38 发布
阅读量1.4k 收藏 16
点赞数 57
分类专栏： HarmonyOS应用开发学习 文章标签： harmonyos 华为 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_74096349/article/details/146953061
版权

HarmonyOS各种弹窗的使用指南

HarmonyOS各种弹窗的使用指南

在HarmonyOS应用开发中，弹窗是一种常见的UI组件，用于向用户展示信息或获取用户输入。本文将详细介绍HarmonyOS中几种常见的弹窗组件及其使用方法，包括警告弹窗、列表选择弹窗、自定义弹窗、日期选择器弹窗、时间选择器弹窗和文本选择器弹窗。
详细请到官方技术文档仔细学习！官方文档链接

1. 警告弹窗（AlertDialog）

警告弹窗用于向用户展示警告信息，并提供确认按钮。它适用于需要用户确认操作的场景，比如删除数据或提交表单。

功能特点

  • 单按钮模式：仅提供一个确认按钮。
  • 双按钮模式：提供确认和取消两个按钮。
  • 自定义按钮样式：可以设置按钮的文本、颜色和点击回调。

代码实例

@Entry
@Component
struct AlertDialogPage {
  build() {
    Column() {
      Button("警告弹窗，有一个按钮").onClick(() => {
        AlertDialog.show({
          title: '操作提示', // 弹窗标题
          message: '你确认删除吗？', // 弹窗内容
          autoCancel: true, //点击遮障层时，是否关闭弹窗。
          alignment: DialogAlignment.Center, //弹窗位置
          gridCount: 3, // 弹窗容器宽度所占用栅格数
          offset: { dx: 0, dy: 0 }, //弹窗相对alignment所在位置的偏移量

          // 单个按钮
          confirm: {
            value: '确定',
            action: () => {
              console.info('xxxxxx')
            },
            fontColor: '#00f'
          },
        })
      })

      Button("警告弹窗，有两个按钮").onClick(() => {
        AlertDialog.show({
          title: '操作提示', // 弹窗标题
          message: '你确认删除吗？', // 弹窗内容
          autoCancel: true, //点击遮障层时，是否关闭弹窗。
          alignment: DialogAlignment.Center, //弹窗位置
          gridCount: 3, // 弹窗容器宽度所占用栅格数
          offset: { dx: 0, dy: 0 }, //弹窗相对alignment所在位置的偏移量

          // 多个按钮
          primaryButton: { //主按钮的文本内容、文本色、按钮背景色和点击回调。
            value: '确认', //按钮文字
            action: () => { //按钮回调
              console.info('成功点击')
            },
            fontColor: '#f00'
          },
          secondaryButton: { //副按钮的文本内容、文本色、按钮背景色和点击回调。
            value: '取消', //按钮文字
            action: () => { //按钮回调
              console.info('取消了')
            },
            fontColor: '#00f'
          },
        })
      })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center) // 垂直居中
    .alignItems(HorizontalAlign.Center) // 水平居中
  }
}

效果

在这里插入图片描述

  • 第一个弹窗

在这里插入图片描述

  • 第二个弹窗

在这里插入图片描述

使用场景

  • 确认删除操作。
  • 提示用户重要信息。

改进建议

  • 在确认按钮中添加实际的逻辑操作，比如删除数据。
  • 在取消按钮中添加用户友好的提示。

2. 列表选择弹窗（ActionSheet）

列表选择弹窗用于向用户提供了一个列表供用户选择。它适用于需要用户从多个选项中选择一个的场景。

功能特点

  • 选项列表：支持多个选项项，每个选项可以设置文本和点击回调。
  • 确认按钮：提供一个确认按钮，用户选择后可以确认。
  • 取消回调：点击遮障层时触发取消回调。

代码实例

@Entry
@Component
struct ActionSheetPage {
  @State selectedFruit: string = '' // 1. 添加状态变量记录选中项
  build() {
    Column() {
      Button("列表选择弹窗").onClick(() => {
        ActionSheet.show({
          title: '请选择水果',
          message: '水果信息',
          autoCancel: true,
          confirm: {
            value: '确认按钮',
            action: () => {
              console.log('确认点击成功')
            }
          },
          cancel: () => {
            console.log('你点击了关闭')
          },
          alignment: DialogAlignment.Bottom,
          offset: { dx: 0, dy: -20 },
          sheets: [
            {
              title: 'apples',
              action: () => {
                this.selectedFruit = 'apples' // 2. 更新选中状态
              }
            },
            {
              title: 'bananas',
              action: () => {
                this.selectedFruit = 'bananas'
              }
            },
            {
              title: 'pears',
              action: () => {
                this.selectedFruit = 'pears'
              }
            }
          ]
        })
      })

      Text(this.selectedFruit ? `已选择：${this.selectedFruit}` : '请选择水果')
        .fontSize(20)
        .margin(20)
    }
    .width("100%")
    .height("100%")

  }
}

效果

  • 点击选择弹窗按钮

在这里插入图片描述

  • 点击bananas

在这里插入图片描述

  • 显示信息

在这里插入图片描述

使用场景

  • 选择水果、颜色等选项。
  • 提供多个操作选项，比如分享、收藏等。

改进建议

  • 在选项项中添加图标或图片，增强视觉效果。
  • 在确认按钮中添加实际的逻辑操作。

3. 自定义弹窗（CustomDialog）

自定义弹窗允许开发者自定义弹窗的样式和内容。它适用于需要高度自定义的场景，比如用户输入或复杂交互。

功能特点

  • 自定义内容：可以完全自定义弹窗的内容和布局。
  • 嵌套弹窗：支持在一个弹窗中打开另一个弹窗。
  • 状态管理：通过状态变量管理弹窗的显示和关闭。

代码实例

// xxx.ets
@CustomDialog
struct CustomDialogExampleTwo {
  controllerTwo?: CustomDialogController

  build() {
    Column() {
      Text('我是第二个弹窗')
        .fontSize(30)
        .height(100)
      Button('点我关闭第二个弹窗')
        .onClick(() => {
          if (this.controllerTwo != undefined) {
            this.controllerTwo.close()
          }
        })
        .margin(20)
    }
  }
}

@CustomDialog
struct CustomDialogExample {
  @Link textValue: string
  @Link inputValue: string
  dialogControllerTwo: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExampleTwo(),
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -25 } })
  controller?: CustomDialogController
  // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在所有controller的后面
  cancel: () => void = () => {
  }
  confirm: () => void = () => {
  }

  build() {
    Column() {
      Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
      TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
        .onChange((value: string) => {
          this.textValue = value
        })
      Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            this.cancel()

          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            if (this.controller != undefined) {
              this.inputValue = this.textValue
              this.controller.close()
              this.confirm()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })

      Button('点我打开第二个弹窗')
        .onClick(() => {
          this.dialogControllerTwo.open()

        })
        .margin(20)
    }.borderRadius(10)
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept,
      textValue: $textValue,
      inputValue: $inputValue
    }),
    cancel: this.exitApp,
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false
  })

  // 在自定义组件即将析构销毁时将dialogControlle置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  exitApp() {
    console.info('Click the callback in the blank area')
  }

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          this.dialogController.open()

        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

效果

  • 点击按钮

在这里插入图片描述

  • 点击第二个弹窗按钮

在这里插入图片描述

  • 显示第二个弹窗

在这里插入图片描述

  • 输入Change text，点击confirm

在这里插入图片描述

  • 按钮名称变成对应字符
    在这里插入图片描述

使用场景

  • 用户输入表单。
  • 复杂的交互逻辑，比如多步骤操作。

改进建议

  • 在弹窗中添加更多的输入字段或验证逻辑。
  • 在关闭回调中添加用户友好的提示。

4. 日期滑动选择器弹窗（DatePickerDialog）

日期滑动选择器弹窗用于让用户选择日期。它支持阳历和阴历的切换。

功能特点

  • 日期范围：可以设置起始日期和结束日期。
  • 阳历/阴历：支持阳历和阴历的切换。
  • 回调函数：提供onAccept、onCancel和onChange回调。

代码实例

@Entry
@Component
struct DatePickDialogPage {
  @State selectedDate: Date = new Date("2010-1-1")
  @State displayDate: string = ''

  // 日期格式化方法
  private formatDate(date: Date): string {
    const year = date.getFullYear()
    const month = (date.getMonth() + 1).toString().padStart(2, '0')
    const day = date.getDate().toString().padStart(2, '0')
    return `${year}-${month}-${day}`
  }

  build() {
    Column() {
      Text(this.displayDate || '请选择日期')
        .fontSize(24)
        .margin(20)
        .fontColor('#07c160')

      Button("阳历日期")
        .margin(10)
        .width(200)
        .onClick(() => {
          DatePickerDialog.show({
            start: new Date("2000-1-1"),
            end: new Date("2100-12-31"),
            selected: this.selectedDate,
            onAccept: (value: DatePickerResult) => {
              // 重点：必须创建新对象才能触发状态更新
              this.selectedDate = new Date(value.year, value.month, value.day)
              this.displayDate = this.formatDate(this.selectedDate)
              console.info("阳历选择:", JSON.stringify(value))
            },
            onCancel: () => {
              console.info("取消阳历选择")
            },
            onChange: (value: DatePickerResult) => {
              console.info("阳历滚动变化:", JSON.stringify(value))
            }
          })
        })

      Button("阴历日期")
        .margin(10)
        .width(200)
        .onClick(() => {
          DatePickerDialog.show({
            start: new Date("2000-1-1"),
            end: new Date("2100-12-31"),
            selected: this.selectedDate,
            lunar: true,
            onAccept: (value: DatePickerResult) => {
              this.selectedDate = new Date(value.year, value.month, value.day)
              this.displayDate = this.formatDate(this.selectedDate)
              console.info("阴历选择:", JSON.stringify(value))
            },
            onCancel: () => {
              console.info("取消阴历选择")
            },
            onChange: (value: DatePickerResult) => {
              console.info("阴历滚动变化:", JSON.stringify(value))
            }
          })
        })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

效果

在这里插入图片描述

  • 点击阳历日期按钮
    在这里插入图片描述
  • 点击阴历日期按钮
    在这里插入图片描述

使用场景

  • 选择生日、预约日期等。
  • 需要显示农历的场景，比如传统节日。

改进建议

  • 在选择日期后，自动填充到表单中。
  • 添加日期范围的动态调整。

5. 文本滑动选择器弹窗（TextPickerDialog）

文本滑动选择器弹窗用于让用户从列表中选择一个文本项。它适用于需要用户从固定选项中选择的场景。

功能特点

  • 选项范围：可以设置选项的范围。
  • 初始选中项：可以设置初始选中项的索引。
  • 回调函数：提供onAccept、onCancel和onChange回调。

代码实例

@Entry
@Component
struct TextPickerDialogDemo {
  @State select: number = 2;
  private fruits: string[] = ['苹果', '橘子', '香蕉', '猕猴桃', '西瓜'];
  build() {
    Column(){
      Button("TextPickerDialog")
        .margin(20)
        .onClick(() => {
          TextPickerDialog.show({
            range: this.fruits, // 设置文本选择器的选择范围
            selected: this.select, // 设置初始选中项的索引值
            onAccept: (value: TextPickerResult) => { // 点击弹窗中的“确定”按钮时触发该回调。
              // 设置select为按下确定按钮时的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
              this.select = value.index;
              console.info("TextPickerDialog:onAccept()" + JSON.stringify(value));
            },
            onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调。
              console.info("TextPickerDialog:onCancel()");
            },
            onChange: (value: TextPickerResult) => { // 滑动弹窗中的选择器使当前选中项改变时触发该回调。
              console.info("TextPickerDialog:onCancel()" + JSON.stringify(value));
            }
          })
        })
    }
    .width('100%')
  }
}

效果

在这里插入图片描述

  • 点击按钮
    在这里插入图片描述

使用场景

  • 选择性别、职业等固定选项。
  • 需要用户从多个选项中选择一个的场景。

改进建议

  • 在选项项中添加图标或图片，增强视觉效果。
  • 在选择后，自动填充到表单中。

6. 时间滑动选择器弹窗（TimePickerDialog）

时间滑动选择器弹窗用于让用户选择时间。它支持12小时制和24小时制的切换。

功能特点

  • 时间格式：支持12小时制和24小时制。
  • 回调函数：提供onAccept、onCancel和onChange回调。
  • 时间范围：可以设置时间的范围。

代码实例

@Entry
@Component
struct TimePickerDialogPage {
  private selectTime: Date = new Date('2025-04-03T00:00:00') // 修改为 2025 年 4 月 3 日

  build() {
    Column() {
      Button("TimePickerDialog 12小时制")
        .margin(20)
        .onClick(() => {
          TimePickerDialog.show({
            selected: this.selectTime,
            onAccept: (value: TimePickerResult) => {
              // 设置 selectTime 为 2025 年 4 月 2 日，确保下次弹窗时标题不变
              this.selectTime = new Date('2025-04-02T' + value.hour + ':' + value.minute + ':00')
              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("TimePickerDialog:onCancel()")
            },
            onChange: (value: TimePickerResult) => {
              console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
            }
          })
        })

      Button("TimePickerDialog 24小时制")
        .margin(20)
        .onClick(() => {
          TimePickerDialog.show({
            selected: this.selectTime,
            useMilitaryTime: true,
            onAccept: (value: TimePickerResult) => {
              // 设置 selectTime 为 2025 年 4 月 2 日，确保下次弹窗时标题不变
              this.selectTime = new Date('2025-04-02T' + value.hour + ':' + value.minute + ':00')
              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("TimePickerDialog:onCancel()")
            },
            onChange: (value: TimePickerResult) => {
              console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
            }
          })
        })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center) // 垂直居中
    .alignItems(HorizontalAlign.Center) // 水平居中
  }
}

效果

在这里插入图片描述

  • 点击第一个按钮，12小时制
    在这里插入图片描述
  • 点击第一个按钮，24小时制
    在这里插入图片描述

使用场景

  • 选择预约时间、闹钟时间等。
  • 需要用户输入具体时间的场景。

改进建议

  • 在选择时间后，自动填充到表单中。
  • 添加时间范围的限制。

总结

通过以上示例，我们可以看到HarmonyOS提供了丰富的弹窗组件，开发者可以根据实际需求选择合适的组件来实现弹窗功能。希望本文能够帮助您更好地理解和使用HarmonyOS的弹窗组件。如果您有任何问题或建议，欢迎在评论区留言！

HarmonyOS ArkUI实战开发—自定义弹窗
m0_71524094的博客
04-26 1275
自定义弹窗的使用更加灵活，适用于更多的业务场景，在自定义弹窗中您可以自定义弹窗内容，构建更加丰富的弹窗界面。自定义弹窗的界面可以通过装饰器@CustomDialog 定义的组件来实现，然后结合 CustomDialogController 来控制自定义弹窗的显示和隐藏。// 双向绑定传值// 弹窗控制器，控制打开/关闭，必须传入，且名称必须为：controller// 弹窗中的按钮事件// 弹窗中的内容描述build() {Column() {
【HarmonyOS实战开发】鸿蒙(HarmonyOS)常见的三种弹窗方式详解
好运来的博客
09-01 1619
最近有一个想法，做一个针对鸿蒙官方API的工具箱项目，介绍常用的控件，以及在项目中如何使用，今天介绍Harmony中如何实现弹窗功能。
Harmony学习日志-基于ArkUI实现多种弹窗功能
03-13
Harmony学习日志-基于ArkUI实现多种弹窗功能
小支同学的学习笔记《HarmonyOS应用开发入门：从Hello World到自定义UI组件》
03-25
《HarmonyOS应用开发入门：从Hello World到自定义UI组件》
鸿蒙HarmonyOS开发：多种内置弹窗及自定义弹窗的详细使用指南
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
08-08 6906
弹窗是移动应用中常见的一种用户界面元素，常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用，除此之外还支持自定义弹窗，来满足各种不同的需求。不同弹窗的详细使用介绍，消息提示框（showToast）、对话框（showDialog）、警告弹窗（AlertDialog）、操作菜单（showActionMenu）、操作列表弹窗（ActionSheet）、文本滑动选择器弹窗 (TextPickerDialog)、自定义弹窗 (CustomDialog)。
harmonyOS鸿蒙官网教程-添加弹窗
移动端开发与最新技术
10-08 3911
在我们日常使用应用的时候，可能会进行一些敏感的操作，比如删除联系人，这时候我们给应用添加弹窗来提示用户是否需要执行该操作。
HarmonyOS开发案例：【 自定义弹窗】
鸿蒙的技术博客
04-26 1078
基于ArkTS的声明式开发范式实现了三种不同的弹窗，第一种直接使用公共组件，后两种使用CustomDialogController实现自定义弹窗
鸿蒙(HarmonyOS)常见的三种弹窗方式
安辉
08-31 2541
最近有一个想法，做一个针对鸿蒙官方API的工具箱项目，介绍常用的控件，以及在项目中如何使用，今天介绍Harmony中如何实现弹窗功能
在HarmonyOS中实现自定义弹窗的居中显示与视图定制
qq_14863717的博客
05-27 984
然而，当我尝试完全自定义弹窗的视图时，遇到了限制。根据HarmonyOS的当前API，虽然可以使用来定制弹窗的内容，但弹窗的框架和背景仍然受到限制，无法实现非矩形的弹窗或完全自定义的背景。我尝试了多种方法，包括修改弹窗的样式和背景，但都未能达到预期的效果。最终，我确认目前HarmonyOS的API不支持这种级别的视图定制。
HarmonyOS开发 弹窗组件
qq_36158551的博客
06-24 1001
当现有组件不满足要求时，可考虑自定义弹窗，自定义弹窗允许开发者自定义弹窗内容和样式。例如build() {Text('请输入你的答案')TextInput({ placeholder: '请输入数字' })})Button('取消')})Button('确认').onClick(() => {})// }}),})/*** 自定义弹窗*/
【HarmonyOS开发】ArkUI中的自定义弹窗
qq_23334071的博客
12-18 1036
自定义弹窗的使用更加灵活，适用于更多的业务场景，在自定义弹窗中您可以自定义弹窗内容，构建更加丰富的弹窗界面。
HarmonyOS应用开发-eTS-警告弹窗.docx
06-05
### HarmonyOS应用开发-eTS-警告弹窗 #### 一、概述 在HarmonyOS的应用开发过程中，eTS（Enhanced TypeScript）作为一种重要的前端开发框架，提供了丰富的UI组件供开发者使用。其中，警告弹窗（AlertDialog）是...
HarmonyOS开发案例：【多种样式弹窗】
鸿蒙的技术博客
05-07 1586
如何使用弹窗功能，实现四种类型弹窗。分别是：警告弹窗、自定义弹窗、日期滑动选择器弹窗、文本滑动选择器弹窗。点击左上角返回按钮展示警告弹窗。点击出生日期展示日期滑动选择器弹窗。点击性别展示文本滑动选择器弹窗。点击兴趣爱好（多选）展示自定义弹窗。
HarmonyOS系统开发ArkTS常用组件弹窗及参数（十）
qq_41946216的博客
03-20 4789
弹窗是移动应用中常见的一种用户界面元素，常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用，除此之外还支持自定义弹窗，来满足各种不同的需求。
鸿蒙NEXT开发字符工具类（ArkTs）
鸿蒙布道师
03-31 927
鸿蒙NEXT开发字符工具类（ArkTs）
HarmonyOS NEXT开发进阶（十四）：HarmonyOS应用开发者基础认证试题集汇总及答案解析
IT全栈 华强工作室
03-30 1250
鸿蒙原生技能学习阶段，通过官方认证的资格十分有必要，在项目实战前掌握基础开发理论也是重中之重，可以避免在项目开发阶段发生基本常识错误。本文结合自身认证实践汇总形成鸿蒙应用开发者基础认证题库，及相应的试题解析，以求能够让开发者知其然并知其所以然。
鸿蒙NEXT开发字符串工具类（ArkTs）
鸿蒙布道师
03-31 757
鸿蒙NEXT开发字符串工具类（ArkTs）
【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit（12）
最新发布
HarmonyOS SDK闭源开放能力技术团队
04-01 489
是否在关闭通知权限期间有向设备推送消息，关闭通知权限期间推送消息后设备会被管控，被管控后发送的消息不会送达设备，再次打开通知权限后会上报解除管控，为防止用户频繁开关导致频繁上报解除管控，目前规格会延迟1min上报，待解除管控后即可收到消息无需重新生成token。通过服务端排查，发现推送的消息都是营销通知，营销消息不是每条消息都直接下发，会等一批一起下发，属于华为推送服务端降低功耗的一种消息机制。若开发者的应用进程在前台，则不弹出通知提醒，开发者可以在应用进程中获取通知扩展消息内容并自行完成业务处理。
鸿蒙Flutter实战：20. Flutter集成高德地图，同层渲染
zackslee的专栏
03-27 904
完整代码见Flutter 鸿蒙版 Demo核心代码如下，通过 OhosView 来承载原生视图OhosView(其中 viewType 为自定义的 ohosView 的名称，onPlatformViewCreated 为创建完成回调，creationParams 为创建时传入的参数，creationParamsCodec 为参数编码格式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值