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.hqwc.cn/news/213801.html

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

相关文章

前置微小信号放大器在生物医学中有哪些应用

前置微小信号放大器在生物医学中有哪些应用

前置微小信号放大器在生物医学领域中具有广泛的应用。生物医学信号通常具有较小的振幅和较低的幅频响应&#xff0c;因此需要借助放大器来增强信号以便进行准确的测量、监测和分析。以下是前置微小信号放大器在生物医学中的主要应用。 心电图&#xff08;ECG&#xff09;放大器…
阅读更多...
Talk | 牛津大学博士后研究员边佳旺：SC-DepthV3-动态场景中的自监督单目深度估计

Talk | 牛津大学博士后研究员边佳旺：SC-DepthV3-动态场景中的自监督单目深度估计

本期为TechBeat人工智能社区第550期线上Talk。 北京时间11月23日(周四)20:00&#xff0c;牛津大学博士后研究员—边佳旺的Talk已准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “SC-DepthV3&#xff1a;动态场景中的自监督单目深度估计”&#xff0c;介绍…
阅读更多...
我的ros2机器人整体设置

我的ros2机器人整体设置

树莓派---------上位机-----------不用安装vscode stm32---------下位机------------安装micro_ros---------不用安装vscode Windows笔记本电脑----------工作平台------安装vscode--------安装STM32CubeMX-----安装KEIL ARM visual studio code 只需要安装在工作平台上面--即…
阅读更多...
RabbitMQ 消息队列编程

RabbitMQ 消息队列编程

安装与配置 安装 RabbitMQ 读者可以在 RabbitMQ 官方文档中找到完整的安装教程&#xff1a;Downloading and Installing RabbitMQ — RabbitMQ 本文使用 Docker 的方式部署。 RabbitMQ 社区镜像列表&#xff1a;https://hub.docker.com/_/rabbitmq 创建目录用于映射存储卷…
阅读更多...
关于JS stack trace解决办法

关于JS stack trace解决办法

问题描述 npm run serve启动前端项目时&#xff0c;控制台输出下图一堆的文字&#xff0c;JS stack trace , 问题现象&#xff1a; JS stack trace Security context: 0000017B93ACFB61 <JS Object>1: init_scope_vars [0000017B93A04381 <undefined>:~3382] [p…
阅读更多...
ssm+vue的企业文档管理系统（有报告）。Javaee项目，ssm vue前后端分离项目。

ssm+vue的企业文档管理系统（有报告）。Javaee项目，ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的企业文档管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…
阅读更多...
Grails 启动

Grails 启动

Grails系列 Grails项目启动 文章目录 Grails系列Grails一、项目创建二、可能的问题1.依赖下载2.项目导入到idea失败3.项目导入到idea后运行报错 Grails Grails是一款基于Groovy语言的Web应用程序框架&#xff0c;它使用了许多流行的开源技术&#xff0c;如Spring Framework、…
阅读更多...
视频录制工具有哪些？收藏起来，需要的时候用起来

视频录制工具有哪些？收藏起来，需要的时候用起来

视频录制工具顾名思义&#xff1a;用于捕获视频片段的软件。使用视频录制工具&#xff0c;你可以创建属于自己的视频内容。市面上的录屏工具五花八门&#xff0c;有哪些才是适合自己的呢&#xff1f; 虽然有许多视频录制工具可供选择&#xff0c;甚至有很多是免费的&#xff0…
阅读更多...
Redisson分布式锁源码解析、集群环境存在的问题

Redisson分布式锁源码解析、集群环境存在的问题

一、使用Redisson步骤 Redisson各个锁基本所用Redisson各个锁基本所用Redisson各个锁基本所用 二、源码解析 lock锁 1&#xff09; 基本思想&#xff1a; lock有两种方法 一种是空参 另一种是带参 * 空参方法&#xff1a;会默认调用看门狗的过期时间30*1000&…
阅读更多...
【新手解答】深入探索 C 语言：一些常见概念的解析

【新手解答】深入探索 C 语言：一些常见概念的解析

C语言的相关问题解答 写在最前面目录 问题1变量名与变量的关系与区别变量和数据类型形参&#xff08;形式参数&#xff09;的概念 问题2解析延伸解析对于多文件程序的理解总结 问题3类和对象变量和数据类型变量是否为抽象的数据类型&#xff1f;总结 问题4解析源文件&#xff0…
阅读更多...
函数计算的新征程：使用 Laf 构建 AI 知识库

函数计算的新征程：使用 Laf 构建 AI 知识库

Laf 已成功上架 Sealos 模板市场&#xff0c;可通过 Laf 应用模板来一键部署&#xff01; 这意味着 Laf 在私有化部署上的扩展性得到了极大的提升。 Sealos 作为一个功能强大的云操作系统&#xff0c;能够秒级创建多种高可用数据库&#xff0c;如 MySQL、PostgreSQL、MongoDB …
阅读更多...
鸿蒙原生应用/元服务开发-AGC分发如何配置签名信息

鸿蒙原生应用/元服务开发-AGC分发如何配置签名信息

使用制作的私钥&#xff08;.p12&#xff09;文件、在AGC申请的证书文件和Profile&#xff08;.p7b&#xff09;文件&#xff0c;在DevEco Studio配置工程的签名信息&#xff0c;以构建携带发布签名信息的APP。 1.打开DevEco Studio&#xff0c;菜单选择“File > Project S…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023