89 lines
2.6 KiB
Vue
89 lines
2.6 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view v-if="!showConnect">
|
||
<button class="button" v-if="showAdd" @click="getList">添加设备</button>
|
||
<button class="button" v-else @click="stopGetList">停止搜索</button>
|
||
<view class="device-list" v-for="(item, index) in deviceList" :key="item.deviceId" @click="connect(item)">{{item.name}}</view>
|
||
</view>
|
||
<view v-else>
|
||
<button class="button">获取公钥</button>
|
||
<button class="button">获取私钥</button>
|
||
<button class="button">添加用户</button>
|
||
<view>名称：{{currentLockInfo.name}}</view>
|
||
<view>设备Id：{{currentLockInfo.deviceId}}</view>
|
||
<view v-if="currentLockInfo.serviceId">服务：{{currentLockInfo.serviceId}}</view>
|
||
<view v-if="currentLockInfo.writeCharacteristicId">写入特征值Id：{{currentLockInfo.writeCharacteristicId}}</view>
|
||
<view v-if="currentLockInfo.notifyCharacteristicId">监听特征值Id：{{currentLockInfo.notifyCharacteristicId}}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { useBluetoothStore } from '@/stores/bluetooth'
|
||
import { mapState, mapActions } from 'pinia'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
showAdd: true,
|
||
showConnect: false
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(useBluetoothStore, ['deviceList', 'currentLockInfo'])
|
||
},
|
||
async onLoad () {},
|
||
methods: {
|
||
...mapActions(useBluetoothStore, ['getBluetoothDevices', 'stopGetBluetoothDevices', 'updateCurrentLockInfo',
|
||
'connectBluetoothDevice']),
|
||
getList() {
|
||
this.getBluetoothDevices()
|
||
this.showAdd = false
|
||
},
|
||
stopGetList() {
|
||
this.stopGetBluetoothDevices()
|
||
this.showAdd = true
|
||
},
|
||
async connect(item) {
|
||
this.updateCurrentLockInfo({
|
||
name: item.name,
|
||
deviceId: item.deviceId
|
||
})
|
||
const result = await this.connectBluetoothDevice()
|
||
if(result) {
|
||
this.showConnect = true
|
||
this.stopGetBluetoothDevices()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
padding-top: 160rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.button {
|
||
margin-top: 40rpx;
|
||
width: 400rpx;
|
||
height: 108rpx;
|
||
line-height: 108rpx;
|
||
background: #3F536E;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
.device-list {
|
||
margin-top: 10rpx;
|
||
height: 100rpx;
|
||
width: 500rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
border: #dd524d solid 2rpx;
|
||
}
|
||
</style>
|