techtron/pages/bluetooth/index/index.vue

<template>
	<scroll-view class="main-container" scroll-y="true"
		:refresher-enabled="false">
		<view v-for="(item, index) in deviceListDataShow" :key="item.id" class="list-item" hover-class="list-item-hover"
			hover-start-time="0" hover-stay-time="100" @click="listViewTap(item.id)">
			<image v-if="item.manufacturer==='eciot'" src="/static/img/ecble.png" class="list-item-img"></image>
			<image v-else src="/static/img/ble.png" class="list-item-img"></image>
			<text class="list-item-name">{{item.name}}</text> 
			<image v-if="item.rssi >= -41" src="/static/img/s5.png" mode="aspectFit" class="list-item-rssi-img"></image>
			<image v-else-if="item.rssi >= -55" src="/static/img/s4.png" mode="aspectFit" class="list-item-rssi-img"></image>
			<image v-else-if="item.rssi >= -65" src="/static/img/s3.png" mode="aspectFit" class="list-item-rssi-img"></image>
			<image v-else-if="item.rssi >= -75" src="/static/img/s2.png" mode="aspectFit" class="list-item-rssi-img"></image>
			<image v-else="item.rssi < -75" src="/static/img/s1.png" mode="aspectFit" class="list-item-rssi-img"></image>
			<text class="list-item-rssi">{{item.rssi}}</text>
			<view class="list-item-line"></view>
		</view>
		<view v-if="deviceListDataShow.length==0" class="notice"> - 未发现设备，请确认蓝牙是否打开 -</view>
		<view class="gap"></view>
	</scroll-view>
</template>

<script> 
// #ifdef APP
import ecUI from '@/utils/ecUI.js'
import ecBLE from '@/utils/ecBLE/ecBLE.js'
// #endif   
// #ifdef MP
const ecUI = require('@/utils/ecUI.js')     
const ecBLE = require('@/utils/ecBLE/ecBLE.js')
// #endif
	let ctx
	let deviceListData = []
	export default {  
		data() {
			return {
        timer:"",
				deviceListDataShow: []
			}
		},
		onLoad() {
			ctx = this
      clearInterval(this.timer);
			this.timer = setInterval(() => {
				ctx.deviceListDataShow = JSON.parse(JSON.stringify(deviceListData))
			}, 800)
		},
		onShow() {
			setTimeout(() => {
				ctx.openBluetoothAdapter()
			}, 100)
		},
		methods: {
			listViewTap(id){
				ecUI.showLoading('设备连接中')
				ecBLE.onBLEConnectionStateChange(res => {
					ecUI.hideLoading()
					if (res.ok) {
						ecBLE.stopBluetoothDevicesDiscovery()
						uni.navigateTo({ url: '../device/device' })
					} else {
						ecUI.showModal(
							'提示',
							'连接失败,errCode=' + res.errCode + ',errMsg=' + res.errMsg
						)
					}
				})
				ecBLE.createBLEConnection(id)
			},
			openBluetoothAdapter() {
				ecBLE.onBluetoothAdapterStateChange(res => {
					if (res.ok) {
						console.log('Bluetooth adapter ok')
						ctx.startBluetoothDevicesDiscovery()
					} else {
						ecUI.showModal(
							'提示',
							`Bluetooth adapter error | ${res.errCode} | ${res.errMsg}`,
							() => {

							}
						)
					}
				})
				ecBLE.openBluetoothAdapter()
			},
			startBluetoothDevicesDiscovery() {
				console.log('start search')
				ecBLE.onBluetoothDeviceFound(res => {
					// if(res.id==="EC:22:05:13:78:49")
					// console.log(`id:${res.id},name:${res.name},rssi:${res.rssi}`)
					for (const item of deviceListData) {
						if (item.id === res.id) {
							item.name = res.name
							item.rssi = res.rssi
							return
						}
					}
					let manufacturer = ''
					if (res.name.length === 11 && res.name.startsWith('@')) {
						manufacturer = 'eciot'
					}
					if (res.name.length === 15 && res.name.startsWith('BT_')) {
						manufacturer = 'eciot'
					}
					deviceListData.push({
						id: res.id,
						name: res.name,
						rssi: res.rssi,
						manufacturer,
					})
				})
				ecBLE.startBluetoothDevicesDiscovery()
			},
		}
	}
</script>

<style>
	.main-container {
		height: 100vh;
	}

	.list-item {
		height: 57px;
		position: relative;
	}

	.list-item-hover {
		background-color: #e5e4e9;
	}

	.list-item-img {
		position: absolute;
		width: 36px;
		height: 36px;
		left: 20px;
		top: 10px;
	}

	.list-item-name {
		position: absolute;
		font-size: 22px;
		left: 76px;
		top: 0px;
		line-height: 56px;
	}

	.list-item-rssi-img {
		position: absolute;
		width: 20px;
		height: 20px;
		right: 20px;
		top: 13px;
	}

	.list-item-rssi {
		position: absolute;
		width: 40px;
		height: 20px;
		right: 10px;
		top: 33px;
		font-size: 12px;
		font-weight: bold;
		display: flex;
		justify-content: center;
	}

	.list-item-line {
		position: absolute;
		height: 1px;
		width: 100vw;
		left: 20px;
		top: 56px;
		background-color: #c6c6c8;
	}

	.notice {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
		font-size: 13px;
		color: #909399;
	}

	.gap {
		height: 57px;
	}
</style>