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

<template>
	<view class="guide-wrapper">

		<view v-if="currentType == 'device-tip'"
			class="guide-container justify-center align-center position-relative mask-bg-07">
			<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 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: 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-bluetooth@3x.png">
						</image>
					</view>
					<view class="position-absolute-center">
						<text class="text-white text-14px" style="top: -10rpx;left:80rpx;">点击此处进行蓝牙连接</text>
					</view>
				</view>
				<view style="width: 750rpx;height: 84px;" 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: -16px;"
						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>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['systemInfo', 'navHeight', 'tabbarHeight']),
		data() {
			return {
				title: '',
				content: '',
				lists: [],
				isSelected: false,
				currentType: 'none',
				operationItem: null,
				guideHeight: 55,
				guideLeft: 166,
			}
		},
		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;
				// console.log(JSON.stringify(data),vm.currentType);
				if (vm.currentType == "actionJumpPlay") {
					let _viewData = data.item;
					// console.log(JSON.stringify(vm.systemInfo)); 
					// _viewData.height/4 = 27.5
					vm.guideHeight = _viewData.top + _viewData.height - _viewData.height / 4 - vm.systemInfo
						.statusBarHeight - 275;
				} else if (vm.currentType == "bluetoothConnect") {
					let _viewData = data.item;
					vm.guideHeight = _viewData.top + _viewData.height - _viewData.height / 4 - vm.systemInfo
						.statusBarHeight - 225;
					vm.guideLeft = _viewData.left - _viewData.width / 2 + 5;
				} else if (vm.currentType == "plan") {
					let _viewData = data.item;
					vm.guideHeight = vm.systemInfo.screenHeight - 284 - 32;
					// vm.guideLeft = 55;
				}
			})
		},
		beforeDestroy() {
			uni.$off('guide-popup')
		},
		methods: {
			switchSelected() {
				console.log('switchSelected', this.isSelected, !this.isSelected);
				this.isSelected = !this.isSelected;
				if (this.isSelected) {
					//this.buttonMessage('confirm');
					uni.setStorage({
						key: 'deviceDirectionPrompt',
						data: {
							isSelected: true
						}
					})
				} else {
					// this.buttonMessage('cancel');
					uni.setStorage({
						key: 'deviceDirectionPrompt',
						data: {
							isSelected: false
						}
					})
				}
			},

			buttonMessage(buttonEvent) {

				setTimeout(() => {
					const subNVue = uni.getCurrentSubNVue()
					uni.$emit('guide-popup-page', {
						type: 'button',
						messageType: this.currentType,
						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;

	}

	.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; */
	}
</style>