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.rhkb.cn/news/204797.html

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

相关文章

如何理解2023vivo开发者大会,使用Rust语言编写蓝河操作系统(BlueOS)?

在2023年vivo开发者大会上&#xff0c;vivo宣布使用Rust语言编写其蓝河操作系统&#xff08;BlueOS&#xff09;。 什么是Rust语言&#xff1f; Rust 是一种开放源代码系统编程语言&#xff0c;可用于开发高效、安全的软件。 使用 Rust 可管理内存并控制其低级详细信息。 但你…

Web框架与Django简介

Web框架与Django简介 一、Web应用的组成 我们为了开发一款Web软件首先要了解什么才是Web应用软件呢&#xff1f; 对于传统的应用软件来说&#xff0c;基本都是部署单机使用&#xff0c;而Web应用软件就不一样&#xff0c;Web应用软件是基于B/S架构的&#xff0c;B和S都在不同…

Spring Boot 3.2.0 Tomcat虚拟线程初体验 (部分装配解析)

写在前面 spring boot 3 已经提供了对虚拟线程的支持。 虚拟线程和平台线程主要区别在于&#xff0c;虚拟线程在运行周期内不依赖操作系统线程&#xff1a;它们与硬件脱钩&#xff0c;因此被称为 “虚拟”。这种解耦是由 JVM 提供的抽象层赋予的。 虚拟线程的运行成本远低于平…

记录:Unity脚本的编写8.0

目录 需求分析设计GUI包含账号和密码输入栏&#xff0c;包括登录和注册按键添加背景音乐编写脚本控制音乐 退出按钮编写脚本 背景图片完整代码 一个小demo&#xff0c;登录和注册的实现&#xff08;包括GUI和数据库操控&#xff09; 需求分析 自行设计GUI&#xff0c;要求 1.包…

智能优化算法应用:基于花授粉算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于花授粉算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于花授粉算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.花授粉算法4.实验参数设定5.算法结果6.参考文献7.…

java游戏制作-王者荣耀游戏

一.准备工作 首先创建一个新的Java项目命名为“王者荣耀”&#xff0c;并在src下创建两个包分别命名为“com.sxt"、”com.stx.beast",在相应的包中创建所需的类。 创建一个名为“img”的文件夹来储存所需的图片素材。 二.代码呈现 package com.sxt; import javax.…

深入理解强化学习——马尔可夫决策过程:贝尔曼期望方程-[举例与代码实现]

分类目录&#xff1a;《深入理解强化学习》总目录 在文章《深入理解强化学习——马尔可夫决策过程&#xff1a;贝尔曼期望方程-[基础知识]》中我们讲到了贝尔曼期望方程&#xff0c;本文就举一个贝尔曼期望方程的具体例子&#xff0c;并给出相应代码实现。 下图是一个马尔可夫…

基于springboot实现私人健身与教练预约管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现私人健身与教练预约管理系统演示 摘要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应…

深入理解虚拟 DOM:提升前端性能的关键技术

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

Vue 定义只读数据 readonly 与 shallowReadonly

readonly 让一个响应式数据变为 **深层次的只读数据**。 shallowReadonly 让一个响应式数据变为 **浅层次的只读数据**&#xff0c;只读第一层。 isReadonly 判断一个数据是不是只读数据。 应用场景&#xff1a;不希望数据被修改时使用。 readonly深层次只读&#xff1a; …

Java实现王者荣耀小游戏

主要功能 键盘W,A,S,D键&#xff1a;控制玩家上下左右移动。按钮一&#xff1a;控制英雄发射一个矩形攻击红方小兵。按钮二&#xff1a;控制英雄发射魅惑技能&#xff0c;伤害小兵并让小兵停止移动。技能三&#xff1a;攻击多个敌人并让小兵停止移动。普攻&#xff1a;对小兵造…

VsCode学习

一、在VsCode 上编写第一个C语言 在VsCode上写代码都是先打开文件夹&#xff0c;这样也方便管理代码和编译器产生的可执行程序&#xff0c;VsCode生成的配置文件等。 1.1打开文件夹 写代码前&#xff0c;首先创立一个文件夹存储以后我们写的VsCode代码&#xff0c;便于管理。…

代码随想录算法训练营 ---第四十九天

前言&#xff1a; 今天是买卖股票的最佳时机系列&#xff0c;本系列之前在学习贪心思想时做过一些。 第一题&#xff1a; 简介&#xff1a; 本题在读题时我们要注意到几个细节 1.本题股票买卖只有一次。2.我们要在最低点买股票&#xff0c;在最高点卖股票。 我的思路&#…

skywalking告警UI界面有告警信息,webhook接口没有回调,400错误

400错误就是回调接口返回数据的属性对应不上 PostMapping(“/webhook”) public void webhook(RequestBody List alarmMessageList) 自定义的实体类AlarmMessage有问题 只能去官网找了 告警实体类官网 Getter EqualsAndHashCode RequiredArgsConstructor NoArgsConstructor(fo…

父进程隐藏——ConsoleApplication903项目

首先我发现用calc来做进程隐藏实验是失败的&#xff0c;父进程一直都是svhost.exe 那么我用我自己生成的cs木马beacon903.exe试试 试试explorer.exe 再试试cmd.exe 可以看到成功变成cmd.exe 可以看到我们可以通过这种方式虚假父进程 以上我们是直接获得的pid&#xff0c;那…

【Kotlin】类与接口

文章目录 类的定义创建类的实例构造函数主构造函数次构造函数init语句块 数据类的定义数据类定义了componentN方法 继承AnyAny&#xff1a;非空类型的根类型Any?&#xff1a;所有类型的根类型 覆盖方法覆盖属性覆盖 抽象类接口:使用interface关键字函数&#xff1a;funUnit:让…

听GPT 讲Rust源代码--src/tools(2)

题图来自AI生成 File: rust/src/tools/rust-analyzer/crates/hir-def/src/src.rs rust-analyzer 是一个 Rust 语言的语法分析器和语义分析器&#xff0c;用于提供代码补全、导航、重构等开发工具。而 rust-analyzer 的代码实现存储在 rust/src/tools/rust-analyzer 这个文件夹中…

亚马逊云科技 re:Invent 2023:引领科技前沿,探索未来云计算之窗

文章目录 一、前言二、什么是亚马逊云科技 re:Invent&#xff1f;三、亚马逊云科技 re:Invent 2023 将于何时何地举行四、亚马逊云科技 re:Invent 2023 有什么内容&#xff1f;4.1 亚马逊云科技 re:Invent 2023 主题演讲4.2 亚马逊云科技行业专家探实战 五、更多亚马逊云科技活…

Unity UGUI的自动布局-LayoutGroup(水平布局)组件

Horizontal Layout Group | Unity UI | 1.0.0 1. 什么是HorizontalLayoutGroup组件&#xff1f; HorizontalLayoutGroup是Unity UGUI中的一种布局组件&#xff0c;用于在水平方向上对子物体进行排列和布局。它可以根据一定的规则自动调整子物体的位置和大小&#xff0c;使它们…

万字详解,和你用RAG+LangChain实现chatpdf

像chatgpt这样的大语言模型(LLM)可以回答很多类型的问题,但是,如果只依赖LLM,它只知道训练过的内容,不知道你的私有数据:如公司内部没有联网的企业文档,或者在LLM训练完成后新产生的数据。(即使是最新的GPT-4 Turbo,训练的数据集也只更新到2023年4月)所以,如果我们…