zhywpt-sp/pages/bluetooth/bluetooth.vue

<!--设备选择 -->
<template>
	<view class="devices">
		<view class="device" v-for="(item, index) in deviceList" :key="index" @click="connectDevice(item)">
			<image :src="`${$imgUrl}bluetooth/card1s.png`" class="head" mode="aspectFill"></image>
			<view class="center">
				<view class="name">{{ item._name }}</view>
				<view class="desc">编号 {{ item.name }}</view>
			</view>
			<image :src=" item.selected ? selectedUrl : unSelectedUrl" class="icon" mode="aspectFill"></image>
		</view>

		<view class="hint">
			<view class="txt">
				<image :src="`${$imgUrl}bluetooth/waring.png`" mode="aspectFill" class="imgs"></image>
				<view>温馨提示：</view>
			</view>
			<view class="grey-txt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				指令执行过程中，请勿关闭蓝牙，勿将手机远离电子标签，以免导致写卡、写签失败。</view>
		</view>

		<!-- 		<view class="btn">
			<submit-button title="点击重新搜索蓝牙" @submit="load"></submit-button>
		</view> -->
		<view class="action">
			<button type="default" class="ui-btn" @click="load">
				点击重新搜索蓝牙
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from "vue";
	import { onLoad, onReady } from "@dcloudio/uni-app";
	import { fileURL } from "@/datas/fileURL.js";
	const cmd = require("../../static/etcUtil/cmdConfig.js");

	const imgURL = `${fileURL}image/`;
	const selectedUrl = imgURL + "bluetooth/select-icons.png";
	const unSelectedUrl = imgURL + "bluetooth/unselected_xin.png";

	const jyApi = require("../../static/etc/JYAPI/GenvictBleUtil.js");
	const jlQZApi = require("../../static/etc/JLQZAPI/JLObuSDK.js");
	const atApi = require("../../static/etc/ATAPI/ArtcBleUtil.js");
	const wqApi = require("../../static/etc/WQAPI/WCDObuSdk.js");
	const cgApi = require("../../static/etc/CGAPI/cguBle.js");
	const tools = require("../../static/etcUtil/tools.js");
	const datas = require("../../static/etcUtil/datas.js");

	const bluetoothUtil = require("../../static/etcUtil/index.js");
	// 微信小程序
	let jlApi = require("../../static/etc/JLAPI/JLObuSDK.js"); //聚力SDK
	let wjApi = require("../../static/etc/WJAPI/wjBleAPI");
	let tdApi = require("../../static/etc/TDAPI/TDRObuSDK.js");
	let zzApi = require("../../static/etc/WJAPI/wjBleAPI.js");
	let jtApi = require("../../static/etc/JTAPI/BleUtil.js");
	let kcApi = require("../../static/etc/kcBle/kcBleAPI.js");
	let mcApi = require("../../static/etc/MCAPI/MCObuSDK.js"); //5201
	// let jyApiEtc = require("../../static/etc/JYAPI-ETC/jy-bluetooth-obu-wechatmp.js");  //前装-金溢
	// 9901
    let wjApi9901 = require("../../static/etc/WJSDK9901/wjBleAPI.js");
    let ArtcBleUtilApi = require("../../static/etc/ArtcBleAPI/ArtcGuiZhouAPI.js");//艾特斯 ETC- 5201
	let mcApi9901 = require("../../static/etc/MCSDK9901/BleUtil9901.js");  //9901和国密5201单片
	// #ifdef MP-ALIPAY
	// 这部分代码将仅在支付宝小程序平台下执行
	jlApi = require("../../static/etc/JLObuSDK/JLObuSDK.js");
	wjApi = require("../../static/etc/wjBle/WJBleAPI");
	zzApi = require("../../static/etc/wjBle/WJBleAPI");
	tdApi = require("../../static/etc/TDRAPI/TDRObuSDK.js");
	jtApi = require("../../static/etc/JTAPIS/BleUtil.js");
	// 执行支付宝小程序的特定功能
	// #endif
	const state = reactive({
		fee: "",
		id: "",
		cardId: "",
		showPopup: false, //显示激活成功提示
		curDeviceId: "", //当前选中的设备ID
		deviceList: [
			//设备列表
			{
				id: "1",
				image: imgURL + "bluetooth/card1.png`",
				_name: "聚力",
				name: "235564444558855",
			},
		],
		connectSuccess: 1,
		transfer: 0,
		rechargeMoney: "",//消费明细圈存传过来的金额
		orderNum: 0,//消费明细 传orderNum说明去支付
		payMoney: 0,//0 修复  1 支付
		accountId: "",//对公账户名称
		difference: "",//区分routeType5  1二次激活  2余额补领
		vehicleId: "",
		refundBalance: "",
		vehPosImgUrl: "",
		vehNegImgUrl: "",
		isAfter: '',
		backIndex:"",//1返回首页(卡签信息查询) ""返回订单列表 其他
		cardNo:""
	});
	const deviceList = ref([]);
	const connectPrefixName = ref(null);
	const routeType = ref(null); //来源 1激活 2圈存 3信息重写 4信息读取  10车辆信息变更预检
	interface DeviceType {
		name : string; //设备名称
		deviceId : string; //uuid
		prefixName : string; //前缀名称
		selected : boolean; //判断点击次数
		_name : string; //中文名称
	}
	let device : DeviceType = reactive({
		name: "", //设备名称
		deviceId: "", //uuid
		prefixName: "", //前缀名称
		selected: false, //判断点击次数
		_name: "", //中文名称
	});
	onReady(() => {
		load();
	});
	onLoad((option) => {
		routeType.value = option.routeType ? option.routeType : "1";
		state.cardId = option.cardId;

		if (option.fee) {
			state.fee = option.fee;
		}
		if (option.id) {
			state.id = option.id;
		}
		if (option.transfer) {
			state.transfer = option.transfer;
		}
		if (option.rechargeMoney) {
			state.rechargeMoney = option.rechargeMoney
		}
		if (option.orderNum) {
			state.orderNum = option.orderNum
		}
		if (option.payMoney) {
			state.payMoney = option.payMoney
		}
		if (option.accountId) {
			state.accountId = option.accountId
		}
		if (option.difference) {
			state.difference = option.difference;
		}
		if (option.vehicleId) {
			state.vehicleId = option.vehicleId;
		}
		if (option.refundBalance) {
			state.refundBalance = option.refundBalance;
		}

		if (option.vehPosImgUrl) {
			state.vehPosImgUrl = option.vehPosImgUrl;
		}
		if (option.vehNegImgUrl) {
			state.vehNegImgUrl = option.vehNegImgUrl;
		}
		if (option.isAfter) {
			state.isAfter = option.isAfter;
		}
		if (option.backIndex) {
			state.backIndex = option.backIndex;
		}

		console.log("传过来的参数", option)
	});

	/*
	 * 蓝牙初始化
	 */
	const load = () => {
		deviceList.value = [];
		console.log("****************蓝牙getsetting******************");
		uni.getSetting({
			success(res) {
				console.log("****************成功******************");
				console.log("scopebluetooth:" + res.authSetting["scope.bluetooth"]);
				console.log("成功结果：" + JSON.stringify(res));
				if (res.authSetting["scope.bluetooth"] == undefined) {
					//没有授权使用蓝牙功能，提示用户授权使用
					// #ifdef MP-WEIXIN
					uni.authorize({
						scope: "scope.bluetooth",
						success() {
							openBluetooth();
						},
						fail(err) {
							console.log('蓝牙授权失败', err)
							uni.showToast({
								title: "蓝牙授权失败",
								icon: "error",
								duration: 1500,
							});
						}
					});
					// #endif
					// #ifdef MP-ALIPAY
					openBluetooth();
					// #endif
				} else if (!res.authSetting["scope.bluetooth"]) {
					//false
					uni.showModal({
						title: "是否授权读取蓝牙",
						content: "需要获取你的蓝牙，请确认授权，否则无法获取蓝牙",
						success: function (mres) {
							if (mres.confirm) {
								uni.openSetting({
									success(authData) {
										if (authData.authSetting["scope.bluetooth"] == true) {
											tools.showLoadingAlert("扫描蓝牙中");
											openBluetooth();
										} else {
											uni.closeBluetoothAdapter();
											uni.showToast({
												title: "蓝牙授权失败",
												icon: "error",
												duration: 1500,
											});
										}
									},
								});
							} else if (mres.cancel) {
								uni.showToast({
									title: "蓝牙授权失败",
									icon: "error",
									duration: 1000,
								});
							}
						},
					});
				} else {
					tools.showLoadingAlert("扫描蓝牙中");
					openBluetooth();
				}
			},
			fail(res) {
				console.log("****************失败******************");
				console.log("失败结果：" + JSON.stringify(res));
			},
		});
	};

	/*
	 * 打开蓝牙
	 */
	const openBluetooth = () => {
		tools.hideLoadingAlert();
		let foundDevices = []; //扫描到的蓝牙列表
		uni.closeBluetoothAdapter(); //先关闭蓝牙

		console.log('执行断开蓝牙方法')
		//打开蓝牙
		uni.openBluetoothAdapter({
			success: function (item : any) {
				console.log('初始化蓝牙模块', item)
				tools.showLoadingAlert("扫描蓝牙中...");
				//开始搜索附近的蓝牙设备
				uni.startBluetoothDevicesDiscovery({
					success: function (res) {
						console.log('开始搜寻附近的蓝牙外围设备', res);
						//监听搜索到新设备的事件
						uni.onBluetoothDeviceFound(function (res) {
							console.log('监听寻找到新设备的事件', res, res.devices);
							for (let i = 0; i < res.devices.length; i++) {
								let name = res.devices[i]["name"];
								let prefixName = "";
								let deviceId = res.devices[i]["deviceId"];
								console.log("res.devices[i]", res.devices[i]["name"]);
								if (name != "" && name != undefined && name != "undefined") {
									if (name.indexOf("G-WJ") != -1 || name.indexOf("ETC") != -1 || name.indexOf("G-JL") != -1) {
										//前装设备
										prefixName = "ETC";
									} else {
										//聚力临时设备
										if (name.indexOf("5201121") != -1) {
											prefixName = "JL";
										} else {
											prefixName = name.substring(0, 2);
										}
									}
									prefixName = prefixName.toUpperCase();
									console.log("prefixName====", prefixName, name)
									if (
										prefixName == "WJ" ||
										prefixName == "JL" ||
										prefixName == "BY" ||
										prefixName == "JY" ||
										prefixName == "AT" ||
										prefixName == "JT" ||
										prefixName == "WQ" ||
										prefixName == "CG" ||
										prefixName == "TD" ||
										prefixName == "ZZ" ||
										prefixName == "MC" ||
										prefixName == "ETC"
									) {
										// //隐藏加载框
										tools.hideLoadingAlert();

										device.name = name;
										datas.setData("deviceName", device.name);
										device.deviceId = deviceId;
										device.prefixName = prefixName;
										device.selected = false; //防止重复点击
										let _name = "";
										switch (prefixName) {
											case "ETC":
												if (name.split("-")[1] == "KC" || name.split("-")[1].indexOf('C') > 0 || name.split("-")[1].indexOf('K') > 0) {
													_name = "科畅";
													console.log("前装-科畅")
												} else if (name.split("-")[1] == "JL") {
													_name = "聚力";  //共用
												} else if (name.split("-")[1] == "WJ") {
													_name = "万集";  //共用
												} else if (name.split("-")[1] == "JY") {
													_name = "金溢";
												}else if (name.split("-")[1] == "ATS") {
													_name = "埃特斯";
												}else if (name.split("-")[1] == "MC") {
													_name = "铭创";
												}
												break;
											case "WJ":
												_name = "万集";
												break;
											case "JL":
												_name = "聚利";
												break;
											case "BY":
											   _name = "宝溢";
											case "JY":
												_name = "金溢";
												break;
											case "AT":
												_name = "埃特斯";
												break;
											case "JT":
												_name = "建投";
												break;
											case "WQ":
												_name = "握奇";
												break;
											case "CG":
												_name = "成谷";
												break;
											case "TD":
												_name = "天地融";
												break;
											case "ZZ":
												_name = "智载";
												break;
											case "MC":
												_name = "铭创";
												break;
											default:
												_name = "未知";
												break;
										}
										device._name = _name;
										if (deviceList.value.length == 0) {
											// #ifdef MP-ALIPAY
											if (device._name == '聚利' || device._name == '万集' || device._name == '天地融' || device._name == '建投') {
												foundDevices.push(device);
											}
											// #endif
											// #ifdef MP-WEIXIN
											foundDevices.push(device);
											// #endif
										} else {
											let isHave = false;
											for (let j = 0; j < foundDevices.length; j++) {
												if (name == foundDevices[j].deviceId) {
													isHave = true;
													break;
												}
											}
											if (!isHave) {
												foundDevices.push(device);
											}
										}
										datas.setData("deviceNameZW", device._name);
										deviceList.value = foundDevices;
										foundDevices = [];
										console.log("deviceList.value", deviceList.value);
									}
								}
							}
						});
					},
					fail: function (res) {
						console.log(res);
						tools.hideLoadingAlert();
					},
				});
			},
			fail: function (res) {
				console.log(res);
				alertF("手机蓝牙未打开或不支持蓝牙");
			},
		});
	};

	/**
	 * 连接蓝牙
	 */
	const connectDevice = (e) => {
		console.log(e);
		let item = e;
		//停止扫描蓝牙
		console.info("停止搜寻附近的蓝牙外围设备");
		uni.stopBluetoothDevicesDiscovery({
			success: function (res) {
				console.log(device);
				if (item.selected == false) {
					console.log("第一次点击了");
					item.selected = true;
					setTimeout(function () {
						if (device.selected == undefined) {
							console.info("selected is undefined");
							linkFail(); //未找到设备, 请重新搜索
							return;
						}
						item.selected = false;
					}, 4000);
				} else {
					console.log("第二次点击了");
					return;
				}

				if (
					item.prefixName == undefined ||
					item.prefixName == "undefined" ||
					item.prefixName == ""
				) {
					console.info("device.prefixName is undefined");
					linkFail(); //未找到设备, 请重新搜索
					return;
				}

				let prefixName = item.prefixName;
				connectPrefixName.value = item.prefixName;
				console.log(item);
				// datas.setData("connectPrefixName", connectPrefixName.value);
				// //断开蓝牙
				// bluetoothUtil.disconnectDevice();
				tools.showLoadingAlert("蓝牙连接中");
				console.info("连接的是" + prefixName, device);
				switch (prefixName) {
					case "ETC":
						console.log("device.name=====", device.name, device.name.includes("KC"), device.name.includes("JY"), device.name.includes("KC") || device.name.includes("K") || device.name.includes("C"))
						let obj = ""
						if (device.name.includes("KC") || device.name.includes("K")) {
							obj=kcApi
						} else if (device.name.includes("JL")) {
							obj=jlQZApi
						} else if (device.name.includes("WJ")) {
							obj=wjApi9901
						}else if (device.name.includes("ATS")) {
							obj=ArtcBleUtilApi
						}else if (device.name.includes("MC")) {
							obj=mcApi9901
						}
						console.log("新")
						obj.connectDevice(
							device,
							function (res) {
								preDevice(res);
							},
							function (res) {
								listenStatus(res);
							}
						);
						// else if (device.name.includes("JY")) {
						// 	console.log("进来了JY",device.name.includes("JY"))
						// 	jyApiEtc.connectDevice(
						// 		device,
						// 		function (res) {
						// 			preDevice(res);
						// 		},
						// 		function (res) {
						// 			listenStatus(res);
						// 		}
						// 	);
						// }
						break;
					case "WJ":
					console.log("旧")
						wjApi.connectDevice(
							device,
							function (res) {
								connectSuccess(res);
							},
							function (res) {
								listenStatus(res);
							}
						);
						break;
					case "JL":
						jlApi.connectDevice(
							device,
							function (res) {
								console.log('设备链接1', res)
								connectSuccess(res);
							},
							function (res) {
								console.log('设备链接2', res)
								listenStatus(res);
							}
						);
						break;
					case "BY":
						// 宝溢用金溢sdk
							jyApi.connectDevice(
								device,
								function (res) {
									console.log('设备链接1', res)
									connectSuccess(res);
								},
								function (res) {
									console.log('设备链接2', res)
									listenStatus(res);
								}
							);
							break;
					case "JY":
						jyApi.connectDevice(
							device,
							function (res) {
								connectSuccess(res);
							},
							function (res) {
								listenStatus(res);
							}
						);
						break;
					case "AT":
						atApi.connectDevice(
							device,
							function (res) {
								connectSuccess(res);
							},
							function (res) {
								listenStatus(res);
							}
						);
						break;
					case "JT":
						console.info("连接的是=====123" + prefixName, device);
						jtApi.connectDevice(
							device,
							function (res) {
								console.log('设备链接1', res)
								connectSuccess(res);
							},
							function (res) {
								console.log('设备链接2', res)
								listenStatus(res);
							}
						);
						break;
					case "WQ":
						wqApi.connectDevice(
							device,
							function (res) {
								connectSuccess(res);
							},
							function (res) {
								listenStatus(res);
							}
						);
						break;
					case "CG":
						cgApi.connectDevice(
							device,
							function (res) {
								connectSuccess(res);
							},
							function (res) {
								listenStatus(res);
							}
						);
						break;

					case "TD":
						tdApi.connectDevice(
							device,
							function (res) {
								connectSuccess(res)
							}, function (res) {
								listenStatus(res);
							}
						);
						break;

					case "ZZ":
						zzApi.connectDevice(
							device,
							function (res) {
								connectSuccess(res);
							},
							function (res) {
								listenStatus(res);
							}
						);
						break;
                    case "MC":
						mcApi.connectDevice(
							device,
							function (res) {
								connectSuccess(res);
							},
							function (res) {
								listenStatus(res);
							}
						);
						break;
					default: //未找到设备, 请重新搜索
						linkFail();
						break;
				}
			},
			fail: function (res) {
				console.log(res);
				linkFail(); //未找到设备, 请重新搜索
			},
		});
	};

	/**
	 * 未找到设备, 请重新搜索
	 */
	const linkFail = () => {
		datas.setData("bluLinkStatus", false);
		datas.setData("connectPrefixName", "");

		tools.showModalAlert("未找到设备, 请重新搜索", function successFunc() {
			load();
		});
	};

	/**
	 * 连接成功
	 */
	const connectSuccess = (res) => {
		console.log("连接回调函数func1");
		console.log(res);
		if (res.code == 0) {
			console.log("连接成功");
			tools.hideLoadingAlert(); //关闭加载框
			datas.setData("bluLinkStatus", true);
			datas.setData("connectPrefixName", connectPrefixName.value);
			oks();
		} else {
			alertF(res.msg);
		}
	};

	function oks() {
		//routeType 1.激活（订单来）  2.圈存 （/pages/recharge/recharge来）3.ping码解锁 4.信息读取  5从哪里来回哪里去监听bluetoothLink  7消费明细去圈存  8单位账户圈存  9对公账户修复
		if (routeType.value == "1") {
			if (state.isAfter == '1') {
				uni.navigateTo({
					url: `/subpackage/after-sale/activation/activate-SH`,
				});
			} else {
				uni.navigateTo({
					url: `/subpackage/after-sale/activation/activate?transfer=${state.transfer}`,
				});
			}

		} else if (routeType.value == "2") {
			uni.navigateTo({
				url: `/subpackage/carPark/recharge/recharge-weixin?connectSuccess=${state.connectSuccess}`,
			});
		} else if (routeType.value == "3") {
			uni.navigateTo({
				url: "/subpackage/after-sale/pin-code-deblocking/pin-code-confirm?state=true&vehicleId=" + state.vehicleId,
			});
		} else if (routeType.value == "4") {
			uni.navigateTo({
				url: `/subpackage/after-sale/deviceInfo/deviceInfo?backIndex=${state.backIndex}`,
			});
		} else if (routeType.value == "5") {
			// #ifdef MP-ALIPAY
			uni.navigateTo({
				url: "/subpackage/after-sale/activation-once-again/activation-once-again-ali?state=true&id=" + state.id,
			});
			// #endif
			// #ifdef MP-WEIXIN
			if (state.difference == "1") {
				uni.navigateTo({
					url: `/subpackage/after-sale/activation-once-again/activation-once-again?status=true&state=true&vehicleId=${state.vehicleId}&vehPosImgUrl=${state.vehPosImgUrl}&vehNegImgUrl=${state.vehNegImgUrl}`,
				});
			} else if (state.difference == "2") {
				uni.navigateTo({
					url: `/subpackage/after-sale/refund-order-balance/refund-order-balance?status=true&state=true&vehicleId=${state.vehicleId}&&id=${state.id}&&refundBalance=${state.refundBalance}`,
				});
			} else {
				uni.$emit('bluetoothLink', { status: true })
				uni.navigateBack({
					delta: 1
				})
			}
			// #endif
		} else if (routeType.value == "6") {
			uni.navigateTo({
				url: "/subpackage/after-sale/activation-once-again/activation-once-again?state=true&id=" + state.id
			});
		} else if (routeType.value == "7") {
			uni.navigateTo({
				url: `/subpackage/personal-center/trapping-and-repairing/recharge-two?rechargeMoney=${state.rechargeMoney}&&orderNum=${state.orderNum}&&payMoney=${state.payMoney}`,
			});
		} else if (routeType.value == "8") {
			uni.navigateTo({
				url: `/subpackage/after-sale/account-recharge/recharge-weixin?accountId=${state.accountId}`,
			});
		} else if (routeType.value == "9") {
			uni.navigateTo({
				url: `/subpackage/personal-center/trapping-and-repairing-account/recharge-two?rechargeMoney=${state.rechargeMoney}&&orderNum=${state.orderNum}&&payMoney=${state.payMoney}&&accountId=${state.accountId}`,
			});
		} else if (routeType.value == "10") {
			uni.navigateTo({
				url: `/subpackage/personal-center/car-message-change?vehicleId=${state.vehicleId}`,
			});
		} else {
			return;
		}

	}

	/**
	 * 前装设备
	 */
	const preDevice = (res) => {
		console.log("连接成功1111=====", res);
		if (res.code == 0 || res.serviceCode==0) {
			console.log("连接成功=====");
			datas.setData("bluLinkStatus", true);
			datas.setData("connectPrefixName", connectPrefixName.value);
			getCardId((cardNo) => {
				console.log("cardNo",cardNo);
				if(cardNo.includes('5201')){
					// 正常激活 前装 5201
					oks()
				}else{
					// 前装9901
					etcOks()
				}
			})
		} else {
			alertF(res.msg);
			console.log(res.msg);
		}
	};
	function getCardId(fun){
		//执行0015文件
		tools.showLoadingAlert("执行指令");
		let cmdArr = [cmd.HOME_DIRECTORY, cmd.APPLICATION_DIRECTORY, cmd.CMD_READBINARY];
		console.log(cmdArr);
		console.log(bluetoothUtil);
		bluetoothUtil.transCmd(cmdArr, '10', function(res) { //10：写卡   20：写OBU
			console.log("res====", res)
			var cardStr = res[2];
			if (cardStr == undefined || cardStr == "undefined" || cardStr == "") {
				tools.alertF("卡指令不符" + cardStr);
				return;
			}
			if (cardStr.length < 40) {
				tools.alertF("卡指令长度不符" + cardStr);
				return;
			}
			tools.hideLoadingAlert();
			fun(cardStr.substring(20, 40));
		})
	}
	function etcOks() {
		if (routeType.value == "4") {
			uni.navigateTo({
				url: "/subpackage/carPark/etc/etcDeviceInfo",
			});
		}
	}

	/**
	 * 监听蓝牙状态
	 */
	const listenStatus = (res) => {
		console.log("时时监听蓝牙状态func2", connectPrefixName.value, res.code);
		console.log(res);
		if (res.code == 0) {
			datas.setData("bluLinkStatus", true);
			datas.setData("connectPrefixName", connectPrefixName.value);
			// oks();
		} else {
			//断开蓝牙
			bluetoothUtil.disconnectDevice();
			datas.setData("bluLinkStatus", false);
			datas.setData("connectPrefixName", "");
			tools.showToastAlert("蓝牙已断开");
			// #ifdef MP-ALIPAY
			my.closeBluetoothAdapter({
				success(res) {
					// 关闭蓝牙适配器成功
				},
				fail(err) {
					// 处理关闭蓝牙适配器失败的情况
				}
			})
			// #endif
		}
	};

	/**
	 * 提示加关蓝牙
	 */
	const alertF = (msg : string) => {
		//隐藏加载框
		tools.hideLoadingAlert();

		//断开蓝牙
		bluetoothUtil.disconnectDevice();

		//提示对话框
		tools.showModalAlert(msg);
	};
</script>

<style>
	page {
		background-color: #f3f3f3;
	}

	:deep(.u-mode-center-box) {
		border-radius: 20rpx;
	}
</style>

<style lang="scss" scoped>
	.devices {
		min-height: 100vh;
		box-sizing: border-box;
		padding-bottom: 160rpx;
		position: relative;
		padding-top: 30rpx;
		background: #E9EDF0;
		.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;
		}
		.device {
			margin: 0 auto;
			width: 701rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			background: white;
			padding: 25rpx 20rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 2rpx 6rpx 6rpx 6rpx #DFDFDF;
			border-radius: 12rpx;

			.head {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				background-color: #f3f3f3;
			}

			.center {
				flex: 1;
				margin-left: 30rpx;
				margin-right: 30rpx;

				.name {
					font-size: 30rpx;
					color: #333333;
				}

				.desc {
					font-size: 26rpx;
					color: #666666;
					margin-top: 25rpx;
				}
			}

			.icon {
				width: 38rpx;
				height: 38rpx;
				margin-right: 12rpx;
			}
		}

		.hint {
			margin: 60rpx 30rpx 0px;

			.txt {
				font-family: MicrosoftYaHei;
				font-size: 28rpx;
				color: #111111;
				line-height: 40rpx;
				display: flex;
				align-items: center;

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

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

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


</style>