zhywpt-sp/pages/bluetooth/device-active-step1.vue

<!-- 设备激活1-操作提示 -->
<template>
	<view class="main">
		<view class="center">
			<image class="center-bg" :src="`${$imgUrl}bluetooth/device-active-bg.png`" mode="widthFix"
				style="width: 100%;"></image>
			<view class="dialog-content first">
				<image :src="`${$imgUrl}bluetooth/device-active-left.png`" mode="widthFix"></image>
				<view class="dialog-text">
					<text class="orange" space="emsp"> &nbsp;&nbsp;&nbsp;&nbsp;撕掉双面胶背面贴纸</text>
					贴在汽车前挡风玻璃并用力按紧。
				</view>
			</view>
			<view class="dialog-content second">
				<image :src="`${$imgUrl}bluetooth/device-active-top.png`" mode="widthFix"></image>
				<view class="dialog-text">
					&nbsp;&nbsp;&nbsp;&nbsp;请你在<text class="orange">激活前</text>将<text
						class="green">OBU</text>贴在申办车辆挡风玻璃<text class="orange">后视镜附近阴影区域</text>。
				</view>
			</view>
		</view>
		<view class="hint">
			<image :src="`${$imgUrl}common/icon-hint.png`" class="icon"></image>
			<view>激活时，需要录入您的车牌号和手机号，并确保OBU蓝牙和手机蓝牙处于打开状态。</view>
		</view>
		<view class="btn">
			<submit-button @submit="gotoNextStep" title="已知悉，下一步"></submit-button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		msg,
		navTo
	} from '@/utils/utils';
	import { setItem } from "../../utils/storage";
import { onLoad } from "@dcloudio/uni-app";
onLoad((option)=>{
	console.log(option);
	const orderInfo = {
		orderId:"",
		id:"",
		cardStatus:"",
		obuStatus:""
	}
	orderInfo.orderId = option.orderId;
	orderInfo.id = option.id;
	orderInfo.cardStatus = option.cardStatus;
	orderInfo.obuStatus = option.obuStatus;
	// setItem("orderId",option.orderId)
	setItem("orderInfo",orderInfo)
	console.log(orderInfo);
})

	const gotoNextStep = () => {
		uni.openBluetoothAdapter()
		/* 判断是否打开蓝牙 */
		uni.getBluetoothAdapterState({
			success(res) {
				//如果res.avaliable==false 说明没打开蓝牙 反之则打开
				if (res.available == false) {					
					uni.showToast({
					title: '请打开手机蓝牙',
					icon:"error",
					duration: 2000
					})
					return
				} else {
					navTo('/pages/bluetooth/device-active-step2')
				}
			}
		})

	}
</script>

<style lang="scss" scoped>
	.main {
		padding-bottom: 40rpx;

		.title {
			font-size: 36rpx;
			color: #333333;
			font-weight: 600;
			text-align: center;
			padding: 48rpx 0px;
		}

		.center {
			width: 100%;
			height: auto;
			margin-top: 70rpx;
			position: relative;

			.center-bg {
				width: 100%;
			}

			.dialog-content {
				position: absolute;

				image {
					width: 100%;
				}

				.dialog-text {

					position: absolute;
					font-size: 26rpx;
					line-height: 40rpx;
					color: #666;

					.orange {
						color: #FF8000;
					}

					.green {
						color: #00B38B;
					}
				}
			}

			.first {
				width: 419rpx;
				height: 144rpx;
				top: -40rpx;
				left: 250rpx;

				.dialog-text {
					width: calc(100% - 108rpx);
					left: 90rpx;
					top: 15rpx;
				}
			}

			.second {
				width: 403rpx;
				height: 217rpx;
				bottom: 200rpx;
				right: 115rpx;

				.dialog-text {
					width: calc(100% - 50rpx);
					left: 30rpx;
					top: 80rpx;
				}
			}
		}

		.hint {
			display: flex;
			flex-direction: row;
			justify-content: center;
			font-size: 26rpx;
			color: #666666;
			padding: 0px 30rpx;

			.icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}

			view {
				width: calc(100% - 36rpx);
			}
		}

		.btn {
			margin: 150rpx 40rpx 60px;
		}
	}
</style>