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

2024-04-07 15:28
文章标签 uniapp 实现 选择 简易 影院 座位

本文主要是介绍影院座位选择简易实现（uniapp），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

界面展示

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

代码逻辑分析

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

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

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

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

<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唯一的座位，用于座位展示

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

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

[{seat_x: 1,seat_y: 1,canBuy: true,price: 20},{seat_x: 2,seat_y: 1,canBuy: true,price: 20},........
]

4、moveable-view的宽高设置

回到标题2的代码片段

<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方法，得到最大的宽和高

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中生成的座位数据

this.whData = this.handleMax(dataList);
whData = {widht:10,height:10
}

5、座位展示

<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）设置成相对定位

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

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

.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、左边列表展示 

			<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中，根据左移的距离判断列表位置

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

完整代码

<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代码

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

这篇关于影院座位选择简易实现（uniapp）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/882968。

相关文章

C++使用栈实现括号匹配的代码详解

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中，括号匹配是一个常见问题，尤其是在
阅读更多...
Java实现检查多个时间段是否有重合

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1：定义时间段类步骤2：添加时间段步骤3：检查时间段是否有重合步骤4：输出结果示例代码结语作
阅读更多...
使用C++实现链表元素的反转

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定
阅读更多...
Java覆盖第三方jar包中的某一个类的实现方法

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下：需要在
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...
python使用fastapi实现多语言国际化的操作指南

python使用fastapi实现多语言国际化的操作指南

《python使用fastapi实现多语言国际化的操作指南》本文介绍了使用Python和FastAPI实现多语言国际化的操作指南,包括多语言架构技术栈、翻译管理、前端本地化、语言切换机制以及常见陷阱和... 目录多语言国际化实现指南项目多语言架构技术栈目录结构翻译工作流1. 翻译数据存储2. 翻译生成脚本
阅读更多...
如何通过Python实现一个消息队列

如何通过Python实现一个消息队列

《如何通过Python实现一个消息队列》这篇文章主要为大家详细介绍了如何通过Python实现一个简单的消息队列,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录如何通过 python 实现消息队列如何把 http 请求放在队列中执行1. 使用 queue.Queue 和 reque
阅读更多...
Python如何实现PDF隐私信息检测

Python如何实现PDF隐私信息检测

《Python如何实现PDF隐私信息检测》随着越来越多的个人信息以电子形式存储和传输,确保这些信息的安全至关重要,本文将介绍如何使用Python检测PDF文件中的隐私信息,需要的可以参考下... 目录项目背景技术栈代码解析功能说明运行结php果在当今，数据隐私保护变得尤为重要。随着越来越多的个人信息以电子形
阅读更多...
使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

《使用sql-research-assistant进行SQL数据库研究的实战指南(代码实现演示)》本文介绍了sql-research-assistant工具,该工具基于LangChain框架,集... 目录技术背景介绍核心原理解析代码实现演示安装和配置项目集成LangSmith 配置（可选）启动服务应用场景
阅读更多...
使用Python快速实现链接转word文档

使用Python快速实现链接转word文档

《使用Python快速实现链接转word文档》这篇文章主要为大家详细介绍了如何使用Python快速实现链接转word文档功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 演示代码展示from newspaper import Articlefrom docx import
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2