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 为false
            Taro.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 - 1
    const gRowBasic = element.gRow
    const gColBasic = element.gCol
    console.log(checkNum, gRowBasic, gColBasic);
    let otherLoveSeatIndex = element.seatType
    if (otherLoveSeatIndex) {
        // 如果是情侣座 不检测
        return true
    }
    // 检查座位左侧
    let left = checkSeatDirection(gRowBasic, gColBasic, checkNum, '-')
    console.log(left);


    // 如果左侧已经检查出是靠着过道直接 返回true
    if (left === 'special') {
        return true
    }
    // 检查座位右侧
    let right = checkSeatDirection(gRowBasic, gColBasic, checkNum, '+')
    console.log(right);

    if (right === 'special') {
        // 无论左侧是否是什么状态 检查出右侧靠着过道直接 返回true
        return true
    } else if (right === 'normal' && left === 'normal') {
        // 如果左右两侧都有富裕的座位 返回true
        return true
    } else if (right === 'fail' || left === 'fail') {
        // 如果左右两侧都是不通过检测 返回false
        return false
    }
    return true
}
// 检查左右侧座位满足规则状态
const checkSeatDirection = (gRowBasic, gColBasic, checkNum, direction) => {
    // 空位个数
    let emptySeat = 0
    let x = 1 // 检查位置 只允许在x的位置出现过道,已售,维修
    for (let i = 1; i <= checkNum; i++) {
        let iter // 根据 gRow gCol direction 找出检查座位左边按顺序排列的checkNum
        if (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.如果大家有需求 需要源代码 可以先私信我 源代码整理中 未来会发布开源

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入剖析pcap中的网络异常:TTL过期攻击、ARP中毒、TCP重传与重叠碎片等

网络流量数据包捕获是网络安全领域的重要部分&#xff0c;而pcap文件则是这一过程的常见载体。为了深入解析pcap文件中潜在的可疑网络流量&#xff0c;我们需要运用强大的网络安全威胁评估与审计工具。这些工具能够帮助我们捕捉、记录、检测和诊断网络中的数据传输问题&#xf…

双碳管理系统任务需求分析(第10套)

需求规格说明书 一、引言 &#xff08;一&#xff09;项目背景 编写本需求规格说明书的目的是为了详细呈现碳足迹产品需求和系统的功能描述&#xff0c;以进一步定制应用软件系统开发的细节问题&#xff0c;便于与项目开发协调工作。本文档面向的读者主要是项目委托单位的管…

vue3 组合式 API 在 onMounted 中调用 dom 报错 Initialize failed: invalid dom.

问题 在开发的过程中&#xff0c;项目中需要用到 echarts&#xff0c;引入后在渲染的过程中报错了&#xff1a;Initialize failed: invalid dom. 这个报错表示元素在未渲染完成的情况下就被调用了&#xff0c;作者在以前也遇到过这种情况&#xff0c;在 vue2 中正常来说将 ech…

控制注塑机PQ比例阀放大器

控制不带电反馈的单或双比例电磁铁的博世力士乐&#xff08;Bosch Rexroth&#xff09;、伊顿威格士&#xff08;EATON Vickers&#xff09;、油研&#xff08;YUKEN&#xff09;、贺德克&#xff08;HYDAC&#xff09;、大金&#xff08;DAIKIN&#xff09;、不二越&#xff0…

性能优化--实战利用arthas排查java服务cpu占用过高的问题

使用jps -l查看目前的java应用进程 启动arthas&#xff0c;选择需要监控的进程 dashboar查看该应用整体情况 使用thread命令&#xff0c;查看占用cpu过高的几个线程ID 然后使用thread 线程ID查看具体线程在执行哪些内容&#xff0c;可以看到对应的类和方法 正在上传… 重…

<Python>PyQt5中UI界面和逻辑函数分开写的一种方式

前言 如果经常使用PyQt5这种模块来编写带UI界面的程序&#xff0c;那么很自然的就会涉及到&#xff0c;一旦程序比较大&#xff0c;UI控件多的时候&#xff0c;需要将UI和逻辑程序分离&#xff0c;这样方便管理&#xff0c;也方便维护。 配置&#xff1a; 平台&#xff1a;win…

超级工具大盘点

在当今竞争激烈和快节奏的工作环境中&#xff0c;提高效率成为每个人追求的目标。为了更好地应对日常任务和项目&#xff0c;我们需要运用有效的工具和策略。软件是其中一种强大的支持工具&#xff0c;可以极大地提升工作效率和管理能力。在本文中&#xff0c;我将分享一些值得…

esp32UART串口外设(Arduino)

通用异步接收器/发送器 &#xff08;UART&#xff09; 介绍 通用异步接收器/发送器 &#xff08;UART&#xff09; 是一种硬件功能&#xff0c;它使用广泛采用的异步串行通信接口&#xff08;如 RS232、RS422 和 RS485&#xff09;处理通信&#xff08;即时序要求和数据成帧&…

@FunctionalSpringBootTest 和@SpringBootTest注解的区别

FunctionalSpringBootTest 和 SpringBootTest 是Spring框架中用于测试的两个不同注解。下面是它们之间的主要区别&#xff1a; 用途和范围&#xff1a; SpringBootTest&#xff1a;这个注解用于需要测试Spring应用程序上下文的场合。它会加载完整的应用程序上下文&#xff0c;适…

案例:自定义下拉刷新动画(ArkTS)

文章目录 介绍相关概念完整示例代码结构解读 自定义下拉组件自定义刷新动画总结 介绍 本篇Codelab主要介绍组件动画animation属性设置。当组件的某些通用属性变化时&#xff0c;可以通过属性动画实现渐变效果&#xff0c;提升用户体验。 本Codelab使用的display接口处于mock阶…

Python 镜像源使用指南:加速你的开发过程

&#x1f31f;&#x1f30c; 欢迎来到知识与创意的殿堂 — 远见阁小民的世界&#xff01;&#x1f680; &#x1f31f;&#x1f9ed; 在这里&#xff0c;我们一起探索技术的奥秘&#xff0c;一起在知识的海洋中遨游。 &#x1f31f;&#x1f9ed; 在这里&#xff0c;每个错误都…

MongoDB存储原理

存储引擎是数据库的组件&#xff0c;负责管理数据如何存储在内存和磁盘上。MongoDB 支持多个存储引擎&#xff0c;因为不同的引擎对于特定的工作负载表现更好。选择合适的存储引擎可以显著影响应用程序的性能。 WiredTiger 介绍 MongoDB 从 3.0 开始引入可插拔存储引擎的概念…

Linux内存管理:(七)页面回收机制

文章说明&#xff1a; Linux内核版本&#xff1a;5.0 架构&#xff1a;ARM64 参考资料及图片来源&#xff1a;《奔跑吧Linux内核》 Linux 5.0内核源码注释仓库地址&#xff1a; zhangzihengya/LinuxSourceCode_v5.0_study (github.com) 1. 触发页面回收 Linux内核中触发页…

vue中使用component中的is渲染组件如何使用,:is 等价 v-if渲染组件。

动态组件顾名思义动态加载不同的组件&#xff0c;is属性用于加载不同组件&#xff0c;传参使用属性传递 1、使用v-for遍历component&#xff0c;组件都会执行 <componentv-for"(item, index) in TAB_PANE":key"index":is"item.componentName"…

什么是springmvc(介绍)

什么是springmvc 1. 什么是springmvc2.项目中加入springmvc支持2.1 导入依赖2.2 springMVC配置文件2.3 web.xml配置2.4 中文编码处理 3. 编写一个简单的controller4. 视图层配置4.1 视图解析器配置4.2 静态资源配置4.2 编写页面4.3 页面跳转方式 5. SpringMVC处理请求的流程6. …

如何本地搭建DolphinScheduler并无公网ip远程访问管理界面

文章目录 前言1. 安装部署DolphinScheduler1.1 启动服务 2. 登录DolphinScheduler界面3. 安装内网穿透工具4. 配置Dolphin Scheduler公网地址5. 固定DolphinScheduler公网地址 前言 本篇教程和大家分享一下DolphinScheduler的安装部署及如何实现公网远程访问&#xff0c;结合内…

计算机网络教程题(详解)

1、一个网络的物理线路上抓到 011001 位串的波形如下 请问该线路采用了 (B)编码方式。 A.二进制编码 B.曼彻斯特编码 c.差分曼彻斯特编码 D.归零编码 曼彻斯特编码:每一周期分为两个相等的间隔&#xff0c;二进制”1“位在发送时&#xff0c;在第一个间隔中为高电压&#…

淘宝商品数据采集订单数据采集店铺数据采集API演示

淘宝商品数据采集代码 -- 请求示例 url 默认请求参数已经URL编码处理 curl -i "https://api-gw.cn/taobao/item_get/?key<您自己的apiKey>&secret<您自己的apiSecret>&num_iid652874751412&is_promotion1" 商品详情页与获取到的返回数据示…

我的128天创作纪念日

&#x1f308;前言 最近我一直忙着期末复习备考&#xff0c;前天还一不小心感冒了&#xff0c;现在头昏脑胀&#xff0c;说不出话来。刚刚查看CSDN的后台私信&#xff0c;发现官方提示今天是我的128天创作纪念日&#xff0c;正好有几天没有更新博客了&#xff0c;今天更一篇。…

4.MapReduce 序列化

目录 概述序列化序列化反序例化java自带的两种Serializable非Serializable hadoop序例化实践 分片/InputFormat & InputSplit日志 结束 概述 序列化是分布式计算中很重要的一环境&#xff0c;好的序列化方式&#xff0c;可以大大减少分布式计算中&#xff0c;网络传输的数…