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

"use strict";
const common_vendor = require("../../common/vendor.js");
const _sfc_main = {
  data() {
    return {
      seatData: {
        "xCoords": [6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
        "yCoords": [6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
        "statuses": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        "levels": ["B", "B", "B", "B", "B", "B", "A", "A", "A", "A"]
      },
      ctx: null,
      canvas: null,
      img: null,
      scale: 1,
      offsetX: 0,
      offsetY: 0,
      lastTouch: { x: 0, y: 0 }
    };
  },
  onReady() {
    this.initCanvas();
  },
  methods: {
    async initCanvas() {
      const query = common_vendor.index.createSelectorQuery().in(this);
      query.select("#seatCanvas").fields({ node: true, size: true }).exec(async (res) => {
        if (!res || !res[0])
          return;
        const canvas = res[0].node;
        const ctx = canvas.getContext("2d");
        const dpr = common_vendor.index.getSystemInfoSync().pixelRatio;
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        ctx.scale(dpr, dpr);
        this.canvas = canvas;
        this.ctx = ctx;
        try {
          const imagePath = await this.loadImageForMiniProgram(
            "https://assets.tech.troyrc.com/sx25/images/events/dingwei1.png"
          );
          this.img = imagePath;
          this.renderSeats();
        } catch (error) {
          common_vendor.index.__f__("error", "at pages/index/step2.vue:69", "图片加载失败:", error);
        }
      });
    },
    // 专为微信小程序优化的图片加载方法
    loadImageForMiniProgram(url) {
      return new Promise((resolve, reject) => {
        common_vendor.index.downloadFile({
          url,
          success: (downloadRes) => {
            common_vendor.index.getImageInfo({
              src: downloadRes.tempFilePath,
              success: (imageInfo) => {
                resolve({
                  path: downloadRes.tempFilePath,
                  width: imageInfo.width,
                  height: imageInfo.height
                });
              },
              fail: (err) => reject(`获取图片信息失败: ${JSON.stringify(err)}`)
            });
          },
          fail: (err) => reject(`下载图片失败: ${JSON.stringify(err)}`)
        });
      });
    },
    renderSeats() {
      if (!this.ctx || !this.img)
        return;
      const { ctx } = this;
      const GRID_SIZE = 30 * this.scale;
      ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.seatData.xCoords.forEach((x, i) => {
        const y = this.seatData.yCoords[i];
        const status = this.seatData.statuses[i];
        const drawX = (x - 6) * GRID_SIZE + this.offsetX;
        const drawY = (y - 6) * GRID_SIZE + this.offsetY;
        ctx.drawImage(
          this.img.path,
          drawX,
          drawY,
          GRID_SIZE,
          GRID_SIZE
        );
        if (status === 2) {
          ctx.fillStyle = "rgba(0,0,0,0.5)";
          ctx.fillRect(drawX, drawY, GRID_SIZE, GRID_SIZE);
        }
        ctx.fillStyle = "#ffffff";
        ctx.font = `${8 * this.scale}px sans-serif`;
        ctx.textAlign = "center";
        ctx.fillText(
          `${this.seatData.rowNames[i]}${this.seatData.seatNames[i]}`,
          drawX + GRID_SIZE / 2,
          drawY + GRID_SIZE / 2 + 3 * this.scale
        );
      });
      ctx.draw();
    },
    // 手势操作（保持不变）
    handleTouchStart(e) {
      this.lastTouch = {
        x: e.touches[0].x,
        y: e.touches[0].y
      };
    },
    handleTouchMove(e) {
      const touchX = e.touches[0].x;
      const touchY = e.touches[0].y;
      this.offsetX += (touchX - this.lastTouch.x) * 1.5;
      this.offsetY += (touchY - this.lastTouch.y) * 1.5;
      this.lastTouch = { x: touchX, y: touchY };
      this.renderSeats();
    },
    handleTouchEnd() {
    },
    // 缩放控制（保持不变）
    zoomIn() {
      this.scale = Math.min(this.scale * 1.2, 3);
      this.renderSeats();
    },
    zoomOut() {
      this.scale = Math.max(this.scale * 0.8, 0.5);
      this.renderSeats();
    },
    resetView() {
      this.scale = 1;
      this.offsetX = 0;
      this.offsetY = 0;
      this.renderSeats();
    }
  }
};
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.o((...args) => $options.zoomIn && $options.zoomIn(...args)),
    e: common_vendor.o((...args) => $options.zoomOut && $options.zoomOut(...args)),
    f: common_vendor.o((...args) => $options.resetView && $options.resetView(...args))
  };
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7ebe9a05"]]);
wx.createPage(MiniProgramPage);
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/step2.js.map