zhywpt-sp/subpackage/after-sale/activation/operation-tips.vue

<!-- 设备激活1-操作提示 -->
<template>
	<view class="main">
		<view class="t-card">
			<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>

		<!-- <view class="hint">
			<image :src="`${$imgUrl}common/icon-hint.png`" class="icon"></image>
			<view>激活时，确保OBU蓝牙和手机蓝牙处于打开状态。</view>
		</view> -->
		<view class="hint">
			<view class="txt">
				<view>重要提示</view>
			</view>
			<view class="grey-txt"><view class="point"></view>激活前必须将ETC设备安装到相应车辆上，确保安装车辆信息与激活后OBU内信息一致后才能正常使用。</view>
			<view class="grey-txt"><view class="point"></view>如因激活的ETC设备未安装到对应车辆上产生的异常扣费，我司不承担任何赔偿责任。</view>
			<view class="grey-txt"><view class="point"></view>激活时，需要录入您的车牌号和手机号并确保OBU蓝牙和手机蓝牙处于打开状态。</view>
		</view>
		<view class="action">
			<button type="default" class="ui-btn" @click="gotoNextStep">
				已知悉，下一步
			</button>
		</view>
	</view>
</template>

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

	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}&&isAfter=${isAfter}`)
							}
						}
					})
				});
			},
			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: 200rpx;
		background: #E9EDF0;
		position: relative;
		min-height: 100vh;
		box-sizing: border-box;
		.action {
			position: absolute;
			bottom: 0rpx;
			left: 0;
			height: 128rpx;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

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

		.t-card {
			padding-top: 70rpx;
			background-color: #fff;
		}

		.center {
			width: 100%;
			height: auto;
			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: 40rpx 30rpx 0px;

			.txt {
				font-family: MicrosoftYaHei;
				font-size: 32rpx;
				color: #111111;
				line-height: 35rpx;
			}

			.grey-txt {
				font-family: MicrosoftYaHei;
				font-size: 28rpx;
				color: #999999;
				line-height: 48rpx;
				display: flex;
				margin-top: 20rpx;
				.point{
					margin-top: 19rpx;
					flex-shrink: 0;
					width: 10rpx;
					height: 10rpx;
					background: #A0A0A0;
					margin-right: 16rpx;
					border-radius: 50%;
				}
			}
		}

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



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