zhywpt-sp/subpackage/after-sale/activation/operation-tips.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="hint">
			<view class="orange-txt ">
				<text class="red"></text>
				<view style="margin: 0 24rpx;">重要提示</view>
				<text class="red"></text>
			</view>
			<view class="grey-txt">1.激活前必须将ETC设备安装到相应车辆上，确保安装车辆信息与激活后OBU内信息一致后才能正常使用。</view>
			<view class="grey-txt">2.如因激活的ETC设备未安装到对应车辆上产生的异常扣费，我司不承担任何赔偿责任。</view>
			<view class="grey-txt">3.激活时，需要录入您的车牌号和手机号并确保OBU蓝牙和手机蓝牙处于打开状态。</view>
		</view>
		<view class="btn">
			<submit-button @submit="gotoNextStep" title="已知悉，下一步"></submit-button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		msg,
		navTo,
		noticeUser
	} from '@/utils/utils';
	import { setItem } from "@/utils/storage";
	import { onLoad } from "@dcloudio/uni-app";
	let transfer = 0;
	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;
		transfer = option.transfer;
		setItem("orderInfo", orderInfo)
		console.log(orderInfo);
	})

	const gotoNextStep = () => {
		uni.openBluetoothAdapter({
			success(res) {
				noticeUser(() => {
					console.log("11111")
					/* 判断是否打开蓝牙 */
					uni.getBluetoothAdapterState({
						success(res) {
							console.log("2222", res)
							//如果res.avaliable==false 说明没打开蓝牙 反之则打开
							if (res.available == false) {
								uni.showToast({
									title: '请打开手机蓝牙',
									icon: "error",
									duration: 2000
								})
								return
							} else {
								navTo(`/subpackage/after-sale/activation/operation-upload?transfer=${transfer}`)
							}
						}
					})
				});
			},
			fail(err){
				uni.showModal({
					title: '提示',
					content: '请打开小程序蓝牙权限和微信蓝牙权限',
					success: function (res) {
						if (res.confirm) {
							uni.openSetting({
							  success(res) {
								  console.log("2222")
								console.log(res.authSetting)
							  }
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		})
	}
</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 {
			margin: 0rpx 30rpx 0px;

			.orange-txt {
				font-size: 30rpx;
				color: #ff8000;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 50rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}

			.grey-txt {
				font-size: 26rpx;
				color: #666666;
				line-height: 40rpx;
				margin-top: 16rpx;
			}
		}

		.btn {
			margin: 70rpx 40rpx;
		}
	}


	.grey-txt {
		font-size: 26rpx;
		color: #666666;
		line-height: 40rpx;
		margin-top: 16rpx;
	}

	.red {
		display: inline-block;
		color: red;
		background-color: red;
		width: 26rpx;
		height: 26rpx;
		border-radius: 100%;
	}
</style>