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

<template>
	<view class="guide-wrapper">
		<view v-if="currentType == 'level-button-tip'" class="guide-container position-relative"
			@click="buttonMessage('confirm')">
			<!-- top: 55px; 相当于 上间隔 -->
			<view class="mask-bg-07" :style="{height:guideHeight+'px'}"></view>
			<!-- 中心位置 225 -->
			<view style="width: 750rpx;height: 231px;">
				<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/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'" 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>
			<!-- 计算剩余空白 -->
			<view class="mask-bg-07 flex-sub"></view>
		</view>
		<view v-if="currentType == 'device-tip'"
			class="guide-container justify-center align-center position-relative mask-bg-07"
			@click="buttonMessage('confirm')">
			<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" @click="buttonMessage('confirm')">

			<!-- top: 55px; 相当于 上间隔 -->
			<view class="mask-bg-07" :style="{height:guideHeight+'px'}"></view>
			<!-- 中心位置 225 -->
			<view style="width: 750rpx;height: 284px;">
				<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-plan@3x.png">
						</image>
					</view>
					<view class="position-absolute-center">
						<text class="text-white text-14px text-lines2"
							style="top: -30rpx;left:90rpx; width: 300rpx;">请先定制属于您的专属计划,好的开始是成功的一半。</text>
					</view>
				</view>
				<view style="width: 750rpx;height: 120px;" class="flex flex-direction-row">
					<!-- 32+ 60/2 -->
					<view style="width: 62px;" class="mask-bg-07"></view>
					<image style="width: 90px;height: 150px; opacity: 0.7;"
						src="../../../static/common/subNVue/guide/guide-rect-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 == 'actionJumpPlay'" class="guide-container position-relative"
			@click="buttonMessage('confirm')">
			<!-- 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"
			@click="buttonMessage('confirm')">
			<!-- top: 55px; 相当于 上间隔 -->
			<view class="mask-bg-07" :style="{height:guideHeight+'px'}"></view>
			<!-- 中心位置 225 -->
			<view style="width: 750rpx;height: 764rpx;">
				<view style="height: 596rpx;" class="mask-bg-07">
					<view class="position-absolute-center" style="top: 0;left:31rpx;">
						<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: -5px;">请先连接蓝牙设备.</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: 168rpx;" class="flex flex-direction-row">
					<!-- 这里width 当做 left -->
					<view class="mask-bg-07" :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"></view>
				</view>
			</view>
			<!-- 计算剩余空白 -->
			<view class="mask-bg-07 flex-sub"></view>
		</view>

		<view v-if="currentType == 'level-game-tip'"
			class="guide-container justify-center align-center position-relative mask-bg-07"
			@click="buttonMessage('confirm')">
			<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 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
					: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>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['systemInfo', 'navHeight', 'tabbarHeight']),
		data() {
			return {
				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
				},

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

				},

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

				rotationJumpInfo: {
					title: '解锁左右旋跳',
					firstText: '此为左旋跳图标，通过向左旋跳的方式消除标志块',
					firstImage: '../../../static/modal/action-jump/directionJumpWhite.png',
					firstDirection: -1,
					firstWidth: 68,
					firstHeight: 68,
					secondText: '此为右旋跳图标，通过向右旋跳的方式消除标志块',
					secondImage: '../../../static/modal/action-jump/directionJumpWhite.png',
					secondDirection: 1,
					secondWidth: 68,
					secondHeight: 68
				}
			}
		},
		created() {
			console.log('*********一个guide created')
			const vm = this;
			// for (let i = 1; i < 20; i++) {
			// 	this.lists.push('item' + i);
			// }
			uni.$on('guide-popup', (data) => {
				vm.title = data.title;
				vm.content = data.content;
				vm.currentType = data.type;
				vm.operationItem = data.operationItem;
				let _viewData = data.item;
				//获取类型
				vm.hiddenType = (_viewData && _viewData.hiddenType) || 'none';
				console.log("vm.hiddenType:", 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.systemInfo.statusBarHeight
					vm.guideHeight = _viewData.top - 298;
					vm.guideLeft = _viewData.left - _viewData.width / 2 + 5;
				} else if (vm.currentType == "plan") {
					vm.guideHeight = vm.systemInfo.screenHeight - 284 - 32;
					// vm.guideLeft = 55;
				} else if (vm.currentType == "level-button-tip") {
					//首页提示选择关卡
					vm.guideHeight = vm.systemInfo.screenHeight - 284 - 32 + 3;
					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) {

				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() {
				console.log('hidePupup');
				uni.getCurrentSubNVue().hide('auto', 250);
				setTimeout(() => {
					this.currentType = 'none';
				}, 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>