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;这里非常感谢…

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

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

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

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

区间预测 | 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、确定发生异常或崩溃…

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;本文主要描述打…

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

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

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

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

ArcMap实现多行标注

地图标注是地图的重要组成部分&#xff0c;也是地理信息的重要表达方式​。ArcMap的符号化系统为我们添加地图标注提供了方便&#xff0c;但是有时我们却需要添加多行标注&#xff0c;今天我们一起来探索一下ArcMap中两行标注的实现方式​。 首先&#xff0c;我们右击目标图层…

Oracle-探究统计信息收集自动采样AUTO_SAMPLE_SIZE

前言&#xff1a; Oracle数据库进行统计信息收集时&#xff0c;可以通过ESTIMATE_PERCENT参数指定采样方式或者比例&#xff0c;有以下4种指定的方式 1 统计信息收集时不指定值&#xff0c;这时候ESTIMATE_PERCENT值为默认值DBMS_STATS.AUTO_SAMPLE_SIZE&#xff0c;自动采样 …

TXB2 ELISA kit—Enzo Life Sciences ELISA试剂盒

高灵敏、经过充分验证的ELISA试剂盒&#xff0c;3小时内即可得结果 血栓素A2&#xff08;TXA2&#xff09;参与血小板聚集、血管收缩和生殖功能&#xff0c;但在生理条件下的半衰期仅有37秒。血栓素B2&#xff08;TXB2&#xff09;是TXA2非酶水合的稳定产物&#xff0c;因此体内…

Kafka之集群搭建

1. 为什么要使用kafka集群 单机服务下&#xff0c;Kafka已经具备了非常高的性能。TPS能够达到百万级别。但是&#xff0c;在实际工作中使用时&#xff0c;单机搭建的Kafka会有很大的局限性。 ​ 消息太多&#xff0c;需要分开保存。Kafka是面向海量消息设计的&#xff0c;一个T…

数字化转型助力保险业腾飞,国产化安全产品护航高质量发展

近几年&#xff0c;全球贸易和经济受到了巨大冲击&#xff0c;众多贸易企业经营环境面临困难&#xff0c;某保险公司为国内企业提供强有力的保险保障&#xff0c;大大减轻了企业在国际贸易中风险&#xff0c;为国家经济恢复起到关键的作用。2022年&#xff0c;该保险公司承保金…

麒麟Linux安装新版微信的方法

麒麟Linux系统目前有v10和v10sp1&#xff0c;注意&#xff0c;恶趣味的是v10和v10sp1竟然不通用&#xff0c;这导致了一些国产程序出现运行bug,通过系统自带的麒麟商店无法图形界面安装&#xff0c;甚至搜索不到微信等等一系列问题&#xff0c;易用度确实很差。 解决办法也很简…

【一周年创作总结】人生是远方的无尽旷野呀

那一眼瞥见的伟大的灵魂&#xff0c;却似模糊的你和我 文章目录 &#x1f4d2;各个阶段的experience&#x1f50e;大一寒假&#x1f50e;大一下学期&#x1f50e;大一暑假&#x1f50e;大二上学期&#xff08;现在&#xff09; &#x1f354;相遇CSDN&#x1f6f8;自媒体&#…

Go gin框架控制器接收文件

1. 限定文件参数名&#xff08;一般做法&#xff09; func FileController(c *gin.Context) {//取表单中namefile的文件fileHeader, err : c.FormFile("file")//_, fileHeader, err : c.Request.FormFile("file")//这种也行if err ! nil {log.Println(err…

《Spring》--使用application.yml特性提供多环境开发解决方案/开发/测试/线上--方案2

阿丹-有话说&#xff1a; 第二种多环境的配置选择解决方案&#xff0c;这个更加的灵活没在配置方面都选择了一种yml的书写方式。 原理&#xff1a; 在Spring Boot中&#xff0c;spring.profiles.active 属性用于指定当前应用程序应激活哪个环境配置。当Spring Boot应用启动时…