三层破弹窗

src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue

@@ -198,26 +198,20 @@
         <div class="customPop">
           <div class="startTime">
             <div>开始时间：</div>
-            <div>
-              <u-input
-                v-model="start"
-                placeholder="请输入格式为2022-00-00的开始时间"
-                type="text"
-                clearable
-              />
+            <div style="display: flex; justify-content: space-between;">
+              <u-input v-model="startTime" placeholder="请选择开始时间" disabled @click="showStart = true"/>
+              <u-icon name="arrow-right"></u-icon>
             </div>
           </div>
           <div class="endTime">
             <div>结束时间：</div>
-            <div>
-              <u-input
-                v-model="end"
-                placeholder="请输入格式为2022-00-00的结束时间"
-                type="text"
-                clearable
-              />
+            <div style="display: flex; justify-content: space-between;">
+              <u-input v-model="endTime" placeholder="请选择结束时间" disabled @click="showEnd = true" />
+              <u-icon name="arrow-right"></u-icon>
             </div>
           </div>
+          <u-picker mode="time" v-model="showStart" @confirm="confirmStart"></u-picker>
+          <u-picker mode="time" v-model="showEnd" @confirm="confirmEnd"></u-picker>
           <div class="timeBtn" @click="handleTime">确定</div>
         </div>
       </u-popup>
@@ -253,6 +247,8 @@ export default {
       departId: "",
       startTime: "",
       endTime: "",
+      showStart: false,
+      showEnd: false,
       resX: [],
       resY: [],
       res2Y: [],
@@ -286,6 +282,8 @@ export default {
       if (index == 3) {
         this.timeSelect = index;
         this.customShow = true;
+        this.showStart = false;
+        this.showEnd = false;
       } else {
         this.timeSelect = index;
       }
@@ -302,17 +300,24 @@ export default {
       this.departId = "";
     },
 
-    selectConfirm() {
-      if (this.timeSelect == 3) {
-        this.timeType = this.timeSelect;
-        this.startTime = this.start;
-        this.endTime = this.end;
-        this.getBrokenDate();
-      } else {
-        this.timeType = this.timeSelect;
-        this.getBrokenDate();
-      }
-      this.filterShow = false;
+    // selectConfirm() {
+    //   if (this.timeSelect == 3) {
+    //     this.timeType = this.timeSelect;
+    //     this.startTime = this.start;
+    //     this.endTime = this.end;
+    //     this.getBrokenDate();
+    //   } else {
+    //     this.timeType = this.timeSelect;
+    //     this.getBrokenDate();
+    //   }
+    //   this.filterShow = false;
+    // },
+
+    confirmStart(val) {
+      this.startTime = val.year + '-' + val.month + '-' + val.day
+    },
+    confirmEnd(val) {
+      this.endTime = val.year + '-' + val.month + '-' + val.day
     },
 
     handleTime() {
@@ -826,6 +831,7 @@ export default {
   .customPop {
     padding: 80px 32px 20px 32px;
     box-sizing: border-box;
+    height: 600px;
 
     .startTime,
     .endTime {
@@ -841,6 +847,7 @@ export default {
       text-align: center;
       border-radius: 16px;
       color: #fff;
+      margin-top: 164px;
     }
   }
 }

src/project/saas/AppPropagandaStatistics/calendarInfo.vue

@@ -80,7 +80,6 @@ export default {
               } 
             }
           })
-          console.log(this.selected);
         }
       });
     },