更新记录

1.0.0（2026-08-12） 下载此版本

首个发布版本。

• H5 / 微信小程序双端选座：只读渲染、点选、点按缩放、拖拽平移、双指捏合缩放
• minimap 视口缩略图：分区轮廓 + 分区标签 + 视口指示框，点击缩略图跳转视口
• 限购拦截：max-seats 上限可配（0 = 不限购），超额点选回调 limit-reached
• 底部已选栏示例：chip 列表、单座删除、合计价格
• 跨场馆座位尺寸一致（baseScale 锚定），放大上限封顶，杜绝无限放大
• 万级座位性能：空间网格视口裁剪 + 座位节点分帧创建 + 手势期冻结结算
• updateSectionSeats 按分区增量刷新座位状态（并发购票场景，已选座位变不可售自动取消）

平台兼容性

uni-app

其他

seatmap-picker 座位图选座组件（uni-app 插件）

Leafer 画布实现的只读座位图选座组件，支持 H5 与 微信小程序。与设计器同源数据模型，跨场馆座位尺寸一致。

安装

把 uni_modules/seatmap-picker 整个目录拷入你的 uni-app 项目 src/uni_modules/ 下（HBuilderX 可直接导入插件）。

组件按 easycom 自动注册，无需手动 import。

npm 依赖：插件的 Leafer 运行时依赖需安装在宿主项目的 node_modules：

npm i leafer-ui @leafer-ui/miniapp @leafer-in/view @leafer-in/viewport @leafer-in/animate

快速使用

<template>
    <view class="map-slot">
        <seatmap-picker
            :venue="venue"
            :max-seats="6"
            @selection-change="ion"
            @limit-reached="onLimit"
        />
    </view>
</template>

<script>
import { ref } from 'vue'
import { fromBackend } from '@/uni_modules/seatmap-picker/js_sdk/seatmap/core/datasource.js'

export default {
    setup() {
        const venue = ref(null)
        // 接入方自行从后端拉取场馆 + 座位，用 fromBackend 归一化后传给组件
        // （示例页 pages/seatmap-picker/index.vue 有完整请求封装）
        venue.value = fromBackend(venueData, seatlist)
        function ion(list) { /* list: [{ seat, row, section }] */ }
        function onLimit(limit) { /* 限购拦截 */ }
        return { venue, ion, onLimit }
    },
}
</script>

<style>
.map-slot { flex: 1; min-height: 0; width: 100%; position: relative; }
</style>

.map-slot 需要给组件一个确定高度（flex:1 或固定高度）；组件根节点 width/height:100% 铺满。

Props

Events

组件方法（ref 调用）

示例页

pages/seatmap-picker/index.vue：带价格图例、底部已选栏、限购提示的完整选座页示例。 在宿主 pages.json 注册该页面后，用 ?venue_id=xxx 打开：

{
    "path": "uni_modules/seatmap-picker/pages/seatmap-picker/index",
    "style": { "navigationBarTitleText": "在线选座" }
}

内部结构

uni_modules/seatmap-picker/
├── components/seatmap-picker/seatmap-picker.vue   # 复用组件（easycom 注册为 <seatmap-picker>）
├── js_sdk/seatmap/
│   ├── render.js            # Leafer 渲染器（视口裁剪 + 点选 + 点按缩放）
│   ├── leafer-loader.js     # 平台分流（#ifdef H5 / MP-WEIXIN 导入对应 Leafer 包）
│   └── core/                # 共享数据模型（fromBackend / model / geometry / path / color / text / constants）
└── pages/seatmap-picker/    # 示例页

注：core/ 与设计器 packages/core 同源复制。修改 core 时需两端同步，避免数据模型漂移。