目录

案例介绍

评分系统除了需要收集用户的评分数据外，还需要收集用户的文字评价并提供提交功能。本篇文章将介绍如何实现评价内容的输入和提交功能，包括输入验证和提交反馈。

代码实现

@Entry
@Component
struct RestaurantRatingPage {
  @State comment: string = ''
  private restaurantName: string = '海鲜美食餐厅'

  // 提交评价
  private submitRating() {
    AlertDialog.show({
      title: '提交成功',
      message: `您对${this.restaurantName}的评分为${this.getOverallRating().toFixed(1)}分，感谢您的反馈！`,
      confirm: {
        value: '确定',
        action: () => {
          // 可以在这里添加提交后的操作，如返回上一页等
        }
      }
    })
  }

  build() {
    Column() {
      // 评价内容
      Column() {
        Text('评价内容')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .margin({ bottom: 15 })

        TextArea({ placeholder: '请输入您的评价内容，至少10个字...', text: this.comment })
          .height(120)
          .backgroundColor('#F5F5F5')
          .borderRadius(8)
          .onChange((value) => {
            this.comment = value
          })
      }
      .width('100%')
      .padding(15)
      .backgroundColor(Color.White)
      .borderRadius(10)
      .margin({ bottom: 20 })

      // 提交按钮
      Button('提交评价')
        .width('100%')
        .height(50)
        .fontSize(18)
        .backgroundColor('#FF9500')
        .borderRadius(25)
        .enabled(this.comment.length >= 10)
        .opacity(this.comment.length >= 10 ? 1 : 0.5)
        .onClick(() => this.submitRating())
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
    .padding(10)
  }
}

代码详解

评价内容实现

1. 状态管理：

   • 使用@State装饰器定义comment状态变量
   • 初始值为空字符串

2. 输入区域：

   • 使用TextArea组件实现多行文本输入
   • 设置提示文本和样式
   • 通过onChange事件更新评价内容

提交功能实现

1. 提交按钮：

   • 使用Button组件实现
   • 根据评价内容长度控制按钮状态
   • 设置合适的样式和交互效果

2. 提交逻辑：

   • submitRating方法处理提交操作
   • 使用AlertDialog显示提交成功提示
   • 预留提交后的操作接口

交互验证

1. 输入验证：

   • 要求评价内容至少10个字
   • 通过enabled属性控制按钮是否可点击
   • 使用opacity属性提供视觉反馈

2. 提交反馈：

   • 显示提交成功对话框
   • 展示餐厅名称和总体评分
   • 提供确认按钮关闭对话框

总结

这篇文章介绍了怎么实现评价提交功能，主要涉及三个部分：一是怎么输入评价内容，二是怎么管理提交按钮的状态，三是提交流程的处理逻辑。通过这些功能的实现，完成了评分系统的最后一个重要环节，让用户可以方便地提交评价。