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

news2025/2/23 13:32:02

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.如果大家有需求 需要源代码 可以先私信我 源代码整理中 未来会发布开源

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

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

相关文章

SpringBoot+Vue药品ADR不良反应智能监测系统源码

药品不良反应&#xff08;Adverse Drug Reaction&#xff0c;ADR&#xff09;是指合格药品在正常用法用量下出现的与用药目的无关的有害反应&#xff0c;不包括超说明书用药、药品质量问题等导致的不良后果。 ADR智能监测系统开发环境 ❀技术架构&#xff1a;B/S ❀开发语言&…

Docker部署Homepage个人引导页

个人名片&#xff1a; 对人间的热爱与歌颂&#xff0c;可抵岁月冗长&#x1f31e; 个人主页&#x1f468;&#x1f3fb;‍&#x1f4bb;&#xff1a;念舒_C.ying 个人博客&#x1f30f; &#xff1a;念舒_C.ying Homepage | 主页 1. 安装环境2. Docker部署 原作者&#xff1a;無…

spring boot + mybatis + websocket + js实战

项目技术&#xff1a;spring boot mybatis websocket js 需求背景&#xff1a;当添加一个女孩时&#xff0c;页面的socket收到消息&#xff0c;打印最新的所有女生list&#xff0c;这样可以进一步在react/vue前端框架下&#xff0c;实现当A用户新增了某业务数据后&#xff…

Kafka 除了用作消息队列还能干吗?

Kafka 除了用作消息队列还能干吗&#xff1f; 本文转自 公众号 ByteByteGo&#xff0c;如有侵权&#xff0c;请联系&#xff0c;立即删除 Kafka 最初是为大规模处理日志而构建的。它可以保留消息直到过期&#xff0c;并让各个消费者按照自己的节奏提取消息。 与其之前的竞品不…

安谋科技“周易”NPU与飞桨完成II级兼容性测试,助力实现多样化AI部署

近日&#xff0c;安谋科技&#xff08;中国&#xff09;有限公司&#xff08;以下简称“安谋科技”&#xff09;“周易”NPU系列IP与飞桨已完成II级兼容性测试&#xff0c;测试结果显示&#xff0c;双方兼容性表现良好&#xff0c;整体运行稳定。这是安谋科技加入“硬件生态共创…

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

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

仓储10、20代电子标签接口文档-V2.0

标签注册 仓储10代注册 右下角左下角组合按键触发注册 注册成功&#xff1a;右上角绿灯变红灯&#xff0c;并显示信号强度的数值 仓储20代注册 右下角左下角组合按键触发注册 注册成功&#xff1a;右上角绿灯变红灯&#xff0c;并显示信号强度的数值 查询电子标签信息接口…

element ui el-table展示列表,结合分页+过滤功能

vueelement-ui实现的列表展示&#xff0c;列表分页&#xff0c;列表筛选功能 1&#xff0c;分页器 el-table模块下面是分页器代码 <el-pagination></el-pagination> <el-table></el-table> <!-- 分页器 --><div class"block" st…

MySQL 从零开始:03 基本入门语句

文章目录 1、连接数据库1.1 命令提示符登陆1.2 MySQL 8.0 Command Line Client 登陆1.3 MySQL Workbench 登陆 2、基本语句2.1 查看所有库2.2 创建库2.3 删除库2.4 选择数据库2.5 查看表2.6 创建表2.7 删除表2.8 改表名2.9 清空表 在上一小节中介绍了 MySQL 数据库的安装&#…

Axure rp 是什么软件?大厂设计师为你解答

Axure rp 是一个快速的原型设计工具&#xff0c;可以制作高度互动的 HTML 原型。设计者不仅可以使用 Axure 绘制线框图和原型&#xff0c;还可以在 Axure rp 中完成一系列的用户体验设计。本文将根据用户体验设计者的真实经验&#xff0c;从用户体验设计者的实际工作中触发 Axu…

【期末不挂科-考前速过系列P11】单片机[接口与总线]——经典例题盘点(带图解析)(第十一章:15题速过串行口的工作原理和应用)

前言 大家好吖&#xff0c;欢迎来到 YY 滴单片机速过系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过单片机的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏…

计算机毕业设计 基于Java的流浪动物救助平台的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

解析 ODPS SQL 任务优化方法原理

一文解析 ODPS SQL 任务优化方法原理 本文重点尝试从ODPS SQL的逻辑执行计划和Logview中的执行计划出发,分析日常数据研发过程中各种优化方法背后的原理,覆盖了部分调优方法的分析,从知道怎么优化,到为什么这样优化,以及还能怎样优化。 一、背景 使用ODPS SQL进行离线数据…

【NetApp数据恢复】NetApp存储中Oracle数据库数据恢复案例

NetApp数据恢复环境&#xff1a; NetApp某型号存储&#xff0c;存储中有数十块SAS硬盘&#xff0c;该型号NetApp存储硬盘是扇区大小是520字节。存储中的lun都映射给小型机使用&#xff0c;存放Oracle数据库文件&#xff0c;采用ASM裸设备存储方式。 NetApp存储故障&#xff1a…

一体式气象站的优点是什么?带大家了解一下

一体式气象站是一款高度集成、低功耗、可快速安装、便于野外监测使用的高精度自动气象观测设备。 一体式气象站的优点主要体现在以下几个方面&#xff1a; 集成度高&#xff1a;一体式气象站集成了多种气象传感器、数据处理单元、显示单元和通讯模块等&#xff0c;可以同时监…

基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖微信小程序端(十一)

加入redis缓存 1. 缓存菜品1.1 问题说明1.2 实现思路1.3 代码开发1.4 功能测试 2. 缓存套餐2.1 Spring Cache2.1.1 介绍2.1.2 常用注解2.1.3 入门案例 2.2 具体实现思路2.3 代码开发 1. 缓存菜品 1.1 问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;…

【Vue3】2-9 : class样式与style样式的三种形态

本书目录&#xff1a;点击进入 一、标签样式&#xff08; class 和 style&#xff09; 二、实战 &#xff1e; 代码 &#xff1e; 效果 一、标签样式&#xff08; class 和 style&#xff09; 在将 v-bind 用于 class 和 style 时&#xff0c;字符串拼接麻烦且易错&#…

【论文笔记】End-to-End Diffusion Latent Optimization Improves Classifier Guidance

Abstract Classifier guidance为图像生成带来了控制&#xff0c;但是需要训练新的噪声感知模型(noise-aware models)来获得准确的梯度&#xff0c;或使用最终生成的一步去噪近似&#xff0c;这会导致梯度错位(misaligned gradients)和次优控制(sub-optimal control)。 梯度错位…

k8s-----存储卷(数据卷)

容器内的目录和宿主机的目录进行挂载。 容器的生命状态是短站的&#xff0c;delete删除&#xff0c;k8s用控制创建的pod&#xff0c;delete相当于重启&#xff0c;容器的状态也会回复到初始状态。 一旦回到初始状态&#xff0c;所有的后天编辑的文件都会消失。 容器和节点之间创…

jsonvue-mobile 联动方式说明。

目录 jsonvue-mobile的联动类型分为两种 一种是命令式的&#xff1a; 另一种是响应式的&#xff1a; 联动场景 场景一&#xff1a;某一个字段的值变化时&#xff0c;同步修改另一个字段的值 命令式&#xff1a; 响应式&#xff1a; 场景一演示效果GIF 场景二&#xff1…