贷款-预约现场办理时间选择器优化

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

@@ -7,7 +7,7 @@
         <img src="./image/date@2x.png">
         <p>{{ this.bespeakDay && this.bespeakHour ? (this.bespeakDay + ' ' + this.bespeakHour) : '请选择时间' }}</p>
       </li>
-      <li @click="funShowVantPicker">
+      <li @click="showPicker1 = true">
         <img src="./image/position@2x.png">
         <p>{{ storeName ? storeName : '请选择办理网点'}}</p>
       </li>
@@ -17,13 +17,21 @@
       v-model="showPicker"
       :show-confirm="false"
       @confirm="onConfirm"/>
-    <van-popup v-model="showStorePicker" round position="bottom">
+    <van-popup v-model="showPicker0" round position="bottom">
       <van-picker
-        :title="vantPickerContent ? '请选择办理网点' : '办理时间选择'"
+        title="请选择办理时间"
         show-toolbar
-        :columns="vantPickerContent ? columnsOfStore : columnsOfHour"
+        :columns="columnsOfHour"
+        @confirm="onHourPickerConfirm"
+        @cancel="showPicker0 = false"/>
+    </van-popup>
+    <van-popup v-model="showPicker1" round position="bottom">
+      <van-picker
+        title="请选择办理网点"
+        show-toolbar
+        :columns="columnsOfStore"
         @confirm="onStorePickerConfirm"
-        @cancel="showStorePicker = false"/>
+        @cancel="showPicker1 = false"/>
     </van-popup>
   </div>
 </template>
@@ -55,10 +63,8 @@
         bespeakHour: '',
         showPicker: false,
         currentDate: new Date(),
-        vantPickerContent: 0, // 0-时间选择 1-网点选择
         storeName: '',
-        showStorePicker: false,
-        columnsOfStore: [],
+        showPicker0: false,
         columnsOfHour: [
           {
             values: HOURS(),
@@ -68,7 +74,9 @@
             values: MINUTE(),
             defaultIndex: 0
           }
-        ]
+        ],
+        showPicker1: false,
+        columnsOfStore: []
       }
     },
     created () {
@@ -89,50 +97,51 @@
         const date = new Date(value)
         this.showPicker = false
         this.$nextTick(() => {
-          this.vantPickerContent = 0
-          this.showStorePicker = true
+          this.showPicker0 = true
         })
         this.tempBespeakDay = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
       },
-      funShowVantPicker () {
-        this.vantPickerContent = 1
-        this.$nextTick(() => {
-          this.showStorePicker = true
-        })
-      },
-      onStorePickerConfirm (value) {
-        if (this.vantPickerContent) {
-          this.storeName = value
-          this.showStorePicker = false
-          return
-        }
+      onHourPickerConfirm (value) {
+        const vm = this
         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 = ''
+          Toast({
+            message: '工作时间为周一到周五9:00-17:00',
+            onClose: function () {
+              vm.showPicker0 = false
+              vm.$nextTick(() => {
+                vm.showPicker = true
+                vm.bespeakDay = ''
+                vm.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 = ''
+          Toast({
+            message: '需要提前1小时预约哦',
+            onClose: function () {
+              vm.showPicker0 = false
+              vm.$nextTick(() => {
+                vm.showPicker = true
+                vm.bespeakDay = ''
+                vm.bespeakHour = ''
+              })
+            }
           })
           return
         }
-        this.showStorePicker = false
+        this.showPicker0 = false
         this.bespeakDay = this.tempBespeakDay
         this.bespeakHour = value[0] + ':' + value[1]
       },
+      onStorePickerConfirm (value) {
+        this.storeName = value
+        this.showPicker1 = false
+      },
       funGetBankList () {
         getBankList(this.id).then(res => {
           if (res.status) {