<template>
|
<view class="content">
|
<view class="padding-sm flex flex-direction" style="width:100%;">
|
<button class="cu-btn bg-cyan lg" :loading="foundLodaing" @click="foundDevice"
|
style="width:100%;">搜索蓝牙设备</button>
|
</view>
|
<!-- 筛选部分 -->
|
<view class="flex filter-select_box">
|
<view class="text-white flex filter-select_item"
|
:class="selectActiveIndex==1?'filter-select':'filter-unselect'"
|
style="border-bottom-left-radius: 10rpx;border-top-left-radius: 10rpx;margin-right: 1rpx;" data-index=1
|
@tap="selectActive">全部
|
</view>
|
<view class="flex text-white filter-select_item" data-index=2
|
:class="selectActiveIndex==2?'filter-select':'filter-unselect'" @tap="selectActive">名称</view>
|
<view class="flex text-white filter-select_item" data-index=3
|
:class="selectActiveIndex==3?'filter-select':'filter-unselect'"
|
style="border-bottom-right-radius: 10rpx;border-top-right-radius: 10rpx;margin-right: 1rpx;"
|
@tap="selectActive">日期</view>
|
</view>
|
|
<!-- 历史配对设备 如果没有则不显示 -->
|
<view class="padding-sm flex"
|
style="width: 100%;justify-content: space-between;background: #16b5cb;padding: 15rpx; margin-top: 15rpx;"
|
@tap="isHistoryList">
|
<text class="text-white">连接过的设备</text>
|
<text class="text-white cuIcon-usefullfill "
|
:class="isHideHistoryList && historyConnectDeviceList.length>0?'roate-userfull':'unroate-userfull'"
|
style="margin-top: 8rpx;"></text>
|
</view>
|
|
<view class="cu-list menu sm-border" v-if="isHideHistoryList && historyConnectDeviceList.length>0"
|
style="width:100%">
|
<view class="cu-item" style="min-height: 100rpx;width: 100%;"
|
v-for="(history_item,history_index) in historyConnectDeviceList" :key="history_index">
|
<view class="content" @click="stepLodaing(history_item)">
|
<view style="width: 100%;">
|
<text class="text-grey iconfont icon-huaban" style="font-size: 60rpx;"></text>
|
<text class="text-gray" style="font-size: 36rpx; margin: 30rpx;">{{history_item.name}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="padding-sm flex" style="width:100%;justify-content: space-between;">
|
<text class="text-gray">设备列表</text>
|
<text class="text-gray">设备数量：{{bluetoothDeviceFoundList.length}}</text>
|
</view>
|
<!-- 设备列表部分 -->
|
<scroll-view scroll-y="true" style="width:100%;height:calc(100vh - 370rpx)">
|
<view class="cu-list menu sm-border">
|
<view class="cu-item" style="min-height: 100rpx;"
|
v-for=" (device_item,device_index) in bluetoothDeviceFoundList" :key="device_index">
|
<view class="content" @click="stepLodaing(device_item)">
|
<view style="width: 100%;">
|
<text class="text-grey iconfont icon-huaban" style="font-size: 60rpx;"></text>
|
<text class="text-gray" style="font-size: 36rpx; margin: 30rpx;">{{device_item.name}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
var Constant = require('../../utils/constant.js');
|
export default {
|
data() {
|
return {
|
initBlueToothStatus: false, //蓝牙的初始化状态
|
selectActiveIndex: 1, //顶部选择激活
|
uuidListByService: [], //存放 开始搜索蓝牙外围设备时，对应uuid的设备
|
bluetoothDeviceFoundList: [], //存放寻找到的附加蓝牙设备的列表
|
foundLodaing: false, //点击搜索蓝牙按钮的时候触发等待
|
startBluetoothDevicesDiscoveryRecord: false, //记录是否搜索过蓝牙设备 默认没有为false
|
historyConnectDeviceList: [], //历史连接的设备的记录
|
filterName: 'XinLi-XL11_', //筛选搜索固定的设备
|
isHideHistoryList: false, //显示或者隐藏历史连接设备列表
|
}
|
},
|
onLoad() {
|
this.openBluetoothAdapter()
|
let historyConnectDeviceList = uni.getStorageSync("productListInfo")
|
console.log(historyConnectDeviceList)
|
if (historyConnectDeviceList.length > 0) {
|
this.isHideHistoryList = true
|
}
|
// console.log(historyConnectDeviceList)
|
this.historyConnectDeviceList = historyConnectDeviceList
|
|
},
|
onUnload() {
|
this.StopBluetoothDevicesDiscovery()
|
},
|
onShareAppMessage: function() {
|
return Constant.Share
|
},
|
methods: {
|
//初始化蓝牙
|
openBluetoothAdapter: function() {
|
let that = this
|
uni.openBluetoothAdapter({
|
mode: 'central',
|
success: (res) => {
|
console.log('初始化蓝牙成功', res)
|
this.initBlueToothStatus = true
|
},
|
fail: (err) => {
|
console.log('初始化蓝牙失败', err)
|
this.initBlueToothStatus = false
|
that.errMsgDetail(err)
|
uni.showModal({
|
title: '提示',
|
content: err.errMsg,
|
showCancel: false
|
})
|
},
|
complete: (res) => {
|
console.log('openBluetoothAdapter complete', res);
|
that.onBluetoothAdapterStateChange() //监听蓝牙开启状态
|
}
|
})
|
},
|
//监听蓝牙适配器的状态
|
onBluetoothAdapterStateChange: function() {
|
uni.onBluetoothAdapterStateChange((res) => {
|
// console.log('监听蓝牙适配器的状态', res)
|
let status = res.available //蓝牙适配器是否可用
|
let isFound = res.discovering //蓝牙是否在搜索中
|
let Record = this.startBluetoothDevicesDiscoveryRecord
|
|
if (!status) {
|
uni.showModal({
|
title: '提示',
|
content: '请打开蓝牙',
|
showCancel: false
|
})
|
this.bluetoothDeviceFoundList = []
|
}
|
})
|
},
|
|
//开始搜索蓝牙外围设备
|
startBluetoothDevicesDiscovery: function() {
|
let that = this
|
uni.startBluetoothDevicesDiscovery({
|
services: that.uuidListByService,
|
allowDuplicatesKey: false,
|
powerLevel: 'high',
|
success: res => {
|
// console.log('开始搜索蓝牙设备', res)
|
|
that.onBluetoothDeviceFound() //成功搜索后，监听寻找到的蓝牙设备
|
that.getBluetoothDevices() // 成功搜索后，获取寻找到的所有蓝牙设备
|
},
|
fail: err => {
|
console.log('搜索蓝牙设备失败', err)
|
that.foundLodaing = false
|
uni.showToast({
|
title: '蓝牙未打开',
|
icon: "none",
|
duration: 1000,
|
})
|
}
|
})
|
},
|
//停止搜索附近蓝牙设备
|
StopBluetoothDevicesDiscovery: function() {
|
uni.stopBluetoothDevicesDiscovery({
|
success: (res) => {
|
console.log('成功停止搜索设备', res)
|
},
|
fail: (err) => {
|
console.log('停止搜索设备失败', err)
|
}
|
})
|
},
|
//监听寻找蓝牙新设备
|
onBluetoothDeviceFound: function() {
|
uni.onBluetoothDeviceFound((result) => {
|
console.log(result)
|
// for (let i = 0; i < this.bluetoothDeviceFoundList.length; i++) {
|
// if (this.bluetoothDeviceFoundList[i].deviceId.indexOf(result.devices[0].deviceId) != -
|
// 1) {
|
// this.bluetoothDeviceFoundList.push(result.devices[0])
|
// }
|
// }
|
// if (result.devices[0].name == "") {
|
// result.devices[0].name = '未知设备'
|
// this.bluetoothDeviceFoundList.push(result.devices[0])
|
// // console.log(this.bluetoothDeviceFoundList)
|
// }
|
})
|
},
|
|
//获取在蓝牙开启有效期内搜索到的所有蓝牙设备
|
getBluetoothDevices: function() {
|
let that = this
|
let foundList = []
|
let filterName = "XinLi-XL11_"
|
uni.getBluetoothDevices({
|
success: (result) => {
|
console.log('打印蓝牙有效期内搜索的所有蓝牙设备', result)
|
for (let i = 0; i < result.devices.length; i++) {
|
let allInfo = result.devices[i]
|
if (allInfo.name.indexOf("XinLi-XL11") != -1) {
|
allInfo.name = allInfo.name.replace("XinLi-XL11", "Eventech") //文字替换
|
// console.log('123', allInfo.name)
|
}
|
if (allInfo.name.indexOf("Eventech") != -1) {
|
let serviceInfo = {
|
RSSI: allInfo.RSSI,
|
deviceId: allInfo.deviceId,
|
name: allInfo.name
|
}
|
foundList.push(serviceInfo)
|
}
|
}
|
if (foundList.length == 0) {
|
uni.showToast({
|
title: '暂未发现设备,请重新搜索',
|
icon: 'none',
|
duration: 1000
|
})
|
setTimeout(function() {
|
that.foundLodaing = false
|
}, 1000);
|
return;
|
}
|
that.bluetoothDeviceFoundList = foundList
|
setTimeout(function() {
|
that.foundLodaing = false
|
}, 1000);
|
|
// console.log(that.data.bluetoothDeviceFoundList)
|
},
|
fail: (fail) => {
|
console.log('获取蓝牙有效期内搜索的所有蓝牙设备失败', fail)
|
setTimeout(function() {
|
that.foundLodaing = false
|
}, 1000)
|
}
|
})
|
},
|
//错误代码处理
|
errMsgDetail: function(err) {
|
// console.log(err.errCode)
|
if (err.errCode == 0) {
|
err.errMsg = '正常'
|
} else if (err.errCode == -1) {
|
err.errMsg = '已连接'
|
} else if (err.errCode == 10000) {
|
err.errMsg = '未初始化蓝牙'
|
} else if (err.errCode = 10001) {
|
err.errMsg = '当前蓝牙适配器不可用,请打开蓝牙再搜索'
|
} else if (err.errCode == 10002) {
|
err.errMsg = '没有找到指定设备'
|
} else if (err.errCode == 10003) {
|
err.errMsg = '连接失败'
|
} else if (err.errCode == 10004) {
|
err.errMsg = '没有找到指定服务'
|
} else if (err.errCode == 10005) {
|
err.errMsg = '没有找到特征指'
|
} else if (err.errCode == 10006) {
|
err.errMsg = '当前连接已断开'
|
} else if (err.errCode == 10007) {
|
err.errMsg = '当前特征值不支持此操作'
|
} else if (err.errCode == 10008) {
|
err.errMsg = '其余所有系统上报的异常'
|
} else if (err.errCode == 10009) {
|
err.errMsg = '系统版本低于 4.3 不支持 蓝牙'
|
} else if (err.errCode == 10012) {
|
err.errMsg = '连接超时'
|
} else if (err.errCode == 10013) {
|
err.errMsg = '连接 deviceId 为空或者是格式不正确'
|
} else {
|
err.errMsg = err.errMsg
|
}
|
},
|
//选择激活
|
selectActive: function(e) {
|
// console.log(e)
|
this.selectActiveIndex = e.currentTarget.dataset.index
|
let list = this.bluetoothDeviceFoundList //原设备数组
|
let newList = [] //临时数组
|
let index = e.currentTarget.dataset.index //当前筛选类型的下标
|
let filterName = this.filterName //需要筛选的设备名称
|
|
//筛选型号为XinLi的设备
|
if (index == 1) {
|
this.startBluetoothDevicesDiscovery()
|
} else if (index == 2) {
|
let currentIdx = list.findIndex(v => v.name.search('Eventech') != -1);
|
// console.log('索引值为：', currentIdx);
|
if (currentIdx == -1) {
|
return;
|
}
|
newList.push(list[currentIdx]);
|
list.splice(currentIdx, 1); //从start[一般为对象的索引]的位置开始向后删除delCount个元素
|
// console.log('移除后的数据', list, '筛选出来的数据', newList);
|
//重新渲染数组
|
list = newList.concat(list);
|
// console.log(list);
|
this.bluetoothDeviceFoundList = list
|
}
|
},
|
|
//搜索蓝牙设备
|
foundDevice: function() {
|
this.foundLodaing = true
|
this.startBluetoothDevicesDiscovery() //蓝牙初始化成功后开始搜索附加设备
|
},
|
//显示或者隐藏历史设备
|
isHistoryList: function() {
|
this.isHideHistoryList = !this.isHideHistoryList
|
},
|
|
//跳转到连接等待页面
|
stepLodaing: function(device) {
|
//连接蓝牙设备前先关闭蓝牙设备的搜索,防止资源占用过大
|
this.StopBluetoothDevicesDiscovery()
|
let info = JSON.stringify(device)
|
console.log('打印连接设备的基本信息', info)
|
|
// this.bluetoothDeviceFoundList = []
|
uni.reLaunch({
|
url: '../DeviceDetail/index?device=' + info
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
@import url("/style/animation.css");
|
@import url("/style/main.css");
|
@import url("/style/icon.css");
|
@import url("/style/iconfont.css");
|
|
.content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.logo {
|
height: 200rpx;
|
width: 200rpx;
|
margin-top: 200rpx;
|
margin-left: auto;
|
margin-right: auto;
|
margin-bottom: 50rpx;
|
}
|
|
.text-area {
|
display: flex;
|
justify-content: center;
|
}
|
|
.title {
|
font-size: 36rpx;
|
color: #8f8f94;
|
}
|
|
.filter-unselect {
|
background: #ffffff;
|
color: #16b5cb;
|
}
|
|
.filter-select {
|
background: #16b5cb;
|
color: #ffffff;
|
}
|
|
.filter-select_box {
|
width: 100%;
|
height: 80rpx;
|
background: #16b5cb;
|
color: #ffffff;
|
justify-content: center;
|
align-items: center;
|
border-radius: 10rpx;
|
}
|
|
.filter-select_item {
|
width: 32.97%;
|
height: 95%;
|
align-items: center;
|
justify-content: center;
|
margin-left: 1rpx;
|
}
|
|
.roate-userfull {
|
transform: rotate(180deg);
|
transition: 1s;
|
}
|
|
.unroate-userfull {
|
transform: rotate(0deg);
|
transition: 1s;
|
}
|
</style>
|
