Taro+vue3 实现选座位 功能 以及座位显示

1.类似选座位那种功能 我的功能座位 不是html元素 而是 座位图片 都是图片

const onConfirm = () => {// const area_arr = selectedSeat.value.map((item) => {//     return item.areaId;// });// const abc = isRepeat(area_arr);// if (!abc) {//     Taro.showToast({//         title: "请选择同一价格的座位,暂不支持跨区域选座~~",//         icon: "none",//         duration: 2000,//     });//     return;// }// phoneInputVisible.value = true;try {const area_arr = selectedSeat.value.map((item) => {return item.areaId;});const abc = isRepeat(area_arr);if (!abc) {Taro.showToast({title: "请选择同一价格的座位,暂不支持跨区域选座~~",icon: "none",duration: 2000,});return;}let result = selectedSeat.value.every(function (element, index, array) {console.log(element, "element");return checkSeat(element)})console.log(result, "result");// 开始计算是否留下空位 ------------ 结束if (!result) {// 如果 result 为falseTaro.showToast({title: "请不要留下空座位~~",icon: "none"})return}phoneInputVisible.value = true;return} catch (e) {console.log(e);}
};
// 检查每个座位是否会留下空位
const checkSeat = (element) => {console.log(element, "element");// 标准为 1.左右侧都必须保留 两格座位 + 最大顺延座位(也就是已选座位减去自身)// 2.靠墙和靠已售的座位一律直接通过const checkNum = 2 + selectedSeat.value.length - 1const gRowBasic = element.gRowconst gColBasic = element.gColconsole.log(checkNum, gRowBasic, gColBasic);let otherLoveSeatIndex = element.seatTypeif (otherLoveSeatIndex) {// 如果是情侣座 不检测return true}// 检查座位左侧let left = checkSeatDirection(gRowBasic, gColBasic, checkNum, '-')console.log(left);// 如果左侧已经检查出是靠着过道直接 返回trueif (left === 'special') {return true}// 检查座位右侧let right = checkSeatDirection(gRowBasic, gColBasic, checkNum, '+')console.log(right);if (right === 'special') {// 无论左侧是否是什么状态 检查出右侧靠着过道直接 返回truereturn true} else if (right === 'normal' && left === 'normal') {// 如果左右两侧都有富裕的座位 返回truereturn true} else if (right === 'fail' || left === 'fail') {// 如果左右两侧都是不通过检测 返回falsereturn false}return true
}
// 检查左右侧座位满足规则状态
const checkSeatDirection = (gRowBasic, gColBasic, checkNum, direction) => {// 空位个数let emptySeat = 0let x = 1 // 检查位置 只允许在x的位置出现过道,已售,维修for (let i = 1; i <= checkNum; i++) {let iter // 根据 gRow gCol direction 找出检查座位左边按顺序排列的checkNumif (direction === '-') {console.log('---');iter = seatList.value.find((el) => (el.gRow == gRowBasic && el.gCol == gColBasic - i))console.log(iter, "-");} else if (direction === '+') {console.log('+++');iter = seatList.value.find((el) => (el.gRow == gRowBasic && el.gCol == gColBasic + i))console.log(iter), "+";}if (x === i) {if (iter === undefined) {// 过道return 'special'}if (iter.nowIcon === iter.soldedIcon || iter.nowIcon === iter.fixIcon) {// 已售或者维修return 'special'}if (iter.nowIcon === iter.selectedIcon) {// 已选 顺延一位x++continue}} else {if (iter === undefined) {// 过道return 'fail'}if (iter.nowIcon === iter.soldedIcon ||iter.nowIcon === iter.fixIcon ||iter.nowIcon === iter.selectedIcon) {// 已售或者维修return 'fail'}}emptySeat++if (emptySeat >= 2) {return 'normal'}}
}分享一段代码 就是当我 选座不能留空的判断 逻辑 因为我这里都是图片 所有 根据图片判断的

2.如果大家有需求 需要源代码 可以先私信我 源代码整理中 未来会发布开源

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/612678.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

水经微图安卓版APP正式上线!

在水经微图APP&#xff08;简称“微图APP”&#xff09;安卓版已正式上线&#xff01; 在随着IOS版上线约一周之后&#xff0c;安卓版终于紧随其后发布了。 微图安卓版APP下载安装 自从IOS版发布之后&#xff0c;就有用户一直在问安卓版什么时候发布&#xff0c;这里非常感谢…

【复盘】quartz job 停止调度原因调查解决

场景 项目中的定时任务由 quartz 调度&#xff0c;划分了多个模块。测试组发现了其中A模块的定时任务不执行了&#xff0c;这就让人很头疼。 排查 1、job 不执行的原因有可能是 quartz 线程池满导致的问题 2、代码中未正确配置&#xff0c;上一个job 未执行完成下一个job 继…

Windows下安装mariadb10.5数据库及配置详细教程

1、简介 MariaDB数据库管理系统是一款MySQL的替代数据库。MariaDB由MySQL的创始人麦克尔维德纽斯主导开发&#xff0c;是可扩展的&#xff0c;可靠的SQL服务器的合乎逻辑的选择&#xff0c;MariaDB 10.5 是 MariaDB 当前的稳定系列。 2、下载 下载地址&#xff1a;Download M…

Linux和windows进程同步与线程同步那些事儿(五):Linux下进程同步

Linux和windows进程同步与线程同步那些事儿&#xff08;一&#xff09; Linux和windows进程同步与线程同步那些事儿&#xff08;二&#xff09;&#xff1a; windows线程同步详解示例 Linux和windows进程同步与线程同步那些事儿&#xff08;三&#xff09;&#xff1a; Linux线…

Linux基础知识(文件类型、目录、文件权限、权限修改)

Linux基础知识&#xff08;文件类型、目录、文件权限、权限修改&#xff09; 文章目录 Linux基础知识&#xff08;文件类型、目录、文件权限、权限修改&#xff09;0x01 文件类型0x02 常用目录0x03 文件系统权限0x04 权限修改 0x01 文件类型 Linux中的文件分类主要基于其内容和…

基于ssm快餐店点餐结算系统的设计与实现+vue论文

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装快餐店点餐结算系统软件来发挥其高效地信息处理的作用&…

前端计算精度丢失问题

// 精度丢失异常数据汇总 10.3950 * 3935.00 期望40904.33&#xff0c; 异常结果40904.32 7.3950 * 3835.00 期望28359.83&#xff0c; 异常结果28359.82 11.777 * 4215 期望49640.06&#xff0c; 异常结果49640.05 12.445 * 4005 期望49842.23&#xff0c;异常结果49842.2…

区间预测 | Matlab实现CNN-LSTM-KDE的卷积长短期神经网络结合核密度估计多变量时序区间预测

区间预测 | Matlab实现CNN-LSTM-KDE的卷积长短期神经网络结合核密度估计多变量时序区间预测 目录 区间预测 | Matlab实现CNN-LSTM-KDE的卷积长短期神经网络结合核密度估计多变量时序区间预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.CNN-LSTM-KDE多变量时间序列区…

使用 Windbg 分析软件异常时的诸多细节与技巧总结

目录 1、dump文件 1.1、dump文件的生成方式 1.2、dump文件的大小 2、pdb符号文件 2.1、pdb文件的路径设置 2.2、pdb文件的时间戳与名称问题 2.3、如何确定要找哪些pdb文件&#xff1f; 3、使用Windbg静态分析dump文件以及动态调试程序的一般步骤 4、确定发生异常或崩溃…

能力素质模型在企业中的应用

在我国经济飞速发展中&#xff0c;企业也获得了越来越多的业务。业务的增加带来的是人力管理上的不足&#xff0c;很多企业一味的着眼于业务的营收&#xff0c;而忽视了人力资源管理上的跟进&#xff0c;人力资源管理水平逐渐跟不上业务的迅猛发展&#xff0c;所以企业需要一套…

程序员的海外营收

在素材图片平台生成AI图片&#xff0c;通过下载赚取版税。 Wirestock这个平台能让你方便地把作品上传到多个素材市场&#xff0c;比如Adobe Stock、Shutterstock和iStock等。 你只需要上传一次&#xff0c;就能在多个平台上销售。 你可以开作坊、网上教程&#xff0c;或者在…

使用Netty实现Socket网络编程

** Netty初步讲解和认识 ** 网络通信模型 Netty支持多种网络通信模型&#xff0c;包括传统的阻塞I/O、非阻塞I/O、多路复用I/O和异步I/O。其中&#xff0c;非阻塞I/O和多路复用I/O是Netty的核心特性。 非阻塞I/O&#xff1a;Netty通过使用Java的NIO&#xff08;New I/O&…

JavaScript删除数组中指定元素的五种方法有哪些

JavaScript中删除数组中指定元素的方法有多种&#xff0c;以下列出五种常见方法&#xff1a; 使用filter()方法&#xff1a;filter()方法创建一个新数组&#xff0c;新数组中的元素是通过检查指定条件后从原数组中筛选出来的。如果元素满足条件&#xff0c;它就会被包含在新数组…

buuctf[极客大挑战 2019]BabySQL--联合注入、双写过滤

目录 1、测试万能密码&#xff1a; 2、判断字段个数 3、尝试联合注入 4、尝试双写过滤 5、继续尝试列数 6、查询数据库和版本信息 7、查询表名 8、没有找到和ctf相关的内容&#xff0c;查找其他的数据库 9、查看ctf数据库中的表 10、查询Flag表中的字段名 11、查询表…

Python图像处理【17】指纹增强和细节提取

指纹增强和细节提取 0. 前言1. 形态学操作基础2. 利用形态学操作进行指纹增强3. 从增强指纹中提取特征(细节)3.1 指纹细节概念3.2 提取指纹细节 小结系列链接 0. 前言 指纹识别和验证是最古老&#xff0c;最流行和广泛使用的生物特征技术。众所周知&#xff0c;每个人都有独特…

模型\视图一般步骤:为什么经常要用“选择模型”QItemSelectionModel?

一、“使用视图”一般的步骤&#xff1a; //1.创建 模型(这里是数据模型&#xff01;) tabModelnew QSqlTableModel(this,DB);//数据表 //2.设置 视图的模型(这里是数据模型&#xff01;) ui->tableView->setModel(tabModel); 模型种类&#xff1a; QStringListModel…

SemiDrive E3 打包说明

一、 概述 本文介绍 E3 PAC 打包&#xff0c;编译器生成 bin 文件需要通过打包生成 PAC 包&#xff0c;再通过 SDToolBox 工具将 PAC 包烧写到芯片&#xff0c;PAC 包的物理载体分为 Flash、eMMC、SD&#xff0c;一个 PAC包最多支持 3 个BootPackage&#xff1b;本文主要描述打…

代码随想录算法训练营第一天| 27 移除元素 704 二分查找

目录 27 移除元素 704 二分查找 27 移除元素 快指针遍历&#xff0c;慢指针记录 class Solution { public:int removeElement(vector<int>& nums, int val) {int l 0,r 0;for(;r < nums.size();r){if(nums[r] val){}else{nums[l] nums[r];}}return l;} }; …

iOS 应用上架指南:资料填写及提交审核

摘要 本文提供了iOS新站上架资料填写及提交审核的详细指南&#xff0c;包括创建应用、资料填写-综合、资料填写-IOS App和提交审核等步骤。通过本指南&#xff0c;您将了解到如何填写正确的资料&#xff0c;并顺利通过苹果公司的审核。 引言 在开发iOS应用后&#xff0c;将其…

医院里的管家婆,如何才能把科室的设备设施管理好?

在医院的各个科室中&#xff0c;有一位不可或缺的重要角色&#xff0c;科室的“管家婆”&#xff0c;大事、小事&#xff0c;事事都归她管&#xff0c;她就是护士长。她不仅是护理工作的核心&#xff0c;更是科室设备设施的“管家婆”。管理众多设备和资产&#xff0c;确保其正…