program/src/components/device/device.vue

<template>
  <div id="device_container" class="padding-lr">
    <div class="device">
      <div class="head flex justify-between">
        <div>
          <div class="line"></div>
          <div class="title">我的设备</div>
        </div>
<!--        <div class="my_msg" @click="get_toy_list">-->
<!--          <text class="cuIcon-mark"></text>-->
<!--          <text class="under_line">获取设备列表</text>-->
<!--        </div>-->
      </div>
      <div v-if="connect_toy==0">

        <!--      未连接部分-->
        <div class="connect_box" v-if="status == 0">
          <device_unconnect @open_scan="open_scan"></device_unconnect>
        </div>

        <!--      连接中-->
        <div class="connecting_box" v-if="status != 0 && connect_show == false">
          <device_connecting :status="status"></device_connecting>
        </div>

        <!-- 已链接 -->
        <div class="connected_box" v-if="connect_show">
          <device_connected @open_choose_toy="open_choose_toy"
                            @change_brain_status="change_device_status"></device_connected>
        </div>

      </div>
      <div v-else>
        <!--      玩具模块-->
        <!--      玩具连接中-->
        <div class="connecting_toy">
          <toy_connecting :connect_toy="connect_toy"
                          :deviceId="_deviceId"
                          @open_choose_toy="open_choose_toy"
                          @change_toy_connect_status="change_toy_connect_status"
                          @change_status="change_device_status"
                          @game_start="game_start"
          ></toy_connecting>
        </div>
      </div>

    </div>
    <!--      选择玩具-->
    <van-popup :show="choose_toy_window.show" @close="on_close"
               position="bottom"
               round
               closeable
               safe-area-inset-bottom
    >
      <div class="head padding">
        <div>
          <div class="line"></div>
          <div class="title">选择玩具</div>
        </div>
      </div>
      <div class="padding toy_list">
        <van-row gutter="8">
          <van-col span="8" v-for="(toy,index) in toy_list" :key="index">
            <div class="toy_item flex flex-direction justify-center align-center"
                 @click="choose_toy(index)"
                 :class="toy_action == toy.id?'toy_item_action_bg':'toy_item_normal_bg'">
              <img :src="toy.img" alt="" class="toy_img">
              <text class="toy_text padding-top">{{ toy.name }}</text>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="toy_actions padding text-center">
        <view class="text-gray toy_action_text padding">选择你最感兴趣的项目，点击“选好了”以后将会自动连接</view>
        <button class="cu-btn lg cu-btn-primary text-white text-center padding" @click="choose_ok">选好了</button>
      </div>
    </van-popup>
    <van-toast id="van-toast"/>

  </div>
</template>

<script>
//蓝牙未连接
import device_unconnect from "@/components/device/unconnect";
//蓝牙连接中
import device_connecting from "@/components/device/connecting";
//蓝牙完成链接
import device_connected from '@/components/device/connected';
//连接玩具
import toy_connecting from '@/components/device/toy/connecting'
//获取个人信息
import Toast from '../../../static/vant/toast/toast';
import {game_devices} from "../../requests/game";
import game_store from '@/store/game'
import bluetooth from "@/utils/bluetooth";


let $this;
export default {
  name: "device",
  components: {
    device_unconnect, device_connecting, device_connected, toy_connecting
  },
  data() {
    return {
      //设备状态 0为未连接，1：连接中，2：已连接 3：连接失败
      status: 0,
      choose_toy_window: {
        show: false
      },
      //'水柱音箱', '喷雾恐龙（大）', '喷雾恐龙（小）', '轨道车', '碰碰车', '小车（大）', '小车（中）', '小车（小）', '飞行器（大）', '飞行器（小）', '水母灯'
      toy_list: [
        {
          id: 1,
          name: "水柱音箱",
          img: "https://img.shuimuai.com/web/toy_car.png"
        },
        {
          id: 2,
          name: "喷雾恐龙（大）",
          img: "https://img.shuimuai.com/web/toy_dinasour.png"
        },
        {
          id: 3,
          name: "喷雾恐龙（小）",
          img: "https://img.shuimuai.com/web/toy_dinasour.png"
        },
        {
          id: 4,
          name: "轨道车",
          img: "https://img.shuimuai.com/web/toy_car_roat.png"
        },
        {
          id: 5,
          name: "碰碰车",
          img: "https://img.shuimuai.com/web/toy_car.png"
        },
        {
          id: 6,
          name: "小车（大）",
          img: "https://img.shuimuai.com/web/toy_car.png"
        },
        {
          id: 7,
          name: "小车（中）",
          img: "https://img.shuimuai.com/web/toy_car.png"
        },
        {
          id: 8,
          name: "小车（小）",
          img: "https://img.shuimuai.com/web/toy_car.png"
        },
        {
          id: 9,
          name: "飞行器（大）",
          img: "https://img.shuimuai.com/web/toy_car.png"
        },
        {
          id: 10,
          name: "飞行器（小）",
          img: "https://img.shuimuai.com/web/toy_car.png"
        },
        {
          id: 11,
          name: "水母灯",
          img: "https://img.shuimuai.com/web/toy_car.png"
        },
      ],
      toy_action: 1,
      connect_show: false,
      //连接玩具 0:未连接 1：连接中 2：已连接 3：连接失败 4:游戏中
      connect_toy: 0,
      code: "jellyfish1234",
      device: {},
      canWrite: false,
      _deviceId: '',
      _serviceId: "",
      _characteristicId: "",
      chs: [],
      _device_index: false
    }
  },
  watch: {
    status($new, $old) {
      //成功连接的方法
      if ($new == 2) {
        $this.connect_show = true
      } else if ($new == 0) {
        $this.connect_show = false
      }
    }
  },
  methods: {
    //打开 扫描二维码
    open_scan() {
      wx.openBluetoothAdapter({
        success(res) {
          //判断已经打开连接了
          if (res['errMsg'] == "openBluetoothAdapter:ok") {
            console.log('openBluetoothAdapter success', res)
            $this.startBluetoothDevicesDiscovery()
          }
        },
        fail(err) {
          if (err['errCode'] == 10001) {
            Toast.fail({
              message: "请连接蓝牙"
            })
          } else {
            Toast.fail({
              message: "蓝牙连接失败"
            })
          }
        }
      })
      //
      // wx.scanCode({
      //   onlyFromCamera: true,
      //   success: (res) => {
      //     let $data = res
      //     if ($data.result) {
      //       let url = decodeURIComponent($data.result)
      //       let $code = url.match(/\?code=(.*)/)[1];
      //       console.log($code)
      //     }
      //   }
      // })
    },
    //关闭窗口的方法
    on_close() {
      $this.choose_toy_window.show = false
    },
    //选择玩具
    choose_toy($index) {
      $this.toy_action = $this.toy_list[$index].id
    },
    // 打开选择玩具窗口
    open_choose_toy() {
      $this.choose_toy_window.show = true
    },
    // 选好玩具
    choose_ok() {
      $this.on_close()
      $this.change_toy_connect_status(1)
      $this._device_index = $this.toy_action - 1
      $this.connect_toy = 2
    },
    //修改玩具连接状态
    change_toy_connect_status($status = 0) {
      $this.connect_toy = $status
    },
    //  修改设备连接状态
    change_device_status($status = 0) {
      $this.status = $status
      //当蓝牙连接已断开
      if ($status == 0) {
        $this.connect_toy = $status
        $this.connect_show = false
        wx.closeBLEConnection({
          deviceId: $this._deviceId,
          success(res) {
            Toast.success('已成功断开')
          }
        })
      }
    },

    //开始蓝牙被发现
    startBluetoothDevicesDiscovery() {
      wx.startBluetoothDevicesDiscovery({
        allowDuplicatesKey: true,
        success: (res) => {
          console.log('startBluetoothDevicesDiscovery success', res)
          $this.onBluetoothDeviceFound()
          $this.change_device_status(1)
        },
        fail(err) {
          $this.change_device_status(3)

        }
      })
    },
    //打开蓝牙搜索
    onBluetoothDeviceFound() {
      wx.onBluetoothDeviceFound((res) => {
        res.devices.forEach(device => {
          if (!device.name && !device.localName) {
            return
          }
          console.log(device['name'])
          if (device['name'] == $this.code) {
            $this.stopBluetoothDevicesDiscovery()
            $this.device = device
            game_store.commit('setDeviceId', device.deviceId)
            $this._deviceId = device.deviceId
            $this.createBLEConnection()
          }
        })
      })
      setTimeout(() => {
        if (!$this.device.deviceId) {
          $this.stopBluetoothDevicesDiscovery()
          $this.status = 0
          $this.connect_show = false
          Toast.fail('未连接到设备')
        }
      }, 7000)

    },
    // 停止蓝牙搜索
    stopBluetoothDevicesDiscovery() {
      wx.stopBluetoothDevicesDiscovery()
    },
    //连接低功耗蓝牙设备。
    createBLEConnection() {
      wx.createBLEConnection({
        deviceId: $this.device.deviceId,
        success: (res) => {
          console.log('成功连接')
          //成功连接脑环蓝牙
          $this.change_device_status(2)
          // $this.getBLEDeviceServices($this.device.deviceId)
        },
        fail(err) {
          console.log('err', err)
        }
      })
    },
    //  获取游戏设备玩具
    get_toy_list() {
      game_devices().then((res) => {
        let $data = res.data
      })
    },

    //  开始游戏的方法
    game_start() {
      game_store.commit('setToyIndex', $this.toy_action - 1)
      // bluetooth.sendConnect($this.toy_action - 1, $this._deviceId, $this._serviceId, $this._characteristicId)
      console.log('device.vue', $this._deviceId)
    }
  },
  mounted() {
    $this.get_toy_list()
  },
  created() {
    $this = this
  },
  onLoad(options) {
    // 原有的code
    let $_code = wx.getStorageSync('code')
    if (options.q) {
      let url = decodeURIComponent(options.q)
      let $code = url.match(/\?code=(.*)/)[1];
      //判断新的code 和 旧的code 是否一致 不一致则重新登录
      console.log('1---' + $_code, '2---' + $code)
      if ($_code && $_code != $code) {
        Toast.fail('该用户已绑定邀请码')
      }
    }
  }
}
</script>

<style scoped>
@import "../static/device.css";
</style>