update

java-mall-app-shop-admin/pages/my/storeBusinessStatus/oz-timePicker/oz-timePicker.vue

@@ -3,12 +3,12 @@
   <uni-popup ref="popup" type="bottom" :safe-area="false">
     <view class="custom-picker">
       <view class="custom-picker__header">
-        <view class="cancel" :style="{ color: canceColor }" @tap="onCancel">
-          {{ cancelText }}
+        <view class="cancel" :style="{ color: canceColor }" >
+          <!-- {{ cancelText }} -->
         </view>
         <view class="title">{{ title }}</view>
-        <view class="confirm" :style="{ color: confirmColor }" @tap="onConfirm">
-          {{ confirmText }}
+        <view class="confirm" :style="{ color: confirmColor }" @tap="onCancel">
+          <u-icon name="close"></u-icon>
         </view>
       </view>
       <view class="time-tips">
@@ -66,7 +66,26 @@
       </picker-view>
     </view>
     <view class="bottom-content">
-
+      <view class="bottom-time">
+        <view class="">
+          <text>{{ startTime }}</text>
+          <text style="padding: 0 6rpx;">至</text>
+          <text>{{ endTime }}</text>
+        </view>
+        <view class="">{{ totalTime }}</view>
+      </view>
+      <view class="bottom-btn">
+        <u-button
+          class="btn-time"
+          :hairline="true"
+          :plain="true"
+          shape="circle"
+          @tap="onConfirm"
+        >
+          确认
+        </u-button>
+      </view>
+      
     </view>
   </uni-popup>
 </template>
@@ -153,6 +172,9 @@ export default {
       rangeList: [],
       pickerValue: [0, 0, 0, 0],
       isScoll: false, // 是否正在滚动
+      startTime:"",
+      endTime:"",
+      totalTime:""
     };
   },
   created() {
@@ -276,16 +298,47 @@ export default {
      * @param {Object} e
      */
     bindChange(e) {
-      const newValue = [...e.detail.value];
 
-      // Check if end hour (index 2) is being set to 24
-      if (newValue[2] === this.rangeList[2]?.length - 1) {
-        // Assuming 24 is the last option
-        newValue[3] = 0; // Set to first (and only) option which is '00'
-        this.pickerValue = newValue;
-        this.generateRangeLists(); // Regenerate ranges to limit minutes
-      } else {
+      const newValue = [...e.detail.value];
+  
+      // 更新 pickerValue
+      this.pickerValue = newValue;
+
+      // 计算 startTime (前两列: 小时和分钟)
+      const startHour = this.rangeList[0][newValue[0]];
+      const startMinute = this.rangeList[1][newValue[1]];
+      const startTime = `${startHour}:${startMinute}`;
+
+      // 计算 endTime (后两列: 小时和分钟)
+      const endHour = this.rangeList[3][newValue[3]];
+      const endMinute = this.rangeList[4][newValue[4]];
+      const endTime = `${endHour}:${endMinute}`;
+
+      // 计算总时长 totalTime
+      const startDate = new Date(2000, 0, 1, parseInt(startHour), parseInt(startMinute));
+      const endDate = new Date(2000, 0, 1, parseInt(endHour), parseInt(endMinute));
+      
+      // 处理跨天情况（如23:00到01:00）
+      if (endDate < startDate) {
+        endDate.setDate(endDate.getDate() + 1);
+      }
+      
+      const diffMs = endDate - startDate;
+      const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+      const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+      
+      const totalTime = `共${diffHours}小时${diffMinutes}分`;
+
+      // 更新到data中以便在模板显示
+      this.startTime = startTime;
+      this.endTime = endTime;
+      this.totalTime = totalTime;
+
+      // 检查是否需要限制分钟选择（如选择24:00时分钟只能是00）
+      if (newValue[3] === this.rangeList[3]?.length - 1) { // 假设24是最后一小时
+        newValue[4] = 0; // 设置为00分钟
         this.pickerValue = newValue;
+        this.generateRangeLists();
       }
     },
   },
@@ -293,6 +346,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "@/styles/variables.scss";
 .custom-picker {
   width: 100%;
   height: 620rpx;
@@ -383,4 +437,32 @@ export default {
   height: 60%;
 }
 
+.bottom-content{
+  background: #fff;
+  box-shadow: 0 0 4rpx 4rpx rgba(0, 0, 0, 0.1);
+
+  .bottom-time{
+    display: flex;
+    justify-content: space-between;
+    padding: 20rpx 28rpx;
+    font-size: 28rpx;
+    font-weight: bold;
+  }
+
+  .bottom-btn{
+    padding: 28rpx 40rpx 80rpx;
+
+    .btn-time{
+      background: $base-color;
+      color: #fff;
+
+      &::after {
+        border: none;
+      }
+    }
+  }
+  
+
+}
+
 </style>