xdd-uniapp-new/components/FunctionGuide.vue

<template>
	<view v-if="show" class="guide-remark white">
		<view class="guid-wrap">
			<image 
				v-for="(img, index) in functionGuideData.imgs" 
				:key="index" 
				:style="[img.style]" 
				:src="img.url" 
				@click.stop="handleImg(img)"
				mode="aspectFit|aspectFill|widthFix" 
				lazy-load="true" >
			</image>
			<view class="box" :style="[functionGuideData.position]">
				<!-- <view class="tips flex" :style="{top: functionGuideData.tipsPosition || '-110rpx'}">
					{{ functionGuideData.tips }}
				</view> -->
				
			</view>
			<!-- <view class="btn-wrap flex_center" :style="[functionGuideData.btnGroupPosition]">
				<view class="btn flex_center" @click="jump">跳过</view>
				<view class="next-btn v12-primary 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: 2,
						tips: '', // 介绍
						tipsPosition: '', // 介绍 显示位置
						btnGroupPosition: '', // 按钮组显示位置
						position: {}
					}
				}
			}
		},
		data() {
			return {
				show: false,
				functionGuideData: {}
			}
		},
		watch: {
			guideData: {
				deep: true,
				immediate: false,
				handler(data) {
					this.functionGuideData = data
				}
			}
		},
		methods: {
			handleImg(img) {
				if(!img.isBtn) return
				if(img.isBtn === 'next') {
					this.next()
					return
				}
				if(img.isBtn === 'jump') {
					this.jump()
					return
				}
			},
			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>
.btn-wrap{
	position: absolute;
	z-index: 99;
}
.guid-wrap{
	position: relative;
	height: inherit;
	width: inherit;
}
.next-btn {
	color: #fff;
	padding: 2rpx 10rpx;
}
	.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>