newEdition/pages/bluetooth/detail.vue

<template>
	<view class="detail">
		<view class="de-t1">{{info.name}}</view>
		
		<view class="de-label">蓝牙连接</view>
		
		<view class="de-input">
			<view class="de-input-t1">蓝牙</view>
			<view @click.stop="connectTO()" class="de-input-t2">{{connectDev.deviceId != info.deviceId?'未连接':'已连接'}}</view>
			<image src="/static/images/jiantop.png" />
		</view>
		
		<template v-if="connectDev.deviceId != info.deviceId">
			<view class="empty">
				<image mode="widthFix" src="/static/images/bluetooth-empty.png" />
				<view class="empty-l">设备状态与配置请在连接蓝牙后查询</view>
			</view>
		</template>
		
		<template v-else>
			<!-- wifi列表 -->
			<view class="de-label">设备配置</view>
			<view class="de-lic">
				<view class="de-lic-li line">
					<view class="de-lic-1">WIFI</view>
				</view>
				<view @click="goWifi()" class="de-lic-li">
					<view class="de-lic-1">设置WIFI状态</view>
					<view class="de-lic-2">
					{{(wifiDetail && wifiDetail.connect == 1)?wifiDetail.ssid+"已连接":"未连接"}}
					</view>
					
					<image @click.stop="goWdetial()" style="width: 36rpx;height: 36rpx;margin-left: 12rpx;"
					:src="'/static/images/bluetooth-ghh'+ ((wifiDetail && wifiDetail.connect == 1)?'-ac':'') +'.png'" />
				</view>
			</view>
			
			<!-- 设备状态 -->
			<view @click="getDevInfo" class="de-label">
				设备状态 <text>刷新</text>
			</view>
			
			<view class="de-lic" style="margin-bottom: 60rpx;">
				<view class="de-lic-li line">
					<view class="de-lic-1">设备SN</view>
					<view class="de-lic-2">{{detail.sn?detail.sn:'--'}}</view>
				</view>
				<view @click="onOffRec()" class="de-lic-li line">
					<view class="de-lic-1">录音</view>
					<view class="de-lic-2">{{detail.rec == 1?"已开启":"未开启"}}</view>
				</view>
				<view class="de-lic-li line">
					<view class="de-lic-1">电量</view>
					<view class="de-lic-2">{{detail.rsoc?detail.rsoc:0}}%</view>
				</view>
				<view class="de-lic-li line">
					<view class="de-lic-1">存储空间</view>
					<view class="de-lic-2">{{detail.df?detail.df:0}}MB/{{detail.total_df?detail.total_df:0}}MB</view>
				</view>
				<view class="de-lic-li line">
					<view class="de-lic-1">信号强度</view>
					<view class="de-lic-2">{{(wifiDetail && wifiDetail.connect == 1)?wifiDetail.rssi+"dbm":"未连接"}}</view>
				</view>
				<view class="de-lic-li line">
					<view class="de-lic-1">固件版本</view>
					<view class="de-lic-2">{{detail.v?detail.v:'0.0.0'}}</view>
				</view>
				<view class="de-lic-li line">
					<view class="de-lic-1">USB接入</view>
					<view class="de-lic-2">{{detail.usb == 1?"插入":"未插入"}}</view>
				</view>
				<view class="de-lic-li">
					<view class="de-lic-1">时钟</view>
					<view class="de-lic-2">{{detail.time?detail.time:"--:--:--"}}</view>
				</view>
			</view>
		</template>
		
	</view>
</template>

<script>
	import { connectBlue,sendData,closeBlue,setNotification,ab2hex,cnum } from "@/utils/blue.js";
	import { mapState, mapMutations } from 'vuex';
	
	export default {
		data() {
			return {
				info : "",
				wifiList : [],
				detail: "",
				wifiDetail: "",
				type : 0,
			}
		},
		computed: {
		    ...mapState(['connectDev','connectState']),
		},
		onShow() {
			//设定异步通知
			this.info = uni.getStorageSync("lyDetail")
			this.notiInit();
		},
		onLoad() {
			
		},
		methods: {
			//连接设备
			connectTO() {
				var that = this;
				if (this.connectDev.deviceId != this.info.deviceId) {
					uni.showModal({
						title: '链接蓝牙',
						content: '确定要链接此蓝牙吗?',
						cancelText: '取消',
						confirmText: '确定',
						success(res) {
							//设置设置通知
							if (res.confirm) {
								connectBlue(that.info).then(() => {
									setTimeout(() => {
										that.notiInit()
									},1000)
								});
							}
						}
					})
				} else {
					uni.showModal({
						title: '断开蓝牙',
						content: '确定要断开蓝牙连接吗?',
						cancelText: '取消',
						confirmText: '确定',
						success(res) {
							if (res.confirm) {
								uni.setStorageSync("connectNum",4);
								closeBlue().then(() => {
									that.getDevInfo();
								});
							}
						}
					})
				}
			},
			//开启录音/关闭录音
			onOffRec() {
				var that = this
				uni.showModal({
					title: '提示',
					content: this.detail.rec == 1?'确定要关闭录音吗?':'确定要开启录音吗?',
					cancelText: '取消',
					confirmText: '确定',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title:"操作中...",
								icon: "none"
							})
							if (that.detail.rec == 1) {
								sendData([0xA0,0x59,0x00])
							} else {
								sendData([0xA0,0x5A,0x00])
							}
						}
					}
				})
			},
			//获取设备/wifi信息
			getDevInfo() {
				uni.showLoading({
					title:"获取中...",
					icon: "none"
				})
				sendData([0xA0,0x80,0x00]);
			},
			notiInit() {
				var that = this;
				if (this.connectDev && this.connectDev.deviceId == this.info.deviceId) {
					setNotification().then(() => {
						that.getDevInfo();
						uni.onBLECharacteristicValueChange((res) => {
							
							let data = ab2hex(res.value);
							if (data.pre[1] == "80") {
								that.detail = JSON.parse(data.value)
								sendData([0xA0,0x81,0x00]);
							}
							if (data.pre[1] == "81") {
								that.wifiDetail = JSON.parse(data.value)
							}
							
							if (data.pre[1] == "5a" || data.pre[1] == "59") {
								sendData([0xA0,0x80,0x00]);
							}
							
							try{
								uni.hideLoading();
							}catch(e){
								console.log(e.message)
							}
							console.log('特性值改变:',data); // 打印接收到的数据
						});
					})
				}
			},
			//详情
			goWdetial() {
				if (this.wifiDetail && this.wifiDetail.connect == 1) {
					uni.setStorageSync("wifiDetail",this.wifiDetail);
					uni.navigateTo({
						url:"/pages/bluetooth/wdetail"
					})
				}
			},
			goWifi(){
				uni.navigateTo({
					url:"/pages/bluetooth/wifi"
				})
			},
			dkBlue() {
				closeBlue();
			}
		}
	}
</script>

<style scoped lang="scss">
	.detail {
		background-color: #F1F2F4;
		min-height: 100vh;
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx 28rpx 0;
		
		.de-t1 {
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #333333;
			box-sizing: border-box;
		}
		
		.de-input {
			box-sizing: border-box;
			padding: 28rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			.de-input-t1 {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
			.de-input-t2 {
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				margin-left: auto;
			}
			image {
				width: 12rpx;
				height: 28rpx;
				margin-left: 16rpx;
			}
		}
		.de-label {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 40rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #2671E2;
				margin-left: auto;
				transform: translateY(2rpx);
			}
		}
		
		.de-lic {
			box-sizing: border-box;
			padding: 0 28rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-top: 20rpx;
			.de-lic-li {
				height: 84rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.de-lic-1 {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
				.de-lic-2 {
					font-weight: 400;
					font-size: 26rpx;
					color: #666;
					margin-left: auto;
				}
				image {
					width: 28rpx;
					height: 28rpx;
					margin-left: 8rpx;
				}
			}
			
			.line {
				border-bottom: 1rpx dashed #f5f5f5;
			}
		}
		
		.empty {
			margin-top: 16rpx;
			height: 275rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-color: #fff;
			border-radius: 12rpx;
			image {
				width: 180rpx;
			}
			.empty-l {
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				margin-top: 16rpx;
			}
		}
	}
</style>