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

<template>
	<view class="page">
		<image class="content-bg" src="/static/device/devicebg.png" mode="scaleToFill"></image>
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		<!-- 顶部导航 -->
		<view class="custom-head">
			<view class="head-back" @click="goBack">
				<image class="back-icon" src="/static/public/back-arrow.png" mode="aspectFit"></image>
			</view>
			<text class="head-title">添加设备</text>
			<view class="head-placeholder"></view>
		</view>

		<!-- 扫描状态提示 -->
		<view class="search-tip">
			<text class="search-tip-text">{{searching ? '正在搜索附近设备...' : '搜索完成'}}</text>
			<text class="search-btn" @click="onRefresh">{{searching ? '停止' : '重新搜索'}}</text>
		</view>

		<!-- 设备列表 -->
		<scroll-view class="device-scroll" scroll-y="true">
			<view class="device-item" v-for="(item, index) in deviceList" :key="index" @click="onSelectDevice(item)">
				<view class="device-info">
					<text class="device-name">{{item.name || '未知设备'}}</text>
					<text class="device-id">{{item.deviceId}}</text>
				</view>
				<view class="device-right">
					<!-- 信号强度图标 -->
					<view class="signal-wrap">
						<view class="signal-bar signal-bar1" :class="{'signal-active': getSignalLevel(item.RSSI) >= 1}"></view>
						<view class="signal-bar signal-bar2" :class="{'signal-active': getSignalLevel(item.RSSI) >= 2}"></view>
						<view class="signal-bar signal-bar3" :class="{'signal-active': getSignalLevel(item.RSSI) >= 3}"></view>
						<view class="signal-bar signal-bar4" :class="{'signal-active': getSignalLevel(item.RSSI) >= 4}"></view>
					</view>
					<text class="connect-btn">添加</text>
				</view>
			</view>

			<view class="empty-tip" v-if="!searching && deviceList.length === 0">
				<text class="empty-text">未发现设备，请确认设备已开启</text>
			</view>
		</scroll-view>

		<ay-toast ref="ayToast" />
	</view>
</template>

<script>
import bleManager, {
	BLE_STATE, ensureBlePrerequisite, openLocationSettings
} from '@/utils/ble'
import ayToast from '@/components/ay-toast/ay-toast.nvue'

export default {
	components: {
		ayToast
	},
	data() {
		return {
			statusBarHeight: 44,
			searching: false,
			deviceList: [],
			_unbinders: []
		}
	},
	onLoad() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44

		// 配置并监听事件
		bleManager.configure({ debug: true })

		this._unbinders = [
			bleManager.on('state', s => {
				this.searching = (s === BLE_STATE.SCANNING)
			}),
			bleManager.on('deviceFound', d => {
				// 避免重复
				const exists = this.deviceList.find(item => item.deviceId === d.deviceId)
				if (!exists) {
					this.deviceList.push({
						deviceId: d.deviceId,
						name: d.name || d.localName || '',
						RSSI: d.RSSI || ''
					})
				}
			})
		]

		this.startScan()
	},
	onUnload() {
		// 离开页面停止扫描
		this.stopScan()
		if (this._unbinders && this._unbinders.length) {
			this._unbinders.forEach(fn => fn && fn())
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		async startScan() {
			this.deviceList = []
			try {
				await ensureBlePrerequisite()
				await bleManager.init()
				// 使用returnAll模式，超时后resolve所有设备
				bleManager.scan({ timeout: 15000, returnAll: true }).then(devices => {
					// 扫描结束
					this.searching = false
				}).catch(e => {
					this.searching = false
					console.error('扫描异常', e)
				})
			} catch (e) {
				this.searching = false
				if (e.message === 'BLE_LOCATION_OFF') {
					uni.showModal({
						title: '提示',
						content: '请先开启位置服务以搜索蓝牙设备',
						success: r => {
							if (r.confirm) openLocationSettings()
						}
					})
				} else if (e.message === 'BLE_ADAPTER_OFF') {
					this.$refs.ayToast.error('请先开启蓝牙')
				} else if (e.message === 'BLE_PERMISSION_DENIED') {
					this.$refs.ayToast.error('请授权蓝牙权限')
				} else {
					this.$refs.ayToast.error('扫描失败: ' + (e.message || ''))
				}
			}
		},
		stopScan() {
			try {
				uni.stopBluetoothDevicesDiscovery({
					success() {},
					fail() {}
				})
			} catch (e) {}
		},
		onRefresh() {
			if (this.searching) {
				this.stopScan()
				this.searching = false
			} else {
				this.startScan()
			}
		},
		getSignalLevel(rssi) {
			// RSSI转信号格数: 4格(强) / 3格 / 2格 / 1格(弱)
			if (!rssi) return 0
			const val = Number(rssi)
			if (val >= -50) return 4   // 非常强
			if (val >= -65) return 3   // 强
			if (val >= -80) return 2   // 中
			if (val >= -95) return 1   // 弱
			return 1
		},
		onSelectDevice(device) {
			// 将设备添加到本地存储的设备列表
			let deviceList = []
			try {
				const data = uni.getStorageSync('deviceList')
				if (data && data.length > 0) {
					deviceList = data
				}
			} catch (e) {}

			// 检查是否已添加
			const exists = deviceList.find(item => item.deviceId === device.deviceId)
			if (exists) {
				this.$refs.ayToast.show('该设备已添加')
				return
			}

			// 添加设备
			deviceList.push({
				deviceId: device.deviceId,
				name: device.name || '艾灸椅',
				RSSI: device.RSSI
			})
			uni.setStorageSync('deviceList', deviceList)
			this.$refs.ayToast.success('设备添加成功')

			// 延迟返回
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		}
	}
}
</script>

<style>
.page {
	flex: 1;
	position: relative;
}
.content-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 750rpx;
	height: 2000px;
}
.status-bar {
	background-color: rgba(0,0,0,0);
}
.custom-head {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 88rpx;
	padding-left: 30rpx;
	padding-right: 54rpx;
}
.head-back {
	width: 60rpx;
	height: 60rpx;
	justify-content: center;
	align-items: center;
}
.back-icon {
	width: 60rpx;
	height: 60rpx;
}
.head-title {
	font-weight: bold;
	font-size: 32rpx;
	color: #545F71;
}
.head-placeholder {
	width: 60rpx;
	height: 60rpx;
}
.search-tip {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-left: 38rpx;
	padding-right: 38rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}
.search-tip-text {
	font-size: 26rpx;
	color: #999;
}
.search-btn {
	font-size: 26rpx;
	color: #389588;
	padding: 10rpx 24rpx;
	border-width: 1px;
	border-style: solid;
	border-color: #389588;
	border-radius: 24rpx;
}
.device-scroll {
	flex: 1;
	padding-left: 38rpx;
	padding-right: 38rpx;
}
.device-item {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}
.device-info {
	flex: 1;
}
.device-name {
	font-size: 30rpx;
	color: #333;
	font-weight: bold;
}
.device-id {
	font-size: 22rpx;
	color: #999;
	margin-top: 8rpx;
}
.device-right {
	align-items: center;
}
.signal-wrap {
	flex-direction: row;
	align-items: flex-end;
	margin-bottom: 12rpx;
}
.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;
}
.connect-btn {
	font-size: 26rpx;
	color: #FFFFFF;
	background-color: #389588;
	padding-left: 24rpx;
	padding-right: 24rpx;
	padding-top: 12rpx;
	padding-bottom: 12rpx;
	border-radius: 20rpx;
}
.empty-tip {
	align-items: center;
	padding-top: 100rpx;
}
.empty-text {
	font-size: 28rpx;
	color: #999;
}
</style>