HarmonyOS 鸿蒙Next求助：有没类似影院选座位购票的示例代码

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct NiuTestPage {

  @State seats: number[][] = []
  @State lines: number = 7
  @State arranges: number = 10
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context2d: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);


  build() {
    Column()  {
        Canvas(this.context2d)
          .onReady(() => {
            this.initSeats()
          })
          .gesture(
            // 绑定count为1的TapGesture
            TapGesture({ count: 1 })
              .onAction((event: GestureEvent) => {
                if(event){
                  this.handleClick(event)
                }
              }))
          .backgroundColor(Color.Pink)
          .width('100%')
          .height('100%')
    }
    .width('100%')
    .height('100%');
  }

  // 初始化座位
  private initSeats() {
    for (let x: number = 0; x < this.lines; x += 1) {
      this.seats[x] = []
      for (let y: number = 0; y < this.arranges; y += 1) {
        this.seats[x][y] = 0
        this.drawSeat(x * 40 + 50, y * 40 + 50, 0)
      }
    }
  }

  private drawSeat(x: number, y:number, state:number) {
    switch (state) {
      case 0:
        // 可选座位
        this.context2d.fillStyle = '#fff5f3f3';
        break;
      case 1:
        // 已选座位
        this.context2d.fillStyle = '#ffea7878';
        break;
      case 2:
        // 已售座位
        this.context2d.fillStyle = '#ff8f8b8b';
        break;
      default:
        // 其他座位
        this.context2d.fillStyle = '#ff161515';
        break;
    }
    this.context2d.fillRect(x, y, 30, 20)
  }

  private updateSeat(x: number, y: number) {
    if (this.seats[x][y] == 0) {
      this.seats[x][y] = 1
    } else if (this.seats[x][y] == 1) {
      this.seats[x][y] = 0
    }
    this.drawSeat(x * 40 + 50, y * 40 + 50, this.seats[x][y])
  }

  // 检查座位状态
  private checkSeat(x: number, y: number) {
    if (this.seats[x][y] == 2) {
      promptAction.showToast({message: '该座位已售出，请选择其他座位'});
      return false
    } else if (this.seats[x][y] == 1) {
      promptAction.showToast({message: '该座位已被选中，请选择其他座位'});
      return false
    }
    return true
  }

  // 统计已选座位数量和位置
  private countSelectedSeats() {
    let selectedSeats: number[][] = []
    let count = 0
    for (let x: number = 0; x < this.lines; x += 1) {
      for (let y: number = 0; y < this.arranges; y += 1) {
        if (this.seats[x][y] == 1) {
          selectedSeats.push([x, y])
          count++
        }
      }
    }
    return [count, selectedSeats]
  }

  // 处理点击事件
  private handleClick(event: GestureEvent) {
    let x = Math.floor((event.fingerList[0].localX - 50) / 40)
    let y = Math.floor((event.fingerList[0].localY - 50) / 40)

    if (x >= 0 && x < this.lines && y >= 0 && y < this.arranges) {
      if (this.checkSeat(x, y)) {
        this.updateSeat(x,y)
        let count = this.countSelectedSeats()[0]
        if (count > 0) {
          promptAction.showToast({message: '确认并支付（已选 ' + count +' 座位）'});
        }
      }
    }
  }
}