更新记录

1.1.0（2025-09-30） 下载此版本

1 优化座位图初始化代码 2 适配支付宝小程序 3 简化初始参数

1.0.3（2025-09-26） 下载此版本

新增canvas获取失败提示

1.0.2（2025-09-26） 下载此版本

移除 moment组件 优化图片路径

平台兼容性

uni-app(4.44)

其他

shuai-seatmap

基于 Canvas 的影院座位图组件，支持微信小程序 H5 支付宝小程序。

安装与使用

1. 引入组件

插件市场安装 [shuai-seatmap] https://ext.dcloud.net.cn/plugin?id=25128

2. 基础用法

    <canvasSeatmap  ref="seatmap"
      @error="onError" 
      @onSeatTap="onSeatTap" >
    </canvasSeatmap>

import * as seatData from '@/uni_modules/shuai-seatmap/static/seat-data.js'
// import * as seatData from '@/uni_modules/shuai-seatmap/static/seat-data2.js'
import canvasSeatmap from '@/uni_modules/shuai-seatmap/pages/seatmap.vue'

export default {
  components: {
    canvasSeatmap
  },
  data() {
    return {
      seatList: [],
      chooseSeatList: [],
    }
  },
  async onLoad() {
    const app = this;
    await app.getData() //获取模拟数据
    this.options = {
      title: '淘淘票',
      hallName:  `1号厅`,
      areaList: this.getAreaList(), // 分区价格参数(含颜色)
      footerHeight: 270, // 底部预留高度
      //maxSelectNum: 4,   // 最大可选座位数
      //isolateSeats: true, // 孤座检查是否开启
    }
    this.$nextTick(() => {
      this.$refs.seatmap.init({ seatList: this.seatList, options: this.options }); 
    })
  },

  methods: {
    //分区数据  需要包含 strokeStyle：颜色字段 areaId：分区标识，可自定义 需配置到 SEAT_FIELDS
    getAreaList() {
      const schedule_area = this.schedule?.schedule_area??[];
      schedule_area.forEach((item, index) => {
        item.strokeStyle = this.colorList[index % this.colorList.length]??'#ccc';
        item.areaId = item.area;
      })
      return schedule_area;
    },
    //监听错误提示
    onError(e){
      this.$toast(e.message || '座位图加载失败');
    },
    //监听座位变更事件 返回已选座列表
    onSeatTap(event){
      this.chooseSeatList = event.chooseSeatList;

      //检查全部座位是否存在孤座 参数可配置是否开启
      //this.$refs.seatmap.validateIsolates()

    },
    cancelSeat: function (seat) {
      this.refs.seatmap.cancelSeat(seat)
    },
  }
}
</script>

API 说明

Props

座位数据格式

[
  {
            "status": 1,       //状态字段  字段名称需配置到 OPTIONS.SEAT_FIELDS.STATUS_NAME中
            "seatType": 0,     //座位类型 字段名称需配置到 OPTIONS.SEAT_FIELDS.TYPE_NAME中
            "columnId": 13,    //列ID 字段名称需配置到 OPTIONS.SEAT_FIELDS.COLUMN_ID中
            "rowId": 6,        //行ID 字段名称需配置到 OPTIONS.SEAT_FIELDS.ROW_ID中
      "areaId": "372",   //区域ID 字段名称需配置到 OPTIONS.SEAT_FIELDS.AREA_ID中
      "seatName": "E排13座",
            "seatId": "d2VueXUtNi0xMw==",
            "marketPrice": 8000,
        }
]

配置项数据

{
  title: '',          // 座位图的标题
  hallName: '屏幕',   // 影厅名称
  canvasWidth: 414,  // 画布宽度  系统计算得出
  canvasHeight: 414, // 画布高度  系统计算得出
  hallHeight: 40,    // 画布中荧幕高度  固定值 可调整
  footerHeight: 0,   // 底部区域的高度  画布可上滑动距离
  maxSelectNum: 0,   // 最大可选座位数
  seatMaxWidth: 35,  // 座位的最大宽度
  seatMinWidth: 5,   // 座位的最小宽度
  miniMapShowTime:2000,  // 停止操作后，过多久隐藏小图
  isolateSeats: true, // 孤座检查是否开启
  areaList: [
    {
      areaId: '372',  // 字段名应与SEAT_FIELDS.AREA_ID一致 必填
      areaName: '3区', 
      storkStyle: '#97cafc',  //颜色字段 必填
      marketPrice: 8000,      //价格字段
    }
  ],
  // 座位区域 
  SEAT_FIELDS:{
    ROW_ID:'rowId',       // 行ID字段名
    COLUMN_ID:'columnId', // 列ID字段名
    STATUS_NAME:'status', // 座位状态字段名 
    TYPE_NAME:'seatType', // 座位类型字段名 
    AREA_ID:'areaId',     // 座位区域字段名
  },
  SEAT_TYPE : {
    SINGLE: 0,        // 单座
    COUPLE_LEFT: 1,   // 情侣座 - 左
    COUPLE_MIDDLE: 2, // 情侣座 - 中/右
    COUPLE_RIGHT: 3   // 情侣座 - 右
  },
  SEAT_STATUS : {
    DISABLED: -2,     // 不可用
    LOCKED: -1,       // 锁定
    SOLD: 0,          // 已售
    AVAILABLE: 1,     // 可选
    SELECTED: 10      // 已选
  },

  SEAT_STYLE:{
    DISABLED: {fillStyle:'#f7f9fc',strokeStyle:'#eeeff1'},     // 不可用
    LOCKED:   {fillStyle:'#f7f9fc',strokeStyle:'#eeeff1'},       // 锁定
    SOLD:     {fillStyle:'red',strokeStyle:'transparent'},          // 已售
    AVAILABLE:  {fillStyle:'transparent',strokeStyle:'#97cafc'},     // 可选
    SELECTED:   {fillStyle:'#0ed7b8',strokeStyle:'transparent'},     // 已选
  }
};

Events

注意事项

• 画布高度由系统计算得出，无需配置 --屏幕高度 - 画布距离顶部距离
• 画布宽度由系统计算得出，无需配置 --屏幕宽度
• 支付宝小程序开发工具中，画布的点击事件 onTap(e) 不返回点击坐标 需切换到真机调试时
• 支付宝画布初始化需在 onReady事件中调用 否则可能显示空白
• 微信 h5画布点击事件坐标是相对于文档的坐标 支付宝是相对于画布的坐标