wx-starlock/pages/addLockGuid/addLockGuid.vue

<template>
  <view>
    <view class="title">摸亮触摸屏</view>
    <image src="/static/images/icon_lock_touch_screen.png" mode="aspectFill" class="icon"></image>
    <view class="tips">摸亮触摸屏，锁进入可添加状态，点击下一步</view>
    <view @click="toSearchDevice" class="button">下一步</view>
  </view>
</template>

<script>
  import { mapActions, mapState } from 'pinia'
  import { useBluetoothStore } from '@/stores/bluetooth'
  import { useBasicStore } from '@/stores/basic'

  export default {
    data() {
      return {}
    },
    computed: {
      ...mapState(useBluetoothStore, ['bluetoothStatus', 'isInitBluetooth'])
    },
    methods: {
      ...mapActions(useBluetoothStore, [
        'getBluetoothStatus',
        'initAndListenBluetooth',
        'checkSetting'
      ]),
      ...mapActions(useBasicStore, ['routeJump']),
      async toSearchDevice() {
        if (this.bluetoothStatus !== 0) {
          this.getBluetoothStatus()
          return
        }
        let result = true
        if (!this.isInitBluetooth) {
          result = await this.initAndListenBluetooth()
        }
        if (result) {
          this.routeJump({
            type: 'redirectTo',
            name: 'searchDevice'
          })
        } else {
          this.checkSetting()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .title {
    text-align: center;
    margin-top: 200rpx;
    font-size: 36rpx;
    font-weight: bold;
  }

  .icon {
    width: 300rpx;
    height: 300rpx;
    margin: 150rpx 225rpx;
  }

  .tips {
    text-align: center;
    font-size: 28rpx;
    color: #999;
    margin-bottom: 100rpx;
    font-weight: bold;
  }

  .button {
    width: 600rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background-color: #63b8af;
    color: #fff;
    border-radius: 50rpx;
    margin: 0 auto;
    font-size: 36rpx;
  }
</style>