贷款-预约时间选择优化

htmldev/loan/src/views/loan/bespeak/index.vue

@@ -5,30 +5,23 @@
     <ul>
       <li @click="showPicker = true">
         <img src="./image/date@2x.png">
-        <p>{{ bespeakTime ? bespeakTime : '请选择时间' }}</p>
+        <p>{{ this.bespeakDay && this.bespeakHour ? (this.bespeakDay + ' ' + this.bespeakHour) : '请选择时间' }}</p>
       </li>
-      <li @click="showStorePicker = true">
+      <li @click="funShowVantPicker">
         <img src="./image/position@2x.png">
         <p>{{ storeName ? storeName : '请选择办理网点'}}</p>
       </li>
     </ul>
     <button class="submit" @click="funSubmit">提交</button>
-    <van-popup v-model="showPicker" round position="bottom">
-      <van-datetime-picker
-        v-model="currentDate"
-        type="datetime"
-        title="年-月-日 小时:分钟"
-        :min-date="minDate"
-        :max-date="maxDate"
-        :filter="filter"
-        @cancel="showPicker = false"
-        @confirm="onConfirm"/>
-    </van-popup>
+    <van-calendar
+      v-model="showPicker"
+      :show-confirm="false"
+      @confirm="onConfirm"/>
     <van-popup v-model="showStorePicker" round position="bottom">
       <van-picker
-        title="请选择办理网点"
+        :title="vantPickerContent ? '请选择办理网点' : '办理时间选择'"
         show-toolbar
-        :columns="columns"
+        :columns="vantPickerContent ? columnsOfStore : columnsOfHour"
         @confirm="onStorePickerConfirm"
         @cancel="showStorePicker = false"/>
     </van-popup>
@@ -36,7 +29,8 @@
 </template>
 
 <script>
-  import { Popup, DatetimePicker, Picker, Toast } from 'vant'
+  import { Popup, Calendar, Picker, Toast } from 'vant'
+  import { platform } from '../../../utils/platform'
   import { postBespeak } from './api'
   import { getBankList } from '../../../api/common'
 
@@ -44,7 +38,7 @@
     name: 'bespeak',
     components: {
       'van-popup': Popup,
-      'van-datetime-picker': DatetimePicker,
+      'van-calendar': Calendar,
       'van-picker': Picker
     },
     props: {
@@ -56,47 +50,93 @@
     },
     data () {
       return {
-        bespeakTime: '',
+        bespeakDay: '',
+        tempBespeakDay: '',
+        bespeakHour: '',
         showPicker: false,
-        minDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
-        maxDate: new Date(new Date().getFullYear() + 3, 12, 31),
         currentDate: new Date(),
+        vantPickerContent: 0, // 0-时间选择 1-网点选择
         storeName: '',
         showStorePicker: false,
-        columns: []
+        columnsOfStore: [],
+        columnsOfHour: [
+          {
+            values: HOURS(),
+            defaultIndex: 0
+          },
+          {
+            values: MINUTE(),
+            defaultIndex: 0
+          }
+        ]
       }
     },
     created () {
       this.funGetBankList()
     },
     async mounted () {
+      const H = this.currentDate.getHours().toString().padStart(2, '0')
+      const M = this.currentDate.getMinutes().toString().padStart(2, '0')
+      const HINDEX = this.columnsOfHour[0].values.indexOf(H)
+      const MINDEX = this.columnsOfHour[1].values.indexOf(M)
+      this.columnsOfHour[0].defaultIndex = HINDEX >= 0 ? HINDEX : 0
+      this.columnsOfHour[1].defaultIndex = MINDEX >= 0 ? MINDEX : 0
       await this.$nextTick()
       this.$refreshTitle('进度查询')
     },
     methods: {
-      filter (type, options) {
-        if (type === 'minute') {
-          return options.filter((option) => option % 10 === 0)
-        }
-        return options
-      },
       onConfirm (value) {
         const date = new Date(value)
-        if (Math.round(date.getTime() / 1000) < Math.round(new Date().getTime() / 1000) + 6600) {
-          Toast('预约时间不能小于2小时')
-          return
-        }
         this.showPicker = false
-        this.bespeakTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours().toString().padStart(2, '0') + ':' + date.getSeconds().toString().padStart(2, '0')
+        this.$nextTick(() => {
+          this.vantPickerContent = 0
+          this.showStorePicker = true
+        })
+        this.tempBespeakDay = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
+      },
+      funShowVantPicker () {
+        this.vantPickerContent = 1
+        this.$nextTick(() => {
+          this.showStorePicker = true
+        })
       },
       onStorePickerConfirm (value) {
-        this.storeName = value
+        if (this.vantPickerContent) {
+          this.storeName = value
+          this.showStorePicker = false
+          return
+        }
+        const bespeakTime = this.tempBespeakDay + ' ' + value[0] + ':' + value[1]
+        const selectTime = platform.ios ? bespeakTime.replace(/-/g, '/') : bespeakTime
+        const date = new Date(selectTime)
+        if (date.getDay() === 0 || date.getDay() === 6 || date.getHours() < 8 || date.getHours() >= 17) {
+          Toast('工作时间为周一到周五9:00-17:00')
+          this.showStorePicker = false
+          this.$nextTick(() => {
+            this.showPicker = true
+            this.bespeakDay = ''
+            this.bespeakHour = ''
+          })
+          return
+        }
+        if (Math.round(date.getTime() / 1000) < Math.round(this.currentDate.getTime() / 1000) + 3600) {
+          Toast('需要提前1小时预约哦')
+          this.showStorePicker = false
+          this.$nextTick(() => {
+            this.showPicker = true
+            this.bespeakDay = ''
+            this.bespeakHour = ''
+          })
+          return
+        }
         this.showStorePicker = false
+        this.bespeakDay = this.tempBespeakDay
+        this.bespeakHour = value[0] + ':' + value[1]
       },
       funGetBankList () {
         getBankList(this.id).then(res => {
           if (res.status) {
-            this.columns = res.data.map(item => item.bankName)
+            this.columnsOfStore = res.data.map(item => item.bankName)
           }
         })
       },
@@ -104,9 +144,9 @@
         const postData = {
           id: this.id,
           bankName: this.storeName,
-          time: this.bespeakTime // 预约时间
+          time: this.bespeakDay + ' ' + this.bespeakHour // 预约时间
         }
-        if (!postData.time) {
+        if (!this.bespeakDay || !this.bespeakHour) {
           Toast('请选择时间')
           return
         }
@@ -126,6 +166,26 @@
       }
     }
   }
+
+  const HOURS = () => {
+    const res = []
+    for (let i = 0; i < 24; i++) {
+      if (res.indexOf(i) < 0) {
+        res.push(i.toString().padStart(2, '0'))
+      }
+    }
+    return res
+  }
+
+  const MINUTE = () => {
+    const res = []
+    for (let i = 0; i < 60; i++) {
+      if (res.indexOf(i) < 0) {
+        res.push(i.toString().padStart(2, '0'))
+      }
+    }
+    return res
+  }
 </script>
 
 <style lang="scss" scoped>