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>