uniapp 实现微信小程序电影选座功能

拖动代码

1.   /**
2.      * 获取点击或触摸事件对应的座位位置
3.      * 通过事件对象获取座位的行列信息
4.      * @param {Event|TouchEvent} event - 点击或触摸事件对象
5.      * @returns {Object} 返回座位位置对象，包含行(row)和列(col)信息，若未找到有效位置则返回 {row: -1, col: -1}
6.      */
7.     getSeatPosition(event) {
8.       // 统一处理触摸事件和点击事件
9.       // 触摸事件时从 touches 数组获取第一个触摸点
10.       // 点击事件时直接使用事件对象
11.       const touch = event.touches ? event.touches[0] : event;
13.       // 获取触摸/点击的坐标位置
14.       // clientX/Y 用于标准事件，x/y 用于某些特殊环境
15.       const x = touch.clientX || touch.x;
16.       const y = touch.clientY || touch.y;
18.       // 创建查询对象，用于获取 DOM 信息（当前未使用）
19.       const query = uni.createSelectorQuery();
21.       // 从事件目标的数据集中获取座位信息
22.       // 使用 HTML5 data-* 属性存储的行列信息
23.       if (event.target && event.target.dataset) {
24.         const dataset = event.target.dataset;
25.         // 检查数据集中是否包含有效的行列信息
26.         if (dataset.row !== undefined && dataset.col !== undefined) {
27.           // 返回解析后的座位位置
28.           // parseInt 确保返回数值类型
29.           return {
30.             row: parseInt(dataset.row),
31.             col: parseInt(dataset.col)
32.           };
33.         }
34.       }
36.       // 如果无法获取有效的座位信息
37.       // 返回表示无效位置的对象
38.       return { row: -1, col: -1 };
39.     },
41.     /**
42.      * 处理触摸开始事件
43.      * 用于初始化拖拽和缩放的起始状态
44.      * @param {TouchEvent} event - 触摸事件对象，包含触摸点信息
45.      */
46.     onTouchStart(event) {
47.       // 记录触摸开始的时间戳，用于后续判断是点击还是拖动
48.       this.touchStartTime = Date.now();
49.       // 重置移动标志，初始状态下未发生移动
50.       this.isMoved = false;
52.       // 单指触摸 - 处理拖动初始化
53.       if (event.touches.length === 1) {
54.         const touch = event.touches[0];
55.         // 记录当前触摸点作为上一次触摸位置，用于计算移动距离
56.         this.lastTouch = { x: touch.clientX, y: touch.clientY };
57.         // 记录触摸起始位置，用于计算总移动距离
58.         this.touchStartPos = { x: touch.clientX, y: touch.clientY };
59.       }
60.       // 双指触摸 - 处理缩放初始化
61.       else if (event.touches.length === 2) {
62.         // 计算两个触摸点之间的初始距离，用于后续计算缩放比例
63.         this.startDistance = this.getDistance(event.touches[0], event.touches[1]);
64.       }
65.     },
67.     // 处理触摸移动事件
68.     onTouchMove(event) {
69.       // 标记已经发生移动，用于区分点击和拖动
70.       this.isMoved = true;
72.       // 单指触摸 - 处理拖动
73.       if (event.touches.length === 1) {
74.         const touch = event.touches[0];
75.         // 计算相对于上一次触摸位置的偏移量
76.         const deltaX = touch.clientX - this.lastTouch.x;
77.         const deltaY = touch.clientY - this.lastTouch.y;
79.         // 根据当前缩放比例调整位移距离
80.         // 缩放比例越大，移动距离越小，保证移动体验一致
81.         this.position.x += deltaX / this.scale;
82.         this.position.y += deltaY / this.scale;
84.         // 更新最后一次触摸位置
85.         this.lastTouch = { x: touch.clientX, y: touch.clientY };
86.       }
87.       // 双指触摸 - 处理缩放
88.       else if (event.touches.length === 2) {
89.         // 计算当前两个触摸点之间的距离
90.         const currentDistance = this.getDistance(event.touches[0], event.touches[1]);
91.         // 根据距离变化计算新的缩放比例
92.         let newScale = this.scale * (currentDistance / this.startDistance);
93.         // 限制缩放范围在 minScale 和 maxScale 之间
94.         newScale = Math.max(this.minScale, Math.min(this.maxScale, newScale));
95.         this.scale = newScale;
96.         // 更新起始距离，用于下一次计算
97.         this.startDistance = currentDistance;
98.       }
100.       // 检查并限制移动边界，防止内容移出可视区域
101.       this.checkBoundaries();
102.     },
104.     // 处理手势结束
105.     onTouchEnd() {
106.       // 可以在这里处理手势结束后的逻辑
107.     },
109.     /**
110.      * 计算两个触摸点之间的距离
111.      * @param {Object} touch1 - 第一个触摸点，包含 clientX 和 clientY 坐标
112.      * @param {Object} touch2 - 第二个触摸点，包含 clientX 和 clientY 坐标
113.      * @returns {number} 两点之间的欧几里得距离
114.      */
115.     getDistance(touch1, touch2) {
116.       // 计算 X 轴方向的距离差
117.       const dx = touch1.clientX - touch2.clientX;
118.       // 计算 Y 轴方向的距离差
119.       const dy = touch1.clientY - touch2.clientY;
120.       // 使用勾股定理计算两点之间的直线距离
121.       // distance = √(dx² + dy²)
122.       return Math.sqrt(dx * dx + dy * dy);
123.     },
125.     /**
126.      * 检查并限制座位区域的移动边界
127.      * 防止用户将座位区域拖动到视图之外
128.      */
129.     checkBoundaries() {
130.       // 定义最大可移动距离（像素）
131.       const maxX = 200; // X轴最大移动距离，可根据实际座位区域大小调整
132.       const maxY = 200; // Y轴最大移动距离，可根据实际座位区域大小调整
134.       // 限制X轴移动范围：[-maxX, maxX]
135.       // Math.min 确保不会超过右边界
136.       // Math.max 确保不会超过左边界
137.       this.position.x = Math.max(-maxX, Math.min(maxX, this.position.x));
139.       // 限制Y轴移动范围：[-maxY, maxY]
140.       // Math.min 确保不会超过下边界
141.       // Math.max 确保不会超过上边界
142.       this.position.y = Math.max(-maxY, Math.min(maxY, this.position.y));
143.     },

复制代码

盘算总价代码
 

1.     /**
2.      * 获取指定座位在所有已选座位中的序号
3.      * @param {number} row - 要查询的座位行号
4.      * @param {number} col - 要查询的座位列号
5.      * @returns {number} 返回该座位是第几个被选中的座位（从1开始计数）
6.      *
7.      * 使用场景：
8.      * 1. 用于确定座位的选中顺序
9.      * 2. 可用于显示座位的选中序号
10.      * 3. 帮助用户了解座位的选择顺序
11.      */
12.     getSelectedIndex(row, col) {
13.       // 初始化计数器，从1开始计数
14.       let count = 1;
16.       // 遍历所有座位
17.       for (let i = 0; i < this.seatMap.length; i++) {
18.         for (let j = 0; j < this.seatMap[i].length; j++) {
19.           // 检查当前遍历到的座位是否被选中
20.           if (this.seatMap[i][j].selected) {
21.             // 如果找到目标座位，返回当前计数
22.             if (i === row && j === col) return count;
23.             // 如果不是目标座位，计数器加1
24.             count++;
25.           }
26.         }
27.       }
28.       return count;
29.     },
31.     // 获取已选座位列表
32.     getSelectedSeats() {
33.       const selectedSeats = [];
34.       this.seatMap.forEach((row, rowIndex) => {
35.         row.forEach((seat, colIndex) => {
36.           if (seat.selected) {
37.             selectedSeats.push({
38.               row: rowIndex,
39.               col: colIndex,
40.               type: seat.type
41.             });
42.           }
43.         });
44.       });
45.       return selectedSeats;
46.     },
48.     /**
49.      * 计算所有已选座位的总价
50.      * @returns {string} 返回格式化后的总价字符串，保留两位小数
51.      *
52.      * 使用场景：
53.      * 1. 显示确认选座按钮上的总价
54.      * 2. 提交订单时计算支付金额
55.      * 3. 更新用户选座时实时显示价格
56.      */
57.     getTotalPrice() {
58.       // 定义不同类型座位的价格映射
59.       const prices = {
60.         pink: 40,   // 粉色座位（VIP座）价格
61.         orange: 38, // 橙色座位（情侣座）价格
62.         blue: 35    // 蓝色座位（普通座）价格
63.       };
65.       // 使用 reduce 方法计算总价
66.       // 1. 获取所有已选座位列表
67.       // 2. 根据每个座位的类型获取对应价格
68.       // 3. 累加所有座位的价格
69.       return this.getSelectedSeats().reduce((total, seat) => {
70.         // total: 累计总价
71.         // seat: 当前座位信息，包含 type 属性
72.         return total + prices[seat.type];
73.       }, 0).toFixed(2); // 初始值为0，结果保留两位小数
74.     },
76.     /**
77.      * 获取指定类型座位的单价
78.      * @param {string} type - 座位类型（'pink'|'orange'|'blue'）
79.      * @returns {string} 返回格式化后的价格字符串，保留两位小数
80.      *
81.      * 使用场景：
82.      * 1. 显示单个座位的价格
83.      * 2. 在已选座位列表中显示每个座位的单价
84.      */
85.     getSeatPrice(type) {
86.       // 定义不同类型座位的价格映射
87.       const prices = {
88.         pink: 40,   // 粉色座位（VIP座）价格
89.         orange: 38, // 橙色座位（情侣座）价格
90.         blue: 35    // 蓝色座位（普通座）价格
91.       };
93.       // 返回格式化后的价格，保留两位小数
94.       return prices[type].toFixed(2);
95.     },
97.     /**
98.      * 处理确认选座操作
99.      * 验证选座状态并进行后续处理
100.      *
101.      * 使用场景：
102.      * 1. 用户点击确认选座按钮时触发
103.      * 2. 验证是否已选择座位
104.      * 3. 进行下一步订单处理
105.      */
106.     confirmSeats() {
107.       // 检查是否有选中的座位
108.       if (this.selectedSeatsCount === 0) {
109.         // 如果没有选择座位，显示提示信息
110.         uni.showToast({
111.           title: '请先选择座位',
112.           icon: 'none'
113.         });
114.         return;
115.       }
117.       // TODO: 处理确认选座逻辑
118.       // 可以添加以下操作：
119.       // 1. 获取选中的座位信息
120.       // 2. 调用后端API锁定座位
121.       // 3. 跳转到订单确认页面
122.       // 4. 处理支付流程等
123.       console.log('确认选座', this.getSelectedSeats());
124.     }

复制代码

完备代码

1. <template>  <view class="chooseSeat">    <!-- 价格说明 -->    <view class="price-info">      <view class="price-item">        <view class="price-box pink"></view>        <text>¥40.00</text>      </view>      <view class="price-item">        <view class="price-box orange"></view>        <text>¥38.00</text>      </view>      <view class="price-item">        <view class="price-box blue"></view>        <text>¥35.00</text>      </view>    </view>    <!-- 银幕 -->    <view class="screen">      <image class="screen-image" src="https://s.xitupt.com/tsimgs/949558333604714792/20250318/h5_mng_1742302489261"        mode="aspectFit"></image>      <!-- <view class="screen-text">        <text>IMAX</text>        <text>4DX</text>      </view> -->    </view>    <!-- 座位区域 -->    <view class="seat-container">      <!-- 修改行号部门，让它和座位区域一起缩放移动 -->      <view class="seat-area-wrapper" :style="{        transform: `scale(${scale}) translate(${position.x}px, ${position.y}px)`,        transformOrigin: '0 0'      }" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">        <!-- 行号 -->        <view class="row-numbers">          <view v-for="i in 6" :key="i" class="row-number">{{ i }}</view>        </view>        <!-- 座位图 -->        <view class="seats-area">          <view v-for="(row, rowIndex) in seatMap" :key="rowIndex" class="seat-row">            <view v-for="(seat, colIndex) in row" :key="colIndex" class="seat" :class="[              seat.type,              {                'selected': seat.selected,                'sold': seat.sold              }            ]" :data-row="rowIndex" :data-col="colIndex" @tap.stop="selectSeat(rowIndex, colIndex)">              <image v-if="seat.selected" class="seat-selected-image"                src="https://s.xitupt.com/tsimgs/949558333604714792/20250318/h5_mng_1742303462702" mode="aspectFit">              </image>            </view>          </view>        </view>      </view>    </view>    <!-- 底部固定区域 -->    <view class="bottom-fixed">      <!-- 卡片部门 -->      <view class="info-card">        <view class="movie-info">          <view class="movie-title">            <text class="title">初步举证</text>          </view>          <view class="movie-time">            <text class="today">今天</text>            <text class="time">14:10-16:25</text>          </view>          <!-- 已选座位区域 -->          <view class="selected-seats" v-if="selectedSeatsCount > 0">            <!-- 已选标签和数量 -->            <view class="selected-header">              <text class="selected-label">已选：</text>              <text class="selected-count">{{ selectedSeatsCount }}个座位</text>            </view>            <!-- 座位详情列表 -->            <scroll-view class="seats-scroll" scroll-x show-scrollbar="false">              <view class="seats-container">                <view class="seat-tag" v-for="(seat, index) in getSelectedSeats()" :key="index">                  <view class="seat-info">                    <view class="seat-position">{{ `${seat.row + 1}排${seat.col + 1}座` }}</view>                    <view class="seat-price">¥{{ getSeatPrice(seat.type) }}</view>                  </view>                  <text class="close" @tap.stop="selectSeat(seat.row, seat.col)">×</text>                </view>              </view>            </scroll-view>          </view>        </view>      </view>      <!-- 按钮部门 -->      <view class="button-wrapper">        <view class="confirm-button" :class="{ 'disabled': selectedSeatsCount === 0 }" @tap="confirmSeats">          <text>¥{{ getTotalPrice() }} 确认选座</text>        </view>      </view>    </view>  </view></template><script>export default {  data() {    return {      seatMap: [], // 座位数据      isDragging: false, // 是否正在拖动中      dragAction: false, // 拖动动作(true:选择, false:取消选择)      lastDragPosition: { row: -1, col: -1 }, // 上一次拖动的位置      scale: 1, // 当前缩放比例      startDistance: 0, // 开始的手势距离      position: { x: 0, y: 0 }, // 添加位置信息      lastTouch: { x: 0, y: 0 }, // 记载前次触摸位置      minScale: 0.5, // 最小缩放比例      maxScale: 2, // 最大缩放比例      maxSelectedSeats: 40, // 最多可选座位数      selectedSeatsCount: 0, // 当前已选座位数      touchStartTime: 0, // 触摸开始的时间戳，用于区分点击和拖动      touchStartPos: { x: 0, y: 0 }, // 触摸开始的位置，用于盘算移动距离      isMoved: false, // 是否发生了移动，用于区分点击和拖动事件    }  },  created() {    this.initSeatMap()  },  methods: {    /**     * 初始化座位图数据     * 创建一个二维数组来表示影院座位布局     */    initSeatMap() {      // 定义座位图的尺寸      const rows = 6 // 总行数      const cols = 8 // 每行座位数      // 创建二维数组并初始化每个座位的属性      this.seatMap = Array(rows).fill().map((_, rowIndex) =>        Array(cols).fill().map((_, colIndex) => ({          // 根据位置确定座位类型（粉色/橙色/蓝色）          type: this.getSeatType(rowIndex, colIndex),          // 初始状态为未选中          selected: false,          // 随机设置座位是否已售出          sold: this.getRandomSoldStatus(rowIndex, colIndex)        }))      )    },    getSeatType(row, col) {      // 第一列和第二列、倒数第二列、倒数第一列是蓝色      if (col < 2 || col > 5) {        return 'blue'      }      // 第三列和倒数第三列是橙色      if (col === 2 || col === 5) {        return 'orange'      }      // 第一行的第四第五列是橙色      if (row === 0 && (col === 3 || col === 4)) {        return 'orange'      }      // 第五行的第四第五列是橙色      if (row === 5 && (col === 3 || col === 4)) {        return 'orange'      }      // 第四第五列的第二到第四行是粉色      if ((col === 3 || col === 4) && (row >= 1 && row <= 4)) {        return 'pink'      }      return 'blue' // 默认蓝色    },    /**     * 处理座位选择事件     * 用于切换座位的选中状态，并管理已选座位数量     * @param {number} row - 座位所在行号     * @param {number} col - 座位所在列号     */    selectSeat(row, col) {      // 防止拖动操纵触发选座      // 当用户拖动检察座位时，不应触发选座操纵      if (this.isMoved) return;      // 检查座位是否可选      // 验证座位是否存在且未售出      if (!this.isSeatSelectable(row, col)) return;      // 获取目的座位对象      const seat = this.seatMap[row][col];      // 检查是否超出最大可选座位数      // 仅在要选中新座位时举行检查      if (!seat.selected && this.selectedSeatsCount >= this.maxSelectedSeats) {        // 显示提示信息        uni.showToast({          title: `最多只能选择${this.maxSelectedSeats}个座位`,          icon: 'none'        });        return;      }      // 切换座位选中状态      seat.selected = !seat.selected;      // 更新已选座位计数      // 选中时 +1，取消选中时 -1      this.selectedSeatsCount += seat.selected ? 1 : -1;    },    // 随机设置部门座位为已售    getRandomSoldStatus(row, col) {      // 约20%的概率将座位标记为已售      return Math.random() < 0.2;    },    // 检查座位是否可选择    isSeatSelectable(row, col) {      // 确保座位存在且未售出      return this.seatMap[row] &&        this.seatMap[row][col] &&        !this.seatMap[row][col].sold;    },    /**
2.      * 获取点击或触摸事件对应的座位位置
3.      * 通过事件对象获取座位的行列信息
4.      * @param {Event|TouchEvent} event - 点击或触摸事件对象
5.      * @returns {Object} 返回座位位置对象，包含行(row)和列(col)信息，若未找到有效位置则返回 {row: -1, col: -1}
6.      */
7.     getSeatPosition(event) {
8.       // 统一处理触摸事件和点击事件
9.       // 触摸事件时从 touches 数组获取第一个触摸点
10.       // 点击事件时直接使用事件对象
11.       const touch = event.touches ? event.touches[0] : event;
13.       // 获取触摸/点击的坐标位置
14.       // clientX/Y 用于标准事件，x/y 用于某些特殊环境
15.       const x = touch.clientX || touch.x;
16.       const y = touch.clientY || touch.y;
18.       // 创建查询对象，用于获取 DOM 信息（当前未使用）
19.       const query = uni.createSelectorQuery();
21.       // 从事件目标的数据集中获取座位信息
22.       // 使用 HTML5 data-* 属性存储的行列信息
23.       if (event.target && event.target.dataset) {
24.         const dataset = event.target.dataset;
25.         // 检查数据集中是否包含有效的行列信息
26.         if (dataset.row !== undefined && dataset.col !== undefined) {
27.           // 返回解析后的座位位置
28.           // parseInt 确保返回数值类型
29.           return {
30.             row: parseInt(dataset.row),
31.             col: parseInt(dataset.col)
32.           };
33.         }
34.       }
36.       // 如果无法获取有效的座位信息
37.       // 返回表示无效位置的对象
38.       return { row: -1, col: -1 };
39.     },
41.     /**
42.      * 处理触摸开始事件
43.      * 用于初始化拖拽和缩放的起始状态
44.      * @param {TouchEvent} event - 触摸事件对象，包含触摸点信息
45.      */
46.     onTouchStart(event) {
47.       // 记录触摸开始的时间戳，用于后续判断是点击还是拖动
48.       this.touchStartTime = Date.now();
49.       // 重置移动标志，初始状态下未发生移动
50.       this.isMoved = false;
52.       // 单指触摸 - 处理拖动初始化
53.       if (event.touches.length === 1) {
54.         const touch = event.touches[0];
55.         // 记录当前触摸点作为上一次触摸位置，用于计算移动距离
56.         this.lastTouch = { x: touch.clientX, y: touch.clientY };
57.         // 记录触摸起始位置，用于计算总移动距离
58.         this.touchStartPos = { x: touch.clientX, y: touch.clientY };
59.       }
60.       // 双指触摸 - 处理缩放初始化
61.       else if (event.touches.length === 2) {
62.         // 计算两个触摸点之间的初始距离，用于后续计算缩放比例
63.         this.startDistance = this.getDistance(event.touches[0], event.touches[1]);
64.       }
65.     },
67.     // 处理触摸移动事件
68.     onTouchMove(event) {
69.       // 标记已经发生移动，用于区分点击和拖动
70.       this.isMoved = true;
72.       // 单指触摸 - 处理拖动
73.       if (event.touches.length === 1) {
74.         const touch = event.touches[0];
75.         // 计算相对于上一次触摸位置的偏移量
76.         const deltaX = touch.clientX - this.lastTouch.x;
77.         const deltaY = touch.clientY - this.lastTouch.y;
79.         // 根据当前缩放比例调整位移距离
80.         // 缩放比例越大，移动距离越小，保证移动体验一致
81.         this.position.x += deltaX / this.scale;
82.         this.position.y += deltaY / this.scale;
84.         // 更新最后一次触摸位置
85.         this.lastTouch = { x: touch.clientX, y: touch.clientY };
86.       }
87.       // 双指触摸 - 处理缩放
88.       else if (event.touches.length === 2) {
89.         // 计算当前两个触摸点之间的距离
90.         const currentDistance = this.getDistance(event.touches[0], event.touches[1]);
91.         // 根据距离变化计算新的缩放比例
92.         let newScale = this.scale * (currentDistance / this.startDistance);
93.         // 限制缩放范围在 minScale 和 maxScale 之间
94.         newScale = Math.max(this.minScale, Math.min(this.maxScale, newScale));
95.         this.scale = newScale;
96.         // 更新起始距离，用于下一次计算
97.         this.startDistance = currentDistance;
98.       }
100.       // 检查并限制移动边界，防止内容移出可视区域
101.       this.checkBoundaries();
102.     },
104.     // 处理手势结束
105.     onTouchEnd() {
106.       // 可以在这里处理手势结束后的逻辑
107.     },
109.     /**
110.      * 计算两个触摸点之间的距离
111.      * @param {Object} touch1 - 第一个触摸点，包含 clientX 和 clientY 坐标
112.      * @param {Object} touch2 - 第二个触摸点，包含 clientX 和 clientY 坐标
113.      * @returns {number} 两点之间的欧几里得距离
114.      */
115.     getDistance(touch1, touch2) {
116.       // 计算 X 轴方向的距离差
117.       const dx = touch1.clientX - touch2.clientX;
118.       // 计算 Y 轴方向的距离差
119.       const dy = touch1.clientY - touch2.clientY;
120.       // 使用勾股定理计算两点之间的直线距离
121.       // distance = √(dx² + dy²)
122.       return Math.sqrt(dx * dx + dy * dy);
123.     },
125.     /**
126.      * 检查并限制座位区域的移动边界
127.      * 防止用户将座位区域拖动到视图之外
128.      */
129.     checkBoundaries() {
130.       // 定义最大可移动距离（像素）
131.       const maxX = 200; // X轴最大移动距离，可根据实际座位区域大小调整
132.       const maxY = 200; // Y轴最大移动距离，可根据实际座位区域大小调整
134.       // 限制X轴移动范围：[-maxX, maxX]
135.       // Math.min 确保不会超过右边界
136.       // Math.max 确保不会超过左边界
137.       this.position.x = Math.max(-maxX, Math.min(maxX, this.position.x));
139.       // 限制Y轴移动范围：[-maxY, maxY]
140.       // Math.min 确保不会超过下边界
141.       // Math.max 确保不会超过上边界
142.       this.position.y = Math.max(-maxY, Math.min(maxY, this.position.y));
143.     },    /**
144.      * 获取指定座位在所有已选座位中的序号
145.      * @param {number} row - 要查询的座位行号
146.      * @param {number} col - 要查询的座位列号
147.      * @returns {number} 返回该座位是第几个被选中的座位（从1开始计数）
148.      *
149.      * 使用场景：
150.      * 1. 用于确定座位的选中顺序
151.      * 2. 可用于显示座位的选中序号
152.      * 3. 帮助用户了解座位的选择顺序
153.      */
154.     getSelectedIndex(row, col) {
155.       // 初始化计数器，从1开始计数
156.       let count = 1;
158.       // 遍历所有座位
159.       for (let i = 0; i < this.seatMap.length; i++) {
160.         for (let j = 0; j < this.seatMap[i].length; j++) {
161.           // 检查当前遍历到的座位是否被选中
162.           if (this.seatMap[i][j].selected) {
163.             // 如果找到目标座位，返回当前计数
164.             if (i === row && j === col) return count;
165.             // 如果不是目标座位，计数器加1
166.             count++;
167.           }
168.         }
169.       }
170.       return count;
171.     },
173.     // 获取已选座位列表
174.     getSelectedSeats() {
175.       const selectedSeats = [];
176.       this.seatMap.forEach((row, rowIndex) => {
177.         row.forEach((seat, colIndex) => {
178.           if (seat.selected) {
179.             selectedSeats.push({
180.               row: rowIndex,
181.               col: colIndex,
182.               type: seat.type
183.             });
184.           }
185.         });
186.       });
187.       return selectedSeats;
188.     },
190.     /**
191.      * 计算所有已选座位的总价
192.      * @returns {string} 返回格式化后的总价字符串，保留两位小数
193.      *
194.      * 使用场景：
195.      * 1. 显示确认选座按钮上的总价
196.      * 2. 提交订单时计算支付金额
197.      * 3. 更新用户选座时实时显示价格
198.      */
199.     getTotalPrice() {
200.       // 定义不同类型座位的价格映射
201.       const prices = {
202.         pink: 40,   // 粉色座位（VIP座）价格
203.         orange: 38, // 橙色座位（情侣座）价格
204.         blue: 35    // 蓝色座位（普通座）价格
205.       };
207.       // 使用 reduce 方法计算总价
208.       // 1. 获取所有已选座位列表
209.       // 2. 根据每个座位的类型获取对应价格
210.       // 3. 累加所有座位的价格
211.       return this.getSelectedSeats().reduce((total, seat) => {
212.         // total: 累计总价
213.         // seat: 当前座位信息，包含 type 属性
214.         return total + prices[seat.type];
215.       }, 0).toFixed(2); // 初始值为0，结果保留两位小数
216.     },
218.     /**
219.      * 获取指定类型座位的单价
220.      * @param {string} type - 座位类型（'pink'|'orange'|'blue'）
221.      * @returns {string} 返回格式化后的价格字符串，保留两位小数
222.      *
223.      * 使用场景：
224.      * 1. 显示单个座位的价格
225.      * 2. 在已选座位列表中显示每个座位的单价
226.      */
227.     getSeatPrice(type) {
228.       // 定义不同类型座位的价格映射
229.       const prices = {
230.         pink: 40,   // 粉色座位（VIP座）价格
231.         orange: 38, // 橙色座位（情侣座）价格
232.         blue: 35    // 蓝色座位（普通座）价格
233.       };
235.       // 返回格式化后的价格，保留两位小数
236.       return prices[type].toFixed(2);
237.     },
239.     /**
240.      * 处理确认选座操作
241.      * 验证选座状态并进行后续处理
242.      *
243.      * 使用场景：
244.      * 1. 用户点击确认选座按钮时触发
245.      * 2. 验证是否已选择座位
246.      * 3. 进行下一步订单处理
247.      */
248.     confirmSeats() {
249.       // 检查是否有选中的座位
250.       if (this.selectedSeatsCount === 0) {
251.         // 如果没有选择座位，显示提示信息
252.         uni.showToast({
253.           title: '请先选择座位',
254.           icon: 'none'
255.         });
256.         return;
257.       }
259.       // TODO: 处理确认选座逻辑
260.       // 可以添加以下操作：
261.       // 1. 获取选中的座位信息
262.       // 2. 调用后端API锁定座位
263.       // 3. 跳转到订单确认页面
264.       // 4. 处理支付流程等
265.       console.log('确认选座', this.getSelectedSeats());
266.     }  }}</script><style scoped>.chooseSeat {  width: 100%;  min-height: 100vh;  padding: 20rpx;  box-sizing: border-box;}.chooseSeat-header {  padding: 20rpx 0;  text-align: center;  font-size: 32rpx;  font-weight: bold;}.price-info {  display: flex;  justify-content: space-around;  margin: 20rpx 0;}.price-item {  display: flex;  align-items: center;}.price-box {  width: 30rpx;  height: 30rpx;  margin-right: 10rpx;  border-radius: 4rpx;}.price-box.pink {  background-color: #FF3162;}.price-box.orange {  background-color: #F6BB7F;}.price-box.blue {  background-color: #8BBFF0;}.screen {  margin: 40rpx 0;  text-align: center;}.screen-image {  width: 90%;  height: 60rpx;  margin: 0 auto 10rpx;}.seat-container {  width: 100%;  height: 100%;  display: flex;  margin-top: 40rpx;  user-select: none;  touch-action: none;  /* overflow: hidden; */  /* 防止缩放时溢出 */}/* 新增包装器样式 */.seat-area-wrapper {  display: flex;  will-change: transform;  touch-action: none;}/* 修改行号样式 */.row-numbers {  width: 35rpx;  margin-right: 75rpx;  background: rgba(0, 0, 0, 0.3);  border-radius: 36rpx;  display: flex;  flex-direction: column;}.row-number {  height: 50rpx;  /* 与座位高度一致 */  line-height: 50rpx;  text-align: center;  font-family: PingFang SC, PingFang SC;  font-weight: 400;  font-size: 24rpx;  color: #FFFFFF;  margin-bottom: 20rpx;  /* 与座位间距一致 */}.row-number:last-child {  margin-bottom: 0;  /* 最后一个行号不须要底部间距 */}.seat-row {  display: flex;  justify-content: space-between;  margin-bottom: 20rpx;  /* 修改座位行间距为20rpx */}.seat-row:last-child {  margin-bottom: 0;  /* 最后一行不须要底部间距 */}.seat {  width: 50rpx;  height: 50rpx;  margin-right: 20rpx;  background-color: #fff;  border-radius: 8rpx;  position: relative;  transition: transform 0.3s ease;  /* 添加过渡效果 */}.seat:last-child {  margin-right: 0;  /* 最后一个座位不须要右边距 */}.seats-area {  flex: 1;  will-change: transform;  touch-action: none;  padding: 0;  /* 移除内边距 */}/* 修改选中状态的样式 */.seat.selected {  transform: scale(1.05);  /* 规复放大效果 */}/* 选中图片样式 */.seat-selected-image {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  z-index: 1;  pointer-events: none;}/* 修改选中状态的边框样式 */.seat.selected.pink {  border: 2rpx solid #FF3162;}.seat.selected.orange {  border: 2rpx solid #F6BB7F;}.seat.selected.blue {  border: 2rpx solid #8BBFF0;}/* 未选中状态样式 */.seat.pink {  border: 2rpx solid #FF3162;}.seat.orange {  border: 2rpx solid #F6BB7F;}.seat.blue {  border: 2rpx solid #8BBFF0;}/* 已售出座位的样式 */.seat.sold {  background-color: #F5F5F5;  border-color: #E0E0E0;  opacity: 0.6;  cursor: not-allowed;  transition: all 0.2s ease;  filter: grayscale(100%);}.seat.sold::after {  content: "×";  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  font-size: 24rpx;  color: #999;}/* 添加hover效果 */.seat:active:not(.sold) {  opacity: 0.8;  transform: scale(0.95);}/* 底部固定区域 */.bottom-fixed {  position: fixed;  left: 0;  bottom: 0;  width: 100%;  z-index: 100;  display: flex;  flex-direction: column;}/* 卡片样式 */.info-card {  margin: 20rpx;  padding: 20rpx;  background-color: #fff;  border-radius: 16rpx;  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);}.movie-title {  margin-bottom: 16rpx;}.movie-title .title {  font-size: 32rpx;  font-weight: bold;  margin-right: 20rpx;}.movie-time {  display: flex;  align-items: center;  margin-bottom: 16rpx;}.movie-time .today {  font-family: PingFang SC, PingFang SC;  font-weight: 400;  font-size: 24rpx;  color: #FF3162;  margin-right: 8rpx;}.movie-time .time {  font-family: PingFang SC, PingFang SC;  font-weight: 400;  font-size: 24rpx;  color: #666666;}.selected-seats {  display: flex;  flex-direction: column;  gap: 16rpx;}.selected-header {  display: flex;  align-items: center;}.selected-label {  font-family: PingFang SC, PingFang SC;  font-weight: 400;  font-size: 24rpx;  color: #666666;}.selected-count {  font-family: PingFang SC, PingFang SC;  font-weight: 400;  font-size: 24rpx;  color: #FF3162;  margin-left: 8rpx;}/* 滚动区域样式 */.seats-scroll {  width: 100%;  white-space: nowrap;  overflow: hidden;}/* 座位容器样式 */.seats-container {  display: inline-flex;  align-items: center;}.seat-tag {  width: 147rpx;  height: 64rpx;  background: #F4F5F7;  border-radius: 10rpx;  display: inline-flex;  align-items: center;  justify-content: space-between;  padding: 0 16rpx;  margin-right: 10rpx;  flex-shrink: 0;}.seat-info {  display: flex;  flex-direction: column;  align-items: flex-start;}.seat-position {  font-family: PingFang SC, PingFang SC;  font-weight: 400;  font-size: 24rpx;  color: #666666;}.seat-price {  font-family: PingFang SC, PingFang SC;  font-weight: 400;  font-size: 20rpx;  color: #FF3162;}.seat-tag .close {  color: #999;  font-size: 28rpx;}.seat-tag:last-child {  margin-right: 0;}/* 按钮容器 */.button-wrapper {  padding: 20rpx;  background-color: #fff;}/* 确认按钮样式 */.confirm-button {  width: 100%;  height: 88rpx;  background: linear-gradient(to right, #ff3162, #ff6c89);  border-radius: 44rpx;  display: flex;  justify-content: center;  align-items: center;  color: #fff;  font-size: 32rpx;  font-weight: 500;  margin-bottom: constant(safe-area-inset-bottom);  /* iOS 11.2+ */  margin-bottom: env(safe-area-inset-bottom);  /* iOS 11.2+ */}.confirm-button.disabled {  background: #ccc;  opacity: 0.8;}</style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。