Task：指引功能

pages/home/index.vue

@@ -44,27 +44,30 @@
         </block>
       </swiper>
     </view>
-    <view class="home-body">
+    <view class="home-body" id="step1">
       <!-- 导航v9 -->
       <view class="menus-wrap">
         <view class="menus-bg" />
-        <view class="menus-list">
-          <view
-            v-for="(item, index) in menus"
-            :key="index"
-            class="item flex flex-col ai-center"
-            @click="$global.commonJump(item.uniapp_url)"
-          >
-            <image
-              :src="item.pic"
-              mode="scaleToFill"
-              class="img"
-            />
-            <view class="one-t tc menu-name">
-              {{ item.name }}
+        <scroll-view scroll-x :scroll-into-view="scrollView"  scroll-with-animation >
+          <view class="menus-list">
+            <view
+              v-for="(item, index) in menus"
+              :key="index"
+              class="item flex flex-col ai-center"
+              @click="$global.commonJump(item.uniapp_url)"
+              :id="'box-item' + (index + 2)"
+            >
+              <image
+                :src="item.pic"
+                mode="scaleToFill"
+                class="img"
+              />
+              <view class="one-t tc menu-name">
+                {{ item.name }}
+              </view>
             </view>
           </view>
-        </view>
+        </scroll-view>
       </view>
       <!-- 千县名品和地标好物 -->
       <view
@@ -293,8 +296,9 @@
       </view>
     </view>
     <!-- v9 老用户弹窗 -->
+      <!-- :show="isOldUser && oldUserPopup.image && lotteryCanDraw" -->
+
     <u-popup
-      :show="isOldUser && oldUserPopup.image && lotteryCanDraw"
       mode="center"
       bgColor="transparent"
     >
@@ -334,6 +338,7 @@
       @ok="handleOk"
       paddingBottom="200rpx"
     />
+    <FunctionGuide :maxStep="14" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
     <xdd-tabbar :curr-index="0" />
   </view>
 </template>
@@ -347,6 +352,8 @@ import { sharpBannar } from '@/api/goods'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 import ProductWindow from '@/components/ProductWindow'
 import goCartMixin from '@/mixins/goCartMixins'
+import FunctionGuide from '@/components/FunctionGuide'
+import GuideMixins from '@/mixins/GuideMixins'
 import {
   getCurAddress,
   getLocationPromise,
@@ -358,9 +365,10 @@ export default {
   components: {
     XddTabbar,
     XddProductItem,
-    ProductWindow
+    ProductWindow,
+    FunctionGuide
   },
-  mixins: [pageListenMixins, goCartMixin],
+  mixins: [pageListenMixins, goCartMixin, GuideMixins],
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
@@ -433,6 +441,77 @@ export default {
     this.scrollTop = e.scrollTop
   },
   methods: {
+    showFunctionGuide() {
+      if(this._step == this.functionGuideData.step) return
+      this._step = this.functionGuideData.step
+      if(this.functionGuideData.step == 1) {
+        this.getElementData('#step1', res=>{
+          console.log(res);
+          this.screenWidth = res.width - 20
+          this.setFunctionGuideData({
+            tips: '介绍模块1，简述一下模块功能',
+            btnGroupPosition: '-120rpx',
+            tipsPosition: '420rpx',
+            position: {
+              top: 265 + 'px',
+              left: res.left + 10 + 'px',
+              width:  `${res.width - 20}px`,
+              height:  `${80 + 114 + 8 + 252 + 8}px`,
+            }
+          })
+        })
+        
+      }else {
+        this.getElementData(`#box-item${this.functionGuideData.step}`, res=>{
+          console.log(res);
+          this.setFunctionGuideData({
+            tips: '介绍模块2，简述一下模块功能',
+            btnGroupPosition: '',
+            tipsPosition: '',
+            position: {
+              top: res.top + 'px',
+              left:  res.left + 'px',
+              width:  `${res.width}px`,
+              height: `${res.height}px`,
+            }
+          })
+          this.$nextTick(()=> {
+            this.scrollView = `box-item${this.functionGuideData.step}`
+					})
+        })
+      }
+
+      // if(this.functionGuideData.step == 2) {
+      //   this.getElementData('#box-item0', res=>{
+      //     this.setFunctionGuideData({
+      //       tips: '介绍模块2，简述一下模块功能',
+      //       btnGroupPosition: '',
+      //       tipsPosition: '',
+      //       position: {
+      //         top: res.top + 'px',
+      //         left: res.left - 10 + 'px',
+      //         width:  `${res.height}px`,
+      //         height: `${res.height}px`
+      //       }
+      //     })
+      //   })
+      // }else if(this.functionGuideData.step == 3) {
+      //   this.getElementData('#box-item1', res=>{
+      //     this.setFunctionGuideData({
+      //       tips: '介绍模块6，模块处于底部，需滚动页面',
+      //       tipsPosition: '',
+      //       position: {
+      //         top: res.top + 'px',
+      //         left: res.left - 10 + 'px',
+      //         width:  `${res.height}px`,
+      //         height: `${res.height}px`
+      //       }
+      //     })
+      //   })
+      // }else if(this.functionGuideData.step == 'jump') {
+      //   this.intoView = 'top'
+      // }
+    },
     played() {
       this.isPlay = !this.isPlay
       if(this.isPlay) {
@@ -771,15 +850,15 @@ export default {
     display: flex;
     flex-shrink: 0;
     padding: 12rpx 24rpx;
-    margin: -120rpx 0 0 0;
     border-radius: 16rpx;
     background-color: #fff;
     overflow-x: auto;
     .item + .item {
-      margin: 0 0 0 36rpx;
+      // margin: 0 0 0 36rpx;
     }
     .item {
       width: 150rpx;
+      padding: 10rpx 20rpx;
       .img {
         width: 86rpx;
         height: 86rpx;