影院座位选择简易实现（uniapp）

努力学前端Hang2024-04-07 14:03

界面展示

主要使用到uniap中的movable-area，和movable-view组件实现。

代码逻辑分析

1、使用movable-area和movea-view组件，用于座位展示

html 复制代码 
<div class="ui-seat__box">
	<movable-area  class="ui-movableArea">
		<movable-view></movable-view>
	</movable-area>
</div>
css 复制代码 
.ui-movableArea {
		width: 600rpx;
		height: 500rpx;
		border: 1rpx solid #999;
		overflow: hidden;
	}

先给movable-area组件定义宽高，用于展示区域

2、 给moveable-view设置可移动，宽高等

html 复制代码 
<movable-area class="ui-movableArea">
				<movable-view direction="all" :out-of-bounds="false" :scale="false" class="ui-movableView"
					:style="{width:60 * whData.width + 'px',height:40 * whData.height + 'px'}" @change="handleMove"
					scale-max="1.5"
					damping="200"
					@scale="handleSize">

				</movable-view>
			</movable-area>

其中direction,out-of-bounds,scale,scale-max,damping,@scale等配置项在uniapp文档中查看介绍，分别表示为（是否全方向移动，超出能否移动，能否放大，最大的放大倍数，回弹时间，移动的回调）

3、影院的座位数据

通过以下方法，随机生成id唯一的座位，用于座位展示

javascript 复制代码 
function generateSeatArray(count) {
  const seats = [];
  for (let i = 0; i < count; i++) {
    seats.push({
      id: i + 1, // 随机生成 1 到 100 之间的唯一ID
      seat_x: (i % 11) + 1, // 规律递增 seat_x，范围 1 到 11
      seat_y: Math.floor(i / 11) + 1, // 规律递增 seat_y，范围 1 到 11
      canBuy: Math.random() > 0.5, // 随机生成 true 或 false
      price: Math.floor(Math.random() * 81) + 20 // 随机生成 20 到 100 之间的整数
    });
  }
  return seats;
}
export default generateSeatArray;

此方法结果为对象数组，表示以左上角为原点，右边为x轴正方向，下面为y轴正方向的坐标（seat_x,seat_y），canBuy表示能否购买此座位，price表示座位价格

javascript 复制代码 
[
    {
		seat_x: 1,
		seat_y: 1,
		canBuy: true,
		price: 20
	},
    {
		seat_x: 2,
		seat_y: 1,
		canBuy: true,
		price: 20
	},
    ........
]

4、moveable-view的宽高设置

回到标题2的代码片段

html 复制代码 
<movable-area class="ui-movableArea">
				<movable-view direction="all" :out-of-bounds="false" :scale="false" class="ui-movableView"
					:style="{width:60 * whData.width + 'px',height:40 * whData.height + 'px'}" @change="handleMove"
					scale-max="1.5"
					damping="200"
					@scale="handleSize">

				</movable-view>
			</movable-area>

在mova-view中有 :style="{width:60 * whData.width + 'px',height:40 * whData.height + 'px'}"

whData的数据如下所示，拿到座位数据作为参数传给handleMax方法，得到最大的宽和高

javascript 复制代码 
handleMax(array) {
				const maxData = array.reduce((preObj, cur) => {
					preObj.width = Math.max(preObj.width, cur.seat_x);
					preObj.height = Math.max(preObj.height, cur.seat_y)
					return preObj;
				}, {
					width: 0,
					height: 0
				})
				return maxData;
			},

datalist是标题3中生成的座位数据

javascript 复制代码 
this.whData = this.handleMax(dataList);
whData = {
 widht:10,
 height:10
}

5、座位展示

html 复制代码 
<movable-area class="ui-movableArea">
				<movable-view direction="all" :out-of-bounds="false" :scale="false" class="ui-movableView"
					:style="{width:60 * whData.width + 'px',height:40 * whData.height + 'px'}" @change="handleMove"
					scale-max="1.5"
					damping="200"
					@scale="handleSize">
                    <view class="ui-seat">
						<!-- 座位 -->
						<view class="ui-item" v-for="item in seatList" :key="item.id"
							:style="{top:30 * item.seat_y + 'px',left:50 * item.seat_x + 'px'}"
							@click="handleSelect(item)">
							<view class="ui-item__class__can" v-if="item.canBuy">{{item.seat_x}},{{item.seat_y}}</view>
							<view class="ui-item__class" v-else>{{item.seat_x}},{{item.seat_y}}</view>
						</view>
					</view>
				</movable-view>
			</movable-area>

在moveabel-view中新增view组件，用于展示每一个座位 ，注意看类（ui-seat）设置成相对定位

css 复制代码 
	.ui-seat {
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}

类（ui-item）设置成绝对定位

css 复制代码 
	.ui-item {
		margin: 5px;
		border: #999 1px solid;
		/* padding: 20rpx; */
		position: absolute;
	}

因为在现实情况下会出现某个地方没有座位的情况，需要使用绝对定位的方式，根据每个座位的x,y的坐标进行展示

:style="{top:30 * item.seat_y + 'px',left:50 * item.seat_x + 'px'}"

这行表示根据每个item项的坐标进行对应展示，并且不会重叠

<view class="ui-item__class__can" v-if="item.canBuy">{{item.seat_x}},{{item.seat_y}}</view>

<view class="ui-item__class" v-else>{{item.seat_x}},{{item.seat_y}}</view></view>

关于能否选择座位使用v-if来进行判断

6、左边列表展示

html 复制代码 
			<movable-area class="ui-movableArea">
				<movable-view direction="all" :out-of-bounds="false" :scale="false" class="ui-movableView"
					:style="{width:60 * whData.width + 'px',height:40 * whData.height + 'px'}" @change="handleMove"
					scale-max="1.5"
					damping="200"
					@scale="handleSize">
					<view class="ui-seat">
						<!-- 座位 -->
						<view class="ui-item" v-for="item in seatList" :key="item.id"
							:style="{top:30 * item.seat_y + 'px',left:50 * item.seat_x + 'px'}"
							@click="handleSelect(item)">
							<view class="ui-item__class__can" v-if="item.canBuy">{{item.seat_x}},{{item.seat_y}}</view>
							<view class="ui-item__class" v-else>{{item.seat_x}},{{item.seat_y}}</view>
						</view>
						<!-- 列表 -->
						<view class="ui-list" :style="{left: moveX + 'px'}">
							<view class="ui-list__item" v-for="i in whData.height" :key="index">
								{{i + 1}}
							</view>
						</view>
					</view>
				</movable-view>

在座位代码下面新增列表展示，在moveable-view中有@change方法，用于获取上下左右移动了多少,并存到moveX,和moveY中，根据左移的距离判断列表位置

javascript 复制代码 
handleMove(e) {
				const {
					x,
					y,
					source
				} = e.detail;
				setTimeout(() => {
					this.moveX = Math.abs(x);
					this.moveY = y;
				}, 200)
			},

完整代码

javascript 复制代码 
<template>
	<view class="content">
		<view class="ui-top">
			电影信息
		</view>
		<view class="ui-body">
			以下是座位控制
		</view>
		<div class="ui-seat__box">
			<movable-area class="ui-movableArea">
				<movable-view direction="all" :out-of-bounds="false" :scale="true" class="ui-movableView"
					:style="{width:60 * whData.width + 'px',height:40 * whData.height + 'px'}" @change="handleMove"
					scale-max="1.5"
					damping="200"
					@scale="handleSize">
					<view class="ui-seat">
						<!-- 座位 -->
						<view class="ui-item" v-for="item in seatList" :key="item.id"
							:style="{top:30 * item.seat_y + 'px',left:50 * item.seat_x + 'px'}"
							@click="handleSelect(item)">
							<view class="ui-item__class__can" v-if="item.canBuy">{{item.seat_x}},{{item.seat_y}}</view>
							<view class="ui-item__class" v-else>{{item.seat_x}},{{item.seat_y}}</view>
						</view>
						<!-- 列表 -->
						<view class="ui-list" :style="{left: moveX + 'px'}">
							<view class="ui-list__item" v-for="i in whData.height" :key="index">
								{{i + 1}}
							</view>
						</view>
					</view>
				</movable-view>
			</movable-area>
		</div>

	</view>
</template>

<script>
	import seatfun from './seat-data.js';
	export default {
		data() {
			return {
				title: 'Hello',
				seatList: [],
				whData: {},
				moveX: 0,
				moveY: 0
			}
		},
		onLoad() {
			const dataList = seatfun(50);
			// dataList.splice(2,4);
			// dataList.splice(10,12);
			this.seatList = dataList;
			// 获取宽度
			this.whData = this.handleMax(dataList);
		},
		methods: {
			handleMax(array) {
				const maxData = array.reduce((preObj, cur) => {
					preObj.width = Math.max(preObj.width, cur.seat_x);
					preObj.height = Math.max(preObj.height, cur.seat_y)
					return preObj;
				}, {
					width: 0,
					height: 0
				})
				return maxData;
			},
			handleSelect(item) {
				// console.log(item.seat_x,item.seat_y);
				if (item.canBuy) {
					item.canBuy = !item.canBuy;
				} else {
					// console.log(item);
					uni.showToast({
						title: '此座位不可选'
					})
				}
			},
			handleMove(e) {
				const {
					x,
					y,
					source
				} = e.detail;
				setTimeout(() => {
					this.moveX = Math.abs(x);
					this.moveY = y;
				}, 200)
			},
			handleSize(e){
				const {x,y,scale} = e.detail;
				setTimeout(() => {
					this.moveX = Math.abs(x);
					this.moveY = y;
				}, 200)
			}
		}
	}
</script>

<style scoped>
	view {
		box-sizing: border-box;
	}

	.ui-top {
		height: 200rpx;
		background-color: greenyellow;
	}

	.ui-movableArea {
		width: 600rpx;
		height: 500rpx;
		border: 1rpx solid #999;
		overflow: hidden;
	}

	.ui-seat__box {
		display: flex;
		justify-content: center;
	}

	.ui-seat {
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}

	.ui-movableView {
		width: 700rpx;
		height: 700rpx;
		overflow: hidden;
		background-color: antiquewhite;
	}

	.ui-item__class__can {
		width: 60rpx;
		height: 40rpx;
		background-color: darkred;
	}

	.ui-item__class {
		width: 60rpx;
		height: 40rpx;
		background-color: palegreen;
	}

	.ui-item {
		margin: 5px;
		border: #999 1px solid;
		/* padding: 20rpx; */
		position: absolute;
	}

	.active {
		background-color: greenyellow;
	}

	.ui-list {
		position: absolute;
		top: 30px;
		width: 50rpx;
		background-color: #fff;
	}

	.ui-list__item {
		margin: 10rpx;
		padding: 5rpx;
	}
</style>

seat-data.js代码

javascript 复制代码 
function generateSeatArray(count) {
  const seats = [];
  for (let i = 0; i < count; i++) {
    seats.push({
      id: i + 1, // 随机生成 1 到 100 之间的唯一ID
      seat_x: (i % 11) + 1, // 规律递增 seat_x，范围 1 到 11
      seat_y: Math.floor(i / 11) + 1, // 规律递增 seat_y，范围 1 到 11
      canBuy: Math.random() > 0.5, // 随机生成 true 或 false
      price: Math.floor(Math.random() * 81) + 20 // 随机生成 20 到 100 之间的整数
    });
  }
  return seats;
}
export default generateSeatArray;
相关推荐
guai_guai_guai43 分钟前
uniapp
前端·javascript·vue.js·uni-app
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts！从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
GIS程序媛—椰子3 小时前
【Vue 全家桶】7、Vue UI组件库（更新中）
前端·vue.js
我血条子呢4 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落4 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据5 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer085 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统（JAVA毕业设计）
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解