canvas/unpackage/dist/dev/mp-weixin/pages/index/index.js

"use strict";
const common_vendor = require("../../common/vendor.js");
const _sfc_main = {
  data() {
    return {
      ctx: null,
      canvasWidth: 0,
      canvasHeight: 0,
      seatSize: 30,
      gap: 10,
      rows: 8,
      cols: 10,
      seats: [],
      selectedSeats: [],
      touchStartX: 0,
      touchStartY: 0,
      offsetX: 0,
      offsetY: 0,
      scale: 1
    };
  },
  onReady() {
    this.initSeats();
    this.initCanvas();
  },
  methods: {
    initSeats() {
      for (let i = 0; i < this.rows; i++) {
        this.seats[i] = [];
        for (let j = 0; j < this.cols; j++) {
          const isSold = Math.random() < 0.2;
          this.seats[i][j] = {
            row: i,
            col: j,
            status: isSold ? "sold" : "available",
            // available, selected, sold
            x: 0,
            y: 0
          };
        }
      }
    },
    async initCanvas() {
      const { canvas, width, height } = await this.getCanvasNode("seatCanvas");
      this.canvasWidth = width;
      this.canvasHeight = height;
      this.ctx = canvas.getContext("2d");
      const totalWidth = this.cols * (this.seatSize + this.gap) - this.gap;
      const totalHeight = this.rows * (this.seatSize + this.gap) - this.gap;
      this.offsetX = (this.canvasWidth - totalWidth) / 2;
      this.offsetY = (this.canvasHeight - totalHeight) / 2;
      this.drawSeats();
    },
    getCanvasNode(id) {
      return new Promise((resolve) => {
        const query = common_vendor.index.createSelectorQuery().in(this);
        query.select(`#${id}`).fields({ node: true, size: true }).exec((res) => {
          common_vendor.index.__f__("log", "at pages/index/index.vue:94", "给我看看", res);
          common_vendor.index.__f__("log", "at pages/index/index.vue:95", "给我看看", res);
          common_vendor.index.__f__("log", "at pages/index/index.vue:96", "给我看看", res);
          common_vendor.index.__f__("log", "at pages/index/index.vue:97", "给我看看", res);
          common_vendor.index.__f__("log", "at pages/index/index.vue:98", "给我看看", res);
          common_vendor.index.__f__("log", "at pages/index/index.vue:99", "给我看看", res);
          const canvas = res[0].node;
          const width = res[0].width;
          const height = res[0].height;
          canvas.width = width * common_vendor.index.getSystemInfoSync().pixelRatio;
          canvas.height = height * common_vendor.index.getSystemInfoSync().pixelRatio;
          resolve({ canvas, width, height });
        });
      });
    },
    drawSeats() {
      if (!this.ctx)
        return;
      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
      this.ctx.save();
      this.ctx.translate(this.offsetX, this.offsetY);
      this.ctx.scale(this.scale, this.scale);
      for (let i = 0; i < this.rows; i++) {
        for (let j = 0; j < this.cols; j++) {
          const seat = this.seats[i][j];
          const x = j * (this.seatSize + this.gap);
          const y = i * (this.seatSize + this.gap);
          seat.x = x;
          seat.y = y;
          switch (seat.status) {
            case "available":
              this.ctx.fillStyle = "#4CAF50";
              break;
            case "selected":
              this.ctx.fillStyle = "#2196F3";
              break;
            case "sold":
              this.ctx.fillStyle = "#9E9E9E";
              break;
          }
          this.ctx.beginPath();
          this.ctx.roundRect(x, y, this.seatSize, this.seatSize, 4);
          this.ctx.fill();
          this.ctx.fillStyle = "#FFFFFF";
          this.ctx.font = "12px Arial";
          this.ctx.textAlign = "center";
          this.ctx.textBaseline = "middle";
          this.ctx.fillText(
            `${String.fromCharCode(65 + i)}${j + 1}`,
            x + this.seatSize / 2,
            y + this.seatSize / 2
          );
        }
      }
      this.ctx.restore();
    },
    handleTouchStart(e) {
      this.touchStartX = e.touches[0].x;
      this.touchStartY = e.touches[0].y;
    },
    handleTouchMove(e) {
      const touchX = e.touches[0].x;
      const touchY = e.touches[0].y;
      const dx = touchX - this.touchStartX;
      const dy = touchY - this.touchStartY;
      this.offsetX += dx;
      this.offsetY += dy;
      const minX = this.canvasWidth - (this.cols * (this.seatSize + this.gap) - this.gap) * this.scale;
      const minY = this.canvasHeight - (this.rows * (this.seatSize + this.gap) - this.gap) * this.scale;
      this.offsetX = Math.max(minX, Math.min(0, this.offsetX));
      this.offsetY = Math.max(minY, Math.min(0, this.offsetY));
      this.touchStartX = touchX;
      this.touchStartY = touchY;
      this.drawSeats();
    },
    handleTouchEnd(e) {
      const touchX = e.changedTouches[0].x;
      const touchY = e.changedTouches[0].y;
      const canvasX = (touchX - this.offsetX) / this.scale;
      const canvasY = (touchY - this.offsetY) / this.scale;
      for (let i = 0; i < this.rows; i++) {
        for (let j = 0; j < this.cols; j++) {
          const seat = this.seats[i][j];
          if (canvasX >= seat.x && canvasX <= seat.x + this.seatSize && canvasY >= seat.y && canvasY <= seat.y + this.seatSize) {
            this.toggleSeatSelection(seat);
            return;
          }
        }
      }
    },
    toggleSeatSelection(seat) {
      if (seat.status === "sold")
        return;
      if (seat.status === "available") {
        seat.status = "selected";
        this.selectedSeats.push(`${String.fromCharCode(65 + seat.row)}${seat.col + 1}`);
      } else {
        seat.status = "available";
        this.selectedSeats = this.selectedSeats.filter(
          (s) => s !== `${String.fromCharCode(65 + seat.row)}${seat.col + 1}`
        );
      }
      this.drawSeats();
    }
  }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return {
    a: common_vendor.o((...args) => $options.handleTouchStart && $options.handleTouchStart(...args)),
    b: common_vendor.o((...args) => $options.handleTouchMove && $options.handleTouchMove(...args)),
    c: common_vendor.o((...args) => $options.handleTouchEnd && $options.handleTouchEnd(...args)),
    d: common_vendor.t($data.selectedSeats.join(", ") || "无")
  };
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
wx.createPage(MiniProgramPage);
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index.js.map