<template>
|
<view class="content search_box">
|
<view style="position: absolute;width: 100%;height: 100%;background: #010029;">
|
<image src="../../static/background.png" style="width: 100%;height: 100%;"></image>
|
</view>
|
<view class="search_btn_box" @click="foundDevice">
|
<view :class="foundLodaing?'search_animation':'search_img'">
|
<img src="../../static/w_icon.png" alt="">
|
</view>
|
<view class="search_title">搜索蓝牙</view>
|
</view>
|
<!-- 蓝牙设备列表对话框 -->
|
<view class="cu-modal" :class="productListModal==true?'show':''">
|
<view class="cu-dialog" style="height:500upx;width: 100%;">
|
<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>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
var Constant = require('../../utils/constant.js');
|
export default {
|
data() {
|
return {
|
initBlueToothStatus: false, //蓝牙的初始化状态
|
selectActiveIndex: 1, //顶部选择激活
|
uuidListByService: [], //存放 开始搜索蓝牙外围设备时，对应uuid的设备
|
bluetoothDeviceFoundList: [], //存放寻找到的附加蓝牙设备的列表
|
foundLodaing: false, //点击搜索蓝牙按钮的时候触发等待
|
productListModal: false, //设备列表对话框显示隐藏
|
startBluetoothDevicesDiscoveryRecord: false, //记录是否搜索过蓝牙设备 默认没有为false
|
historyConnectDeviceList: [], //历史连接的设备的记录
|
filterName: 'XinLi-XL11_', //筛选搜索固定的设备
|
isHideHistoryList: false, //显示或者隐藏历史连接设备列表
|
backgroundURL: Constant.backgroundURL
|
}
|
},
|
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() //成功搜索后，监听寻找到的蓝牙设备
|
setTimeout(function() {
|
that.getBluetoothDevices()
|
}, 1000) // 延时是为了让蓝牙搜索一会，获取寻找到的所有蓝牙设备
|
},
|
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;
|
}
|
if (foundList.length >= 2) {
|
that.productListModal = true
|
} else {
|
that.stepLodaing(foundList[0])
|
}
|
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
|
}
|
},
|
|
|
//搜索蓝牙设备
|
foundDevice: function() {
|
this.foundLodaing = true
|
this.startBluetoothDevicesDiscovery() //蓝牙初始化成功后开始搜索附加设备
|
},
|
|
|
//跳转到连接等待页面
|
stepLodaing: function(device) {
|
//连接蓝牙设备前先关闭蓝牙设备的搜索,防止资源占用过大
|
this.StopBluetoothDevicesDiscovery()
|
this.productListModal = false
|
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");
|
|
.search_box {
|
position: relative;
|
width: 100vw;
|
height: 100vh;
|
}
|
|
.search_btn_box {
|
width: 300rpx;
|
height: 300rpx;
|
position: fixed;
|
left: 0;
|
top: 0;
|
bottom: 0;
|
right: 0;
|
margin: auto;
|
background-color: #007AFF;
|
border-radius: 100%;
|
}
|
|
.search_title {
|
text-align: center;
|
padding: 10rpx;
|
color: #007AFF;
|
}
|
|
.search_img,
|
.search_animation {
|
width: 300rpx;
|
height: 300rpx;
|
text-align: center;
|
line-height: 300rpx;
|
}
|
|
.search_img img,
|
.search_animation img {
|
width: 60%;
|
height: 60%;
|
margin-top: 20%;
|
}
|
|
.search_animation:before {
|
content: "";
|
position: absolute;
|
top: 5px;
|
left: 5px;
|
right: 5px;
|
bottom: 5px;
|
border-radius: 50%;
|
border: 3px solid transparent;
|
border-top-color: #fff;
|
animation: spin-reverse .6s linear infinite;
|
}
|
|
.search_animation:after {
|
content: "";
|
position: absolute;
|
top: 15px;
|
left: 15px;
|
right: 15px;
|
bottom: 15px;
|
border-radius: 50%;
|
border: 3px solid transparent;
|
border-top-color: #fff;
|
animation: spin 1s linear infinite;
|
}
|
|
@-webkit-keyframes spin {
|
0% {
|
-webkit-transform: rotate(0deg);
|
}
|
|
100% {
|
-webkit-transform: rotate(360deg);
|
}
|
}
|
|
@keyframes spin {
|
0% {
|
-webkit-transform: rotate(0deg);
|
transform: rotate(0deg);
|
}
|
|
100% {
|
-webkit-transform: rotate(360deg);
|
transform: rotate(360deg);
|
}
|
}
|
|
@-webkit-keyframes spin-reverse {
|
0% {
|
-webkit-transform: rotate(0deg);
|
}
|
|
100% {
|
-webkit-transform: rotate(-360deg);
|
}
|
}
|
|
@keyframes spin-reverse {
|
0% {
|
-webkit-transform: rotate(0deg);
|
transform: rotate(0deg);
|
}
|
|
100% {
|
-webkit-transform: rotate(-360deg);
|
transform: rotate(-360deg);
|
}
|
}
|
|
.logo {
|
height: 200rpx;
|
width: 200rpx;
|
margin-top: 200rpx;
|
margin-left: auto;
|
margin-right: auto;
|
margin-bottom: 50rpx;
|
}
|
|
.text-area {
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
