。

src/main.js

@@ -40,7 +40,10 @@ export default {
             'van-search': '/native/vant/search/index',
             'van-empty': '/native/vant/empty/index',
             'van-sticky': '/native/vant/sticky/index',
-            'van-loading': '/native/vant/loading/index'
+            'van-loading': '/native/vant/loading/index',
+            'van-area': '/native/vant/area/index',
+            'van-action-sheet': '/native/vant/action-sheet/index',
+            'van-picker': '/native/vant/picker/index'
         },
         permission: {
             'scope.userLocation': {

src/pages/home.vue

@@ -88,12 +88,28 @@
             @close="showLocationDialog = false"
         >
         </van-dialog>
+
+        <van-action-sheet :show="showAppoint" @close="showAppoint = false">
+            <van-picker id="picker" :columns="appointmentTimeOptions" @change="onAppointTimeChange" value-key="label" />
+        </van-action-sheet>
     </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
-import { getDay } from 'date-fns';
+import {
+    getDay,
+    addDays,
+    format,
+    parse,
+    isBefore,
+    isAfter,
+    set,
+    differenceInMinutes,
+    addMinutes,
+    isSameDay
+} from 'date-fns';
+import { zhCN, da } from 'date-fns/locale';
 export default {
     name: 'home',
     data() {
@@ -110,7 +126,18 @@ export default {
             scenics: [],
             currentScenic: null,
             getScenicFlag: false,
-            status: 'loading'
+            status: 'loading',
+            appointmentTimeOptions: [
+                {
+                    values: [],
+                    className: 'date'
+                },
+                {
+                    values: [],
+                    className: 'time'
+                }
+            ],
+            showAppoint: true
         };
     },
     computed: {
@@ -284,6 +311,58 @@ export default {
                     res.eventChannel.emit('location', this.myLocation);
                 }
             });
+        },
+        onAppointTimeChange(e) {
+            console.log(e);
+            if (e.detail.index === 0) {
+                const date = e.detail.value[0].date;
+                const now = new Date();
+                const noon = set(now, { hours: 12, minutes: 0, seconds: 0 });
+                const day = getDay(date);
+                const openTime = this.currentScenic.openTime.find(i => i.weekDay === day);
+                let start = parse(openTime.startTime, 'HH:mm:ss', date);
+                let end = parse(openTime.endTime, 'HH:mm:ss', date);
+                if (isSameDay(now, date) && isAfter(date, noon)) {
+                    start = noon;
+                }
+                console.log(start, end, differenceInMinutes(start, end));
+                let values = [];
+                for (let i = 0; i < differenceInMinutes(end, start) / 30; i++) {
+                    let time = addMinutes(start, i * 30);
+                    values.push({
+                        time,
+                        label: format(time, 'HH:mm')
+                    });
+                }
+                const picker = this.$mp.page.selectComponent('#picker');
+                console.log(values);
+                picker.setColumnValues(1, values);
+            }
+        }
+    },
+    watch: {
+        currentScenic(scenic) {
+            if (scenic) {
+                const date = new Date();
+                const noon = set(date, { hours: 22, minutes: 0, seconds: 0 });
+
+                const picker = this.$mp.page.selectComponent('#picker');
+
+                const values = [];
+                if (isBefore(date, noon)) {
+                    values.push({
+                        date: date,
+                        label: format(date, 'MM-dd 今天', { locale: zhCN })
+                    });
+                }
+                values.push({
+                    date: addDays(date, 1),
+                    label: format(addDays(date, 1), 'MM-dd eee', { locale: zhCN })
+                });
+                picker.setColumnValues(0, values);
+
+                this.onAppointTimeChange({ detail: { index: 0, value: [values[0]] } });
+            }
         }
     }
 };

src/pages/search.vue

@@ -44,7 +44,19 @@ export default {
             showList: false,
             loading: false,
             eventChannel: null,
-            location: null
+            location: null,
+            areaList: {
+                province_list: {
+                    110000: '北京市',
+                    120000: '天津市'
+                },
+                city_list: {
+                    110100: '北京市',
+                    110200: '县',
+                    120100: '天津市',
+                    120200: '县'
+                }
+            }
         };
     },
     mounted() {