348 lines
8.0 KiB
Vue
348 lines
8.0 KiB
Vue
<template>
|
||
<view class="printer_box">
|
||
<view>
|
||
<view>
|
||
<img src="http://110.42.248.235:866/images/system/666/XTiaCluc-1.png" class="printer_img"
|
||
v-if="state ==0">
|
||
<img src="http://110.42.248.235:866/images/system/666/XTiaCluc-1.png" class="printer_imgs"
|
||
v-if="state ==1">
|
||
</view>
|
||
<view>
|
||
<view class="printer_text" v-if="state ==0">
|
||
未连接设备
|
||
</view>
|
||
<view v-if="state ==1">
|
||
<view class="printer_text">
|
||
{{name}}
|
||
</view>
|
||
<view class="printer_text_tag">
|
||
已连接
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button class="printer_btn" @click="openBluetoothAdapter" v-if="!isConnected" :disabled="searching">开始搜索</button>
|
||
<button class="printer_btn" @click="stopBluetooth" v-else>断开当前蓝牙设备</button>
|
||
<view class="printer_under">
|
||
<view class="printer_under_title">
|
||
已配对
|
||
</view>
|
||
<view class="printer_under_content" v-for="(item,index) in devices" :key="index"
|
||
@click="createBLEConnection(item)">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="printer_under_content no-devices" v-if="!devices.length">未搜索到蓝牙设备</view>
|
||
</view>
|
||
<view class="" @click="a">
|
||
跳转
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
|
||
const searching = ref(false)
|
||
const devices = ref([])
|
||
const state = ref(0)
|
||
const isConnected = ref(false)
|
||
const name = ref('')
|
||
const deviceId = ref(null)
|
||
const a = () =>{
|
||
uni.navigateTo({
|
||
url:'/pages/distribution/distribution'
|
||
})
|
||
}
|
||
onLoad(() => {
|
||
console.log(uni.getStorageSync('deviceId'))
|
||
console.log(uni.getStorageSync('serviceId'))
|
||
if (uni.getStorageSync('deviceId') && uni.getStorageSync('serviceId')) {
|
||
isConnected.value = true
|
||
state.value = 1
|
||
name.value = uni.getStorageSync('blueTooothName')
|
||
}
|
||
})
|
||
|
||
const openBluetoothAdapter = () => {
|
||
console.log('初始化蓝牙模块 openBluetoothAdapter');
|
||
if (searching.value) return
|
||
if (!uni.openBluetoothAdapter) {
|
||
console.log('微信版本过低');
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
|
||
});
|
||
return;
|
||
}
|
||
searching.value = true;
|
||
uni.openBluetoothAdapter({
|
||
success: res => {
|
||
console.log('初始化成功openBluetoothAdapter success', res);
|
||
startBluetoothDevicesDiscovery();
|
||
},
|
||
fail: res => {
|
||
console.log('初始化失败openBluetoothAdapter fail', res);
|
||
uni.hideLoading();
|
||
if (res.errCode === 10001) {
|
||
// 当前蓝牙适配器不可用
|
||
uni.showModal({
|
||
title: '错误',
|
||
content: '未找到蓝牙设备, 请打开蓝牙后重试。',
|
||
showCancel: false
|
||
});
|
||
// 监听蓝牙适配器状态变化事件
|
||
uni.onBluetoothAdapterStateChange(res => {
|
||
console.log('监听蓝牙适配器状态 onBluetoothAdapterStateChange', res);
|
||
// available：蓝牙适配器是否可用
|
||
if (res.available) {
|
||
// 开始搜寻附近的蓝牙外围设备
|
||
startBluetoothDevicesDiscovery();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
const onBluetoothDeviceFound = () => {
|
||
console.log('进入查询设备');
|
||
uni.onBluetoothDeviceFound(res => {
|
||
if (res.devices[0].name) {
|
||
devices.value.push({
|
||
name: res.devices[0].name,
|
||
deviceId: res.devices[0].deviceId,
|
||
services: []
|
||
})
|
||
}
|
||
console.log(devices.value);
|
||
|
||
});
|
||
}
|
||
|
||
const startBluetoothDevicesDiscovery = () => {
|
||
console.log('开始搜寻附近的蓝牙设备');
|
||
uni.startBluetoothDevicesDiscovery({
|
||
allowDuplicatesKey: false,
|
||
interval: 0,
|
||
success: res => {
|
||
// 监听寻找到新设备的事件
|
||
onBluetoothDeviceFound();
|
||
},
|
||
fail: res => {
|
||
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 点击连接
|
||
*/
|
||
const createBLEConnection = (e : any) => {
|
||
const deviceId = e.deviceId;
|
||
uni.showLoading({
|
||
title: '连接中'
|
||
})
|
||
uni.createBLEConnection({
|
||
deviceId: deviceId,
|
||
success: (res : any) => {
|
||
uni.hideLoading()
|
||
console.log(res);
|
||
name.value = e.name
|
||
state.value = 1
|
||
isConnected.value = true
|
||
searching.value = false;
|
||
uni.showToast({
|
||
title: '连接成功',
|
||
icon: 'success'
|
||
})
|
||
stopBluetoothDevicesDiscovery()
|
||
uni.setStorageSync('deviceId', deviceId)
|
||
uni.setStorageSync('blueTooothName', e.name)
|
||
setTimeout(() => {
|
||
getBLEDeviceServices(deviceId)
|
||
}, 2000)
|
||
},
|
||
fail: (res : any) => {
|
||
uni.hideLoading()
|
||
console.log(res);
|
||
uni.showToast({
|
||
title: '连接失败',
|
||
icon: 'error'
|
||
})
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
/**
|
||
* 连接完停止搜索
|
||
*/
|
||
const stopBluetoothDevicesDiscovery = () => {
|
||
uni.stopBluetoothDevicesDiscovery({
|
||
success: (res : any) => {
|
||
// console.log('stopBluetoothDevicesDiscovery')
|
||
console.log(res);
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* 获取所有蓝牙服务
|
||
*/
|
||
const getBLEDeviceServices = (deviceId ?: any) => {
|
||
console.log(deviceId)
|
||
uni.getBLEDeviceServices({
|
||
deviceId: deviceId,
|
||
success: (res : any) => {
|
||
console.log(res);
|
||
for (let i = 0; i < res.services.length; i++) {
|
||
let serviceId = res.services[i].uuid
|
||
|
||
getBLEDeviceCharacteristics(deviceId, serviceId);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
/*
|
||
获取蓝牙设备某个服务中所有特征值(characteristic)
|
||
characteristic:
|
||
uuid:蓝牙设备特征值的 uuid
|
||
properties:该特征值支持的操作类型
|
||
*/
|
||
const getBLEDeviceCharacteristics = (deviceId : any, serviceId : any) => {
|
||
uni.getBLEDeviceCharacteristics({
|
||
// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
|
||
deviceId: deviceId,
|
||
serviceId,
|
||
success: (res : any) => {
|
||
let result = JSON.parse(JSON.stringify(res))
|
||
console.log(result);
|
||
for (let i = 0; i < result.characteristics.length; i++) {
|
||
if (result.characteristics[i].properties.write == true) {
|
||
|
||
let uuid = result.characteristics[i].uuid
|
||
for (let index in devices.value) {
|
||
if (devices.value[index].deviceId === deviceId) {
|
||
devices.value[index].services.push({
|
||
serviceId: serviceId,
|
||
characteristicId: uuid
|
||
})
|
||
let obj = devices.value.find((item : any) => item.deviceId === deviceId)
|
||
uni.setStorageSync('serviceId', obj.services[0].serviceId)
|
||
uni.setStorageSync('characteristicId', obj.services[0].characteristicId)
|
||
break
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
})
|
||
|
||
}
|
||
const stopBluetooth = () => {
|
||
uni.closeBLEConnection({
|
||
deviceId: uni.getStorageSync('deviceId'),
|
||
success: (res : any) => {
|
||
console.log(res);
|
||
state.value = 0
|
||
name.value = ''
|
||
isConnected.value = false
|
||
devices.value = []
|
||
uni.showToast({
|
||
title: '成功断开连接',
|
||
icon: 'success'
|
||
})
|
||
uni.removeStorageSync('serviceId')
|
||
uni.removeStorageSync('characteristicId')
|
||
uni.closeBluetoothAdapter({
|
||
success: res => {
|
||
devices.value = []
|
||
},
|
||
fail: res => {
|
||
}
|
||
})
|
||
}
|
||
});
|
||
|
||
}
|
||
</script>
|
||
|
||
|
||
<style>
|
||
.printer_box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 750rpx;
|
||
height: 200rpx;
|
||
margin-top: 100rpx;
|
||
}
|
||
|
||
.printer_img {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
background-color: darkgray;
|
||
padding: 27rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 100rpx;
|
||
display: flex;
|
||
margin: 10rpx auto;
|
||
}
|
||
|
||
.printer_imgs {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
background-color: #2588FF;
|
||
padding: 27rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 100rpx;
|
||
display: flex;
|
||
margin: 10rpx auto;
|
||
}
|
||
|
||
.printer_text {
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.printer_text_tag {
|
||
color: #A3A3A3;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.printer_btn {
|
||
width: 660rpx;
|
||
height: 88rpx;
|
||
border-radius: 60rpx;
|
||
background-color: #2588FF;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
line-height: 88rpx;
|
||
margin-top: 70rpx;
|
||
}
|
||
|
||
.printer_under_title {
|
||
width: 100%;
|
||
height: 50rpx;
|
||
background-color: #F9FBFC;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 50rpx;
|
||
margin: 50rpx 0 0 30rpx;
|
||
}
|
||
|
||
.printer_under_content {
|
||
font-size: 28rpx;
|
||
width: 80%;
|
||
height: 60rpx;
|
||
border-bottom: 1rpx solid #f3f2f2;
|
||
margin: 30rpx auto;
|
||
}
|
||
</style> |