商品详情页第一次进入时给予提示，只提示一次，第二次进入不再提示

+<template>
+  <div v-if="canShowTips" class="detail-useage-tips">
+    <div :class="['step', 'step-' + tipsStep]" @touchend="changeStep" @touchstart="stopPrevent"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DetailUseageTips',
+  data() {
+    return {
+      tipsStep: 1,
+      canShowTips: 0,
+      touchStartY: 0
+    };
+  },
+  activated() {
+    this.checkCanShowTips();
+  },
+  methods: {
+    checkCanShowTips() { // 检查localStroage中有没有显示过提示的记录
+      let storage = localStorage.getItem('userTipsShow');
+
+      if (storage) {
+        this.canShowTips = 0;
+      } else {
+        this.canShowTips = 1;
+      }
+    },
+
+    setShowTips() { // 在localStorage中存储一个值，下次打开时不再显示提示
+      localStorage.setItem('userTipsShow', 1);
+    },
+
+    changeStep(e) {
+      if (Math.abs(e.changedTouches[0].pageY - this.touchStartY) < 10) {
+        this.tipsStep += 1;
+        if (this.tipsStep > 4) {
+          this.canShowTips = 0;
+          this.setShowTips();
+        }
+      }
+    },
+
+    stopPrevent(e) {
+      e.preventDefault();
+      this.touchStartY = e.touches[0].pageY;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .detail-useage-tips {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 99;
+    background-color: rgba(0, 0, 0, 0.5);
+
+    .step {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      background-size: 100% auto;
+      background-position: left center;
+    }
+
+    .step-1 {
+      background-image: url('~statics/image/product/detail-useage-tips-xs-1.png');
+    }
+
+    .step-2 {
+      background-image: url('~statics/image/product/detail-useage-tips-xs-2.png');
+    }
+
+    .step-3 {
+      background-image: url('~statics/image/product/detail-useage-tips-xs-3.png');
+    }
+
+    .step-4 {
+      background-image: url('~statics/image/product/detail-useage-tips-xs-4.png');
+    }
+
+    @media screen and (max-width: 375px) {
+      @media screen and (max-height: 812px){
+        .step-1 {
+          background-image: url('~statics/image/product/detail-useage-tips-xs-1.png');
+        }
+
+        .step-2 {
+          background-position: left -200px;
+          background-image: url('~statics/image/product/detail-useage-tips-xs-2.png');
+        }
+
+        .step-3 {
+          background-position: left -160px;
+          background-image: url('~statics/image/product/detail-useage-tips-xs-3.png');
+        }
+
+        .step-4 {
+          background-position: left -120px;
+          background-image: url('~statics/image/product/detail-useage-tips-xs-4.png');
+        }
+      }
+
+      @media screen and (max-height: 667px) {
+        .step-1 {
+          background-image: url('~statics/image/product/detail-useage-tips-1.png');
+        }
+
+        .step-2 {
+          background-position: left -200px;
+          background-image: url('~statics/image/product/detail-useage-tips-2.png');
+        }
+
+        .step-3 {
+          background-position: left -160px;
+          background-image: url('~statics/image/product/detail-useage-tips-3.png');
+        }
+
+        .step-4 {
+          background-position: left -120px;
+          background-image: url('~statics/image/product/detail-useage-tips-4.png');
+        }
+      }
+    }
+
+    @media screen and (max-width: 414px){
+      @media screen and (max-height: 812px){
+        .step-1 {
+          background-image: url('~statics/image/product/detail-useage-tips-xs-1.png');
+        }
+
+        .step-2 {
+          background-position: left -200px;
+          background-image: url('~statics/image/product/detail-useage-tips-xs-2.png');
+        }
+
+        .step-3 {
+          background-position: left -160px;
+          background-image: url('~statics/image/product/detail-useage-tips-xs-3.png');
+        }
+
+        .step-4 {
+          background-position: left -120px;
+          background-image: url('~statics/image/product/detail-useage-tips-xs-4.png');
+        }
+      }
+
+      @media screen and (max-height: 667px) {
+        .step-1 {
+          background-image: url('~statics/image/product/detail-useage-tips-1.png');
+        }
+
+        .step-2 {
+          background-position: left -160px;
+          background-image: url('~statics/image/product/detail-useage-tips-2.png');
+        }
+
+        .step-3 {
+          background-position: left -112px;
+          background-image: url('~statics/image/product/detail-useage-tips-3.png');
+        }
+
+        .step-4 {
+          background-position: left -120px;
+          background-image: url('~statics/image/product/detail-useage-tips-4.png');
+        }
+      }
+    }
+  }
+
+  @keyframes changeStep {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+</style>

 <template>
   <div class="layout">
-    <LayoutHeader class="layout-header" :show-back="true" title="商品详情"></LayoutHeader>
+<!--    <LayoutHeader class="layout-header" :show-back="true" title="商品详情"></LayoutHeader>-->
     <div class="layout-context fixscroll">
       <LayoutScroll
         ref="pageScroll"
@@ -75,6 +75,7 @@
                        @hide="onSizeSelectSheetHide"
                        @select="onSelectTradeProduct"
                        @add="onRequestSize"/>
+    <detail-useage-tips></detail-useage-tips>
   </div>
 </template>
 
@@ -97,6 +98,7 @@ import TopList from './components/top-list';
 import SquareImg from './components/square-img';
 import stateShortCutsMixins from './mixins';
 import trackingMixins from './tracking-mixins';
+import DetailUseageTips from './components/detail-useage-tips';
 
 const { mapActions, mapState } = createNamespacedHelpers('product');
 
@@ -104,6 +106,7 @@ export default {
   name: 'ProductDetail',
   mixins: [stateShortCutsMixins, trackingMixins],
   components: {
+    DetailUseageTips,
     SizeSelectSheet,
     ActivityListSheet,
     SizeRequestSheet,