Task：指引功能

components/FunctionGuide.vue

@@ -0,0 +1,186 @@
+<template>
+	<view v-if="show" class="guide-remark white">
+		<view class="box" :style="[functionGuideData.position]">
+			<!-- <view class="tips flex" :style="{top: functionGuideData.tipsPosition || '-110rpx'}">
+				{{ functionGuideData.tips }}
+			</view> -->
+			<view class="btn-group flex_center" :style="{bottom: functionGuideData.btnGroupPosition || '-150rpx'}">
+				<view class="btn flex_center" @click="jump">跳过</view>
+				<view class="btn flex_center" @click="next">{{ functionGuideData.step==maxStep ? '知道了' : '下一步' }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	let timer = null
+	let flag = false
+	export default {
+		props: {
+			maxStep: {
+				type: Number,
+				default: 3
+			},
+			guideData: {
+				type: Object,
+				default: ()=> {
+					return {
+						step: 0,
+						tips: '', // 介绍
+						tipsPosition: '', // 介绍 显示位置
+						btnGroupPosition: '', // 按钮组显示位置
+						position: {}
+					}
+				}
+			}
+		},
+		data() {
+			return {
+				show: false,
+				functionGuideData: {}
+			}
+		},
+		watch: {
+			guideData: {
+				deep: true,
+				immediate: false,
+				handler(data) {
+					this.functionGuideData = data
+				}
+			}
+		},
+		methods: {
+			init() {
+				if (this.show) return
+				setTimeout(() => {
+					// const show = uni.getStorageSync('showGuide')
+					const show = false
+					if (!show) {
+						this.show = true
+						this.$parent.setFunctionGuideData({ step: 1 })
+					}
+				}, 1000)
+			},
+			jump() {
+				this.$parent.setFunctionGuideData({ step: 'jump' })
+				this.setFunctionGuideState()
+				// 标记状态，只有首次访问小程序时显示指引
+				uni.setStorageSync('showGuide', 1)
+			},
+			next() {
+				this.throttle(() => {
+					if (this.functionGuideData.step == this.maxStep) {
+						this.jump()
+						return
+					}
+					let step = this.functionGuideData.step
+					this.$parent.setFunctionGuideData({ step: step + 1 })
+				}, 800)
+			},
+			setFunctionGuideState() {
+				this.show = false
+			},
+
+			/* 节流 */
+			throttle(fn) {
+				if (!flag) {
+					flag = true
+					typeof fn === 'function' && fn()
+					timer = setTimeout(() => {
+						flag = false
+					}, 800)
+				}
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.plus {
+		width: 140rpx;
+		height: 2rpx;
+		position: relative;
+
+		.in-border {
+			border: 2rpx dashed #fff;
+			width: 110rpx;
+			height: 110rpx;
+			border-radius: 50%;
+			position: absolute;
+			left: 10rpx;
+			top: -55rpx;
+		}
+
+		.plus-icon {
+			background: #fff;
+			border-radius: 50%;
+			overflow: hidden;
+			width: 92rpx;
+			height: 92rpx;
+		}
+	}
+
+	.guide-remark {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 20230828;
+
+		.box {
+			position: absolute;
+			z-index: 10;
+			width: 686rpx;
+			border-radius: 24rpx;
+			left: 32rpx;
+			box-shadow: 0 0 0 100vh rgba(0, 0, 0, .6);
+			transition: all 0.3s ease;
+
+			.tips {
+				width: 100%;
+				background: #bee9ff;
+				border-radius: 24rpx;
+				padding: 20rpx 50rpx;
+				box-sizing: border-box;
+				position: absolute;
+				left: 0;
+				top: -110rpx;
+				z-index: 2;
+				font-size: 28rpx;
+				transition: top 0.3s ease;
+			}
+
+			.btn-group {
+				width: 100%;
+				position: absolute;
+				left: 50%;
+				transform: translateX(-50%);
+				font-size: 32rpx;
+				z-index: 2;
+				transition: bottom 0.3s ease;
+
+				.btn {
+					width: 240rpx;
+					height: 84rpx;
+					border-radius: 52rpx;
+					border: 2rpx solid #FFFFFF;
+					background: #fff;
+					margin: 0 30rpx;
+          white-space: nowrap;
+				}
+			}
+		}
+	}
+
+	.flex {
+		display: flex;
+		align-items: center;
+	}
+
+	.flex_center {
+		@extend .flex;
+		justify-content: center;
+	}
+</style>

mixins/GuideMixins.js

@@ -0,0 +1,37 @@
+export default {
+  data() {
+    return {
+      scrollView: '',
+      functionGuideData: {
+        step: 0,
+        tips: '', 
+        tipsPosition: '', 
+        btnGroupPosition: '', 
+        position: {}
+      },
+      screenWidth: 0,
+      scrollLeft: 0,
+    }
+  },
+  onLoad() {
+    this.$refs.FunctionGuide.init()
+  },
+  methods: {
+    setFunctionGuideData(data) {
+      this.functionGuideData = {
+        ...this.functionGuideData,
+        ...data
+      }
+      this.showFunctionGuide()
+    },
+    getElementData(el, cb) {
+      const query = uni.createSelectorQuery().in(this)
+      query.select(el).boundingClientRect().exec((res)=> {
+        if(res[0]) {
+          cb(res[0])
+        }
+      })
+    },
+    
+  }
+}

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">
+        <scroll-view scroll-x :scroll-into-view="scrollView"  scroll-with-animation >
-          <view
+          <view class="menus-list">
-            v-for="(item, index) in menus"
+            <view
-            :key="index"
+              v-for="(item, index) in menus"
-            class="item flex flex-col ai-center"
+              :key="index"
-            @click="$global.commonJump(item.uniapp_url)"
+              class="item flex flex-col ai-center"
-          >
+              @click="$global.commonJump(item.uniapp_url)"
-            <image
+              :id="'box-item' + (index + 2)"
-              :src="item.pic"
+            >
-              mode="scaleToFill"
+              <image
-              class="img"
+                :src="item.pic"
-            />
+                mode="scaleToFill"
-            <view class="one-t tc menu-name">
+                class="img"
-              {{ item.name }}
+              />
+              <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;