时间选择器

index.html

@@ -50,11 +50,11 @@
             <div data-tname="介入治疗" data-pid="1402932548627206144" data-uid="1323567842540523520" data-rid="rid333" data-tid="tid444" data-did="did555" data-pstart="1627560659000" data-rstart="1627564259000" style="height:50px;width:100%">
               <!-- 到场插件 -->
               <div data-root="p1419896428830138368" class="flex flex-row items-center" style="height:100%;width:100%;">
-                <div class="flex-1 title"></div>
+                <div class="flex-1 title" onclick="p1419896428830138368.jumpDetails(this)"></div>
                 <div class="flex flex-nowrap startBtn mr-2">
-                  <button class="bg-blue-500 text-xs rounded-full py-1 px-5 text-white" onclick="p1419896428830138368.show(this)">开始</button>
+                  <button class="bg-blue-500 text-xs rounded-full py-1 px-5 text-white" onclick="p1419896428830138368.show()">开始</button>
                 </div>
-                <div class="flex flex-nowrap statusBtn mr-2 font-bold" style="display:none" onclick="p1419896428830138368.jumpDetails(this)">
+                <div class="flex flex-nowrap statusBtn mr-2 font-bold" style="display:none" onclick="p1419896428830138368.show()">
                   <span class="mr-3 startTime"></span>
                   <span class="text-red-500 disparity"></span>
                 </div>
@@ -62,10 +62,10 @@
                   <img style="height:16px" src="https://www.tall.wiki/staticrec/photos/right.png">
                 </div>
                 <div class="time-box w-screen h-screen fixed z-10" style="background: rgba(0,0,0,0.65);top:0;left:0;display:none">
-                  <div class="flex flex-col absolute w-full" style="background:#fff;bottom: 0;height:300px">
-                    <div class="flex justify-between p-2 border-gray-200 border-b-2" style="height:44px;">
+                  <div class="flex flex-col absolute w-full" style="background:#fff;bottom: 0;height:312px;border-radius:8px 8px 0 0">
+                    <div class="flex justify-between p-2 border-gray-200 border-b-2" style="height:56px;line-height:38px">
                       <div class="text-gray-500" onclick="p1419896428830138368.cancelTime()">取消</div>
-                      <div>分诊时间</div>
+                      <div>时间</div>
                       <div class="text-blue-500" onclick="p1419896428830138368.changeTime()">确定</div>
                     </div>
                     <div class="flex flex-1 items-center overflow-hidden">
@@ -132,7 +132,6 @@
                   this.planStart = domBox.getAttribute('data-pstart')
                   this.realStart = domBox.getAttribute('data-rstart')
                   this.chooseTimeValue = +this.realStart
-                  this.setTimeData()
 
                   // 获取父元素携带的参数
                   var userId = domBox.getAttribute("data-uid");
@@ -162,6 +161,7 @@
                 async show(){
                   var timeBox = this.dom.querySelector('.time-box');
                   timeBox.style.display = 'block'
+                  this.setTimeData()
                 },
 
                 /**
@@ -321,12 +321,26 @@
                   var yearDom = this.dom.querySelector('.year-box');
                   var monthDom = this.dom.querySelector('.month-box');
                   var dateDom = this.dom.querySelector('.day-box');
+                  var nowYear = new Date().getFullYear();
+                  var nowMonth = new Date().getMonth();
+                  var nowDay = new Date().getDate()-1;
+                  var nowHour = new Date().getHours();
+                  var nowMin = new Date().getMinutes();
+                  var yearTop = 0;
+                  var monthTop = 0;
+                  var dayTop = 0;
+                  var hourTop = 0;
+                  var minTop = 0;
+                  console.log(nowYear,nowMonth,nowDay,nowHour,nowMin)
                   /* 生成小时数组 */
                   for(let i=0;i<24;i++) {
                     var div = document.createElement('div');
                     div.style.height = '26px';
                     div.innerHTML = i;
                     hourDom.appendChild(div);
+                    if(nowHour === i) {
+                      hourTop = i*26
+                    }
                   }
                   /* 生成分钟数组 */
                   for(let i=0;i<60;i++) {
@@ -334,8 +348,10 @@
                     div.style.height = '26px';
                     div.innerHTML = i;
                     minDom.appendChild(div);
+                    if(nowMin === i) {
+                      minTop = i*26
+                    }
                   }
-
                   /* 生成年数组 */
                   var my = new Date();
                   var endYear = my.getFullYear();// 获取当前年份
@@ -351,6 +367,9 @@
                     div.style.height = '26px';
                     div.innerHTML = i;
                     monthDom.appendChild(div);
+                    if(nowMonth === i) {
+                      monthTop = i*26
+                    }
                   }
                   /* 生成日数组 */
                   for (var i = 1; i < 32; i++) {
@@ -358,8 +377,16 @@
                     div.style.height = '26px';
                     div.innerHTML = i;
                     dateDom.appendChild(div);
+                    if(nowDay === i) {
+                      dayTop = i*26
+                    }
                   }
+                  hourDom.scrollTop = hourTop
+                  minDom.scrollTop = minTop
+                  monthDom.scrollTop = monthTop
+                  dateDom.scrollTop = dayTop
                 }
+
               }
               p1419896428830138368.init()
             </script>