Merge remote-tracking branch 'origin/develop' into develop

 <template>
   <div v-transfer-dom :data-transfer="transfer" :class="actionCls">
     <transition name="action-sheet-mask">
-      <div class="yoho-popup-mask" @click="maskClick" v-if="mask && isVisible"></div>
+      <div
+        class="yoho-popup-mask"
+        @click="maskClick"
+        v-if="mask && isVisible"
+      ></div>
     </transition>
     <transition name="action-sheet-move">
-      <div class="yoho-popup" v-show="isVisible" :style="{'z-index': zIndex}">
-        <div class="yoho-popup-container" :style="{'max-height': maxHeight + 'px', 'height': contentHeight}">
+      <div class="yoho-popup" v-show="isVisible" :style="{ 'z-index': zIndex }">
+        <div
+          class="yoho-popup-container"
+          :style="{ 'max-height': maxHeight + 'px', height: contentHeight }"
+        >
           <slot></slot>
         </div>
       </div>
@@ -14,9 +21,9 @@
 </template>
 
 <script>
-import {mapState} from 'vuex';
+import { mapState } from "vuex";
 export default {
-  name: 'YohoActionSheet',
+  name: "YohoActionSheet",
   props: {
     maskClosable: {
       type: Boolean,
@@ -48,29 +55,33 @@ export default {
   },
   mounted() {
     this.maxHeight = document.documentElement.clientHeight;
-    this.$watch('visible', (newVal) => {
-      if (newVal) {
-        this.show();
-      } else {
-        this.hide();
+    this.$watch(
+      "visible",
+      newVal => {
+        if (newVal) {
+          this.show();
+        } else {
+          this.hide();
+        }
+      },
+      {
+        immediate: true
       }
-    }, {
-      immediate: true
-    });
+    );
   },
   computed: {
-    ...mapState(['yoho']),
+    ...mapState(["yoho"]),
     actionCls() {
-      return [{ 'yoho-action-sheet': this.full }];
+      return [{ "yoho-action-sheet": this.full }];
     },
     contentHeight() {
-      let {statusBarHeight, statusBarStatus} = this.yoho.window || {};
+      let { statusBarHeight, statusBarStatus } = this.yoho.window || {};
 
       if (!statusBarStatus) {
         statusBarHeight = 0;
       }
 
-      return this.full ? `${this.maxHeight - 20 - statusBarHeight}px` : 'auto';
+      return this.full ? `${this.maxHeight - 20 - statusBarHeight}px` : "auto";
     }
   },
   methods: {
@@ -80,7 +91,7 @@ export default {
 
     cancel() {
       this.hide();
-      this.$emit('cancel');
+      this.$emit("cancel");
     },
 
     show() {
@@ -92,80 +103,71 @@ export default {
     }
   }
 };
-
 </script>
 
 <style lang="scss" scoped>
-  .action-sheet-move-enter,
-  .action-sheet-move-leave-active {
-    transform: translate3d(0, 100%, 0);
-  }
-
-  .action-sheet-move-enter,
-  .action-sheet-move-leave-to {
-    opacity: 0.5;
-  }
-
-  .action-sheet-move-enter-active {
-    transition: all 0.4s cubic-bezier(0, 0.96, 0.14, 1.06);
-  }
-
-  .action-sheet-move-leave-active {
-    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
-  }
-
-  .action-sheet-mask-enter,
-  .action-sheet-mask-leave-to {
-    opacity: 0;
-  }
-
-  .action-sheet-mask-enter-active {
-    transition: opacity 0.3s linear;
-  }
-
-  .action-sheet-mask-leave-active {
-    transition: opacity 0.1s linear;
+.action-sheet-move-enter,
+.action-sheet-move-leave-active {
+  transform: translate3d(0, 100%, 0);
+}
+
+.action-sheet-move-enter,
+.action-sheet-move-leave-to {
+  opacity: 0.5;
+}
+
+.action-sheet-move-enter-active {
+  transition: all 0.4s cubic-bezier(0, 0.96, 0.14, 1.06);
+}
+
+.action-sheet-move-leave-active {
+  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.action-sheet-mask-enter,
+.action-sheet-mask-leave-to {
+  opacity: 0;
+}
+
+.action-sheet-mask-enter-active {
+  transition: opacity 0.3s linear;
+}
+
+.action-sheet-mask-leave-active {
+  transition: opacity 0.1s linear;
+}
+
+.yoho-popup-mask {
+  display: block;
+  position: absolute;
+  z-index: 99;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.yoho-popup {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+
+  .yoho-popup-container {
+    position: relative;
+    opacity: 1;
+    overflow: hidden;
   }
 
-  .yoho-popup-mask {
-    display: block;
+  &:after {
+    content: "";
+    width: 100%;
+    height: 200px;
     position: absolute;
-    z-index: 99;
-    top: 0;
     left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-
-  .yoho-popup {
-    width: 100%;
-    position: fixed;
-    bottom: 0;
-
-    .yoho-popup-container {
-      position: relative;
-      opacity: 1;
-      overflow: hidden;
-    }
-
-    &:after {
-      content: "";
-      width: 100%;
-      height: 200px;
-      position: absolute;
-      left: 0;
-      bottom: -200px;
-      z-index: -1;
-      background: #fff;
-    }
-  }
-
-  .yoho-action-sheet {
-    .yoho-popup-container {
-      border-radius: 8PX 8PX 0 0;
-      overflow: hidden;
-    }
+    bottom: -200px;
+    z-index: -1;
+    background: #fff;
   }
-
+}
 </style>

 <template>
-  <div class="no-item" v-else>
+  <div class="no-item">
     <div class="no-item-bg">
       <div class="no-item-bg-top"></div>
       <div class="no-item-bg-bottom"></div>
     </div>
-    <p>{{tip}}</p>
+    <p>{{ tip }}</p>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'UfoNoItem',
+  name: "UfoNoItem",
   props: {
     tip: String
   }
@@ -18,93 +18,93 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .no-item {
+.no-item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-height: 8rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .no-item-bg {
     position: relative;
-    display: flex;
-    width: 100%;
-    min-height: 8rem;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    .no-item-bg {
-      position: relative;
-      width: 186px;
-      height: 242px;
+    width: 186px;
+    height: 242px;
+    background-size: 100% 100%;
+
+    &-top {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 2;
+      background-image: url("~statics/image/order/ufo-empty-top.png");
       background-size: 100% 100%;
-
-      &-top {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        z-index: 2;
-        background-image: url("~statics/image/order/ufo-empty-top.png");
-        background-size: 100% 100%;
-        animation: animateUFO 3s linear infinite;
-      }
-
-      &-bottom {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        z-index: 1;
-        background-image: url("~statics/image/order/ufo-empty-bottom.png");
-        background-size: 100% 100%;
-        animation: animateLight 3s linear infinite;
-      }
+      animation: animateUFO 3s linear infinite;
     }
 
-    p {
-      color: #999;
-      line-height: 32px;
+    &-bottom {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      background-image: url("~statics/image/order/ufo-empty-bottom.png");
+      background-size: 100% 100%;
+      animation: animateLight 3s linear infinite;
     }
   }
 
-  @keyframes animateUFO {
-    0% {
-      transform: translateY(0px);
-    }
+  p {
+    color: #999;
+    line-height: 32px;
+  }
+}
 
-    25% {
-      transform: translateY(10px);
-    }
+@keyframes animateUFO {
+  0% {
+    transform: translateY(0px);
+  }
 
-    50% {
-      transform: translateY(0px);
-    }
+  25% {
+    transform: translateY(10px);
+  }
 
-    75% {
-      transform: translateY(10px);
-    }
+  50% {
+    transform: translateY(0px);
+  }
 
-    100% {
-      transform: translateY(0px);
-    }
+  75% {
+    transform: translateY(10px);
   }
 
-  @keyframes animateLight {
-    0% {
-      transform: skewX(0deg);
-    }
+  100% {
+    transform: translateY(0px);
+  }
+}
 
-    25% {
-      transform: skewX(10deg);
-    }
+@keyframes animateLight {
+  0% {
+    transform: skewX(0deg);
+  }
 
-    50% {
-      transform: skewX(0deg);
-    }
+  25% {
+    transform: skewX(10deg);
+  }
 
-    75% {
-      transform: skewX(-10deg);
-    }
+  50% {
+    transform: skewX(0deg);
+  }
 
-    100% {
-      transform: skewX(0deg);
-    }
+  75% {
+    transform: skewX(-10deg);
+  }
+
+  100% {
+    transform: skewX(0deg);
   }
+}
 </style>

@@ -96,9 +96,10 @@ export default {
   asyncData({ store, router }) {
     // store.dispatch("order/orderDetail/fetchOrderDetail", router.params);
   },
-  mounted() {
+  activated() {
     this.fetchOrderDetail(this.$route.params);
   },
+  mounted() {},
   computed: {
     ...mapState(["orderDetail"]),
     ...mapGetters(["lastExpressInfo", "priceInfo", "actionList"])
@@ -112,9 +113,9 @@ export default {
 <style lang="scss" scoped>
 .order-detail-wrapper {
   // footer高度120px
-  padding: 24px 40px 144px 40px;
+  padding: 0 40px;
   -webkit-box-orient: vertical;
-  height: 100vh;
+  height: calc(100vh - 90px);
   overflow-x: hidden;
   overflow-y: auto;
   font-size: 24px;

@@ -102,7 +102,8 @@ export default {
   asyncData({ store, router }) {
     // store.dispatch("order/orderDetail/fetchOrderDetail", router.params);
   },
-  mounted() {
+  mounted() {},
+  activated() {
     this.fetchOrderDetail(this.$route.params);
   },
   computed: {
@@ -123,9 +124,9 @@ export default {
 <style lang="scss" scoped>
 .order-detail-wrapper {
   // footer高度120px
-  padding: 24px 40px 144px 40px;
+  padding: 0 40px;
   -webkit-box-orient: vertical;
-  height: 100vh;
+  height: calc(100vh - 90px);
   overflow-x: hidden;
   overflow-y: auto;
   font-size: 24px;