Task：指引页/ 图片定位完成

pkg_product/views/famousQianxianShop.vue

@@ -328,7 +328,7 @@
                 class="bg"
               />
               <view class="card-cont">
-                <view class="tab-wrap">
+                <view class="tab-wrap" id="tab-wrap">
                   <view
                     v-for="(tab, tabIndex) in industryTab"
                     :key="tabIndex"
@@ -579,7 +579,7 @@
                   </view>
                 </view>
               </view>
-              <view v-if="!item.productId" class="v12-white v12-radius-20 f-wrap" @click="goStore(item)"  style="height: 516rpx">
+              <view v-if="!item.productId" :id="'farmer' + index" class="v12-white v12-radius-20 f-wrap" @click="goStore(item)"  style="height: 516rpx">
                 <view>
                   <view class="focus-img">
                     <image :src="item.cover" v-if="item.coverType === 1" class="img" mode="heightFix|widthFix"></image>
@@ -640,6 +640,7 @@
       @changeFun="changeFun"
       @ok="handleOk"
     />
+    <FunctionGuide :maxStep="2" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
   </view>
 </template>
 
@@ -669,14 +670,16 @@ import imgBox from '@/components/imageTypeSet/imagebox.vue'
 import XddProductItem from '@/components/xdd-product-item'
 import cookie from '@/utils/store/cookie'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
-
+import FunctionGuide from '@/components/FunctionGuide'
+import GuideMixins from '@/mixins/GuideMixins'
 export default {
   components: {
     imgBox,
     XddProductItem,
-    ProductWindow
+    ProductWindow,
+    FunctionGuide
   },
-  mixins: [pageListenMixins, goCartMixin],
+  mixins: [pageListenMixins, goCartMixin, GuideMixins],
   data() {
     return {
       saleActived: null,
@@ -767,6 +770,131 @@ export default {
     this.getsaleList()
   },
   methods: {
+    showFunctionGuide() {
+      if(this._step == this.functionGuideData.step) return
+      if(this.functionGuideData.step == 1) {
+        this._step = this.functionGuideData.step
+        
+        this.getElementData('#tab-wrap', res=>{
+          const imgs = [
+            {
+              url: this.webUrl + '/引导页素材/千县名品/Group 3/Group 3-1.png',
+              style: {
+                position: 'absolute',
+                zIndex: 99,
+                width: '500rpx',
+                top: 549*2+'rpx',
+                left: 80*2+'rpx',
+                height: '200rpx',
+                /* px: ; */
+              },
+              isBtn: false
+            },
+            {
+              url: this.webUrl + '/引导页素材/千县名品/Group 3/Group 3-2.png',
+              style: {
+                position: 'absolute',
+                zIndex: 99,
+                width: '117rpx',
+                top: 520*2+'rpx',
+                left: 60*2+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '46rpx',
+              },
+              isBtn: 'jump'
+            },
+            {
+              url: this.webUrl + '/引导页素材/千县名品/Group 3/Group 3-3.png',
+              style: {
+                position: 'absolute',
+                zIndex: 99,
+                width: '117rpx',
+                top: 520*2+'rpx',
+                left: 260*2+'rpx',
+                height: '46rpx',
+              },
+              isBtn: 'next'
+            },
+          ]
+          this.setFunctionGuideData({
+            imgs: imgs,
+            tipsPosition: '420rpx',
+            btnGroupPosition: '',
+            position: {
+              top: res.top*2 + 'rpx',
+              left: res.left*2 + 'rpx',
+              width:  `${res.width*2}rpx`,
+              height:  `${res.height*2}rpx`,
+            }
+          })
+        })
+        return
+      } else {
+        if(this.functionGuideData.step == 2) {
+          this._step = this.functionGuideData.step
+          this.activeIndex = 4
+          this.$nextTick(() => {
+            this.getElementData('#farmer1', res=>{
+              const imgs = [
+                {
+                  url: this.webUrl + '/引导页素材/千县名品/Group 4/Group 4-1.png',
+                  style: {
+                    position: 'absolute',
+                    zIndex: 99,
+                    width: '366rpx',
+                    top: 560*2+'rpx',
+                    left: 80*2+'rpx',
+                    height: '167rpx',
+                    /* px: ; */
+                  },
+                  isBtn: false
+                },
+                {
+                  url: this.webUrl + '/引导页素材/千县名品/Group 4/Group 4-2.png',
+                  style: {
+                    position: 'absolute',
+                    zIndex: 99,
+                    width: '117rpx',
+                    top: 540*2+'rpx',
+                    left: -60*2+'rpx',
+                    right: 0,
+                    margin: 'auto',
+                    height: '46rpx',
+                  },
+                  isBtn: 'jump'
+                },
+                {
+                  url: this.webUrl + '/引导页素材/千县名品/Group 4/Group 4-3.png',
+                  style: {
+                    position: 'absolute',
+                    zIndex: 99,
+                    width: '117rpx',
+                    top: 540*2+'rpx',
+                    left: 200*2+'rpx',
+                    height: '46rpx',
+                  },
+                  isBtn: 'next'
+                },
+              ]
+              this.setFunctionGuideData({
+                imgs: imgs,
+                tipsPosition: '420rpx',
+                btnGroupPosition: '',
+                position: {
+                  top: res.top*2 + 'rpx',
+                  left: res.left*2 + 'rpx',
+                  width:  `${res.width*2}rpx`,
+                  height:  `${res.height*2}rpx`,
+                }
+              })
+            })
+          })
+          return
+        }
+        return
+      }
+    },
     handleSale(e) {
       if(this.saleActived === e.id) {
         this.saleActived = null