CRM_26-07-21#story#9039,服务商在调度端App与系统中能变更基础信息及对应区域经理审核功能增加

src/views/index/supplierTimePhoneEdit.vue

@@ -13,9 +13,21 @@
       <div class="field">
         <label class="field-label">时段（开始 — 结束，格式 00:00 ~ 23:59）</label>
         <div class="period-row">
-          <input type="time" v-model="form.startTime" />
+          <input
+            type="text"
+            readonly
+            :value="form.startTime"
+            placeholder="开始时间"
+            @click="openTimePicker('startTime')"
+          />
           <span class="sep">—</span>
-          <input type="time" v-model="form.endTime" />
+          <input
+            type="text"
+            readonly
+            :value="form.endTime"
+            placeholder="结束时间"
+            @click="openTimePicker('endTime')"
+          />
         </div>
         <div v-if="periodErr" class="err-msg">{{ periodErr }}</div>
       </div>
@@ -48,6 +60,17 @@
     <div class="footer">
       <button class="btn btn-save" @click="save">保存</button>
     </div>
+
+    <van-popup v-model="showTimePicker" round position="bottom">
+      <van-datetime-picker
+        v-if="showTimePicker"
+        v-model="pickerValue"
+        type="time"
+        :formatter="timeFormatter"
+        @confirm="onTimeConfirm"
+        @cancel="showTimePicker = false"
+      />
+    </van-popup>
   </div>
 </template>
 
@@ -98,7 +121,10 @@ export default {
       index: -1,
       form: emptyRecord(),
       periodErr: '',
-      phoneErr: ['', '', '']
+      phoneErr: ['', '', ''],
+      showTimePicker: false,
+      pickerField: 'startTime',
+      pickerValue: ''
     }
   },
   computed: {
@@ -217,6 +243,18 @@ export default {
         console.error(e)
       }
     },
+    openTimePicker(field) {
+      this.pickerField = field
+      this.pickerValue = this.form[field] || '00:00'
+      this.showTimePicker = true
+    },
+    onTimeConfirm(value) {
+      this.form[this.pickerField] = value
+      this.showTimePicker = false
+    },
+    timeFormatter(type, value) {
+      return value.toString().padStart(2, '0')
+    }
   }
 }
 </script>
@@ -270,7 +308,6 @@ export default {
     color: #999;
   }
 }
-input[type='time'],
 input[type='text'] {
   width: 100%;
   height: 42px;
@@ -286,6 +323,9 @@ input[type='text'] {
     border-color: #2b6cff;
     background: #fff;
   }
+  &[readonly] {
+    cursor: pointer;
+  }
 }
 
 .phone-block {