来访时段选择时间区间

pages/appointment/appointment.js

@@ -27,6 +27,8 @@ Page({
     personNames: [],
     personIndex: -1,
     today: '',
+    timeStart: '',
+    timeEnd: '',
     submitting: false
   },
 
@@ -142,8 +144,21 @@ Page({
     this.setData({ 'form.date': e.detail.value })
   },
 
-  onTimeChange(e) {
+  onTimeStartChange(e) {
-    this.setData({ 'form.time': e.detail.value })
+    this.setData({ timeStart: e.detail.value }, this._updateTimeRange)
+  },
+
+  onTimeEndChange(e) {
+    this.setData({ timeEnd: e.detail.value }, this._updateTimeRange)
+  },
+
+  _updateTimeRange() {
+    const { timeStart, timeEnd } = this.data
+    if (timeStart && timeEnd) {
+      this.setData({ 'form.time': timeStart + '-' + timeEnd })
+    } else {
+      this.setData({ 'form.time': '' })
+    }
   },
 
   validateForm() {

pages/appointment/appointment.wxml

@@ -37,14 +37,21 @@
         </view>
       </picker>
     </view>
-    <view class="form-group">
+    <view class="form-group form-group-time">
       <text class="form-label">来访时段<text class="required">*</text></text>
-      <picker class="form-picker-wrap" mode="time" value="{{form.time}}" bindchange="onTimeChange">
+      <view class="time-range">
-        <view class="form-picker">
+        <picker class="time-picker-wrap" mode="time" value="{{timeStart}}" bindchange="onTimeStartChange">
-          <text class="{{form.time ? 'picker-value' : 'picker-placeholder'}}">{{form.time || '请选择时间'}}</text>
+          <view class="time-picker">
-          <text class="picker-arrow">›</text>
+            <text class="{{timeStart ? 'picker-value' : 'picker-placeholder'}}">{{timeStart || '开始时间'}}</text>
-        </view>
+          </view>
-      </picker>
+        </picker>
+        <text class="time-range-sep">至</text>
+        <picker class="time-picker-wrap" mode="time" value="{{timeEnd}}" bindchange="onTimeEndChange">
+          <view class="time-picker">
+            <text class="{{timeEnd ? 'picker-value' : 'picker-placeholder'}}">{{timeEnd || '结束时间'}}</text>
+          </view>
+        </picker>
+      </view>
     </view>
   </view>
 

pages/appointment/appointment.wxss

@@ -37,6 +37,42 @@ page {
   border-bottom: none;
 }
 
+.form-group-time {
+  flex-wrap: wrap;
+}
+
+.time-range {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.time-picker-wrap {
+  flex: 1;
+}
+
+.time-picker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 88rpx;
+  position: relative;
+}
+
+.time-picker .picker-arrow {
+  position: absolute;
+  right: 0;
+  font-size: 32rpx;
+  color: #b8c9db;
+}
+
+.time-range-sep {
+  font-size: 28rpx;
+  color: #b8c9db;
+  padding: 0 12rpx;
+  flex-shrink: 0;
+}
+
 .form-label {
   width: 160rpx;
   font-size: 28rpx;