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.pswp.cn/news/168073.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/168073.shtml
英文地址,請注明出處:http://en.pswp.cn/news/168073.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

TCP/IP協議:最流行的電子郵件協議SMTP(簡單郵件傳輸協議)詳解

SMTP 是一種電子郵件協議&#xff0c;用于通過互聯網從一個電子郵件帳戶向另一個電子郵件帳戶發送電子郵件。它是TCP/IP協議應用層的一部分。作為一種電子郵件協議&#xff0c;它建立了不同電子郵件客戶端和帳戶之間輕松信息交換的規則。這樣&#xff0c;簡單郵件傳輸協議就可以…

求最小的起始正整數

題目描述 給你一個整數數組 nums 。你可以選定任意的 正數 startValue 作為初始值。 你需要從左到右遍歷 nums 數組&#xff0c;并將 startValue 依次累加上 nums 數組中的值。 請你在確保累加和始終大于等于 1 的前提下&#xff0c;選出一個最小的 正數 作為 startValue 。…

【Rust 日報】2023-11-23 - egui 0.24 發布

項目 - egui 0.24 發布 egui 是一個易于使用的 Rust GUI 庫&#xff0c;支持在本地環境和瀏覽器中運行。 egui 0.24 的重要新特性是多視窗功能。在支持的后端上&#xff08;如eframe&#xff09;&#xff0c;用戶可以利用全新的 viewport API 同時生成多個本機窗口。 此外&…

Git 的基本概念和使用方式。

Git 是一個開源的分布式版本控制系統&#xff0c;它可以記錄代碼的修改歷史&#xff0c;跟蹤文件的版本變化&#xff0c;并支持多人協同開發。Git 的基本概念包括&#xff1a; 1. 倉庫&#xff08;Repository&#xff09;&#xff1a;存放代碼和版本歷史記錄的地方。 2. 分支…

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…

告別算法暗處:備案帶來的光明未來

在當今數字化時代&#xff0c;算法已經成為了企業發展和創新的關鍵推動力。然而&#xff0c;伴隨著算法的廣泛應用&#xff0c;數據隱私、知識產權和法規合規等問題也引發了越來越多的關切。為了解決這些問題&#xff0c;越來越多的公司開始意識到算法備案的重要性。本文將深入…

點云從入門到精通技術詳解100篇-基于深度學習的稀疏點云障礙物檢測(續)

目錄 3.1 連續幀點云空間特征融合 3.1.1 點云預處理 3.1.2 地面分割 3.1.3 自適應點云聚類

播放器開發(三):FFmpeg與SDL環境配置

學習課題&#xff1a;逐步構建開發播放器【QT5 FFmpeg6 SDL2】 環境配置 我這邊的是使用macOS&#xff1b;IDE用的是CLion&#xff1b;CMake構建&#xff0c;除了創建項目步驟、CMakeLists文件有區別之外的代碼層面不會有太大區別。 配置上只添加一下CMakeLists中FFmpeg和SD…

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: [[ //表頭{…

[ubuntu]ubuntu上如何徹底卸載C++的opencv而不影響下次安裝使用

問題場景&#xff1a;我在ubuntu上安裝編譯了opencv3.4.4之后我又想安裝opencv4.5.0結果裝上后&#xff0c;opencv庫在系統目錄很混亂導致出現cmake項目出現很多錯誤。因此又想卸載掉opencv3.4.4重新安裝opencv4.5.0進去。但是如何卸載呢&#xff1f;我們知道opencv在系統里面有…

Go事件管理器:簡單實現

關注公眾號【愛發白日夢的后端】分享技術干貨、讀書筆記、開源項目、實戰經驗、高效開發工具等&#xff0c;您的關注將是我的更新動力&#xff01; 在編程中&#xff0c;事件管理器是一種常見的工具&#xff0c;用于通過通知來觸發操作。在Go語言中&#xff0c;我們可以通過創建…

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…

C++ 多線程鎖

目錄 1. mutex2. lock_guard3. unique_lock 是 lock_guard 的升級加強版4. condition_variable5. 調用 #include “thread” #include “mutex” #include “iostream” //! std::thread //! jion 阻塞式&#xff0c; .join()后面的代碼等待線程結束 //! detach 非阻塞式&#…

一、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版本&…