MiniScmV3/components/guide/guide.vue

<template>
	<view v-if="show" class="main" @touchmove.stop>
		<view class="rect-shadow"
			:style="{'width':width+'px','height':height+'px','left':left+'px',top:top+'px','border-radius': noticeArray[currentIndex].radius?noticeArray[currentIndex].radius+'rpx':'' }">
		</view>
		<template v-if="noticeArray[currentIndex].type == 'left' ">
			<view class="show-message_left" :style="{'top': top +'px', 'right': winWidth-right+width+20+'px' }">
				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
			</view>
		</template>
		<template v-if="noticeArray[currentIndex].type == 'top' ">
			<view class="arrow"
				:style="{'height':'96rpx','width':'96rpx','top': (top-height-topMsgHeight+50) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right) +'px':'' }">
				<image mode="aspectFill" src="../../static/arrow-down.png" style="width: 96rpx;height: 96rpx;"></image>
			</view>
			<view :class="left<(winWidth/2)?'show-message_top_left':'show-message_top_right'"
				:style="{'top': (top-height-topMsgHeight-10) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right)+'px':''  }">
				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
			</view>
			<view @click="click" class="guide-next"
				:style="{'top': (top-height-topMsgHeight+170) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right) +'px':'' }">
				<image mode="aspectFit" src="../../static/i_know.png" style="width: 200rpx; height: 100rpx;"></image>
			</view>
		</template>
		<template v-if="noticeArray[currentIndex].type == 'right' ">
			<view class="show-message_right" :style="{'top': top +'px', 'left': (left+width+20) +'px' }">
				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
			</view>
		</template>
		<template v-if="noticeArray[currentIndex].type == 'bottom' ">
			<view class="arrow"
				:style="{'height':'96rpx','width':'96rpx','top': (top+height) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right) +'px':'' }">
				<image mode="aspectFill" src="../../static/arrow-top.png" style="width: 96rpx;height: 96rpx;"></image>
			</view>
			<view :class="left<(winWidth/2)?'show-message_bottom_left':'show-message_bottom_right'"
				:style="{'top': (top+height+50) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right) +'px':'' }">
				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
			</view>
			<view @click="click" class="guide-next"
				:style="{'top': (top+height+110) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right) +'px':'' }">
				<image mode="aspectFit" src="../../static/i_know.png" style="width: 200rpx; height: 100rpx;"></image>
			</view>
		</template>
		<!-- <view class="cover-wrap">
			<view class="guide-next" @tap="click" :style="{color: '#000000'}">{{nextText}}</view>
		</view> -->
	</view>
</template>

<script setup>
	import {
		watch,
		defineEmits,
		onBeforeMount,
		ref,
		getCurrentInstance,
		computed
	} from 'vue'
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		left: {
			type: [Number, String],
			default: ''
		},
		right: {
			type: [Number, String],
			default: ''
		},
		top: {
			type: [Number, String],
			default: ''
		},
		width: {
			type: [Number, String],
			default: ''
		},
		height: {
			type: [Number, String],
			default: ''
		},
		showMessage: {
			type: String,
			default: ''
		},
		currentIndex: {
			type: Number,
			default: 0
		},
		noticeArray: {
			type: Array,
			default: []
		}
	})

	let topMsgHeight = ref(0)
	let winWidth = ref(0)
	let nextText = '下一步'
	// const instance = getCurrentInstance()

	// watch(() => props.currentIndex, (oldValue, newValue) => {
	// 	console.log('currentIndex', newValue)
	// 	console.log(props)
	// 	if (newValue <= props.noticeArray.length) {
	// 		if (newValue != props.noticeArray.length && props.noticeArray[newValue].type == 'top') {
	// 			const className = props.left < (winWidth.value / 2) ? '.show-message_top_left' :
	// 				'.show-message_top_right'
	// 			const query = uni.createSelectorQuery().in(instance);
	// 			query.select(className).boundingClientRect(data => {
	// 				// 29px 为一行语句的高度
	// 				topMsgHeight.value = data.height - 29
	// 			}).exec();
	// 		}
	// 	}
	// })
	const emit = defineEmits(['click'])

	function click() {
		emit('click')
	}
	onBeforeMount(() => {
		winWidth.value = uni.getWindowInfo().windowWidth
	})
</script>

<style lang="scss">
	.main {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
	}

	.rect-shadow {
		position: absolute;
		border-radius: 12px;
		box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
		pointer-events: none;
	}

	.arrow {
		position: absolute;
	}

	.show-message_left,
	.show-message_top_left,
	.show-message_top_right,
	.show-message_right,
	.show-message_bottom_left,
	.show-message_bottom_right {
		position: absolute;
		border-radius: 12rpx;
		background-color: rgba(0, 0, 0, .5);
		text-align: center;
		pointer-events: none;
		color: #fff;
		font-size: 24rpx;
		max-width: 30%;
		text-align: left;
	}

	.show-message_left::after {
		content: '';
		border-left: 12rpx solid rgba(0, 0, 0, .5);
		border-top: 12rpx solid transparent;
		border-right: 12rpx solid transparent;
		border-bottom: 12rpx solid transparent;
		width: 0;
		height: 0;
		position: absolute;
		top: 25%;
		right: -22rpx;
	}

	// .show-message_top_left::after,
	// .show-message_top_right::after {
	// 	content: '';
	// 	border-left: 12rpx solid transparent;
	// 	border-top: 12rpx solid rgba(0, 0, 0, .5);
	// 	border-right: 12rpx solid transparent;
	// 	border-bottom: 12rpx solid transparent;
	// 	width: 0;
	// 	height: 0;
	// 	position: absolute;
	// 	top: 100%;
	// }

	.show-message_top_left::after {
		left: 20%;
	}

	.show-message_top_right::after {
		right: 20%;
	}

	.show-message_right::after {
		content: '';
		border-left: 12rpx solid transparent;
		border-top: 12rpx solid transparent;
		border-right: 12rpx solid rgba(0, 0, 0, .5);
		border-bottom: 12rpx solid transparent;
		width: 0;
		height: 0;
		position: absolute;
		top: 25%;
		left: -24rpx;
	}

	// .show-message_bottom_left::after,
	// .show-message_bottom_right::after {
	// 	content: '';
	// 	border-left: 12rpx solid transparent;
	// 	border-top: 12rpx solid transparent;
	// 	border-right: 12rpx solid transparent;
	// 	border-bottom: 12rpx solid rgba(0, 0, 0, .5);
	// 	width: 0;
	// 	height: 0;
	// 	position: absolute;
	// 	top: -22rpx;
	// }

	.show-message_bottom_left::after {
		left: 20%;
	}

	.show-message_bottom_right::after {
		right: 20%;
	}

	.guide-next {
		position: absolute;
	}

	// .cover-wrap {
	// 	width: 100vw;
	// 	height: 100vh;
	// 	top: 0;
	// 	left: 0;
	// 	position: absolute;

	// 	.guide-next {
	// 		position: absolute;
	// 		padding: 0 40rpx;
	// 		padding: 16rpx 32rpx;
	// 		height: 40rpx;
	// 		background-color: #FFFFFF;
	// 		text-align: center;
	// 		font-size: 28rpx;
	// 		border-radius: 38rpx;
	// 		position: absolute;
	// 		bottom: 60rpx;
	// 		left: 50%;
	// 		transform: translate(-50%, 0);
	// 	}
	// }
</style>