ProAdvanced/components/code-elf-guide/code-elf-guide.vue

<template>
	<view class="content">
		<view class="swiper">
			<!-- 计划 -->
			<view class="swiper-item" v-if="thisCurrent==0">
				<view class="swiper-project" :class="thisCurrent==0&&bShow?'active':''">
					<view style="display: flex;flex-direction: column;" :style="{'margin-top' :projectTop+'px'}">
						<view @tap="launchFlag(false)">
							<image style="margin-top: -35rpx;" :style="{width:projectWith+'px', height:projectHeight+'px'}" src="/static/guide/project_target.png"></image>
						</view>

						<image style="width: 80rpx;height: 80rpx; margin: 35rpx 0 0 75rpx;" src="/static/guide/project_handle.png" mode="aspectFit"></image>
					</view>

					<view style="display: flex; flex-direction: column;margin-top: 200rpx;">
						<image style="width: 120rpx;height: 80rpx;" src="/static/guide/project_arrow.png" mode="aspectFit"></image>
						<image style="margin-left: 90rpx; width: 340rpx;height: 200rpx;" src="/static/guide/project_tip.png" mode="aspectFit"></image>
					</view>

				</view>
				<view style="position: absolute;  bottom: 200rpx; width: 100%; display:flex; justify-content: center;">
					<view @tap="launchFlag(true)">
						<image style="width: 120px;height: 45px;" src="/static/guide/BLE_tip.png"></image>
					</view>
				</view>
			</view>
			<!-- 下滑连接蓝牙提示 -->
			<view class="swiper-item" v-if="thisCurrent==1">
				<view class="swiper-bluetooth">
					<image style="margin: 10rpx;  width: 50rpx;height: 50rpx;" src="/static/guide/BLE_arrow.png" mode="aspectFit"></image>
					<image style="width: 292rpx;height: 48rpx;" src="/static/guide/BLE_text_1.png" mode="aspectFit"></image>
					<image style="width: 80rpx;height: 80rpx; margin: 188rpx 0 17rpx 0;" src="/static/guide/BLE_icon.png" mode="aspectFit"></image>
					<image style="width: 571rpx;height: 52rpx;" src="/static/guide/BLE_text_2.png" mode="aspectFit"></image>
					<view @tap="launchFlag(true)">
						<image style=" width: 243rpx;height: 90rpx;margin-top: 54rpx;" src="/static/guide/BLE_tip.png"></image>
					</view>
				</view>
			</view>
			<!-- 提示调整添加蓝牙设备 -->
			<view class="swiper-item" v-if="thisCurrent==3">
				<!-- <button>{{deviceTop}}</button> -->
				<view class="swiper-device active">

					<view style="display: flex;flex-direction: column;margin-top: 403px;" :style="{'margin-top' :deviceTop+'px'}">
						<view @tap="launchFlag(false)">
							<image style="margin-top: -35rpx;" :style="{width:deviceWith+'px', height:deviceHeight+'px'}" src="/static/guide/device_target.png"></image>
						</view>
						<image style="width: 80rpx;height: 80rpx; margin: 35rpx 0 0 75rpx;" src="/static/guide/project_handle.png" mode="aspectFit"></image>
					</view>
					<view style="display: flex; flex-direction: row; margin-top: -500rpx;">
						<image style="margin: 90rpx 30rpx 0 150rpx;  width: 120rpx;height: 80rpx;" src="/static/guide/device_arrow.png"
						 mode="aspectFit"></image>
						<image style="width: 394rpx;height: 123rpx;" src="/static/guide/device_tip.png" mode="aspectFit"></image>
					</view>

					<view style="display: flex;align-self: center;margin-top: -200px;">
						<view @tap="launchFlag(true)">
							<image style="width: 120px;height: 45px;" src="/static/guide/BLE_tip.png"></image>
						</view>
					</view>
				</view>

			</view>
			<!-- 连接设备提示 -->
			<view class="swiper-item" v-if="thisCurrent==4">
				<!-- <button>{{deviceTop}}</button> -->
				<view class="swiper-device active">
					<!-- <view style="display: flex;align-self: center;margin-top: 80px;"> -->
					<!-- <view @tap="launchFlag(true)">
							<image style="width: 120px;height: 45px;" src="/static/guide/BLE_tip.png"></image>
						</view> -->
					<!-- </view> -->
					<!-- 125 -->
					<view style="display: flex;flex-direction: column;margin-top: 403px;" :style="{'margin-top' :deviceTop+'px'}">
						<view @tap="launchFlag(false)">
							<image style="margin-top: -35rpx;" :style="{width:deviceWith+'px', height:deviceHeight+'px'}" src="/static/guide/device_target.png"></image>
						</view>
						<image style="width: 80rpx;height: 80rpx; margin: 35rpx 0 0 75rpx;" src="/static/guide/project_handle.png" mode="aspectFit"></image>
					</view>
					<view style="display: flex; flex-direction: row; margin-top: -500rpx;">
						<image style="margin: 90rpx 30rpx 0 150rpx;  width: 120rpx;height: 80rpx;" src="/static/guide/device_arrow.png"
						 mode="aspectFit"></image>
						<image style="width: 394rpx;height: 123rpx;" src="/static/guide/device_tip.png" mode="aspectFit"></image>
					</view>

					<view style="display: flex;align-self: center;margin-top: 200px;">
						<view @tap="launchFlag(true)">
							<image style="width: 120px;height: 45px;" src="/static/guide/BLE_tip.png"></image>
						</view>
					</view>

				</view>

			</view>
			<!-- 拳击血量提示 -->
			<view class="swiper-item" v-if="thisCurrent==5">
				<view class="swiper-device active">
					<view class="guide-vertical-container">
						<view class="guide-vertical-bar">
							<view class="guide-vertical-child" v-for="(item, index) in 15" :key="index">
								<view :class="20>=index+1? 'guide-vertical-active':'guide-vertical-inactive'"></view>
								<!-- :class="index%5 == 0?'':'guide-text-hidden'" -->
								<view  class="guide-vertical-text guide-text-hidden">{{index+1}}</view>
							</view>
							<view style="height:30rpx"></view>
							<image class="guide-vertical-boxing" src="/static/guide/boxingHitUp.png"></image>
						</view>
						<view class="guide-vertical-mid ">
							<view style="margin: 80rpx 0 120rpx 30rpx; position: relative;"  @tap="launchFlag(false)">
								<image style="position: relative; width: 280rpx;height: 88rpx;" src="/static/guide/boxingHitButton.png"></image>
								<view style="position: absolute;top: 25rpx; left: 120rpx;right:35rpx; color: #FFF;">立即体验</view>
							</view>
							
							<view style="position: relative;" >
								<image style="position: relative; width: 400rpx;height: 170rpx;" src="/static/guide/boxingHitMid.png"></image>
								<!-- 打击拳击柱越快或力量越大力量条会越快增长哦！ -->
								<view v-if="thisCurrentMode == 'calorieMode'" style="position: absolute;top: 70rpx; left: 45rpx;right:35rpx; color: #000;">跑的越快速度条会增长越快哦！</view>
								<view v-else style="position: absolute;top: 70rpx; left: 45rpx;right:35rpx; color: #000;">对着沙袋拳拳到肉，让对方的飙血吧！</view>
							
							</view>
						</view>
						<view class="guide-vertical-bar">
							<view class="guide-vertical-child" v-for="(item, index) in 15" :key="index">
								<!-- :class="index%5 == 0?'':'guide-text-hidden'" -->
								<view  class="guide-vertical-text guide-text-hidden">{{index+16}}</view>
								<view :class="20>=index+16? 'guide-vertical-active':'guide-vertical-inactive'"></view>
							</view>
							<image class="guide-vertical-boxing" src="/static/guide/boxingHitUp.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <swiper v-if="false" class="swiper" :autoplay="autoplay" :duration="duration" :current="thisCurrent" @change="onChange">
		
			<swiper-item>
				<view class="swiper-project" :class="thisCurrent==0&&bShow?'active':''">
					<view style="display: flex;flex-direction: column;" :style="{'margin-top' :projectTop+'px'}">
						<image @tap="launchFlag(false)" style="margin-top: -35rpx;" :style="{width:projectWith+'px', height:projectHeight+'px'}" src="/static/guide/project_target.png"></image>
						<image style="width: 80rpx;height: 80rpx; margin: 35rpx 0 0 75rpx;" src="/static/guide/project_handle.png"
						 mode="aspectFit"></image>
					</view>

					<view style="display: flex; flex-direction: column;margin-top: 200rpx;">
						<image style="width: 120rpx;height: 80rpx;" src="/static/guide/project_arrow.png" mode="aspectFit"></image>
						<image style="margin-left: 90rpx; width: 340rpx;height: 200rpx;" src="/static/guide/project_tip.png" mode="aspectFit"></image>
					</view>
					
				</view>
				<view style="position: absolute;  bottom: 200rpx; width: 100%; display:flex; justify-content: center;">
					<image @tap="launchFlag(true)" style="width: 120px;height: 45px;" src="/static/guide/BLE_tip.png"></image>
				</view>
			</swiper-item>
			<swiper-item v-if="false">
				<view class="swiper-device" :class="thisCurrent==1&&bShow?'':''">
					<view style="display: flex;align-self: center;margin-top: 80px;">
						<image @tap="launchFlag(true)" style="width: 120px;height: 45px;" src="/static/guide/BLE_tip.png"></image>
					</view>
					<view style="display: flex;flex-direction: column;margin-top: 403px;" :style="{'margin-top' :deviceTop-125+'px'}">
						<image @tap="launchFlag(false)" style="margin-top: -35rpx;" :style="{width:deviceWith+'px', height:deviceHeight+'px'}" src="/static/guide/device_target.png"></image>
						<image style="width: 80rpx;height: 80rpx; margin: 35rpx 0 0 75rpx;" src="/static/guide/project_handle.png"
						 mode="aspectFit"></image>
					</view>
					<view style="display: flex; flex-direction: row; margin-top: -500rpx;">
						<image style="margin: 90rpx 30rpx 0 150rpx;  width: 120rpx;height: 80rpx;" src="/static/guide/device_arrow.png"
						 mode="aspectFit"></image>
						<image style="width: 394rpx;height: 123rpx;" src="/static/guide/device_tip.png" mode="aspectFit"></image>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-bluetooth">
					<image style="margin: 10rpx;  width: 50rpx;height: 50rpx;" src="/static/guide/BLE_arrow.png" mode="aspectFit"></image>
					<image style="width: 292rpx;height: 48rpx;" src="/static/guide/BLE_text_1.png" mode="aspectFit"></image>
					<image style="width: 80rpx;height: 80rpx; margin: 188rpx 0 17rpx 0;" src="/static/guide/BLE_icon.png" mode="aspectFit"></image>
					<image style="width: 571rpx;height: 52rpx;" src="/static/guide/BLE_text_2.png" mode="aspectFit"></image>
					<image @tap="launchFlag(true)" style="width: 243rpx;height: 90rpx;margin-top: 54rpx;" src="/static/guide/BLE_tip.png"></image>
				</view>
			</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: Number,
				default: 0
			},
			modeIndex: {
				type: Number,
				default: 0
			},
			
			currentMode:{
				type: String,
				default:"calorieMode"
			}

		},
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				autoplay: false,
				duration: 0,
				thisCurrent: 0,
				bShow: false,
				jumpover: '跳过',
				experience: '立即体验',
				deviceWith: 202,
				deviceHeight: 103,
				deviceTop: 503,
				projectTop: 95,
				projectWith: 106,
				projectHeight: 60,
				//设备对象
				DeviceObj: null,
				
				modalObj:null,
				
				thisCurrentMode:'',

			}
		},
		created() {
			this.thisCurrent = this.current;
			this.thisCurrentMode = this.currentMode;
		},
		watch: {

			current(val) {
				// console.log("====",val);
				this.thisCurrent = val;
			},
			currentMode(val) {
				// console.log("====",val);
				this.thisCurrentMode = val;
			}
		},
		methods: {
			setProjectObj(val) {
				this.bShow = true;
				this.projectTop = val.top;
				this.projectWith = val.width + 20;
				this.projectHeight = val.height + 30;
			},
			setDeviceObj(val) {
				this.bShow = true;
				this.deviceWith = val.width + 40;
				this.deviceHeight = val.height + 40;
				this.deviceTop = val.top;
				this.DeviceObj = val;

			},
			setModalObj(val){
				console.log("setModalObj:",val);
				this.modalObj = val;
			},
			setCurrent(val) {
				// console.log("设置val：",val);
				this.thisCurrent = val;
			},
			launchFlag: function(bOnlyHide) {
				/**
				 * 向本地存储中设置launchFlag的值，即启动标识；
				 */
				// uni.setStorage({
				// 	key: 'launchFlag',
				// 	data: true,1
				// });
				console.log(bOnlyHide, this.thisCurrent);
				this.bShow = false;
				this.$emit("hide", {
					current: this.thisCurrent,
					onlyHide: bOnlyHide,
					device: this.DeviceObj
				});
			},
			onChange(e) {
				this.thisCurrent = e.detail.current;
				// console.log("this.thisCurrent=",this.thisCurrent);
				this.$emit("change", e);
			}
		}
	}
</script>
<style>
	.content {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-size: 100% auto;
		padding: 0;
		z-index: 9999;
		box-sizing: border-box;
	}

	.swiper {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.71);
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		flex-direction: column;
		/* border: 1rpx solid #FFFFFF; */
	}

	.swiper-project {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		/* justify-content: center; */
		align-items: flex-start;
		flex-direction: row;
		opacity: 0;
		transition: opacity 1s;
	}

	.swiper-device {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		opacity: 0;
		transition: opacity 1s;
	}

	.active {
		opacity: 1;
	}

	.swiper-bluetooth {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.swiper-item-img {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.swiper-item-img image {
		width: 80%;
		height: 500rpx;
		border: 1rpx solid #000000;
	}

	.uniapp-img {
		height: 20%;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.uniapp-img image {
		width: 40%;
	}

	.jump-over,
	.experience {
		position: absolute;
		height: 60upx;
		line-height: 60upx;
		padding: 0 40upx;
		border-radius: 30upx;
		font-size: 32upx;
		color: #FFFFFF;
		border: 1px solid #FFFFFF;
		z-index: 999;
	}

	.jump-over {
		right: 45upx;
		top: 125upx;
	}

	.experience {
		right: 50%;
		margin-right: -105upx;
		bottom: 125upx;
	}
	
	
	/* Loader Bar */
	.guide-vertical-container {
		display: flex;
		position: absolute;
		top: 390rpx;
		left: 0;
		right: 0;
		/* bottom: 0; */
		display: flex;
		justify-content: space-between;
		/* border: 1rpx solid #000000; */
		/* pointer-events: none; */
	}
	
	.guide-vertical-bar {
		display: flex;
		flex-direction: column-reverse;
		position: relative;
	}
	
	.guide-vertical-mid{
		display: flex;
		flex-direction: column-reverse;
		position: relative;
	}
	
	.guide-vertical-boxing{
		position: absolute;
		/* top: 0; */
		left: 0;
		right: 0;
		bottom: -30rpx;
		height: 560rpx;
	}
	
	.guide-vertical-child {
		/* position: relative; */
		width: 70rpx;
		height: 20rpx;
		margin: 14rpx 24rpx 0 24rpx;
		display: flex;
		/* align-content: center; */
		justify-content: space-between;
	
	
	}
	
	.guide-vertical-text {
		color: #FFFFFF;
		font-size: 8px;
	}
	
	.guide-text-hidden {
		visibility: hidden;
	}
	
	.guide-vertical-active {
		background-color: #FFFFFF;
		width: 30rpx;
		height: 100%;
	}
	
	.guide-vertical-inactive {
		width: 30rpx;
		height: 100%;
		background: rgba(255, 255, 255, 0.3);
	}
</style>