364 lines
8.6 KiB
Vue
364 lines
8.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="ble-connect">
|
|||
|
|
<u-navbar :title="$tt('navBar.bleAddDevice')" bgColor="#F1F3F9"
|
|||
|
|
:titleStyle="{fontWeight: 700, fontSize: '16px'}" @leftClick="handleGoback">
|
|||
|
|
</u-navbar>
|
|||
|
|
<view class="device-search">
|
|||
|
|
<view class="img-wrap">
|
|||
|
|
<image class="img" :class="{'rotating': isSearch }" src="/static/common/searching.png" />
|
|||
|
|
</view>
|
|||
|
|
<view class="title" v-if="isSearch">{{$tt('bleConnect.scanning')}}</view>
|
|||
|
|
<view class="title" v-else>{{$tt('bleConnect.ifNoDev')}}</view>
|
|||
|
|
<view class="describe" v-if="!isSearch">{{errmgs}}</view>
|
|||
|
|
<view class="describe" v-if="isSearch">{{$tt('bleConnect.scanningDev')}}</view>
|
|||
|
|
<view class="again" v-else @click="handleAgainSearch">{{$tt('bleConnect.rescan')}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="device-title">{{$tt('bleConnect.usableDev')}}</view>
|
|||
|
|
<view class="device-list" v-if="deviceList.length !== 0">
|
|||
|
|
<view class="item-wrap" v-for="item in deviceList" :key="item.deviceId">
|
|||
|
|
<view class="icon">
|
|||
|
|
<u--image src="/static/common/device.png" width="28px" height="28px"></u--image>
|
|||
|
|
</view>
|
|||
|
|
<view class="name">{{item.name}}</view>
|
|||
|
|
<view class="btn" @click="handleConnect(item.deviceId)">{{$tt('bleConnect.connect')}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-empty v-else mode="data" :iconSize="80" :text="$tt('bleConnect.connect')" marginTop="65px">
|
|||
|
|
</u-empty>
|
|||
|
|
<view class="tools-wrap">
|
|||
|
|
<view class="btn" @click="handleManualAdd">{{$tt('bleConnect.manuallyAdd')}}</view>
|
|||
|
|
<view class="btn" @click="handleScan">{{$tt('bleConnect.scan')}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
nDelayTimer: -1, // 定时器
|
|||
|
|
isFind: false, // 是否发现设备
|
|||
|
|
deviceList: [], // 设备列表
|
|||
|
|
isSearch: false,
|
|||
|
|
errmgs: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.searchBlueToothDevice();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
searchBlueToothDevice() {
|
|||
|
|
this.initBlueTooth();
|
|||
|
|
},
|
|||
|
|
stopBlueToothDevice() {
|
|||
|
|
clearInterval(this.nDelayTimer);
|
|||
|
|
this.isSearch = false;
|
|||
|
|
this.isFind = false;
|
|||
|
|
this.deviceList = [];
|
|||
|
|
this.errmgs = '';
|
|||
|
|
this.nDelayTimer = -1;
|
|||
|
|
},
|
|||
|
|
// 重新扫描
|
|||
|
|
handleAgainSearch() {
|
|||
|
|
this.stopBlueToothDevice();
|
|||
|
|
this.searchBlueToothDevice();
|
|||
|
|
},
|
|||
|
|
// 连接
|
|||
|
|
handleConnect(deviceId) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pagesB/home/device/add/bleConnect/setWifi?deviceId=${deviceId}`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 初始化蓝牙适配器
|
|||
|
|
initBlueTooth() {
|
|||
|
|
let _this = this;
|
|||
|
|
uni.closeBluetoothAdapter({
|
|||
|
|
success: (res) => {
|
|||
|
|
uni.openBluetoothAdapter({
|
|||
|
|
success: (res) => {
|
|||
|
|
this.findBlueTooth();
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.log('openBluetoothAdapter', err.errMsg);
|
|||
|
|
uni.showModal({
|
|||
|
|
content: this.$tt('bleConnect.turnOnBle'),
|
|||
|
|
showCancel: false,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 搜索蓝牙设备
|
|||
|
|
findBlueTooth() {
|
|||
|
|
let _this = this;
|
|||
|
|
uni.startBluetoothDevicesDiscovery({
|
|||
|
|
allowDuplicatesKey: false,
|
|||
|
|
interval: 0,
|
|||
|
|
success: (res) => {
|
|||
|
|
_this.isSearch = true;
|
|||
|
|
_this.nDelayTimer = setInterval(() => _this.discoveryBlueTooth(), 1000);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
_this.isSearch = false;
|
|||
|
|
if (_this.isFind) {
|
|||
|
|
uni.stopBluetoothDevicesDiscovery({
|
|||
|
|
success: (result) => {
|
|||
|
|
console.log(result);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
clearInterval(_this.nDelayTimer);
|
|||
|
|
_this.nDelayTimer = -1;
|
|||
|
|
return;
|
|||
|
|
} else {
|
|||
|
|
uni.stopBluetoothDevicesDiscovery({
|
|||
|
|
success: (result) => {
|
|||
|
|
console.log(result);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
clearInterval(_this.nDelayTimer);
|
|||
|
|
_this.nDelayTimer = -1;
|
|||
|
|
_this.errmgs = this.$tt('bleConnect.checkBleAndTurnOnGPSForAndroid');
|
|||
|
|
}
|
|||
|
|
}, 15000);
|
|||
|
|
},
|
|||
|
|
fail: (res) => {
|
|||
|
|
_this.errmgs = this.$tt('bleConnect.bleDiscoverydev') + `${res.errMsg}`;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 搜索设备回调
|
|||
|
|
discoveryBlueTooth() {
|
|||
|
|
const _this = this;
|
|||
|
|
uni.getBluetoothDevices({
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res?.devices && res?.devices?.length != 0) {
|
|||
|
|
const list = res.devices;
|
|||
|
|
const devices = [];
|
|||
|
|
list.forEach((item) => {
|
|||
|
|
let bname = '';
|
|||
|
|
if (item.name && item.name.length > 0) {
|
|||
|
|
bname = item.name;
|
|||
|
|
}
|
|||
|
|
if (item.localName && item.localName.length > 0) {
|
|||
|
|
bname = item.localName;
|
|||
|
|
}
|
|||
|
|
if (bname !== "" && bname !== "未知设备") {
|
|||
|
|
devices.push(item);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
_this.deviceList = devices;
|
|||
|
|
_this.isFind = true;
|
|||
|
|
clearInterval(_this.nDelayTimer);
|
|||
|
|
_this.nDelayTimer = -1;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: (res) => {
|
|||
|
|
console.log('getBluetoothDevices', res);
|
|||
|
|
_this.errmgs = this.$tt('bleConnect.failedToSearchBle');
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 返回
|
|||
|
|
handleGoback() {
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: '/pages/tabBar/home/index'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 扫码添加
|
|||
|
|
async handleScan() {
|
|||
|
|
// #ifndef MP-WEIXIN || APP-PLUS
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: this.$tt('user.scanning')
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// 权限问题，app 需要做权限说明
|
|||
|
|
let onlyFromCamera = false;
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
onlyFromCamera = true;
|
|||
|
|
let result = await this.$store.dispatch("permission/requestPermissions", 'CAMERA');
|
|||
|
|
if (result !== 1) return;
|
|||
|
|
// #endif
|
|||
|
|
this.startScanCode(onlyFromCamera);
|
|||
|
|
},
|
|||
|
|
// 开始扫码
|
|||
|
|
startScanCode(onlyFromCamera) {
|
|||
|
|
uni.scanCode({
|
|||
|
|
onlyFromCamera, // 是否允许从相册扫码
|
|||
|
|
success: res => {
|
|||
|
|
// 解析JSON
|
|||
|
|
try {
|
|||
|
|
const scanJson = JSON.parse(res.result);
|
|||
|
|
// type=1 代表扫码关联设备
|
|||
|
|
if (scanJson.deviceId) {
|
|||
|
|
uni.showModal({
|
|||
|
|
content: '【' + this.$tt('bleConnect.deviceName') +
|
|||
|
|
':' + scanJson.name + ',' + this.$tt('bleConnect.deviceNum') +
|
|||
|
|
':' + scanJson.deviceId + '】' + this.$tt(
|
|||
|
|
'bleConnect.isConfirmed'),
|
|||
|
|
cancelText: this.$tt('common.cancel'),
|
|||
|
|
confirmText: this.$tt('common.confirm'),
|
|||
|
|
confirmColor: '#486ff2',
|
|||
|
|
cancelColor: '#606266',
|
|||
|
|
success: result => {
|
|||
|
|
if (result.confirm) {
|
|||
|
|
this.handleConnect(scanJson.deviceId);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: $tt('bleConnect.qsNosupport')
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: this.$tt('user.errorParseQRcode')
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 手动添加
|
|||
|
|
handleManualAdd() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pagesB/home/device/add/bleConnect/manualAdd`
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
height: 100%;
|
|||
|
|
background: $uni-bg-color-grey;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.ble-connect {
|
|||
|
|
height: 100vh;
|
|||
|
|
overflow-y: hidden;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
|
|||
|
|
.device-search {
|
|||
|
|
margin-top: calc(44px + var(--status-bar-height));
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 700rpx;
|
|||
|
|
|
|||
|
|
.img-wrap {
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 500rpx;
|
|||
|
|
height: 500rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rotating {
|
|||
|
|
animation: rotation 4s infinite linear;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes rotation {
|
|||
|
|
from {
|
|||
|
|
transform: rotate(0deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 64rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.describe {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
color: #7e7e7e;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.again {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 64rpx;
|
|||
|
|
color: #486ff2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 64rpx;
|
|||
|
|
padding: 40rpx 40rpx 10rpx 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device-list {
|
|||
|
|
padding: 20rpx 40rpx;
|
|||
|
|
flex-direction: column;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
margin-bottom: 160rpx;
|
|||
|
|
|
|||
|
|
.item-wrap {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 26rpx;
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 64rpx;
|
|||
|
|
margin-left: 12px;
|
|||
|
|
flex: 1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
background: #7e7e7e21;
|
|||
|
|
width: 120rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #486ff2;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
padding: 0 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tools-wrap {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 60rpx;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 40rpx;
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 62rpx;
|
|||
|
|
background: #7e7e7e21;
|
|||
|
|
width: 260rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #486ff2;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
padding: 5rpx 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|