Task：指引功能

wenwan/views/storeList.vue

@@ -18,7 +18,7 @@
       </view>
     </view>
 
-    <view class="list flex flex-wrap" v-if="list.length">
+    <view class="list flex flex-wrap" v-if="list.length" id="goods-box">
       <view class="item" v-for="item in list" :key="item.id" @click="goStore(item)">
         <image class="image" :src="item.cover + (item.coverType === 2 ? '?vframe/jpg/offset/1' : '')" mode="scaleToFill"></image>
 
@@ -36,13 +36,20 @@
       <image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
       <view class="text">暂无数据</view>
     </view>
+    <FunctionGuide :maxStep="1" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
   </view>
 </template>
 
 <script>
 import {fetchStore} from "@/api/wenwan";
+import FunctionGuide from '@/components/FunctionGuide'
+import GuideMixins from '@/mixins/GuideMixins'
 
 export default {
+  components: {
+    FunctionGuide
+  },
+  mixins: [GuideMixins],
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
@@ -71,6 +78,73 @@ export default {
     this.fetchList(this.cityName);
   },
   methods: {
+    showFunctionGuide() {
+      if(this._step == this.functionGuideData.step) return
+      if(this.functionGuideData.step == 1) {
+        this._step = this.functionGuideData.step
+        const imgs = [
+          {
+            url: this.webUrl + '/引导页素材/文玩艺术/Group2/Group 2-1.png',
+            style: {
+              position: 'absolute',
+              zIndex: 99,
+              width: '357rpx',
+              top: '100rpx',
+              left: '-110rpx',
+              right: 0,
+              margin: 'auto',
+              height: '382rpx',
+              /* px: ; */
+            },
+            isBtn: false
+          },
+          {
+            url: this.webUrl + '/引导页素材/文玩艺术/Group2/Group 2-2.png',
+            style: {
+              position: 'absolute',
+              zIndex: 99,
+              width: '117rpx',
+              top: 125*2+'rpx',
+              left: -120*2+'rpx',
+              right: 0,
+              margin: 'auto',
+              height: '46rpx',
+            },
+            isBtn: 'jump'
+          },
+          {
+            url: this.webUrl + '/引导页素材/文玩艺术/Group2/Group 2-3.png',
+            style: {
+              position: 'absolute',
+              zIndex: 99,
+              width: '117rpx',
+              top: 125*2+'rpx',
+              left: 170*2+'rpx',
+              height: '46rpx',
+            },
+            isBtn: 'next'
+          },
+        ]
+        this.getElementData('#goods-box', res=>{
+          console.log(res, 'res---------');
+          
+          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 {
+        return
+      }
+    },
     goClass() {
       uni.navigateTo({
         url: "/wenwan/views/goodsClass?cityId=" + this.cityId