# canvas-seatmap

**Repository Path**: c-shuai/canvas-seatmap

## Basic Information

- **Project Name**: canvas-seatmap
- **Description**: 纯canvas绘制电影选座功能，支持分区价格 情侣座 双指缩放 边界回弹，孤座校验
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-09-12
- **Last Updated**: 2026-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# shuai-seatmap 

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

## 安装与使用

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

### 2. 基础用法
```html
    <canvasSeatmap  ref="seatmap"
      @error="onError" 
      @onSeatTap="onSeatTap" >
    </canvasSeatmap>
```


```javascript
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
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|------|------|------|--------|------|
| seatList | Array  | 是 | [] | 座位数据，格式见下文 |
| options  | Object | 是 | {} | 配置项，格式见下文 |

### 座位数据格式
```javascript
[
  {
			"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,
		}
]
```

### 配置项数据
```javascript
{
  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
| 事件名  | 参数 | 说明 |
|--------|------|------|
| error  | Array | 选座提示信息 |  
| onSeatTap | Array | 画布点击事件，返回已选座列表 |

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