"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