修改时间

mallApp/src/pages/order/components/app-delivery.vue

@@ -103,6 +103,70 @@
 
       <!-- 订花人 -->
       <div class="module-com">
+        <!-- 配送时间选择弹框 -->
+        <uni-popup ref="timePopup" type="bottom" background-color="#fff">
+          <view class="time-picker-popup">
+            <view class="popup-header">
+              <text class="popup-title">选择配送时间</text>
+              <text class="popup-close" @click="closeTimePopup">×</text>
+            </view>
+            
+            <view class="time-sections">
+              <!-- 小时选择 -->
+              <view class="time-section">
+                <view class="section-title">小时</view>
+                <view class="hours-wrapper">
+                  <scroll-view 
+                    scroll-y="true" 
+                    class="hours-scroll"
+                    enhanced="true"
+                    show-scrollbar="true"
+                  >
+                    <view class="hours-buttons">
+                      <button 
+                        v-for="(hour, index) in timeOptions[0]" 
+                        :key="index"
+                        class="time-button" 
+                        :class="{ active: selectedHour == hour }"
+                        @click="selectedHour = hour"
+                      >{{ hour }}</button>
+                    </view>
+                  </scroll-view>
+                </view>
+              </view>
+              
+              <!-- 分钟选择 -->
+              <view class="time-section">
+                <view class="section-title">分钟</view>
+                <view class="minutes-wrapper">
+                  <scroll-view 
+                    scroll-y="true" 
+                    class="minutes-scroll"
+                    enhanced="true"
+                    show-scrollbar="true"
+                  >
+                    <view class="minutes-buttons">
+                      <button 
+                        v-for="(minute, index) in timeOptions[1]" 
+                        :key="index"
+                        class="time-button" 
+                        :class="{ active: selectedMinute == minute }"
+                        @click="selectedMinute = minute"
+                      >{{ minute }}</button>
+                    </view>
+                  </scroll-view>
+                </view>
+              </view>
+            </view>
+            
+            <!-- 操作按钮 -->
+            <view class="popup-footer">
+              <button class="btn-cancel" @click="closeTimePopup">取消</button>
+              <button class="btn-confirm" @click="confirmTime">确认</button>
+            </view>
+          </view>
+        </uni-popup>
+
         <tui-list-cell class="line-cell" :hover="false" :arrow="true">
           <div class="tui-title">配送日期</div>
           <picker mode="date" :value="form.reachDate" @change="selTimeFn" class="tui-input">
@@ -111,11 +175,9 @@
           </picker>
         </tui-list-cell>
         
-        <tui-list-cell class="line-cell" :hover="false" :arrow="false">
+        <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openTimePopup">
           <div class="tui-title">配送时间</div>
-            <picker mode="multiSelector" :value="form.reachPeriod" :range="timeOptions" @change="bindTimeChange">
-              <view class="uni-input" style="width:450upx;">{{form.reachPeriod}}<text style="margin-left:10upx;">前</text></view>
-            </picker>
+          <view class="uni-input" style="width:450upx;font-size:30upx;">{{form.reachPeriod}}<text style="margin-left:10upx;"></text></view>
         </tui-list-cell>        
       </div>
 
@@ -210,6 +272,8 @@ export default {
 			['00', '01', '02','03','04','05','06','07','08','09','10','11','12','13', '14','15','16','17','18','19','20','21','22','23'],
 			['00', '05', '10','15','20','25','30','35','40','45','50','55']
 		  ],
+      selectedHour: '12', // 选中的小时
+      selectedMinute: '00', // 选中的分钟
       deliveryQuotes: [], // 跑腿平台报价列表
       selectedDeliveryIndex: -1, // 选中的报价索引
       deliveryQuotesLoading: false, // 报价加载状态
@@ -253,6 +317,23 @@ export default {
     }
   },
   methods: {
+    // 打开时间选择弹框
+    openTimePopup() {
+      // 初始化为当前选中的时间
+      const [hour, minute] = this.form.reachPeriod.split(':')
+      this.selectedHour = hour
+      this.selectedMinute = minute
+      this.$refs.timePopup.open()
+    },
+    // 关闭时间选择弹框
+    closeTimePopup() {
+      this.$refs.timePopup.close()
+    },
+    // 确认时间选择
+    confirmTime() {
+      this.form.reachPeriod = `${this.selectedHour}:${this.selectedMinute}`
+      this.closeTimePopup()
+    },
     bindTimeChange(event){
       let val = event.detail.value
       let before = Number(val[0])
@@ -414,6 +495,162 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* 时间选择弹框样式 */
+.time-picker-popup {
+  width: 100%;
+  background: #fff;
+  border-radius: 20upx 20upx 0 0;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  padding: 0;
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0;
+  padding: 30upx 20upx 20upx 20upx;
+  border-bottom: 2upx solid #f0f2f6;
+  flex-shrink: 0;
+}
+
+.popup-title {
+  font-size: 36upx;
+  color: #333;
+  font-weight: bold;
+}
+
+.popup-close {
+  font-size: 48upx;
+  color: #999;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.time-sections {
+  display: flex;
+  gap: 30upx;
+  margin-bottom: 0;
+  justify-content: space-between;
+  flex: 1;
+  padding: 30upx 20upx 0 20upx;
+  overflow: hidden;
+}
+
+.time-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  
+  .section-title {
+    font-size: 28upx;
+    color: #666;
+    margin-bottom: 15upx;
+    font-weight: 500;
+    text-align: center;
+  }
+}
+
+.hours-wrapper {
+  width: 100%;
+  flex: 1;
+  background: #f8f9fa;
+  border: 2upx solid #e9ecef;
+  border-radius: 8upx;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.minutes-wrapper {
+  width: 100%;
+  flex: 1;
+  background: #f8f9fa;
+  border: 2upx solid #e9ecef;
+  border-radius: 8upx;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.hours-scroll,
+.minutes-scroll {
+  width: 100%;
+  height: 100%;
+  padding: 10upx;
+  box-sizing: border-box;
+  min-height: 200upx;
+}
+
+.hours-buttons,
+.minutes-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10upx;
+}
+
+.time-button {
+  width: calc(50% - 5upx);
+  height: 80upx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff;
+  border: 2upx solid #e9ecef;
+  border-radius: 8upx;
+  font-size: 30upx;
+  color: #333;
+  margin-bottom: 10upx;
+  box-sizing: border-box;
+  
+  &.active {
+    background: #e8f5ff;
+    border-color: #3385FF;
+    color: #3385FF;
+    font-weight: 500;
+  }
+  
+  &:active {
+    background: #e8f5ff;
+  }
+}
+
+.popup-footer {
+  display: flex;
+  gap: 20upx;
+  padding: 20upx;
+  border-top: 2upx solid #f0f2f6;
+  flex-shrink: 0;
+  
+  .btn-cancel,
+  .btn-confirm {
+    flex: 1;
+    height: 80upx;
+    border-radius: 8upx;
+    font-size: 30upx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+  }
+  
+  .btn-cancel {
+    background: #f8f9fa;
+    color: #333;
+    border: 2upx solid #e9ecef;
+  }
+  
+  .btn-confirm {
+    background: #3385FF;
+    color: #fff;
+    border: 2upx solid #3385FF;
+  }
+}
+
 .app-delivery-module {
   .module-com {
     margin-bottom: 20upx;