Task：指引功能

components/FunctionGuide.vue

@@ -1,5 +1,5 @@
 <template>
-	<view v-if="show" class="guide-remark white">
+	<view v-if="show" class="guide-remark white" @touchmove.stop.prevent="" >
 		<view class="guid-wrap">
 			<image 
 				v-for="(img, index) in functionGuideData.imgs" 
@@ -38,7 +38,7 @@
 				type: Object,
 				default: ()=> {
 					return {
-						step: 2,
+						step: 1,
 						tips: '', // 介绍
 						tipsPosition: '', // 介绍 显示位置
 						btnGroupPosition: '', // 按钮组显示位置

mixins/GuideMixins.js

@@ -13,6 +13,8 @@ export default {
       scrollLeft: 0,
       totalWidth: 0,
       scrollViewWidth: 0,
+      imgs: [],
+      _step: 0
     }
   },
   onLoad() {
@@ -32,6 +34,8 @@ export default {
         console.log(res, 'getElementData');
         if(res[0]) {
           cb(res[0])
+        } else {
+          this.$refs.FunctionGuide.show = false
         }
       })
     },

pages/chose-city/chose-city.vue

@@ -17,7 +17,7 @@
         />
       </view>
     </view>
-    <view class="aside">
+    <view class="aside" id="aside">
       <view
         v-for="(item, index) in listGroup"
         :key="index"
@@ -137,6 +137,7 @@
         </view>
       </mescroll-body>
     </view>
+    <FunctionGuide :maxStep="maxStep" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
   </view>
 </template>
 
@@ -146,11 +147,14 @@ import {fetchCity} from '@/api/wenwan'
 import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
 import {getCurAddress, getLocation} from '@/utils/common.js'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
+import FunctionGuide from '@/components/FunctionGuide'
+import GuideMixins from '@/mixins/GuideMixins'
 
 export default {
   name: 'ChoseCity',
   components: {
-    MescrollBody
+    MescrollBody,
+    FunctionGuide
   },
   mixins: [
     MescrollMixins({
@@ -158,7 +162,8 @@ export default {
         mescroll.endSuccess(10)
       }
     }),
-    pageListenMixins
+    pageListenMixins,
+    GuideMixins
   ],
   data() {
     return {
@@ -188,6 +193,15 @@ export default {
       pageKeyId: ''
     }
   },
+  computed: {
+    maxStep() {
+      const stepsMap = {
+        0: 1,
+        1: 1,
+      }
+      return stepsMap[this.type] || 1
+    }
+  },
   onLoad(options) {
     const type = Number(options.type)
     this.type = type
@@ -218,6 +232,71 @@ export default {
     this.init()
   },
   methods: {
+    showFunctionGuide() {
+      if(this._step == this.functionGuideData.step) return
+      if(this.functionGuideData.step == 1) {
+        this._step = this.functionGuideData.step
+        const imgs = [
+          {
+            url: this.webUrl + '/引导页素材/全国特产/Group 1-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 + '/引导页素材/全国特产/Group 1-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 + '/引导页素材/全国特产/Group 1-3.png',
+            style: {
+              position: 'absolute',
+              zIndex: 99,
+              width: '117rpx',
+              top: 125*2+'rpx',
+              left: 170*2+'rpx',
+              height: '46rpx',
+            },
+            isBtn: 'next'
+          },
+        ]
+        this.getElementData('#aside', 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
+      }
+    },
     reload() {
       uni.getSetting({
         success(res) {

pages/home/index.vue

@@ -452,9 +452,9 @@ export default {
     onscroll(e) {
       this.scrollViewWidth = e.detail.scrollWidth
       const imgs = []
-      this.getElementData(`#${scrollView}`, res=>{
+      this.getElementData(`#${this.scrollView}`, res=>{
         this.setFunctionGuideData({
-          imgs: imgs,
+          imgs: this.imgs,
           btnGroupPosition: '20rpx',
           tipsPosition: '',
           position: {
@@ -663,7 +663,7 @@ export default {
                   position: 'absolute',
                   zIndex: 99,
                   width: '578rpx',
-                  top: '140rpx',
+                  top: '180rpx',
                   left: '150rpx',
                   right: 0,
                   margin: 'auto',
@@ -823,7 +823,7 @@ export default {
                 position: 'absolute',
                 zIndex: 99,
                 width: '438rpx',
-                top: 170*2+'rpx',
+                top: 140*2+'rpx',
                 left: -164*2+'rpx',
                 right: 0,
                 margin: 'auto',
@@ -858,7 +858,7 @@ export default {
                 zIndex: 99,
                 width: '574rpx',
                 top: 170*2+'rpx',
-                left: -164*2+'rpx',
+                left: -0+'rpx',
                 right: 0,
                 margin: 'auto',
                 height: '238rpx',
@@ -872,7 +872,7 @@ export default {
                 zIndex: 99,
                 width: '118rpx',
                 top: 315*2+'rpx',
-                left: 0+'rpx',
+                left: -290*2+'rpx',
                 right: 0,
                 margin: 'auto',
                 height: '46rpx',
@@ -886,7 +886,7 @@ export default {
                 zIndex: 99,
                 width: '118rpx',
                 top: 315*2+'rpx',
-                left: 140*2+'rpx',
+                left: -(290-130)*2+'rpx',
                 right: 0,
                 margin: 'auto',
                 height: '46rpx',
@@ -904,12 +904,12 @@ export default {
               style:{
                 position: 'absolute',
                 zIndex: 99,
-                width: '574rpx',
+                width: '444rpx',
-                top: 170*2+'rpx',
+                top: 310*2+'rpx',
-                left: -164*2+'rpx',
+                left: 144*2+'rpx',
                 right: 0,
                 margin: 'auto',
-                height: '238rpx',
+                height: '252rpx',
               },
               isBtn: false
             },
@@ -919,8 +919,8 @@ export default {
                 position: 'absolute',
                 zIndex: 99,
                 width: '118rpx',
-                top: 315*2+'rpx',
+                top: 435*2+'rpx',
-                left: 0+'rpx',
+                left: -235*2+'rpx',
                 right: 0,
                 margin: 'auto',
                 height: '46rpx',
@@ -933,8 +933,8 @@ export default {
                 position: 'absolute',
                 zIndex: 99,
                 width: '118rpx',
-                top: 315*2+'rpx',
+                top: 435*2+'rpx',
-                left: 140*2+'rpx',
+                left: -90*2+'rpx',
                 right: 0,
                 margin: 'auto',
                 height: '46rpx',
@@ -953,12 +953,12 @@ export default {
               style:{
                 position: 'absolute',
                 zIndex: 99,
-                width: '574rpx',
+                width: '489rpx',
-                top: 170*2+'rpx',
+                top: 580*2+'rpx',
-                left: -164*2+'rpx',
+                left: 0+'rpx',
                 right: 0,
                 margin: 'auto',
-                height: '238rpx',
+                height: '267rpx',
               },
               isBtn: false
             },
@@ -968,7 +968,7 @@ export default {
                 position: 'absolute',
                 zIndex: 99,
                 width: '118rpx',
-                top: 315*2+'rpx',
+                top: 555*2+'rpx',
                 left: 0+'rpx',
                 right: 0,
                 margin: 'auto',
@@ -982,7 +982,7 @@ export default {
                 position: 'absolute',
                 zIndex: 99,
                 width: '118rpx',
-                top: 315*2+'rpx',
+                top: 555*2+'rpx',
                 left: 140*2+'rpx',
                 right: 0,
                 margin: 'auto',
@@ -1011,12 +1011,12 @@ export default {
               style:{
                 position: 'absolute',
                 zIndex: 99,
-                width: '574rpx',
+                width: '450rpx',
-                top: 170*2+'rpx',
+                top: 465*2+'rpx',
-                left: -164*2+'rpx',
+                left: 120*2+'rpx',
                 right: 0,
                 margin: 'auto',
-                height: '238rpx',
+                height: '218rpx',
               },
               isBtn: false
             },
@@ -1026,8 +1026,8 @@ export default {
                 position: 'absolute',
                 zIndex: 99,
                 width: '118rpx',
-                top: 315*2+'rpx',
+                top: 575*2+'rpx',
-                left: 0+'rpx',
+                left: -210*2+'rpx',
                 right: 0,
                 margin: 'auto',
                 height: '46rpx',
@@ -1040,8 +1040,8 @@ export default {
                 position: 'absolute',
                 zIndex: 99,
                 width: '118rpx',
-                top: 315*2+'rpx',
+                top: 575*2+'rpx',
-                left: 140*2+'rpx',
+                left: -70*2+'rpx',
                 right: 0,
                 margin: 'auto',
                 height: '46rpx',
@@ -1060,12 +1060,12 @@ export default {
               style:{
                 position: 'absolute',
                 zIndex: 99,
-                width: '574rpx',
+                width: '479rpx',
-                top: 170*2+'rpx',
+                top: 665*2+'rpx',
-                left: -164*2+'rpx',
+                left: 40*2+'rpx',
                 right: 0,
                 margin: 'auto',
-                height: '238rpx',
+                height: '180rpx',
               },
               isBtn: false
             },
@@ -1075,22 +1075,8 @@ export default {
                 position: 'absolute',
                 zIndex: 99,
                 width: '118rpx',
-                top: 315*2+'rpx',
+                top: 750*2+'rpx',
-                left: 0+'rpx',
+                left: 40*2+'rpx',
-                right: 0,
-                margin: 'auto',
-                height: '46rpx',
-              },
-              isBtn: 'jump'
-            },
-            {
-              url: this.webUrl + '/引导页素材/首页引导/Group12/Group 12-3.png',
-              style:{
-                position: 'absolute',
-                zIndex: 99,
-                width: '118rpx',
-                top: 315*2+'rpx',
-                left: 140*2+'rpx',
                 right: 0,
                 margin: 'auto',
                 height: '46rpx',
@@ -1098,7 +1084,17 @@ export default {
               isBtn: 'next'
             }
           ]
-          this.toEle('xpsx', imgs)
+          this.setFunctionGuideData({
+            imgs: imgs,
+            btnGroupPosition: '',
+            tipsPosition: '',
+            position: {
+              top: this.messageIcon.top + 'px',
+              left:  this.messageIcon.left + 'px',
+              width:  `${this.messageIcon.width}px`,
+              height: `${this.messageIcon.height}px`,
+            }
+          })
           return
         }
         if(this.functionGuideData.step == 13) {
@@ -1113,12 +1109,12 @@ export default {
                 style:{
                   position: 'absolute',
                   zIndex: 99,
-                  width: '534rpx',
+                  width: 291.5*2+'rpx',
-                  top: '140rpx',
+                  top: 280*2+'rpx',
-                  left: '230rpx',
+                  left: 10*2+'rpx',
                   right: 0,
                   margin: 'auto',
-                  height: '280rpx',
+                  height: 116.5*2+'rpx',
                 },
                 isBtn: false
               },
@@ -1129,7 +1125,7 @@ export default {
                   zIndex: 99,
                   width: '117rpx',
                   top: 213*2+'rpx',
-                  left: -20*2+'rpx',
+                  left: -280*2+'rpx',
                   right: 0,
                   margin: 'auto',
                   height: '46rpx',
@@ -1143,7 +1139,7 @@ export default {
                   zIndex: 99,
                   width: '117rpx',
                   top: 213*2+'rpx',
-                  left: 140*2+'rpx',
+                  left: -150*2+'rpx',
                   right: 0,
                   margin: 'auto',
                   height: '46rpx',
@@ -1156,7 +1152,61 @@ export default {
           }
           return
         }
-        
+        if(this.functionGuideData.step == 14) {
+          if(menusUrl.indexOf(urls[14]) < 0) {
+            this.$refs.FunctionGuide.next()
+            return
+          }
+          if(menusUrl.indexOf(urls[14]) > -1) {
+            const imgs = [
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group14/Group 14-1.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '539rpx',
+                  top: 80*2+'rpx',
+                  left: 100*2+'rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '265rpx',
+                },
+                isBtn: false
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group14/Group 14-2.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: 213*2+'rpx',
+                  left: 150*2+'rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'jump'
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group14/Group 14-3.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: 213*2+'rpx',
+                  left: 10*2+'rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'next'
+              },
+            ]
+            const index = menusUrl.indexOf(urls[14])
+            this.toEle('box-item' + index, imgs)
+          }
+          return
+        }
         
       }
     },
@@ -1165,6 +1215,7 @@ export default {
         if(res.left + res.width / 2 > this.screenWidth) {
           this.$nextTick(()=> {
             this.scrollView = id
+            this.imgs = imgs
           })
           return
         }
@@ -1548,7 +1599,7 @@ export default {
     position: absolute;
     top: 0;
     left: -21rpx;
-    z-index: 2;
+    z-index: -1;
     width: calc(100% + 40rpx);
     height: 180rpx;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F0F0F0 40%, #F0F0F0 100%);

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