ProAdvanced/platform/app-plus/subNVue/guide.nvue

<template>
	<view class="guide-wrapper">
		<view v-if="currentType == 'level-button-tip'" class="guide-container position-relative"
		style="width: 750rpx;flex: 1;" @click="buttonMessage('confirm',$event)">
			<!-- top: 55px; 相当于 上间隔 -->
			<view class="mask-bg-07"style="background-color: rgba(0, 0, 0, 0.7);" :style="{height:guideHeight+'px'}"></view>
			<!-- 中心位置 225 -->
			<view style="width: 750rpx;height: 231px; overflow:hidden">
				<view style="height: 200px; background-color: rgba(0, 0, 0, 0.7);" class="mask-bg-07">
					<view class="position-absolute-center" style="top: 0;left:100rpx;right: 0;">
						<image style="width: 488rpx;height: 366rpx;"
							src="../../../static/modal/level-tip/level-tip-box@2x.png">
						</image>
					</view>
					<view class="position-absolute-center">
						<text class="text-white text-14px text-lines2"
							style="top: -80rpx;left:70rpx; width: 300rpx;">点击此按钮选择关卡</text>
						<view v-if="hiddenType != 'firstInstallation' && hiddenType != 'normal'"
							class="flex flex-direction-row" style="top: -50rpx;left:50rpx;" @click="switchSelected()">
							<image v-if="!isSelected" style="width: 40rpx;height: 40rpx; margin-right: 20rpx;"
								src="../../../static/common/subNVue/guide/check-box.png"></image>
							<image v-else style="width: 40rpx;height: 40rpx; margin-right: 20rpx;"
								src="../../../static/common/subNVue/guide/check-box-selected.png"></image>
							<text class="text-15px text-white">不再提示</text>
						</view>
					</view>
				</view>
				<!-- <view style="width: 750rpx;height: 82rpx;" class="flex flex-direction-row">
					<view class="flex-sub mask-bg-07"></view>
					<view class="position-relative justify-center align-center"
						style="width: 147px;height: 82rpx; background-color: rgba(0,0,0,0.7);">
						<image style="width: 147px;height: 31px;" class="position-absolute-center"
							src="../../../static/modal/level-tip/level-tip-bg@2x.png"></image>
						<image style="width: 30px;height: 23px; "
							src="../../../static/modal/level-tip/level-tip-logo@2x.png"></image>
					</view>
					<view class="flex-sub mask-bg-07"></view>
				</view> -->
				<view style="width: 750rpx;height: 82rpx;" class="flex flex-direction-row">
					<view class="flex-sub mask-bg-07" style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>
					<view class="position-relative align-center"
						style="width: 248rpx;height: 104rpx; background-color: rgba(0,0,0,0.7);">
						<image class="position-absolute-center" style="width: 248rpx;height: 104rpx; top: 18rpx;"
							src="../../../static/modal/level-tip/level-tip-bg-orange.png"></image>
						<view
							style="margin-top: 38rpx; width: 72rpx; height: 12rpx; background-color: #FFFFFF; border-radius: 18px;">
						</view>
					</view>
					<view class="flex-sub mask-bg-07"style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>
				</view>
			</view>
			<!-- 计算剩余空白 -->
			<view class="mask-bg-07 flex-sub" style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>
		</view>
		<view v-if="currentType == 'device-tip'"class="guide-container justify-center align-center position-relative mask-bg-07"
		style="width: 750rpx;flex: 1;" @click="buttonMessage('confirm',$event)">
			<view class="mid">
				<image class="bind-tip-image" src="../../../static/modal/tip/bind-tip-bg.png"></image>
				<text class="text-16px text-center text-white"
					style="width: 500rpx;margin-bottom: 130rpx;">请将手柄十字键朝上插入绑带中，佩戴在右侧小腿侧面</text>
				<view v-if="hiddenType != 'firstInstallation'" class="flex flex-direction-row"
					@click="switchSelected()">
					<image v-if="!isSelected" style="width: 40rpx;height: 40rpx; margin-right: 20rpx;"
						src="../../../static/common/subNVue/guide/check-box.png"></image>
					<image v-else style="width: 40rpx;height: 40rpx; margin-right: 20rpx;"
						src="../../../static/common/subNVue/guide/check-box-selected.png"></image>
					<text class="text-15px text-white">不再提示</text>
				</view>
			</view>
		</view>
		<view v-if="currentType == 'plan'" class="guide-container position-relative"
		style="width: 750rpx;flex: 1;" @click="buttonMessage('confirm',$event)">

			<!-- top: 55px; 相当于 上间隔 -->
			<view class="mask-bg-07" style="background-color: rgba(0, 0, 0, 0.7);" :style="{height:guideHeight+'px'}"></view>
			<!-- 中心位置 225 -->
			<view style="width: 750rpx;height: 284px;overflow:hidden">
				<view style="height: 220px;width: 750rpx;background-color: rgba(0, 0, 0, 0.7);" class="mask-bg-07 position-relative">
					<view class="position-absolute-center-bottom " style="left: 0;right: 0;">
						<image style="width: 488rpx;height: 366rpx;" src="../../../static/common/subNVue/guide/guide-plan@3x.png">
						</image>
					</view>
					<view class="position-absolute-center">
						<!-- left:40rpx; -->
						<text class="text-white text-14px text-lines2"
							style="left:40rpx;  width: 300rpx;" :style="{top:planTextTop+'px'}">请先定制属于您的专属计划</text>
					</view>
				</view>
				<view style="width: 750rpx;height: 100px;" class="flex flex-direction-row position-relative">
					<!-- 32+ 60/2  原本长度62px，去除游戏和视频长度 + 72 左右，设置 134 px-->
					<view :style="{width: guideRectLeft+'px'}" class="mask-bg-07" style="background-color: rgba(0, 0, 0, 0.7);"></view>
					<image style="width: 90px;height: 100px; opacity: 0.7;" src="../../../static/common/subNVue/guide/guide-rect-mask.png"></image>
					<view  style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>
					<!-- 用于获取节点适配left -->
					<view class="position-absolute-center-around flex flex-direction-row" style="width: 750rpx;" >
						<block  v-for="(item,index) in tabbarList" :key="index">
							<view :ref="'tabbar'+index" 
							style="width: 90px;height: 100px; opacity: 0.1;">{{index}}</view>
						</block>
					</view>
				</view>
			</view>
			<!-- 计算剩余空白 -->
			<view class="mask-bg-07 flex-sub" style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>

		</view>

		<view v-if="currentType == 'actionJumpPlay'" class="guide-container position-relative"
		style="width: 750rpx;flex: 1;" @click="buttonMessage('confirm',$event)">
			<!-- top: 55px; 相当于 上间隔 -->
			<view class="mask-bg-07" :style="{height:guideHeight+'px'}"></view>
			<!-- 中心位置 275 -->
			<view style="width: 750rpx;height: 350px;">
				<view style="height: 200px;" class="mask-bg-07">
					<view class="position-absolute-center" style="top: 0;left:100rpx;">
						<image style="width: 488rpx;height: 366rpx;"
							src="../../../static/common/subNVue/guide/guide-mid.png">
						</image>
					</view>
					<view class="position-absolute-center">
						<text class="text-white text-14px" style="top: -30rpx;left:80rpx;">点击播放体验关卡对应关卡</text>
					</view>
				</view>
				<view style="width: 750rpx;height: 150px;" class="flex flex-direction-row">
					<view style="width: 166rpx;" class="mask-bg-07"></view>
					<image style="width: 200px;height: 200px; opacity: 0.7;top: -63rpx;"
						src="../../../static/common/subNVue/guide/guide-circle-mask.png"></image>
					<view class="mask-bg-07 flex-sub"></view>
				</view>
			</view>
			<!-- 计算剩余空白 -->
			<view class="mask-bg-07 flex-sub"></view>
		</view>
		<view v-if="currentType == 'bluetoothConnect'" class="guide-container position-relative"
		style="width: 750rpx;flex: 1;" @click="buttonMessage('confirm',$event)">
			<!-- top: 55px; 相当于 上间隔 -->
			<view class="mask-bg-07" style="background-color: rgba(0, 0, 0, 0.7);" :style="{height:guideHeight+'px'}"></view>
			<!-- 中心位置 225 :class="true?'border-1rpx-bottom-black':''"-->
			<view style="width: 750rpx;height: 382px;">
				<view style="height: 298px;background-color: rgba(0, 0, 0, 0.7);" class="mask-bg-07">
					<view class="position-absolute-center-bottom" style="left:31rpx;right: 0;">
						<image style="width: 442rpx;height: 372rpx;"
							src="../../../static/common/subNVue/guide/guide-bluetooth@3x.png">
						</image>
					</view>
					<view class="position-absolute-center">
						<text class="text-white text-14px" style="left: 20px;top: 50px;">请先连接蓝牙设备</text>
						<!-- <text class="text-left  text-white text-14px"
							style="width: 542rpx;">1、长按开关键3秒，绿灯连续闪烁为可连接状态.</text>
						<text class="text-left  text-white text-14px" style="width: 542rpx;">2、选择设备类型进行连接.</text>
						<text class="text-left  text-white text-14px"
							style="width: 542rpx;">3、手柄连接成功后，将手柄十字键朝上插入绑带中.</text>
						<text class="text-left  text-white text-14px" style="width: 542rpx;">4、用绑带将手柄朝上绑在右脚脚踝上.</text>
					 -->
					</view>
				</view>
				<view style="width: 750rpx;height: 336px;" class="flex flex-direction-row">
					<!-- 这里width 当做 left -->
					<view class="mask-bg-07" style="background-color: rgba(0, 0, 0, 0.7);":style="{width:guideLeft+'px'}"></view>
					<image style="width: 100px;height: 100px; opacity: 0.7;top: -12px;"
						src="../../../static/common/subNVue/guide/guide-circle-mask.png"></image>
					<view class="mask-bg-07 flex-sub" style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>
				</view>
			</view>
			<!-- 计算剩余空白 -->
			<view class="mask-bg-07 flex-sub" style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>
		</view>

		<view v-if="currentType == 'level-game-tip'"class="guide-container justify-center align-center position-relative mask-bg-07"
		style="width: 750rpx;flex: 1;"	@click="buttonMessage('confirm',$event)">
			<view class="game-mid">
				<view style="height: 278rpx;width: 750rpx;" class="position-relative">
					<view class="position-absolute-center" style="top: 0;left:0rpx;">
						<image style="width: 442rpx;height: 278rpx;"
							src="../../../static/common/subNVue/guide/level-game-title@2x.png"></image>
					</view>
					<view class="position-absolute-center">
						<text class="text-white text-14px"
							style="top: 0rpx;left:20rpx;">{{unlockLevelInfo.title}}</text>
					</view>
				</view>

				<view class="flex flex-direction-row align-center justify-center margin-17px">
					<text class="game-number">1</text>
					<text class="text-16px text-left text-white "
						style="width:476rpx;">{{unlockLevelInfo.firstText}}</text>
				</view>
				<image
					:style="{ width: unlockLevelInfo.firstWidth  + 'rpx', height: unlockLevelInfo.firstHeight  + 'rpx' ,transform:'scaleX('+unlockLevelInfo.firstDirection +')' }"
					:src="unlockLevelInfo.firstImage"></image>
				<view v-if="!unlockLevelInfo.secondHidden"
					class="flex flex-direction-row align-center justify-center margin-17px">
					<text class="game-number">2</text>
					<text class="text-16px text-left text-white "
						style="width:476rpx;">{{unlockLevelInfo.secondText}}</text>
				</view>
				<image v-if="!unlockLevelInfo.secondHidden"
					:style="{ width: unlockLevelInfo.secondWidth  + 'rpx', height: unlockLevelInfo.secondHeight  + 'rpx' ,transform:'scaleX('+unlockLevelInfo.secondDirection +')' }"
					:src="unlockLevelInfo.secondImage">
				</image>


				<!-- <image style="width: 232rpx;height: 78rpx;margin-top: 48rpx;"
					src="../../../static/common/subNVue/guide/level-game-next@2x.png"></image>
 -->

			</view>
		</view>

	</view>
</template>

<script>
	// 注意平台差异
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom')
	// #endif
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['systemInfo', 'navHeight', 'tabbarHeight','versionCodeState']),
		data() {
			return {
				//防止点击
				bShowComplete:false,
				title: '',
				content: '',
				lists: [],
				isSelected: false,
				currentType: 'none',
				/**
				 * 隐藏guide时候,随后的操作类型
				 */
				hiddenType: 'none',
				operationItem: null,
				guideHeight: 55,
				guideLeft: 166,

				//三个关卡的对应信息
				unlockLevelInfo: {
					title: '',
					firstText: '',
					firstImage: '',
					firstWidth: 0,
					firstHeight: 0,
					secondText: '',
					secondImage: '',
					secondWidth: 0,
					secondHeight: 0,
					secondHidden: false
				},

				midJumpInfo: {
					title: '解锁向上跳',
					// firstText: '请先确保手柄已经连接成功。',
					// firstImage: '../../../static/common/subNVue/guide/level-game-fab@2x.png',
					firstText: '通过向上跳的方式消除标志块',
					firstImage: '../../../static/modal/action-jump/midJumpWhite.png',
					firstDirection: 1,
					firstWidth: 68, //102,
					firstHeight: 68, //108,
					secondText: '通过向上跳的方式消除标志块',
					secondImage: '../../../static/modal/action-jump/midJumpWhite.png',
					secondDirection: 1,
					secondWidth: 68,
					secondHeight: 68,
					secondHidden: true,
				},

				directionJumpInfo: {
					title: '解锁左右跳',
					firstText: '此为左跳图标，通过向左跳的方式消除标志块',
					firstImage: '../../../static/modal/action-jump/directionJumpWhite-left.png',
					firstDirection: 1,
					firstWidth: 68,
					firstHeight: 68,
					secondText: '此为右跳图标，通过向右跳的方式消除标志块',
					secondImage: '../../../static/modal/action-jump/directionJumpWhite-right.png',
					secondDirection: 1,
					secondWidth: 68,
					secondHeight: 68,
					secondHidden: false
				},

				rotationJumpInfo: {
					title: '解锁左右旋跳',
					firstText: '此为左旋跳图标，通过向左旋跳的方式消除标志块',
					firstImage: '../../../static/modal/action-jump/rotateJumpWhite-left.png',
					firstDirection: 1,
					firstWidth: 68,
					firstHeight: 68,
					secondText: '此为右旋跳图标，通过向右旋跳的方式消除标志块',
					secondImage: '../../../static/modal/action-jump/rotateJumpWhite-right.png',
					secondDirection: 1,
					secondWidth: 68,
					secondHeight: 68,
					secondHidden: false
				},
				
				guideRectLeft:62,
				tabbarList:3,
				planTextTop:10
			}
		},
		created() {
			const vm = this;
			uni.$on('guide-popup', (data) => {
				vm.bShowComplete = true;
				console.log("vm.bShowComplete 1=:",vm.bShowComplete);
				setTimeout(()=>{
					vm.bShowComplete = false;
					console.log("vm.bShowComplete 2=:",vm.bShowComplete);
				},300)
				vm.title = data.title;
				vm.content = data.content;
				vm.currentType = data.type || 'none';
				vm.operationItem = data.operationItem;
				let _viewData = data.item;
				//获取类型
				vm.hiddenType = (_viewData && _viewData.hiddenType) || 'none';
				console.log("初始化时候hidden类型:", vm.hiddenType);
				if (vm.currentType == "actionJumpPlay") {
					// _viewData.height/4 = 27.5
					vm.guideHeight = _viewData.top + _viewData.height - _viewData.height / 4 - vm.systemInfo
						.statusBarHeight - 275;
				} else if (vm.currentType == "bluetoothConnect") {
					//+ _viewData.height - _viewData.height / 4
					vm.guideHeight =  _viewData.top - 382 + 55 + 15;//- 298
					vm.guideLeft = _viewData.left - _viewData.width / 2 + 5;
				} else if (vm.currentType == "plan") {
					vm.guideHeight = vm.systemInfo.safeArea.bottom - 284 - 32;
					// vm.guideLeft = 55;
					if(vm.versionCodeState.showGame&&vm.versionCodeState.showVideo){
						//显示5个栏目 
						vm.tabbarList = 5;
					}else if(vm.versionCodeState.showGame||vm.versionCodeState.showVideo){
						//显示4个栏目 
						vm.tabbarList = 4;
					}else {
						//默认3个
						vm.tabbarList = 3;	
					}
					setTimeout(()=>{
						dom.getComponentRect(vm.$refs[`tabbar${1}`][0], option => {
						    console.log('getComponentRect:', option)
							vm.guideRectLeft= option.size.left;
							if(vm.tabbarList == 5)
							{
								vm.guideRectLeft -= 7;
							}
						})
					},200)
					
					vm.planTextTop = vm.systemInfo.platform.indexOf("ios") != -1?0:10;
				} else if (vm.currentType == "level-button-tip") {
					//首页提示选择关卡
					let _iosHeight = vm.systemInfo.platform.indexOf("ios") != -1?1:0;
					vm.guideHeight = vm.systemInfo.safeArea.bottom - 284 - 32 + 3 + 6 ;
					const value = uni.getStorageSync('levelButtonPrompt');
					if (value) {
						vm.isSelected = value.isSelected;
					} else {
						vm.isSelected = false;
					}
				} else if (vm.currentType == "device-tip") {
					//提示绑带
					const value = uni.getStorageSync('deviceDirectionPrompt');
					if (value) {
						vm.isSelected = value.isSelected;
					} else {
						vm.isSelected = false;
					}
				} else if (vm.currentType == "level-game-tip") {
					if (_viewData.levelType == 'midJump') {
						vm.unlockLevelInfo = Object.assign({}, vm.midJumpInfo);
					} else if (_viewData.levelType == 'directionJump') {
						vm.unlockLevelInfo = Object.assign({}, vm.directionJumpInfo);
					} else if (_viewData.levelType == 'rotationJump') {
						vm.unlockLevelInfo = Object.assign({}, vm.rotationJumpInfo);
					}
				}
			})
		},
		beforeDestroy() {
			uni.$off('guide-popup')
		},
		methods: {
			switchSelected() {
				console.log('switchSelected', this.isSelected, !this.isSelected);
				this.isSelected = !this.isSelected;

				uni.$emit('guide-popup-page', {
					type: 'selected',
					messageType: this.currentType,
					isSelected: this.isSelected,
					operationItem: this.operationItem
				})

				// if (this.isSelected) {
				// 	uni.setStorage({
				// 		key: 'deviceDirectionPrompt',
				// 		data: {
				// 			isSelected: true
				// 		}
				// 	})
				// } else {
				// 	uni.setStorage({
				// 		key: 'deviceDirectionPrompt',
				// 		data: {
				// 			isSelected: false
				// 		}
				// 	})
				// }
			},
				
			buttonMessage(buttonEvent,e) {
				e.stopPropagation();
				if(this.bShowComplete)return;
				this.bShowComplete = true;
				console.log('关闭2')
				setTimeout(() => {
					const subNVue = uni.getCurrentSubNVue()
					uni.$emit('guide-popup-page', {
						type: 'button',
						messageType: this.currentType,
						hiddenType: this.hiddenType,
						confirm: buttonEvent == 'confirm' ? true : false,
						cancel: buttonEvent == 'cancel' ? true : false,
						info: buttonEvent + ' 该元素被点击了!',
						operationItem: this.operationItem
					})
				}, 260);

				this.hidePupup();
			},
			hidePupup() {
				uni.getCurrentSubNVue().hide('auto', 250);
			}
		}
	}
</script>

<style scoped lang="scss">
	.guide-wrapper {
		justify-content: center;
		align-items: center;
	}

	.guide-container {
		/* background-color: rgba(0, 0, 0, 0.3); */
		width: 750rpx;
		flex: 1;
	}

	.transparents-container {}


	.mid {
		justify-content: center;
		align-items: center;
		height: 700rpx;
		width: 300rpx;

	}

	.game-mid {
		justify-content: center;
		align-items: center;
		height: 850rpx;
		width: 750rpx;
	}

	.bind-tip-image {
		border-width: 14rpx;
		border-style: solid;
		border-color: #E5E5FF;
		background-color: #FFFFFF;
		width: 226rpx;
		height: 260rpx;
		margin-bottom: 50rpx;
	}

	.title {
		height: 100rpx;
		line-height: 100rpx;
		border-bottom-style: solid;
		border-bottom-width: 1rpx;
		border-bottom-color: #CBCBCB;
		flex: 0;
		font-size: 30rpx;
	}

	.scroller {
		height: 400rpx;
		padding: 8rpx 15rpx;
	}

	.content {
		color: #555555;
		font-size: 32rpx;
	}

	.message-wrapper {
		flex: 0;
		border-top-style: solid;
		border-top-width: 1rpx;
		border-top-color: #CBCBCB;
		height: 80rpx;
		align-items: flex-end;
	}

	.send-message {
		font-size: 30rpx;
		line-height: 80rpx;
		color: #00CE47;
		margin-left: 20rpx;
	}

	.cell {
		margin: 10rpx;
		padding: 20rpx 0;
		top: 10rpx;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		background-color: #5989B9;
	}

	.text {
		font-size: 30rpx;
		text-align: center;
		color: white;
	}


	.circle {
		width: 50px;
		height: 50px;
		border-width: 1rpx;
		border-color: #FF0000;
		border-style: solid;
		border-radius: 50%;
		position: absolute;
		top: 200rpx;
		left: 200rpx;
		background-color: rgba(255, 255, 255, 0);
		/* box-sizing: border-box; */
	}

	.su {
		position: relative;
		width: 750px;
		flex: 1;
		border-width: 1rpx;
		border-color: #FF0000;
		border-style: solid;
	}

	.lk {
		position: absolute;
		width: 100px;
		height: 200px;
		/* border-radius: 10px; */
		// border-width: 10px;
		// border-color: rgba(0, 0, 0, 0.4);
		// border-style: solid;
		border-top-color: #000000;
		border-top-width: 10px;
		border-bottom: 1rpx solid #000;

		top: 150px;
		/* margin-top: -250px; */
		left: 150px;
		/* margin-left: -250px; */
	}

	.game-number {
		border-radius: 18px;
		border-width: 1rpx;
		width: 22px;
		height: 22px;
		text-align: center;
		color: #FFFFFF;
		border-color: #FFFFFF;
		margin-right: 13px;
	}
</style>