ProAdvanced/pages/platform-page/guide/guide-ble-scroll.vue

<template>
	<view>
		<uni-nav-bar id="nav-bar" status-bar="true" @clickLeft="onBack()" @clickRight="onNavUpdateDevice()"
			title="蓝牙连接指导" color="#000000" fixed="true" :border="false">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="p-left-arrow" src="../../../static/p-left-arrow.png"></image>
				</view>
			</view>
			<!-- <view slot="right">
				<view class=" flex align-center " style="margin-right: 10rpx;">
					<image style="width: 60rpx;height: 50rpx;" src="../../../static/devicesIconSimple/upgrade.png">
					</image>
				</view>
			</view> -->
		</uni-nav-bar>

		<view class="swiper">
			<!-- 1 -->
			<view class="flex justify-center align-center" style="padding-top: 60px;">
				<view style="width: 590rpx; height: 626rpx;" class="position-relative">
					<view class="bluetooth-guide-number" style="position: absolute;left: 94rpx;top: 8rpx;">1</view>
					<image style="width: 590rpx; height: 626rpx;"
						src="../../../static/guide/blutooth/guide-ble-1@2x.png">
					</image>
				</view>

			</view>
			<!-- 2 -->
			<view class="flex justify-center align-center flex-direction" style="margin-top: 60px;">

				<image style="width: 354rpx; height: 306rpx; margin-bottom: 28rpx;"
					src="../../../static/guide/blutooth/guide-ble-device.png">
				</image>
				<view class="position-relative">
					<image style="width: 520rpx; height:166rpx;" src="../../../static/guide/blutooth/boxMid@2x.png">
					</image>
					<view class="position-absolute-center text-regular" style="width: 438rpx;height: 96rpx;top: 26rpx;">
						长按游戏设备开关3秒，设备灯连续闪烁为可连接状态</view>
				</view>
				<view class="bluetooth-guide-number" style="margin-top: 36rpx;">2</view>
			</view>
			<!-- 3 -->
			<view class="flex justify-start align-center flex-direction" style="margin-top: 60px;">

				<view class="card-view padding-top padding-bottom" :style="{'z-index': threeZIndex}"
					v-for="(item,index) in devicesList" :key="index" :class="item.bRatio?'hardware-border':''"
					:id="'task_'+index">
					<view class="flex justify-between align-center">
						<view class="flex justify-start align-center">
							<image style="margin-left: 20rpx; width: 200rpx;height: 120rpx;" :src="item.icon"
								mode="aspectFit">
							</image>
							<view style="width: 350rpx;margin-left: 10rpx;">
								<view style="margin: 20rpx 0rpx; font-weight: bold; font-size: 18px; color: #565656;">
									{{item.cname}}
								</view>
								<view style="font-size: 12px; white-space:pre-wrap;" class="make-text-bPurple">
									{{item.describe}}
								</view>
							</view>

						</view>
						<!-- item.bRatio -->
						<image style="margin-right: 60rpx; width: 60rpx;height: 60rpx;"
							:src="threeZIndex == 1100?'/static/devicesOther/radio-b.png':'/static/devicesOther/radio-g.png'"
							mode="aspectFit"></image>
					</view>
				</view>
				<!-- <view :style="{height:threeTipHeight+'px'}"></view> -->
				<view class="flex justify-end">
					<view class="bluetooth-guide-number" style="margin-top: 32rpx;">3</view>
					<view class="position-relative">
						<image style="width: 462rpx; height:206rpx;"
							src="../../../static/guide/blutooth/boxRight@2x.png">
						</image>
						<view class="position-absolute-center text-regular"
							style="width: 392rpx;height: 144rpx;top: 44rpx;">选择设备类型连接，按钮勾选上表示手柄连接成功。如果连接失败请重试</view>
					</view>
				</view>

			</view>
			<!-- 4 -->
			<view class="flex justify-center align-center flex-direction" style="margin-top: 60px;">

				<image style="width: 446rpx; height: 384rpx; margin-bottom: 28rpx;"
					src="../../../static/guide/blutooth/guide-ble-bind.png">
				</image>
				<view class="position-relative">
					<image style="width: 520rpx; height:166rpx;" src="../../../static/guide/blutooth/boxMid@2x.png">
					</image>
					<view class="position-absolute-center text-regular" style="width: 438rpx;height: 96rpx;top: 26rpx;">
						请将手柄十字键朝上插入绑带中，用绑带将手柄朝上绑在右脚脚踝上</view>
				</view>
				<view class="bluetooth-guide-number" style="margin-top: 36rpx;">4</view>
			</view>
			<!-- 5 -->
			<view class="flex justify-start align-center flex-direction" style="padding: 60px 0;">

				<!-- <view :style="{height:threeTipHeight+'px'}"></view> -->
				<view class="position-relative">
					<image style="width: 520rpx; height:162rpx;" src="../../../static/guide/blutooth/boxMid@2x.png">
					</image>
					<view class="position-absolute-center flex align-center justify-center"
						style="width: 438rpx;top: 32rpx;">
						<image style="width: 60rpx;height:60rpx;margin-right: 28rpx;"
							src="../../../static/guide/blutooth/guide-ble-finish@2x.png"></image>
						<view class=" text-regular " style="width: 336rpx;height: 90rpx;">
							您已绑定成功，返回主界面选择关卡开始游戏吧</view>

					</view>

				</view>
				<!-- 			<button class="cu-btn make-bg-bPurple text-white " style="width: 520rpx; height:81rpx;margin-top: 100rpx;"
							@click="onBack()">返回上一页</button> -->
			</view>
		</view>



	</view>


</template>

<script>
	import config from '@/common/config.js'
	import reqUtil from '@/util/util-js/requstUtil.js';

	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		computed: mapState(['BLEInfoList', 'systemInfo']),
		data() {
			return {
				devicesList: [],
				circular: true,
				videoList: [{
						id: "video0",
						src: "",
						img: ""
					},
					{
						id: "video1",
						src: "",
						img: ""
					},
					{
						id: "video2",
						src: "",
						img: ""
					}
				],
				videoDataList: [],
				currentHeight: 0,
				threeTipHeight: 0,
				threeZIndex: 100,
			}
		},
		onLoad(op) {

			this.BLEInfoList.forEach((item, index, selfarr) => {
				//item.deviceType == 'BLEHandle' || 
				if (item.deviceType == 'BLERope') {
					let item = Object.assign({}, selfarr[index]);
					this.devicesList.push(item);
				}
			})

			this.currentHeight = this.systemInfo.windowHeight;
			// console.log(this.currentHeight);


		},
		onUnload() {

		},
		onShow() {

		},
		onReady() {
			let view = uni.createSelectorQuery().select('#task_0');
			view.boundingClientRect(data => {
				// console.log('参数:' + JSON.stringify(data));
				//13 是间隔
				this.threeTipHeight = data.top + data.height + 13;
			}).exec();
		},
		onHide() {},
		methods: {
			...mapMutations([]),

			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onNavUpdateDevice() {
				uni.showToast({
					title: '点击此处升级硬件',
					icon: 'none'
				})
			},
			onSwiperChange(e) {
				let currentIndex = e.detail.current;
				// console.log(currentIndex);
				if (currentIndex === this._videoIndex) {
					return;
				}

				if (currentIndex === 2) {
					setTimeout(() => {
						this.threeZIndex = 1100;
					}, 200)
				} else {
					this.threeZIndex = 100;
				}

				// let isNext = false;
				// if (currentIndex === 0 && this._videoIndex === this.videoList.length - 1) {
				// 	isNext = true;
				// } else if (currentIndex === this.videoList.length - 1 && this._videoIndex === 0) {
				// 	isNext = false;
				// } else if (currentIndex > this._videoIndex) {
				// 	isNext = true;
				// }

				// if (isNext) {
				// 	this._videoDataIndex++;
				// } else {
				// 	this._videoDataIndex--;
				// }

				// if (this._videoDataIndex < 0) {
				// 	this._videoDataIndex = this.videoDataList.length - 1;
				// } else if (this._videoDataIndex >= this.videoDataList.length) {
				// 	this._videoDataIndex = 0;
				// }

				// this.circular = (this._videoDataIndex != 0);

				// if (this._videoIndex >= 0) {
				//     this._videoContextList[this._videoIndex].pause();
				//     this._videoContextList[this._videoIndex].seek(0);
				// }

				// this._videoIndex = currentIndex;


			},
			onNavtoHome() {
				uni.reLaunch({
					url: '../../personal-page/personal/personal'
				})
			}
		}

	}
</script>

<style>
	.hardware-border {
		border: 1rpx solid #9898FF;
		box-sizing: border-box;
	}


	.swiper {
		flex: 1;
		background-color: rgba(0, 0, 0, 0.32);
	}

	.swiper-item {
		flex: 1;
	}

	.video {
		flex: 1;
		/* #ifndef APP-PLUS */
		width: 100%;
		/* #endif */
	}

	.bluetooth-guide-number {
		border-radius: 18px;
		border-width: 1rpx;
		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		color: #000000;
		/* border-color: #FFFFFF; */
		background-color: #FFFFFF;
		margin-right: 13px;
	}
</style>