配送时间优化

hdApp/src/components/app-delivery.vue

@@ -23,20 +23,18 @@
       <template v-if="form.sendType != 1">
 
         <tui-list-cell class="line-cell" :hover="false" :arrow="true">
-          <view class="tui-title">配送时间</view>
+          <view class="tui-title">配送日期</view>
           <picker mode="date" :value="form.reachDate" @change="selTimeFn" class="tui-input">
             <view v-if="form.reachDate">{{ form.reachDate }}</view>
-            <view class="tui-placeholder" v-else>请选择送达时间</view>
+            <view v-else>今天</view>
           </picker>
         </tui-list-cell>
 
         <tui-list-cell class="line-cell" :hover="false" :arrow="false">
-          <view class="tui-title">配送时段</view>
-          <view class="delivery-time">
-            <button class="button-com" :class="[form.reachPeriod == 0 ? 'red' : 'default']" @click="timeTodaySelFn(0)" >上午</button>
-            <button class="button-com" :class="[form.reachPeriod == 1 ? 'red' : 'default']" @click="timeTodaySelFn(1)" >下午</button>
-            <button class="button-com" :class="[form.reachPeriod == 2 ? 'red' : 'default']" @click="timeTodaySelFn(2)" >晚上</button>
-          </view>
+          <view class="tui-title">配送时间</view>
+					<picker mode="multiSelector" :value="form.reachPeriod" :range="timeOptions" @change="bindTimeChange">
+						<view class="uni-input" style="width:450upx;">{{form.reachPeriod}}<text style="margin-left:10upx;">前</text></view>
+					</picker>
         </tui-list-cell>
 
         <tui-list-cell class="line-cell" :hover="false">
@@ -137,15 +135,19 @@ export default {
         fullAddress: "",
         bookName: '',
         bookMobile: "",
-        reachDate: 0,
-        reachPeriod: "0",
+        reachDate: '',
+        reachPeriod: "12:00",
         cardInfo: "",
         remark: "",
         anonymity:0
       },
       region: {latitude: 0,longitude: 0},
       regionTree:[],
-      cityPickerValueDefault: [0, 0]
+      cityPickerValueDefault: [0, 0],
+      timeOptions: [
+			['00', '01', '02','03','04','05','06','07','08','09','10','11','12','13', '14','15','16','17','18','19','20','21','22','23'],
+			['00', '05', '10','15','20','25','30','35','40','45','50','55']
+		],
     };
   },
   mounted() {
@@ -169,6 +171,13 @@ export default {
 
   },
   methods: {
+    bindTimeChange(event){
+      let val = event.detail.value
+      let before = Number(val[0])
+      let after = Number(val[1])
+      let timeOptions = this.timeOptions
+      this.form.reachPeriod = timeOptions[0][before]+':'+timeOptions[1][after]
+    },
     selTimeFn(e) {
       this.form.reachDate = e.detail.value;
     },

hdApp/src/components/app-send-time.vue

@@ -1,18 +1,5 @@
 <template>
 	<view>
-<!--		<tui-list-cell class="line-cell" :hover="false" :arrow="true">-->
-<!--			<div class="tui-title">{{ dateLabel }}</div>-->
-<!--			&lt;!&ndash; <picker-->
-<!--							mode="date"-->
-<!--							:value="sendTime"-->
-<!--							@change="selTimeFn"-->
-<!--							class="tui-input"-->
-<!--						>-->
-<!--							<div v-if="form.sendTime">{{ sendTime }}</div>-->
-<!--							<div class="tui-placeholder" v-else>请选择送达时间</div>-->
-<!--						</picker> &ndash;&gt;-->
-<!--			<text>今天</text>-->
-<!--		</tui-list-cell>-->
 		<tui-list-cell class="line-cell" :hover="false" :arrow="true">
 			<div class="tui-title">{{ timeLabel }}</div>
 			<picker style="width: 100%"