From c86c7983f3dcdb4960b9934def90dca3072d02f9 Mon Sep 17 00:00:00 2001
From: wangxia <779219182@qq.com>
Date: Thu, 21 Apr 2022 17:10:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=B6=E9=97=B4=E9=80=89=E6=8B=A9=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FirstJob/components/timepicker.vue | 220 ++++++++++++++--------
 src/utils/request.js                              |   4 +-
 2 files changed, 146 insertions(+), 78 deletions(-)

diff --git a/src/components/FirstJob/components/timepicker.vue b/src/components/FirstJob/components/timepicker.vue
index 6fd1d0b..51ab68f 100644
--- a/src/components/FirstJob/components/timepicker.vue
+++ b/src/components/FirstJob/components/timepicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: inline-block">
+  <div>
     <!-- <span @click="showPicker">{{ getLangText(label.datetimePicker) }}</span> -->
     <div class="date-picker-bg" v-show="isShow" @click="closePicker"></div>
     <div class="date-picker" v-show="isShow">
@@ -14,8 +14,8 @@
       </div>
       <div class="picker-content1 picker-content">
         <table>
-          <thead>
-            <tr>
+          <thead style="borderradius: 4px">
+            <tr style="overflow: hidden">
               <th v-for="(item, idx) in weekList" :key="'week' + idx">
                 {{ getLangText(item) }}
               </th>
@@ -32,13 +32,21 @@
                     ? ''
                     : 'gray',
                   selectDate == monthList[idx - 1][m - 1] ? 'active' : '',
-                  new Date(monthList[idx - 1][m - 1]).getTime() < currentDate ||
-                  getabandonDate(new Date(monthList[idx - 1][m - 1]))
+                  (new Date(monthList[idx - 1][m - 1]).getTime() <
+                    currentDate ||
+                    getabandonDate(new Date(monthList[idx - 1][m - 1]))) &&
+                  isInterview
                     ? 'bggray'
                     : '',
                 ]"
                 @click="onSelectDate(monthList[idx - 1][m - 1])"
               >
+                <!-- (new Date(monthList[idx - 1][m - 1]).getTime() <
+										currentDate ||
+										getabandonDate(new Date(monthList[idx - 1][m - 1]))) &&
+									isInterview
+										? 'bggray'
+										: '', 控制面试时间的可选择日期范围-->
                 <div>{{ new Date(monthList[idx - 1][m - 1]).getDate() }}</div>
               </td>
             </tr>
@@ -51,7 +59,7 @@
             @click="onSelectHour(n, index)"
             :class="[index == clicktime ? 'active' : '']"
           >
-            {{ n }}:<span v-if="index % 2 === 0">00</span><span v-else>30</span>
+            {{ n }}:<span>{{ index % 2 === 0 ? "00" : "30" }}</span>
           </li>
         </ul>
         <!-- <ul class="minutes-list">
@@ -114,6 +122,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    isInterview: {
+      type: Boolean,
+      default: true,
+    },
   },
   data: () => ({
     label: {
@@ -145,18 +157,15 @@ export default {
     startDay: 0,
     endDay: 0,
     weekNum: 0,
-    selectDate: new Date(new Date().format("yyyy-MM-dd 00:00")).getTime(),
+    selectDate: "",
     monthList: [],
-    selectHour:
-      new Date().getHours() > 8 && new Date().getHours() < 18
-        ? new Date().getHours()
-        : "8",
-    selectMinute:
-      new Date().getMinutes() >= 0 && new Date().getMinutes() < 30 ? "0" : "30",
+    selectHour: "",
+    selectMinute: "",
+    // new Date().getMinutes() >= 0 && new Date().getMinutes() < 30 ? "0" : "30",
   }),
   created() {
-    console.log(this.selectDate);
-    console.log(this.selectMinute);
+    // console.log(this.selectDate);
+    // console.log(this.selectMinute);
     // console.log(this.testDate);
   },
   watch: {
@@ -167,20 +176,44 @@ export default {
       this.getMonthDay();
     },
     isShow() {
+      const that = this;
       if (this.isShow) {
         // console.log(this.selectHour);
-        let ind =
-          (this.selectHour - 8) * 2 + (this.selectMinute === "0" ? 0 : 1);
-        this.onSelectHour(this.selectHour, ind);
-        this.$emit(
-          "update:datetime",
-          new Date(
-            this.selectDate +
-              this.selectHour * 3600000 +
-              this.selectMinute * 60000
-          ).format("yyyy-MM-dd hh:mm")
-        );
+
+        this.$nextTick(() => {
+          this.selectDate = new Date(
+            new Date(this.datetime || new Date()).format("yyyy-MM-dd 00:00")
+          ).getTime();
+          this.selectMinute =
+            new Date(this.datetime || new Date()).getMinutes() < 30
+              ? "0"
+              : "30";
+          console.log(this.selectMinute);
+          this.selectHour =
+            new Date(this.datetime || new Date()).getHours() > 8 &&
+            new Date(this.datetime || new Date()).getHours() < 19
+              ? new Date(this.datetime || new Date()).getHours()
+              : "8";
+          let ind =
+            (this.selectHour - 8) * 2 + (this.selectMinute === "0" ? 0 : 1);
+          that.$emit(
+            "update:datetime",
+            new Date(
+              that.selectDate +
+                that.selectHour * 3600000 +
+                that.selectMinute * 60000
+            ).format("yyyy-MM-dd hh:mm")
+          );
+          console.log(ind);
+          this.onSelectHour(this.selectHour, ind);
+        });
       }
+      //  else {
+      //    this.$emit(
+      //   "update:datetime",
+      //   new Date(this.selectDate + this.selectHour * 3600000).format("yyyy-MM-dd hh:00")
+      // );
+      // }
     },
   },
   methods: {
@@ -226,7 +259,7 @@ export default {
     showPicker() {
       this.$emit("update:is-show", true);
 
-      var time = new Date(this.datetime).getTime();
+      var time = new Date(this.datetime || new Date()).getTime();
       this.year = new Date(time).getFullYear();
       this.month = new Date(time).getMonth() + 1;
       this.day = new Date(time).getDate();
@@ -237,11 +270,11 @@ export default {
     },
     onConfirmDate(time) {
       this.onSelectDate(time);
-      this.confirmPicker();
+      // this.confirmPicker();
     },
     onConfirmHour(n) {
       this.onSelectHour(n);
-      this.confirmPicker();
+      // this.confirmPicker();
     },
     closePicker() {
       this.$emit("update:is-show", false);
@@ -260,24 +293,24 @@ export default {
       //     : "30";
       this.$emit("update:is-show", false);
     },
-    confirmPicker() {
-      // console.log(this.selectMinute);
-      // this.$emit(
-      //   "update:datetime",
-      //   new Date(
-      //     this.selectDate +
-      //       this.selectHour * 3600000 +
-      //       this.selectMinute * 60000
-      //   ).format("yyyy-MM-dd hh:mm")
-      // );
-      // this.$emit(
-      //   "pickerresult",
-      //   new Date(this.selectDate + this.selectHour * 3600000).format(
-      //     "yyyy-MM-dd hh:00"
-      //   )
-      // );
-      this.closePicker();
-    },
+    // confirmPicker() {
+    // console.log(this.selectMinute);
+    // this.$emit(
+    //   "update:datetime",
+    //   new Date(
+    //     this.selectDate +
+    //       this.selectHour * 3600000 +
+    //       this.selectMinute * 60000
+    //   ).format("yyyy-MM-dd hh:mm")
+    // );
+    // this.$emit(
+    //   "pickerresult",
+    //   new Date(this.selectDate + this.selectHour * 3600000).format(
+    //     "yyyy-MM-dd hh:00"
+    //   )
+    // );
+    // this.closePicker();
+    // },
     getMonthDay() {
       var monthFirst = new Date(this.year + "-" + this.month + "-01 00:00");
       var w = monthFirst.getDay();
@@ -324,6 +357,8 @@ export default {
       );
     },
     closebox() {
+      console.log(this.selectDate);
+
       this.$emit("update:is-show", false);
     },
     // onSelectMinute(n) {
@@ -340,25 +375,37 @@ export default {
     //   );
     // },
     onSelectDate(time) {
-      console.log(time);
-      if (time < this.currentDate || this.getabandonDate(time)) {
-        return;
+      // console.log(time);
+      if (this.isInterview) {
+        //控制面试时间的可选择日期范围
+        if (time < this.currentDate || this.getabandonDate(time)) {
+          return;
+        } else {
+          this.selectDate = time;
+        }
       } else {
         this.selectDate = time;
       }
+
       this.year = new Date(time).getFullYear();
       this.month = new Date(time).getMonth() + 1;
       this.day = new Date(time).getDate();
+      console.log(this.selectMinute);
       // console.log(this.year, "--------", this.month, "--------", this.day);
       this.$emit(
         "update:datetime",
-        new Date(time + this.selectHour * 3600000).format("yyyy-MM-dd hh:00")
+        new Date(
+          this.selectDate +
+            this.selectHour * 3600000 +
+            +this.selectMinute * 60000
+        ).format("yyyy-MM-dd hh:mm")
       );
       // let data12 = this.getabandonDate(new Date("2022-03-25").getTime());
       // console.dir(this.getabandonDate);
       // console.log(data12);
     },
     getabandonDate(date) {
+      // 禁用日期的回调
       let day = new Date(date).getMonth() + "" + new Date(date).getDate();
       let value = this.abandonDate.some((item) => {
         let day1 = new Date(item).getMonth() + "" + new Date(item).getDate();
@@ -386,7 +433,7 @@ export default {
   background-color: white;
   position: absolute;
   width: 430px;
-  top: 28px;
+  top: 37px;
   left: 0;
   display: block;
   padding: 4px;
@@ -435,7 +482,9 @@ export default {
     height: 200px;
     table {
       width: 100%;
-      border-collapse: collapse;
+      // padding: 4px !important;
+      margin: 4px 0;
+      border-collapse: separate;
       border-spacing: 0;
       font-size: 12px;
       line-height: 20px !important;
@@ -446,13 +495,19 @@ export default {
         padding-bottom: 5px;
         tr {
           margin-bottom: 5px;
-          background-color: #fff4e3;
+          background-color: #ff6a001a;
           color: rgba(77, 87, 94);
           th {
             text-align: center;
             font-weight: 600;
             font-size: 14px;
             line-height: 26px;
+            &:first-child {
+              border-radius: 4px 0 0 4px;
+            }
+            &:last-child {
+              border-radius: 0 4px 4px 0;
+            }
           }
         }
       }
@@ -467,13 +522,18 @@ export default {
             padding: 0 4px;
             font-size: 14px;
             cursor: pointer;
-            // border-radius: 4px;
+            &:first-child {
+              border-radius: 4px 0 0 4px;
+            }
+            &:last-child {
+              border-radius: 0 4px 4px 0;
+            }
             div {
               border: 1px solid transparent;
               position: relative;
               width: 30px;
-              height: 25px;
-              line-height: 23px;
+              height: 26px;
+              line-height: 24px;
               border-radius: 4px;
               text-align: center;
               margin: 0 2px;
@@ -487,7 +547,9 @@ export default {
           }
           td.bggray {
             position: relative;
+            color: #ccc;
             cursor: default;
+
             &::after {
               content: "";
               position: absolute;
@@ -501,6 +563,13 @@ export default {
               z-index: 9;
             }
           }
+
+          .bggray:first-child::after {
+            border-radius: 4px 0 0 4px;
+          }
+          .bggray:last-of-type::after {
+            border-radius: 0 4px 4px 0;
+          }
           td:not(.bggray):hover {
             div {
               border: 1px solid #ff6a00;
@@ -525,12 +594,16 @@ export default {
     flex-direction: row;
     table {
       width: calc(100% - 40px);
-      border-right: 1px solid #eee;
+      margin-right: 4px;
+      // border-right: 1px solid #eee;
     }
     .hour-list {
-      display: inline-block;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      border-left: 1px solid #eee;
       list-style: none;
-      padding: 0 2px 0 5px;
+      padding: 5px 2px 0 4px;
       margin: 0;
       height: 100%;
       overflow-x: hidden;
@@ -557,17 +630,24 @@ export default {
       li {
         padding: 0;
         margin: 0;
+        margin-bottom: 6px;
         color: #4d575ecc;
+        background-color: #ff6a001a;
+        width: 48%;
+        border-radius: 4px;
         /* font-weight: 600; */
         display: flex;
-        height: 35px !important;
-        line-height: 25px;
-        font-size: 18px;
+        height: 26px !important;
+        line-height: 26px;
+        font-size: 14px;
         justify-content: center;
         align-items: center;
         padding: 0 4px;
         height: 26px;
         cursor: pointer;
+        span:last-child {
+          margin-left: 0 !important;
+        }
       }
       // li:not(:last-child) {
       // border-bottom: solid 1px gainsboro;
@@ -580,18 +660,6 @@ export default {
     .minutes-list {
       width: 60px;
     }
-    .hour-list::-webkit-scrollbar {
-      background: transparent;
-      height: 8px;
-      width: 8px;
-      border: none;
-    }
-
-    .hour-list::-webkit-scrollbar-thumb {
-      background: lightgray;
-      border-radius: 5px;
-    }
-    //设置滚动条 end
   }
 
   .picker-footer {
@@ -627,7 +695,7 @@ export default {
         &:active,
         &:hover {
           border-color: #ff6a00;
-          background-color: #ff832a;
+          background-color: #ff6a00;
         }
       }
     }
diff --git a/src/utils/request.js b/src/utils/request.js
index f663313..0aadba0 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -13,8 +13,8 @@ console.log(baseURL);
 axios.defaults.withCredentials = true; //添加这行代码
 // console.log(axios);
 const service = axios.create({
-  baseURL: "/api_prod", // url = base url + request url
-  // baseURL: baseURL, //  baseURL: "/api", // url = base url + request url
+  // baseURL: "/api_prod", // url = base url + request url
+  baseURL: baseURL, //  baseURL: "/api", // url = base url + request url
   withCredentials: true, // send cookies when cross-domain requests
   timeout: 10000, // request timeout
   crossDomain: true,