更新记录

1.0.0（2025-09-12） 下载此版本

支持自定义字段 自定义座位颜色

平台兼容性

uni-app

其他

shuai-seatmap

基于 Canvas 的影院座位图组件，支持多平台适配和动态交互。

安装与使用

1. 引入组件

插件市场安装 [shuai-seatmap]

2. 基础用法

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

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

export default {
  components: {
    canvasSeatmap
  },
  data() {
    return {
      seatList: [],
      chooseSeatList: [],
      options = {
        canvas_id: 'seatmap',
        title: '淘淘票',
        hallName:  `1号厅`,
        areaList: [], //区域颜色
        footerHeight: 270, // 底部回弹高度 避免底部遮挡座位
        maxSelectNum: 4,   // 最大可选座位数
            isolateSeats: false, // 孤座检查是否开启
      }
    }
  },
  onReady() {
    this.seatList = seatData.seatList;  //加载座位数据 
    this.options.areaList = this.getAreaList();  //获取分区数据及颜色
    this.$nextTick(() => {
      this.$refs.seatmap.init({ seatList: this.seatList, options: this.options }); //初始化组件
    });

  },
  methods: {
    //分区数据 需要包含 areaId strokeStyle字段  不需要可留空
    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

注意事项

• 画布高度由系统计算得出，无需配置 --屏幕高度 - 画布距离顶部距离
• 画布宽度由系统计算得出，无需配置 --屏幕宽度