<template>
<view class="pages">
<u-navbar title="添加设备" :border-bottom="false" :background="bgc" title-color='#262B37' title-size='38'
height='50'></u-navbar>
<view class="title">
<text>设备列表</text>
<image src="https://api.ccttiot.com/smartmeter/img/static/uCfe9273aC89tGOT7n1G" mode="widthFix"></image>
<text class="sm"> {{texts}} </text>
</view>
<view class="dblist" v-for="(item, index) in devicesList" :key="index">
<view class="lt">
<image src="https://api.ccttiot.com/smartmeter/img/static/uoQO0pUZ1UHcW5uVKkuR" mode=""></image>
</view>
<view class="cen">
<view class="name">
智能开关
</view>
<view class="mac">
MAC：{{item.localName.substring(6)}}
</view>
</view>
<view class="rt">
<text :id="item.deviceId" @tap="createBLEConnection(item)">绑定</text>
</view>
</view>
<view class="anniu" @click="Search">
<button>重新扫描</button>
</view>
<view class="mask" v-if="titleflag">
<view class="titles">
温馨提示
</view>
<text>无法扫描到附近设备:</text>
<text>1.确保待连接设备在附近且蓝牙处于打开状态。</text>
<text>2.确保设备未与其他设备进行蓝牙连接。</text>
<text>确保设备未被添加过。</text>
<text>...</text>
<button @click="btnyc">好的</button>
</view>
<view class="containers" v-show="statusflag">
<uni-section>
<uni-load-more :status="status" />
</uni-section>
</view>
</view>
</template>
<script>
const app = getApp();
var xBlufi = require("@/page_components/blufi/xBlufi.js");
let _this = null;
export default {
data() {
return {
titleflag: false, //提示隐藏
bgc: {
backgroundColor: "#F7FAFE",
},
devicesList: [
// {name:'110000',
// mac:'11111'}
],
searching: false,
texts: '正在扫描蓝牙设备...',
btnflag: true,
tishiflag: false,
option: '',
bluthlist: [], //蓝牙数组
status: 'loading',
statusflag: false,
Bluetoothmac: '',
gps: {},
mac: '',
status: false,
storeId:''
}
},
onLoad(option) {
this.storeId = option.storeId
xBlufi.initXBlufi(1);
console.log("xBlufi", xBlufi.XMQTT_SYSTEM);
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': true
});
// 两秒后停止蓝牙搜索
setTimeout(() => {
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
// 判断是否存在浇花器设备
if (this.devicesList.length == 0) {
this.tishiflag = true
this.texts = '扫描完毕，暂无发现设备'
} else {
this.texts = '扫描到以下设备，请点击连接！'
}
this.status = true
}, 2000)
},
onShow: function() {
// this.openBluetoothAdapter()
// xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
// xBlufi.notifyStartDiscoverBle({
// 'isStart': false
// });
},
onUnload: function() {
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
},
// onHide(){
// xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
// xBlufi.notifyStartDiscoverBle({
// 'isStart': false
// });
// },
onBeforeUnmount(){
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
},
mounted() {
this.videoContext = uni.createVideoContext('myVideo', this)
},
methods: {
btnyc() {
this.titleflag = false
},
funListenDeviceMsgEvent: function(options) {
switch (options.type) {
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
if (options.result) {
let devicesarr = options.data
console.log(devicesarr,100100);
devicesarr.forEach(device => {
const mac = device.name.substring(6);
if (device.name.substring(0, 4) == "CTKG") {
// this.$u.get(`/app/device/${mac}/isBind`, data).then((res) => {
// if (res.data == false) {
this.devicesList.push(device);
console.log(this.devicesList);
let uniqueDevicesList = Array.from(new Set(this.devicesList));
// 将去重后的数组重新赋值给 this.devicesList
this.devicesList = uniqueDevicesList;
// }
// })
}
});
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
console.log("连接回调：" + JSON.stringify(options));
if (options.result) {
uni.hideLoading();
// uni.showToast({
// title: '连接成功',
// icon: 'none'
// });
{
console.log("连接回调options.data.deviceId：" + options.data.deviceId,
"连接回调options.data.name：" + options.data.name);
let data = {
storeId:this.storeId,
mac:this.mac
}
this.$u.put('/app/device/bind', data).then((res) => {
if (res.code == 200) {
uni.showToast({
title: '绑定成功',
icon: 'none',
duration: 2000
});
uni.removeStorageSync('mac');
let systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'android') {
// 当前设备是 Android
uni.navigateTo({
url: '/page_components/wifilist/index?deviceId=' + options
.data.deviceId + '&name=' + options.data.name
})
} else if (systemInfo.platform === 'ios') {
// 当前设备是 iOS
uni.navigateTo({
url: '/page_fenbao/device/wifivideo?deviceId=' + options
.data.deviceId + '&name=' + options.data.name
})
}
} else {
uni.showToast({
title: '该设备已被绑定',
icon: 'none',
duration: 2000
});
}
})
}
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
if (!options.result) {
console.log("蓝牙未开启", options);
uni.showToast({
title: '蓝牙未开启，如有疑问请查看查看常见问题',
icon: 'none',
duration: 3000
});
} else {
this.searching = true
//蓝牙搜索开始
// _this.setData({
// searching: true
// });
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
if (options.result) {
let uniqueDevicesList = Array.from(new Set(this.devicesList));
console.log(uniqueDevicesList,'uniqueDevicesListuniqueDevicesList');
// 将去重后的数组重新赋值给 this.devicesList
this.devicesList = uniqueDevicesList;
let list = []
// this.devicesList.forEach(device => {
// 从设备名称中提取 MAC 地址（假设 MAC 地址是设备名称的后6个字符）
// let macFromName = device.name.substring(device.name.length - 12);
// console.log(macFromName);
// 与 this.mac 进行比较
// this.$u.get(`/app/device/${macFromName}/isBind`).then((res) => {
// if (res.data == false) {
// list.push(device)
// } else {
// }
// })
// });
// setTimeout(() => {
// this.devicesList = list
// }, 200)
console.log('蓝牙停止搜索ok');
} else {
//蓝牙停止搜索失败
console.log('蓝牙停止搜索失败');
}
this.searching = false
// _this.setData({
// searching: false
// });
break;
}
},
//4、建立连接
createBLEConnection(e) {
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
console.log(e, '蓝牙信息101010')
const deviceId = e.deviceId
this.Bluetoothmac = e.localName.substring(6) //从第七位开始截取 只取后面的mac号
this.mac = e.localName.substring(6)
let name = e.name;
xBlufi.notifyConnectBle({
isStart: true,
deviceId: e.deviceId,
name:e.name
});
let that = this
uni.getLocation({
type: 'wgs84',
success: function(lb) {
console.log('位置信息', lb);
that.gps.lat = lb.latitude;
that.gps.lon = lb.longitude;
},
fail: function(error) {
console.error('获取位置信息失败：', error);
that.gps.lat = 0;
that.gps.lon = 0;
// that.$u.put(`/app/device/bind/${that.mac}`, that.gps).then((res) => {
// if (res.code == 200) {
// uni.showToast({
// title: '绑定成功',
// icon: 'none',
// duration: 2000
// });
// uni.removeStorageSync('mac');
// // setTimeout(()=>{
// // uni.switchTab({
// // url:'/pages/index/index'
// // })
// // },)
// } else {
// // setTimeout(()=>{
// // uni.switchTab({
// // url:'/pages/index/index'
// // })
// // },)
// }
// })
// 在这里处理获取位置信息失败的情况
}
})
},
// 点击重新搜索
Search() {
if (this.status) {
xBlufi.notifyStartDiscoverBle({
'isStart': true
});
// 重新搜索清空蓝牙数组
this.bluthlist = []
this.devicesList = []
// 重新搜索
// this.startBluetoothDevicesDiscovery()
this.statusflag = true
this.texts = '正在扫描蓝牙设备...'
setTimeout(() => {
this.statusflag = false
if (this.searching) {
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
// 判断是否存在设备
if (this.devicesList.length == 0) {
this.tishiflag = true
this.texts = '扫描完毕，暂无发现设备'
} else {
this.texts = '扫描到以下设备，请点击连接！'
}
} else {
xBlufi.notifyStartDiscoverBle({
'isStart': true
});
}
}, 2000)
}
},
// 点击隐藏没有设备提示
btnhd() {
this.tishiflag = false
}
}
}
</script>
<style lang="scss">
page {
background-color: #F7FAFE !important;
}
.containers {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
padding-top: 130rpx;
box-sizing: border-box;
left: 0;
z-index: 999 !important;
/* background-color: #fff; */
z-index: 99;
}
.pages {
// padding-top: 136rpx !important;
padding: 0 66rpx;
box-sizing: border-box;
}
// text{
// display: block;
// }
.sm {
color: #77808D;
border-radius: 0rpx 0rpx 0rpx 0rpx;
// margin-top: 48rpx;
display: inline-block;
}
.title {
margin-bottom: 84rpx;
image {
display: inline-block;
width: 48rpx;
height: 48rpx;
vertical-align: bottom;
margin-right: 10rpx;
}
text:nth-child(1) {
font-weight: 400;
font-size: 96rpx;
color: #262B37;
line-height: 88rpx;
text-align: left;
font-style: normal;
text-transform: none;
display: block;
margin-bottom: 48rpx;
}
}
.dblist {
display: flex;
width: 100%;
margin-top: 34rpx;
background: #FFFFFF;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
padding: 20rpx 0 24rpx 18rpx;
box-sizing: border-box;
text-align: center;
border-radius: 10rpx;
.lt {
padding-left: 10rpx;
box-sizing: border-box;
margin-right: 38rpx;
image {
width: 42rpx;
// height: 112rpx;
}
}
.cen {
width: 370rpx;
padding-left: 10rpx;
box-sizing: border-box;
.name {
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
font-size: 32rpx;
color: #262B37;
line-height: 40rpx;
text-align: left;
font-style: normal;
text-transform: none;
margin-top: 10rpx;
}
.mac {
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
font-size: 24rpx;
color: #262B37;
line-height: 32rpx;
text-align: left;
font-style: normal;
text-transform: none;
margin-top: 16rpx;
}
}
.rt {
margin-top: 22rpx;
text {
display: inline-block;
width: 108rpx;
height: 60rpx;
background: rgba(255, 255, 255, 0);
border: 2rpx solid #8883F0;
filter: blur(0px);
border-radius: 20rpx;
text-align: center;
line-height: 60rpx;
color: #8883F0;
}
}
}
.anniu {
padding: 0 90rpx;
width: 100%;
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 112rpx;
button {
background: #8883F0;
border-radius: 52rpx 52rpx 52rpx 52rpx;
color: #fff;
}
}
.mask {
width: 622rpx;
height: 710rpx;
background: #FFFFFF;
filter: blur(0px);
border-radius: 20rpx;
position: fixed;
top: 475rpx;
left: 50%;
transform: translateX(-50%);
padding-top: 38rpx;
padding-left: 60rpx;
padding-right: 60rpx;
box-sizing: border-box;
.titles {
font-size: 48rpx;
color: #262B37;
line-height: 70rpx;
text-align: center;
margin-bottom: 24rpx;
}
text {
display: block;
font-size: 32rpx;
color: #262B37;
line-height: 56rpx;
text-align: left;
}
button {
margin-top: 46rpx;
width: 266rpx;
height: 96rpx;
background: #8883F0;
border-radius: 52rpx 52rpx 52rpx 52rpx;
color: #fff;
text-align: center;
line-height: 96rpx;
}
}
</style>