uniapp实现多时间段设置

功能说明:

1 点击新增时间,出现一个默认时间段模板,不能提交

2 点击“新增时间文本”,弹出弹窗,选择时间,不允许开始时间和结束时间同时为00:00,

<view class="item_cont">                        <view class="start_item" ><view class="start_item_title">{{i18nCast('vqSettingStartTime')}}</view><picker mode="multiSelector" :value="item.start" :start="hours" :end="minutes" :range="rangeOpts" @change="handlerTime($event,'start',item)"><view class="uni-input"><view class="select_time_txt" v-if="isTimeEmpty(item.start)">{{i18nCast("vqSettingSelectedTimeSlot")}} <text class="icon_right">></text></view><view v-else>{{transTimeToStr(item.start)}}</view></view></picker></view><view class="end_item" ><view class="end_item_title">{{i18nCast('vqSettingEndTime')}}</view><picker mode="multiSelector" :value="item.end" :start="hours" :end="minutes" :range="rangeOpts" @change="handlerTime($event,'end',item)"><view class="uni-input"><view class="select_time_txt" v-if="isTimeEmpty(item.end)">{{i18nCast("vqSettingSelectedTimeSlot")}} <text class="icon_right">></text></view><view v-else>{{transTimeToStr(item.end)}}</view></view></picker></view></view><view class="del_item" @click="triggerDelItem(item,index)">{{i18nCast('vqSettingdelete')}}</view>data(){return {curTimeItem:{start:"",end:"",},rangeOpts:[[...hours],[...minutes]],hours: Array.from({ length: 24 }, (_, i) => i),minutes: Array.from({ length: 60 }, (_, i) => i),}}methods:{i18nCast,...mapMutations({setStoreId:'global/setStoreId',}),cancelStart(){console.log("confirm----")},setPageTitle(){this.redirectFromPage=="vq"?setNavigationBarTitleFn(i18nCast("vqSettingNamequeueTime")):setNavigationBarTitleFn(i18nCast('vqSettingOperationTime'))},init(){getSetting({storeId: this.storeId}).then(res=>{let {openingPeriods,inventoryPeriods,storeToggle,inventoryPeriodsStore}=res.data;this.storeToggle=storeToggle//有桌型if(storeToggle){this.list=(this.redirectFromPage==="vq"?inventoryPeriods:openingPeriods)||[]}else{//无桌型this.list=(this.redirectFromPage==="vq"?inventoryPeriodsStore:openingPeriods)||[]}console.log("this.list",this.list)this.addListKey(this.list)}).finally(()=>{uni.hideLoading()uni.stopPullDownRefresh()})},addListKey(arr){if(arr&&arr.length>=0){arr.forEach(item=>{this.$set(item,'moveX',0)this.$set(item,'isShowError',false)this.$set(item,'timebName','Time Slot')this.spiltTimeToArr(item)})}},isTimeEmpty(str){return str.every(item=>item === "")?true:false},setTimeListFn(timelist){let params=this.getParams(timelist)console.log("params:",params)if(this.hasTimeIsZero()){uni.showToast({title: i18nCast("vqSettingEmptyTimeErr"),icon:"none"})}else{this.hasTimeSegmentsOverlap()if(this.hasTimeCross||this.hasItemErr()){return}else{//正常提交console.log("params:",params)this.submitCore(timelist)}}},getParams(timelist){let arr=timelist.map(({start,end})=>({start:this.transTimeToStr(start),end:this.transTimeToStr(end)})) console.log("getParams--",arr)let params={storeId:this.storeId}if(this.redirectFromPage==="vq" && arr.length==0){params={...params,inventoryType:"single"}}if(this.storeToggle){this.redirectFromPage==="vq"?params={...params,inventoryPeriods:arr}:params={...params,openingPeriods:arr}}else{this.redirectFromPage==="vq"?params={...params,inventoryPeriodsStore:arr}:params={...params,openingPeriods:arr}}return params},submitCore(list){let params=this.getParams(list)setSetting(params).then(res=>{let iconType=""res.errcode===0?iconType="success":iconType="error"uni.showToast({title: i18nCast('vqSettingSaveSuccess'),icon:iconType})this.init()}).catch(err=>{uni.showToast({title:err.data.errmsg,icon:"none"})})},save(){                 this.setTimeListFn(this.list)},transformDate(num) {   return num = num >= 10 ? num : `0${num}`;},// 时间段错误统计hasItemErr(){const errs=this.list.filter(item=>item.isShowError)return errs.length>0?true:false},handlerTime(e,type,item){type==="start"?item.start=e.detail.value:item.end=e.detail.value;this.hasTimeSegmentsOverlap()this.timeError(item)},transTimeToStr(timeArr){let res=``if(timeArr.every(item=>item=="")){res=`00:00`}else{res=`${this.transformDate(timeArr[0])}:${this.transformDate(timeArr[1])}`}return res},spiltTimeToArr(item){if(item.start&&item.end){let startArr=item.start.split(':')let endArr=item.end.split(':')item.start=[Number(startArr[0]),Number(startArr[1])]item.end=[Number(endArr[0]),Number(endArr[1])]}},timeError(item){let startH=item.start[0]let startM=item.start[1]let endH=item.end[0]let endM=item.end[1]console.log("startH-===",startH)console.log("endH-===",endH)//先比较时,if(Number(endH)<Number(startH)){item.isShowError=true}else if(Number(endH)===Number(startH)){// 再比较分item.isShowError=startM>=endM?true:false}else{item.isShowError=false}},addTime(item){console.log("addtime",item)console.log("this.list---prev",this.list)let upperTimeNum=this.redirectFromPage==="business"?3:5this.list=this.list||[]if(this.list.length>=upperTimeNum){uni.showToast({icon: "none",title: i18nCast("vqSettingUpperLimit")})return}else{this.list.push({id:Math.random()*10+100,timebName:i18nCast('vqSettingTimeSections'),start:["",""],end:["",""],})}console.log("this.list---next",this.list)},drawStart(e){e.preventDefault()this.startX=e.touches[0].clientX;console.log("this.startx",this.startX)},drawMove(e,item){e.preventDefault()item.moveX=e.touches[0].clientX-this.startX;if(item.moveX>=0){item.moveX=0}else{if(item.moveX<=-this.delBtnWidth/2){item.moveX=-this.delBtnWidth}}},drawEnd(e,item){e.preventDefault()if(item.moveX<0){if(Math.abs(item.moveX)<this.delBtnWidth/2){item.moveX=0}else{item.moveX=-this.delBtnWidth}}},triggerDelItem(item,index){console.log("item:",item)this.visible=true;this.curTimeItem=item},//删除confirmDel(){let list=this.list.filter(item=>item.start!==this.curTimeItem.start)console.log("lsit",this.list)this.visible=false// this.setTimeListFn(list)this.submitCore(list)},hasTimeIsZero(){let res=falseconst timeSlots = this.list.map(({start,end})=>({start:this.transTimeToStr(start),end:this.transTimeToStr(end)}));if(timeSlots.some(item=>item.start=="00:00"&&item.end=="00:00")){res=true}return res},convertToMinutes(timeString) {const [hours, minutes] = timeString.split(":");return parseInt(hours) * 60 + parseInt(minutes);},hasTimeSegmentsOverlap() {let res=falseconst timeArray = this.list.map(({start,end})=>({start:this.transTimeToStr(start),end:this.transTimeToStr(end)}));for (let i = 0; i < timeArray.length; i++) {const current = timeArray[i];for (let j = i + 1; j < timeArray.length; j++) {const compare = timeArray[j];// 将时间字符串转换为分钟数const currentStart = this.convertToMinutes(current.start);const currentEnd = this.convertToMinutes(current.end);const compareStart = this.convertToMinutes(compare.start);const compareEnd = this.convertToMinutes(compare.end);// 检查时间段是否重叠if ((currentStart <= compareStart && compareStart <= currentEnd) ||(currentStart <= compareEnd && compareEnd <= currentEnd) ||(compareStart <= currentStart && currentStart <= compareEnd) ||(compareStart <= currentEnd && currentEnd <= compareEnd)) {res= true; // 存在交叉时间段}}}// 不存在交叉时间段console.log("是否有交叉",res)this.hasTimeCross=resreturn res}}

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

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

相关文章

TCP/IP协议:最流行的电子邮件协议SMTP(简单邮件传输协议)详解

SMTP 是一种电子邮件协议&#xff0c;用于通过互联网从一个电子邮件帐户向另一个电子邮件帐户发送电子邮件。它是TCP/IP协议应用层的一部分。作为一种电子邮件协议&#xff0c;它建立了不同电子邮件客户端和帐户之间轻松信息交换的规则。这样&#xff0c;简单邮件传输协议就可以…

ArkUI开发进阶—@Builder函数@BuilderParam装饰器的妙用与场景应用

ArkUI开发进阶—@Builder函数@BuilderParam装饰器的妙用与场景应用 HarmonyOS,作为一款全场景分布式操作系统,为了推动更广泛的应用开发,采用了一种先进而灵活的编程语言——ArkTS。ArkTS是在TypeScript(TS)的基础上发展而来,为HarmonyOS提供了丰富的应用开发工具,使开…

Educational Codeforces Round 158 (Rated for Div. 2)(A~E)(贪心,树形DP)

A - Line Trip 题意&#xff1a;有一条路&#xff0c;可以用一条数线来表示。你位于数线上的点 0 &#xff0c;你想从点 0 到点 x &#xff0c;再回到点 0。你乘汽车旅行&#xff0c;每行驶 1个单位的距离要花费 1 升汽油。当您从点 0出发时&#xff0c;汽车已加满油(油箱中的…

麒麟linux离线安装dotnet core

1. 下载 dotnet core,以3.1为例 下载地址: 下载 .NET Core 3.1 (Linux、macOS 和 Windows) 查看linux cpu类型,然后根据类型下载 uname -m #结果是: aarch64 2. 放到指定目录,比如:/usr/dotnet 3. 解压dotnet-sdk-3.1.426-linux-arm64.tar.gz cd /usr/dotnet tar –zxvf a…

Ubuntu 22.04.3编译AOSP13刷机

文章目录 设备信息下载AOSP并切换分支获取设备驱动编译系统编译遇到的问题Cannot allocate memoryUbuntu设置USB调试刷机参考链接 设备信息 手机&#xff1a;Pixel 4XL 下载AOSP并切换分支 在清华大学开源软件镜像站下载初始化包aosp-latest.tar。 解压缩&#xff0c;切换到…

解决LocalDateTime传输前端为时间的数组

问题出现如下&#xff1a; 问题出现原因&#xff1a; 默认序列化情况下会使用SerializationFeature.WRITE_DATES_AS_TIMESTAMPS。使用这个解析时就会打印出数组。 解决方法&#xff1a; 我在全文搜索处理方法总结如下&#xff1a; 1.前端自定义函数来书写 ,cols: [[ //表头{…

Langchain的Agents介绍

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

Redis -- 介绍

1、NoSQL: 指的是非关系型数据库&#xff0c;主要分成四大类&#xff1a;键值存储数据库、列存储数据库、文档型数据库、图形数据库。 2、什么是Redis&#xff1a; Redis是一种基于内存的数据库&#xff0c;一般用于做缓存的中间件。 3、Redis的主要的特点&#xff1a; 1、Rd…

一、TIDB基础

TIDB整个逻辑架构跟MYSQL类似&#xff0c;如下&#xff1a; TIDB集群&#xff1a;相当于MYSQL的数据库服务器&#xff0c;区别是MYSQL数据库服务器为单进程的&#xff0c;TIDB集群为分布式多进程的。 数据库&#xff1a;同MYSQL数据库&#xff0c;数据库属于集群&#xff0c;…

SSL握手失败的解决方案

一、SSL握手失败的原因&#xff1a; 1&#xff0c;证书过期&#xff1a;SSL证书有一个有效期限&#xff0c;如果证书过期&#xff0c;就会导致SSL握手失败。 2&#xff0c;证书不被信任&#xff1a;如果网站的SSL证书不被浏览器或操作系统信任&#xff0c;也会导致SSL握手失败…

线性代数的艺术

推荐一本日本网友Kenji Hiranabe写的《线性代数的艺术》。这本书是基于MIT大牛Gilbert Strang教授的《每个人的线性代数》制作的。 虽然《线性代数的艺术》这本书仅仅只有12页的内容&#xff0c;就把线性代数的重点全画完了&#xff0c;清晰明了。 《线性代数的艺术》PDF版本&…

mysql 变量和配置详解

MySQL 中还有一些特殊的全局变量&#xff0c;如 log_bin、tmpdir、version、datadir&#xff0c;在 MySQL 服务实例运行期间它们的值不能动态修改&#xff0c;也就是不能使用 SET 命令进行重新设置&#xff0c;这种变量称为静态变量。数据库管理员可以使用前面提到的修改源代码…

ErphpdownV16.21插件 安装教程和插件下载

ErphpdownV16.21插件下载_新版本 上传插件并解压 登入后台插件管理启动ErphpdownV16.21插件即可 启动后设置即可使用此版本为学习版插件 功能介绍&#xff1a; Erphpdown会员推广下载专业版 经过完美测试运行于wordpress 3.x-6.x版本。后续会增加更多实用的功能。已针对此插件…

Windows IDEA Python开发环境安装+爬虫示例

文章目录 Python下载安装开发工具IDEA包管理安装pip基本用法从 requirements.txt 安装依赖 项目示例部署在 Linux 上安装Python在 Linux 上创建虚拟环境&#xff1a;安装依赖&#xff1a;运行你的爬虫 Python下载安装 Python 安装包下载地址&#xff1a;https://www.python.or…

Oracle登录认证方式详解

文章目录 一、简介二、OS认证三、口令认证四、remote_login_passwordfile 详解 一、简介 在数据库管理中&#xff0c;登录认证是确保数据库安全性的重要环节。Oracle数据库提供 了两种认证方式&#xff0c;一种是“操作系统认证”&#xff0c;一种是“口令文件认证&#xff0c…

智安网络|如何最大限度地提高企业网络安全水平

在当今数字化时代&#xff0c;企业面临着日益复杂和智能化的网络威胁。为了保护企业的机密信息和客户数据&#xff0c;漏洞扫描成为了一个至关重要的安全措施。然而&#xff0c;对于企业来说&#xff0c;他们最关心的是什么问题呢&#xff1f; 一、漏洞的发现和修复 在网络安全…

路径规划之Best-First Search算法

系列文章目录 路径规划之Dijkstra算法 路径规划之Best-First Search算法 路径规划之Best-First Search算法 系列文章目录前言一、Best-First Search算法1.1 起源1.2 过程 三、简单使用 前言 Best-First Search算法和Dijkstra算法类似&#xff0c;都属于BFS的扩展或改进 一、…

基于官方YOLOv4开发构建目标检测模型超详细实战教程【以自建缺陷检测数据集为例】

本文是关于基于YOLOv4开发构建目标检测模型的超详细实战教程&#xff0c;超详细实战教程相关的博文在前文有相应的系列&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a;《基于yolov7开发实践实例分割模型超详细教程》 《YOLOv7基于自己的数据集从零构建模型完整训练、…

Linux技能篇-非交互式修改密码

今天的文章没有格式&#xff0c;简单分享一个小技能&#xff0c;就是标题所说–非交互式修改密码。 一、普通方式修改用户密码 最普通的修改密码的命令就是passwd命令 [rootlocalhost ~]# passwd root Changing password for user root. New password: Retype new password:…

一文彻底看懂Python切片,Python切片理解与操作

1.什么是切片 切片是Python中一种用于操作序列类型(如列表、字符串和元组)的方法。它通过指定起始索引和结束索引来截取出序列的一部分,形成一个新的序列。切片是访问特定范围内的元素,就是一个Area。 说个笑话:切片不是切片,而是切片,但是又是切片。大家理解下呢(末…