wx-starlock/pages/index/index.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>