ajy/code/ajyApp/pages/device/detail/detail.nvue

<template>
	<view class="container">
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		<view class="customHead">
			<view class="back-wrap" @click="goBack">
				<image src="/static/public/backBlack.png" mode="aspectFill" class="backimg"></image>
			</view>
			<text class="head-title">设备详情</text>
			<view class="plus"></view>
		</view>
		<scroll-view class="list" scroll-y="true">
			<!-- 连接状态 -->
			<view class="connect-status">
				<view class="status-dot" :style="{backgroundColor: connected ? '#389588' : '#CCCCCC'}"></view>
				<text class="status-text">{{connected ? '已连接' : '未连接'}}</text>
				<text class="connect-btn" v-if="!connected && !connecting" @click="connectDevice">连接设备</text>
				<text class="connect-btn" v-if="connecting">连接中...</text>
			</view>

			<text class="txt">通用设置</text>
			<view class="menuitem">
				<text>设备名称</text>
				<text class="gray">{{name}}</text>
			</view>
			<view class="menuitem">
				<text>设备ID</text>
				<text class="gray device-id-text">{{deviceId}}</text>
			</view>
			<view class="menuitem">
				<text>信号强度</text>
				<view class="signal-value-wrap">
					<view class="signal-wrap">
						<view class="signal-bar signal-bar1" :class="{'signal-active': signalLevel >= 1}"></view>
						<view class="signal-bar signal-bar2" :class="{'signal-active': signalLevel >= 2}"></view>
						<view class="signal-bar signal-bar3" :class="{'signal-active': signalLevel >= 3}"></view>
						<view class="signal-bar signal-bar4" :class="{'signal-active': signalLevel >= 4}"></view>
					</view>
					<text class="gray" style="padding-right: 0;">{{rssiText}}</text>
				</view>
			</view>
			<view class="menuitem">
				<text>固件版本</text>
				<text class="gray">{{firmwareVersion || '未获取'}}</text>
			</view>
			<view class="menuitem lastItem">
				<text>连接状态</text>
				<text class="gray">{{connected ? '已连接' : '未连接'}}</text>
			</view>

			<text class="txt">设备操作</text>
			<view class="menuitem" @click="disconnectDevice" v-if="connected">
				<text>断开连接</text>
				<image class="arrowright" src="/static/my/arrowright.png" mode="aspectFill"></image>
			</view>
			<view class="menuitem lastItem">
				<text>帮助与反馈</text>
				<image class="arrowright" src="/static/my/arrowright.png" mode="aspectFill"></image>
			</view>

			<view class="delbtn" @click="delDevice">
				<text class="delbtn-text">删除设备</text>
			</view>
		</scroll-view>
		<ay-toast ref="ayToast" />
	</view>
</template>

<script>
import { useBleStore } from '@/stores/ble'
import { BLE_STATE } from '@/utils/ble/constants.js'
import ayToast from '@/components/ay-toast/ay-toast.nvue'

export default {
	components: {
		ayToast
	},
	data() {
		return {
			statusBarHeight: 44,
			name: '',
			deviceId: '',
			rssi: '',
			connected: false,
			connecting: false,
			firmwareVersion: '',
			_unbinders: []
		}
	},
	computed: {
		rssiText() {
			console.log("信号强度",this.rssi)
			if (!this.rssi) return '未知'
			const val = Number(this.rssi)
			if (val >= -50) return '非常强'
			if (val >= -65) return '强'
			if (val >= -80) return '中'
			
			return '弱'
		},
		signalLevel() {
			if (!this.rssi) return 0
			const val = Number(this.rssi)
			if (val >= -50) return 4
			if (val >= -65) return 3
			if (val >= -80) return 2
			if (val >= -95) return 1
			return 1
		}
	},
	onLoad(options) {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
		this.name = decodeURIComponent(options.name || '')
		this.deviceId = decodeURIComponent(options.deviceId || '')
		this.rssi = decodeURIComponent(options.rssi || '')
	},
	async onShow() {
		const bleStore = useBleStore()
		// 用bleState精确判断连接状态
		this.connected = (bleStore.bleState === BLE_STATE.READY_COMM)
		console.log("连接状态", this.connected, "bleState:", bleStore.bleState)
		
		// 已连接时获取实时RSSI（使用store中实际连接的deviceId）
		const connectedId = bleStore.device && bleStore.device.deviceId
		if (this.connected && connectedId) {
			console.log("获取RSSI使用deviceId:", connectedId, "页面deviceId:", this.deviceId)
			uni.getBLEDeviceRSSI({
				deviceId: connectedId,
				success: (res) => {
					console.log("实时信号强度", res.RSSI)
					this.rssi = res.RSSI
				},
				fail: (err) => {
					console.log("获取RSSI失败", err)
					// 连接实际已断开，同步状态
					if (err.code === 10004) {
						this.connected = false
					}
				}
			})
		}
		
		// 监听store状态变化（使用$watch）
		this._stopWatch = this.$watch(
			() => bleStore.bleState,
			(s) => {
				this.connected = (s === BLE_STATE.READY_COMM)
				if (s === BLE_STATE.DISCONNECTED) {
					this.connecting = false
				}
			}
		)
	},
	onHide() {
		this._cleanListeners()
	},
	onUnload() {
		this._cleanListeners()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		_cleanListeners() {
			if (this._stopWatch) {
				this._stopWatch()
				this._stopWatch = null
			}
		},
		async connectDevice() {
			if (this.connecting || this.connected) return
			this.connecting = true
			const bleStore = useBleStore()
			try {
				await bleStore.init()
				await bleStore.connectDevice(this.deviceId)
				this.connected = true
				this.$refs.ayToast.success('连接成功')
			} catch (e) {
				this.$refs.ayToast.error('连接失败: ' + (e.message || ''))
			} finally {
				this.connecting = false
			}
		},
		async disconnectDevice() {
			const bleStore = useBleStore()
			try {
				await bleStore.disconnect()
				this.connected = false
				this.$refs.ayToast.success('已断开连接')
			} catch (e) {
				this.$refs.ayToast.error('断开失败')
			}
		},
		delDevice() {
			const bleStore = useBleStore()
			uni.showModal({
				title: '提示',
				content: '此操作将删除该设备，是否继续？',
				cancelText: '取消',
				confirmText: '继续',
				success: (res) => {
					if (res.confirm) {
						if (this.connected) {
							bleStore.disconnect().catch(() => {})
						}
						// 从本地存储中移除
						try {
							let deviceList = uni.getStorageSync('deviceList') || []
							deviceList = deviceList.filter(item => item.deviceId !== this.deviceId)
							uni.setStorageSync('deviceList', deviceList)
						} catch (e) {}

						this.$refs.ayToast.success('设备删除成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				}
			})
		}
	}
}
</script>

<style>
.container {
	flex: 1;
	background-color: #FFFFFF;
}

.status-bar {
	background-color: #FFFFFF;
}

.customHead {
	width: 750rpx;
	background-color: #FFFFFF;
	flex-direction: row;
	justify-content: space-between;
	height: 88rpx;
	align-items: center;
	padding-left: 54rpx;
	padding-right: 54rpx;
}

.back-wrap {
	width: 50rpx;
	height: 50rpx;
	justify-content: center;
	align-items: center;
}

.backimg {
	width: 50rpx;
	height: 50rpx;
}

.head-title {
	font-weight: bold;
	font-size: 32rpx;
	color: #545F71;
}

.plus {
	width: 50rpx;
	height: 50rpx;
}

.list {
	flex: 1;
}

.connect-status {
	flex-direction: row;
	align-items: center;
	margin-left: 38rpx;
	margin-right: 38rpx;
	margin-top: 30rpx;
	margin-bottom: 10rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	background-color: #F8F9FB;
	border-radius: 12rpx;
}

.status-dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 16rpx;
	background-color: #CCCCCC;
	margin-right: 12rpx;
}

.status-text {
	font-size: 28rpx;
	color: #545F71;
	flex: 1;
}

.connect-btn {
	font-size: 26rpx;
	color: #389588;
	padding-top: 8rpx;
	padding-bottom: 8rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
	border-width: 1px;
	border-style: solid;
	border-color: #389588;
	border-radius: 24rpx;
}

.txt {
	margin-top: 50rpx;
	margin-left: 38rpx;
	margin-right: 38rpx;
	font-size: 28rpx;
	color: #9BA5B7;
}

.lastItem {
	border-bottom-width: 0;
}

.menuitem {
	margin-left: 38rpx;
	margin-right: 38rpx;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 104rpx;
	font-size: 32rpx;
	color: #545F71;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEF1F4;
}

.gray {
	font-size: 28rpx;
	color: #9BA5B7;
	padding-right: 20rpx;
}

.device-id-text {
	font-size: 22rpx;
}

.signal-value-wrap {
	flex-direction: row;
	align-items: center;
	padding-right: 20rpx;
}

.signal-wrap {
	flex-direction: row;
	align-items: flex-end;
	margin-right: 12rpx;
	height: 38rpx;
	padding-bottom: 4rpx;
}

.signal-bar {
	width: 8rpx;
	margin-left: 4rpx;
	border-radius: 4rpx;
	background-color: #ddd;
}

.signal-bar1 {
	height: 14rpx;
}

.signal-bar2 {
	height: 22rpx;
}

.signal-bar3 {
	height: 30rpx;
}

.signal-bar4 {
	height: 38rpx;
}

.signal-active {
	background-color: #389588;
}

.arrowright {
	width: 40rpx;
	height: 40rpx;
}

.delbtn {
	width: 654rpx;
	height: 96rpx;
	background-color: #F3F3F3;
	border-radius: 12rpx;
	margin-top: 60rpx;
	margin-left: 48rpx;
	margin-right: 48rpx;
	justify-content: center;
	align-items: center;
}

.delbtn-text {
	font-size: 32rpx;
	color: #F65252;
}
</style>