配送时间优化

mallApp/src/components/app-delivery.vue

@@ -1,37 +1,18 @@
 <template>
   <div class="app-delivery-module">
-    <!-- 配送公共组件 -->
     <!-- 收花人 -->
     <div class="module-com">
       <tui-list-cell class="line-cell" :hover="false">
         <div class="tui-title">收花人姓名</div>
-        <input
-          v-model="form.receiveUserName"
-          placeholder-class="phcolor"
-          placeholder-style="color:#ccc"
-          class="tui-input"
-          name="receiveUserName"
-          placeholder="请填写姓名"
-        />
+        <input v-model="form.receiveUserName" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="receiveUserName" placeholder="请填写姓名" />
       </tui-list-cell>
       <tui-list-cell class="line-cell" :hover="false">
         <div class="tui-title">收花人电话</div>
-        <input
-          v-model="form.receiveMobile"
-          placeholder-class="phcolor"
-          placeholder-style="color:#ccc"
-          class="tui-input"
-          name="receiveMobile"
-          placeholder="请填写电话"
-          type="number"
-        />
+        <input v-model="form.receiveMobile" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="receiveMobile" placeholder="请填写电话" type="number" />
       </tui-list-cell>
       <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
         <div class="tui-title">所在城市</div>
-        <div
-          class="tui-input"
-          v-if="form.province || form.city"
-        >{{ form.province + '-' + form.city }}</div>
+        <div class="tui-input" v-if="form.province || form.city" >{{ form.province + '-' + form.city }}</div>
         <div class="tui-placeholder" v-else>请选择</div>
       </tui-list-cell>
       <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
@@ -41,57 +22,46 @@
       </tui-list-cell>
       <tui-list-cell class="line-cell" :hover="false">
         <div class="tui-title">门牌号</div>
-        <input
-          v-model="form.floor"
-          placeholder-class="phcolor"
-          placeholder-style="color:#ccc"
-          class="tui-input"
-          name="floor"
-          placeholder="楼号门牌号（选填）"
-        />
+        <input v-model="form.floor" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="floor" placeholder="楼号门牌号（选填）" />
       </tui-list-cell>
     </div>
     <!-- 订花人 -->
     <div class="module-com">
       <tui-list-cell class="line-cell" :hover="false" :arrow="true">
-        <div class="tui-title">送达时间</div>
-        <picker 
-          mode="date" 
-          :value="form.reachDate" 
-          @change="selTimeFn" 
-          class="tui-input">
+        <div class="tui-title">配送日期</div>
+        <picker mode="date" :value="form.reachDate" @change="selTimeFn" class="tui-input">
           <div v-if="form.reachDate">{{ form.reachDate }}</div>
-          <div class="tui-placeholder" v-else>请选择送达时间</div>
+          <div v-else>今天</div>
         </picker>
       </tui-list-cell>
       
       <tui-list-cell class="line-cell" :hover="false" :arrow="false">
-        <div class="tui-title">送达时段</div>
-        <div 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>
-        </div>
+        <div class="tui-title">配送时间</div>
+					<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">
         <div class="tui-title">订花人电话</div>
-        <input v-model="form.bookMobile" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="bookMobile" placeholder="有问题方便与您联系" type="number" />
+        <input v-model="form.bookMobile" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="bookMobile" placeholder="有问题方便联系您" type="number" />
       </tui-list-cell>
     </div>
 
+    <div class="module-com gift-wrap input-line-wrap">
+
       <tui-list-cell class="line-cell" :hover="false" v-show="showCardInfo">
         <div class="tui-title">贺卡内容</div>
-        <input v-model="form.cardInfo" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="cardInfo" style="width:100%;" placeholder="请填写内容，留空寄出空白贺卡" />
+        <input v-model="form.cardInfo" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="cardInfo" style="width:100%;" placeholder="请填写内容" />
 
       </tui-list-cell>
 
       <tui-list-cell class="line-cell" :hover="false">
         <div class="none-name-delivery flex-center" style="padding-left:0upx;">
-          <div class="tui-title">派送方式</div>
+          <div class="tui-title">匿名派送</div>
             <checkbox-group @change="anonymityChange">
                 <checkbox class="ljd-checkbox" value="1" id="noneNameText" ></checkbox>
-                <label for="noneNameText" class="none-name-text">匿名派送</label>
+                <label for="noneNameText" class="none-name-text">需要</label>
             </checkbox-group>
         </div>
       </tui-list-cell>
@@ -158,7 +128,7 @@ export default {
         showAddress: "", // 收花人完整地址，从腾讯地图接口获取
         bookMobile: "", // 订花人手机号
         reachDate: 0, // 配送时间
-        reachPeriod: "0", // 配送时段，0上午1下午2晚上
+        reachPeriod: "12:00", // 配送时段，0上午1下午2晚上
         cardInfo: "", // 贺卡信息
         remark: "", // 备注
         anonymity:0
@@ -168,7 +138,11 @@ export default {
         longitude: 0
       },
       // 省市联动
-      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']
+		  ]
     };
   },
   computed: {
@@ -189,6 +163,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;
     },

mallApp/src/pages/order/buy.vue

@@ -200,10 +200,6 @@ export default {
           this.$msg("请填写地址！");
           return false;
         }
-        if (this.$util.isEmpty(reachDate) || reachDate == 0) {
-          this.$msg("请填写送达时间！");
-          return false;
-        }
         let bookMobile = form.bookMobile;
         if (this.$util.isEmpty(bookMobile)) {
           this.$msg("请填写订花人电话");