长护险:时间选择器

www/webapp/safety/src/assets/style/vant.less

@@ -1 +1 @@
-@inputSize: 17px;
+@inputSize: 20px;

www/webapp/safety/src/components/datePicker.vue

@@ -28,6 +28,9 @@
     </div>
     <div
         class="days"
+        @touchstart='touchStart'
+        @touchmove='touchMove'
+        @touchend='touchEnd'
         v-if="daysShow"
     >
       <div
@@ -39,6 +42,7 @@
             v-for="(item, index) in items"
             :key="index"
             class="day"
+            :class="{'other':item.other}"
             @click.stop="onChange(item)"
         >
           <span class="text" :class="{'active':item.isWork}">{{item.day}}</span>
@@ -93,6 +97,10 @@ export default {
       days: '',
       day: '',
       daysShow: false,
+      startX: 0, // 开始触摸的位置
+      moveX: 0, // 滑动时的位置
+      endX: 0, // 结束触摸的位置
+      disX: 0, // 移动距离
     };
   },
   props: {
@@ -170,6 +178,7 @@ export default {
           year: self.year,
           months: self.months,
           day: i,
+          other: false,
           week: dayInWeek,
           // 判断当天是否有服务
           isWork: self.isServerWork(dateInFor, dayInWeek),
@@ -190,6 +199,7 @@ export default {
           months: getPreviousDate.months,
           day: previousDays,
           week: dayInWeek,
+          other: true,
           isWork: self.isServerWork(self.setDate(getPreviousDate), dayInWeek),
         };
       }
@@ -207,6 +217,7 @@ export default {
               months: getNextDate.months,
               day: next += 1,
               week: dayInWeek,
+              other: true,
               isWork: self.isServerWork(self.setDate(getNextDate), dayInWeek),
             };
           }
@@ -321,10 +332,40 @@ export default {
     onChange(item) {
       this.$emit('time', item);
     },
+    // 滑动事件
+    touchStart(event) {
+      // ev = ev || event;
+      event.preventDefault();
+      if (event.touches.length === 1) {
+        this.startX = event.touches[0].clientX; // 记录开始位置
+      }
+    },
+    touchMove(event) {
+      event.preventDefault();
+      if (event.touches.length === 1) {
+        this.moveX = event.touches[0].clientX;
+      }
+    },
+    touchEnd(event) {
+      event.preventDefault();
+      if (event.changedTouches.length === 1) {
+        this.disX = this.startX - this.moveX;
+        const percentage = Math.abs(this.disX) / window.innerWidth * 100 > 10;
+        if (this.disX > 0) {
+          if (percentage) {
+            this.setNext();
+          }
+        } else if (percentage) {
+          this.setPrevious();
+        }
+      }
+    },
   },
 };
 </script>
 <style lang="less" scoped>
+  @import "../assets/style/vant.less";
+
   .date-picker-wrapper {
     .date {
       display: flex;
@@ -335,7 +376,9 @@ export default {
       .day {
         flex: 1;
         text-align: center;
-        font-size: 16px;
+        font-size: @inputSize;
+        transform: rotate3d(0, 0, 0);
+        transition: all .3s ease-in;
         width: calc(100% / 7);
         height: 40px;
         position: relative;
@@ -352,17 +395,19 @@ export default {
           transform: translate(-50%, 25%);
         }
         .active {
+          color: red;
+        }
+        &.other {
           color: white;
-          background-color: red;
-          border-radius: 50%;
+          background-color: #c6c6c6;
+          .active {
+            color: #8d8d8d;
+          }
         }
         &:last-child {
           border-right: 0;
         }
       }
-      &:nth-child(even) {
-        background-color: #0ac8ff;
-      }
       &:last-child {
         .day {
           border-bottom: 0;
@@ -373,20 +418,33 @@ export default {
       display: flex;
       padding: 10px 0;
       text-align: center;
+      justify-content: space-between;
       .flex {
         width: calc(100% / 3);
         display: flex;
         & > div {
           flex: 1;
-          font-size: 17px;
+          font-size: @inputSize;
           line-height: 20px;
         }
+        &:nth-child(2) {
+          flex: 1;
+        }
+        &:nth-child(1), &:nth-child(3) {
+          flex: 0 0 100px;
+          & > div {
+            flex: 0 0 40px;
+          }
+        }
       }
     }
     .weeks {
       background-color: #eee;
       line-height: 40px;
       border-bottom: 1px solid black;
+      .day {
+        background-color: #eee !important;
+      }
     }
   }
 </style>

www/webapp/safety/src/main.js

@@ -40,9 +40,9 @@ Vue.component('h-title', hTitle);
 // components-end
 
 Vue.config.productionTip = false;
-const character = localStorage.getItem('__H5__character__');
+
 router.beforeEach((to, from, next) => {
-  // const nt = next;
+  const character = localStorage.getItem('__H5__character__');
   const test = true;
   switch (window.Number.parseInt(character)) {
     case 0: {

www/webapp/safety/src/views/Client/Send/index.vue

@@ -1,38 +1,70 @@
 <template>
-  <div class="send">
+  <div class="send-wrapper">
     <!--<div class="title">派单</div>-->
     <div v-if="orders && orders.rows">
       <h-date-picker
-        :start='orders.rows[0].serve_time_start'
-        :end='orders.rows[0].serve_time_end'
-        :period='orders.rows[0].serve_period'
-        @time="setOrder"
+          :start='orders.rows[0].serve_time_start'
+          :end='orders.rows[0].serve_time_end'
+          :period='orders.rows[0].serve_period'
+          @time="setOrder"
       ></h-date-picker>
-      <!-- {{orders}} -->
-      <!-- <div><span>开始日期</span>{{orders.rows[0].serve_time_start}}</div>
-      <div><span>结束日期</span>{{orders.rows[0].serve_time_end}}</div>
-      <div><span>每周服务日期</span>{{orders.rows[0].serve_period}}</div> -->
+      <div class="order-info-wrapper" v-if="orders && orders.rows">
+        <div class="title">当前服务人员信息</div>
+        <div class="item-wrapper">
+          <div class="title">姓名</div>
+          <div class="text">{{ orders.rows[0].worker.user_info.name }}</div>
+        </div>
+        <!--{{ orders.rows[0].worker.user_info }}
+        {{ orders.rows[0].worker.user_info.mobile }}-->
+        <div class="item-wrapper">
+          <div class="title">手机</div>
+          <div class="text">{{ orders.rows[0].worker.user_info.mobile }}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
-import { mapState } from "vuex";
-import datePickerComponents from "@/components/datePicker.vue";
+import { mapState } from 'vuex';
+import datePickerComponents from '@/components/datePicker.vue';
 
 export default {
-  name: "send",
+  name: 'send',
   computed: {
     ...mapState({
-      orders: state => state.user.orders
-    })
+      orders: state => state.user.orders,
+    }),
   },
   components: {
-    "h-date-picker": datePickerComponents
+    'h-date-picker': datePickerComponents,
   },
   methods: {
     setOrder(time) {
       console.log(time);
-    }
-  }
+    },
+  },
 };
 </script>
+<style lang="less" scoped>
+  @import "../../../assets/style/vant.less";
+  .send-wrapper {
+    .order-info-wrapper {
+      text-align: center;
+      .title {
+        font-size: 25px;
+      }
+      .item-wrapper {
+        display: flex;
+        line-height: 30px;
+        .title {
+          flex: 0 0 90px;
+          font-size: @inputSize;
+        }
+        .text {
+          font-size: @inputSize;
+        }
+      }
+    }
+  }
+
+</style>

www/webapp/safety/src/views/Home/index.vue

@@ -18,9 +18,9 @@
 </template>
 <script>
 export default {
-  name: "home",
+  name: 'home',
   data() {
-    return { active: 0, firstPath: "" };
+    return { active: 0, firstPath: '' };
   },
   mounted() {
     this.toPath();
@@ -31,16 +31,18 @@ export default {
     },
     registered(name) {
       const character = window.Number.parseInt(
-        window.localStorage.getItem("__H5__character__")
+        window.localStorage.getItem('__H5__character__'),
       );
       if (character === 0) {
-        this.$router.push({ path: "/care/other" });
-      } else if (character === 1) {
-        this.$router.push({ path: "/client/send" });
-      } else if (character === 2) {
+        this.$router.push({ path: '/care/other' });
+      }
+      if (character === 1) {
+        this.$router.push({ path: '/client/send' });
+      }
+      if (character === 2) {
         this.$router.push({ path: name });
       }
-      this.$store.dispatch("getUserOrders");
+      this.$store.dispatch('getUserOrders');
       // this.$router.push({ path: name });
     },
     toPath() {
@@ -51,40 +53,40 @@ export default {
       } catch (e) {
         console.log(e);
       }
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
-.home-wrapper {
-  font-size: 50px;
-  width: 100%;
-  .title {
-    margin-top: 20px;
+  .home-wrapper {
+    font-size: 50px;
     width: 100%;
-    text-align: center;
-    line-height: 250px;
-    font-size: 35px;
-  }
-  .registered {
-    display: flex;
-    /*flex-direction: row;*/
-    justify-content: space-around;
-    & > div {
-      flex: 0 0 35%;
+    .title {
+      margin-top: 20px;
+      width: 100%;
       text-align: center;
-      font-size: 25px;
-      padding: 10px;
-      color: white;
-      background-color: #0ac6ff;
-      transform: rotate3d(0, 0, 0);
-      transition: all 0.3s ease-in-out;
-      &:active {
-        /*font-size: 15px;*/
-        background-color: #0ab1e2;
+      line-height: 250px;
+      font-size: 35px;
+    }
+    .registered {
+      display: flex;
+      /*flex-direction: row;*/
+      justify-content: space-around;
+      & > div {
+        flex: 0 0 35%;
+        text-align: center;
+        font-size: 25px;
+        padding: 10px;
+        color: white;
+        background-color: #0ac6ff;
+        transform: rotate3d(0, 0, 0);
+        transition: all 0.3s ease-in-out;
+        &:active {
+          /*font-size: 15px;*/
+          background-color: #0ab1e2;
+        }
       }
     }
   }
-}
 </style>