Task：指引功能

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) {