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>

		<!-- 扫描限流警告 -->
		<view class="throttle-warning" v-if="scanThrottled">
			<text class="throttle-text">扫描过于频繁，可能无法搜索到设备，请稍等片刻再试</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 { useBleStore } from '@/stores/ble'
import { ensureBlePrerequisite, openLocationSettings, openBluetoothSettings } from '@/utils/ble/permission.js'
import { bindDeviceByCode } from '@/utils/api/device.js'
import ayToast from '@/components/ay-toast/ay-toast.nvue'

export default {
	components: {
		ayToast
	},
	data() {
		return {
			statusBarHeight: 44,
			btModalShowing: false
		}
	},
	computed: {
		bleStore() {
			return useBleStore()
		},
		searching() {
			return this.bleStore.searching
		},
		deviceList() {
			console.log("scannedDevices	",this.bleStore.scannedDevices)
			return this.bleStore.scannedDevices
		},
		scanThrottled() {
			return this.bleStore.scanThrottled
		}
	},
	onLoad() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44

		// 配置并开始扫描
		this.bleStore.configure({ debug: true })
		this.startScan()
	},
	onUnload() {
		// 离开页面才真正停止底层BLE发现
		this.bleStore.stopScan()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		async startScan() {
			try {
				console.log("重新扫描")
				await ensureBlePrerequisite()
				// startScan 内部自动初始化适配器，扫描结果自动更新 store.scannedDevices
				await this.bleStore.startScan({ timeout: 15000, returnAll: true })
			} catch (e) {
				const msg = e && (e.message || e.code || '')
				if (msg === 'BLE_LOCATION_OFF') {
					uni.showModal({
						title: '提示',
						content: '请先开启位置服务以搜索蓝牙设备',
						success: r => {
							if (r.confirm) openLocationSettings()
						}
					})
				} else if (msg === 'BLE_ADAPTER_OFF' || msg === 'BLE_ADAPTER_OFF') {
					if (this.btModalShowing) return
					this.btModalShowing = true
					uni.showModal({
						title: '蓝牙未开启',
						content: '请先开启手机蓝牙，才能搜索和连接艾灸椅设备',
						confirmText: '去设置',
						cancelText: '取消',
						success: r => {
							this.btModalShowing = false
							if (r.confirm) openBluetoothSettings()
						}
					})
				} else if (msg === 'BLE_PERMISSION_DENIED') {
					this.$refs.ayToast.error('请授权蓝牙权限')
				} else {
					console.error('扫描异常', e)
					this.$refs.ayToast.error('扫描失败: ' + (msg || ''))
				}
			}
		},
		onRefresh() {
			if (this.searching) {
				this.bleStore.stopScan()
			} else {
				this.startScan()
			}
		},
		getSignalLevel(rssi) {
			console.log("信号",rssi)
			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
		},
		async onSelectDevice(device) {
			console.log("要操作的设备",device)
			let deviceList = []
			try {
				// uni.removeStorageSync('deviceList')
				const data = uni.getStorageSync('deviceList')
				console.log("deviceList",data)
				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
			}

			try {
				// 调用后端接口绑定设备，deviceId作为deviceCode传递
				const res = await bindDeviceByCode(device.deviceId)
				console.log('绑定设备成功', res)

				// 后端绑定成功后，保存到本地
				deviceList.push({
					deviceId: device.deviceId,
					name: device.name || '艾灸椅',
					RSSI: device.RSSI,
					id:res.id
				})
				uni.setStorageSync('deviceList', deviceList)
				this.$refs.ayToast.success('设备添加成功')

				setTimeout(() => {
					uni.redirectTo({
						url: `/pages/device/deviceInfo/deviceInfo?deviceId=${encodeURIComponent(device.deviceId)}&name=${encodeURIComponent(device.name || '艾灸椅')}&rssi=${device.RSSI || ''}`
					})
				}, 1000)
			} catch (e) {
				console.error('绑定设备失败', e)
				// 错误提示由http模块统一处理，这里不再重复提示
			}
		}
	}
}
</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;
}
.throttle-warning {
	background-color: #FFF3E0;
	padding: 16rpx 38rpx;
	margin-left: 38rpx;
	margin-right: 38rpx;
	border-radius: 12rpx;
	margin-bottom: 16rpx;
}
.throttle-text {
	font-size: 24rpx;
	color: #E65100;
}
</style>