program/src/components/device/device.vue

<template>
  <div id="device_container">
    <view>
      <text class="cuIcon-titles text-primary"></text>
      <text class="">我的设备</text>
    </view>
    <div class="device padding">
      <!--      未连接部分-->
      <div v-if="connect_toy == 0">
        <div
          class="connect_box"
          v-if="device_status == 0 && connect_show == false"
        >
          <device_unconnect @open_scan="open_scan"></device_unconnect>
        </div>

        <!--      连接中-->
        <div
          class="connecting_box"
          v-if="device_status != 0 && connect_show == false"
        >
          <device_connecting :status="device_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_bg="device_bg"
            :device_power="device_power"
            :rssi="rssi"
          ></device_connected>
        </div>
      </div>
      <div v-else>
        <!--      玩具模块-->
        <!--      玩具连接中-->
        <div class="connecting_toy">
          <toy_connecting
            :connect_toy="connect_toy"
            :toy_id="toy_action"
            :toy="toy_item"
            :toy_sn="toy_sn"
            :device_bg="device_bg"
            :device_power="device_power"
            :toy_power="toy_power"
            @open_choose_toy="open_choose_toy"
            @change_toy_connect_status="change_toy_connect_status"
            @change_status="change_device_status"
            @gameStart="gameStart"
          ></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="14" class="toy_list_content">
          <van-col
            v-for="(toy, index) in toy_list"
            :key="index"
            class="text-center"
          >
            <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" />
    <van-dialog id="van-dialog" />
  </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 gameIng from "@/pages/start/index";
//获取个人信息
import Toast from "../../../static/vant/toast/toast";
import { game_devices, getDeviceBySn } from "../../requests/game";
import game_store from "@/store/game";
import { getNowDate } from "../../utils";
import { LogInDb } from "@/requests/log";


let $this;
export default {
  name: "device",
  components: {
    device_unconnect,
    device_connecting,
    device_connected,
    toy_connecting,
    gameIng,
  },
  data() {
    return {
      rssi: 0,
      //设备状态 0为未连接，1：连接中，2：已连接 3：连接失败
      device_status: 0,
      // device_status: 2,
      connect_show: false,
      //设置图标的颜色
      device_bg: false,

      choose_toy_window: {
        show: false,
        // show: true,
      },
      //'水柱音箱', '喷雾恐龙（大）', '喷雾恐龙（小）', '轨道车', '碰碰车', '小车（大）', '小车（中）', '小车（小）', '飞行器（大）', '飞行器（小）', '水母灯'
      toy_list: [],
      toy_item: {},
      toy_action: 1,
      // connect_show: true,
      //连接玩具 0:未连接 1：连接中 2：已连接 3：连接失败 4:游戏中
      connect_toy: 0,
      code: "jellyfish1234",
      deviceId: "",
      _device_index: false,
      toy_id: 0,
      toy_hex: "",

      // 电量
      device_power: 0,
      //教具电量
      toy_power: 0,
      //教具名称
      toy_sn: "教具",
      //UUID
      toy_UUID: "",

      //  开始游戏模块
      start_show: false,
      game_status: 0,

      //当前发送的hex码
      current_hex: "",
      //判断是否已经连接教具
      toy_connected: false,

      device_finded: false,

      device_data: {
        //产品编码
        sn: "",
        //产品名称
        product_name: "",
        //产品型号       :"",
        product_model: "",
        //产品二维码
        product_qrcode: "",
        //生产年月日       :"",
        production_date: "",
        //制造工厂
        manufacturing_plan: "",
        //硬件版本       :"",
        hardware_version: "",
        //软件版本
        software_version: "",
        //蓝牙地址  mac_address
        device_id: "",
        //蓝牙PC地址
        pc_device_id: "",
        //ios蓝牙地址
        ios_device_id: "",
        //设备类型 1脑环 2玩具
        type: "",
        //UUID
        UUID: "",
      },
    };
  },
  methods: {
    //打开 扫描二维码
    open_scan() {
      // 打开蓝牙扫描 重置游戏状态
      game_store.setters.setGameStatus(0);

      wx.getSystemInfoAsync({
        success(res) {
          if (res.bluetoothEnabled == false) {
            wx.showToast({
              icon: "none",
              title: "请打开蓝牙",
            });
          } else if (res.locationEnabled == false) {
            // 如果是苹果系统则直接打开扫描
            if (res.system.indexOf("iOS") != -1) {
              $this.scan_to_bluetooth();
            } else {
              //如果是安卓系统 则提示打开位置信息 后 打开扫描
              wx.showToast({
                icon: "none",
                title: "请打开位置信息",
              });
            }
          } else {
            $this.scan_to_bluetooth();
          }
        },
      });
    },
    //扫描连接蓝牙
    scan_to_bluetooth() {
      wx.scanCode({
        onlyFromCamera: true,
        scanType: ["barCode", "qrCode"],
        success: (res) => {
          let $data = res;
          if ($data.result) {
            let url = decodeURIComponent($data.result);
            let $code = "";

            //二维码
            if (res.scanType == "QR_CODE") {
              $code = url.match(/\?ring=(.*)/)
                ? url.match(/\?ring=(.*)/)
                : url.match(/\?code=(.*)/);
              $code = $code[1].toUpperCase();
            } else {
              //一维码
              $code = res.result.toUpperCase();
            }

            // 判断新的标识值
            $this.code = $code;
            //判断是新还是旧
            game_store.setters.setIsNew($code.indexOf("AI") != -1);

            console.log("头环码", $code);
            game_store.setters.setDeviceSn($this.code);
            //设备信息
            $this.device_data.product_qrcode = url;
            $this.device_data.sn = $this.code;
            //产品名称、制造工厂
            $this.device_data.product_name = "水母智脑环";
            $this.device_data.manufacturing_plan = "深圳水母智脑科技有限公司";
            // 设备类型
            $this.device_data.type = 1;
            $this.device_data.production_date = getNowDate();

            //打开蓝牙设备
            wx.getSystemInfo({
              success(res) {
                // 判断ios 和 安卓
                if (res.platform == "ios") {
                  wx.openBluetoothAdapter({
                    //判断主机模式蓝牙是否打开
                    mode: "central",
                    success(res) {
                      //判断已经打开连接了
                      if (res["errMsg"] == "openBluetoothAdapter:ok") {
                        // $this.startBluetoothDevicesDiscovery();
                        wx.openBluetoothAdapter({
                          //判断从机模式蓝牙是否打开
                          mode: "peripheral",
                          success(res) {
                            if (res["errMsg"] == "openBluetoothAdapter:ok") {
                              $this.startBluetoothDevicesDiscovery();
                            }
                          },
                          fail(err) {
                            let $msg =
                              $this.$bluetooth.GetopenBluetoothAdapterError(
                                err["errCode"]
                              );
                            setTimeout(() => {
                              Toast.fail({
                                message: $msg,
                              });
                            }, 3000);
                          },
                        });
                      }
                    },
                    fail(err) {
                      let $msg = $this.$bluetooth.GetopenBluetoothAdapterError(
                        err["errCode"]
                      );
                      setTimeout(() => {
                        Toast.fail({
                          message: $msg,
                        });
                      }, 3000);
                    },
                  });
                } else {
                  // 安卓手机
                  wx.openBluetoothAdapter({
                    mode: "peripheral",
                    success(res) {
                      //判断已经打开连接了
                      if (res["errMsg"] == "openBluetoothAdapter:ok") {
                        $this.startBluetoothDevicesDiscovery();
                      }
                    },
                    fail(err) {
                      let $msg = $this.$bluetooth.GetopenBluetoothAdapterError(
                        err["errCode"]
                      );
                      setTimeout(() => {
                        Toast.fail({
                          message: $msg,
                        });
                      }, 3000);
                    },
                  });
                }
              },
            });
          }
        },
        fail(res) {
          console.log(res);
        },
      });
    },
    //关闭窗口的方法
    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 = false;
      $this.choose_toy_window.show = true;
      $this.toy_connected = false;
      $this.$bluetooth.SendOrder("09");
    },
    // 选好玩具
    choose_ok() {
      $this.on_close();
      $this.change_toy_connect_status(1);
      $this._device_index = $this.toy_action - 1;
      //获取玩具
      let $toy = {};
      $this.toy_list.forEach(($val, $index) => {
        if ($val["id"] == $this.toy_action) {
          $this.toy_item = $toy = $val;
        }
      });
      $this.toy_id = $toy.id;
      let $hex = ($this.toy_hex = $toy["hex"].substr(
        $toy["hex"].length - 2,
        2
      ));
      //连接玩具
      $this.current_hex = `03 00 ${$hex} 00 0a`;

      $this.$bluetooth.sendConnectOneToMore($hex);

      //2022-5-25 09:07:59 设置10秒后是否已经连接
      setTimeout(() => {
        if ($this.toy_connected == false) {
          $this.change_toy_connect_status(3);
        }
      }, 10000);
    },
    //修改玩具连接状态
    change_toy_connect_status($status = 0) {
      $this.connect_toy = $status;
      if ($status == 1) {
        $this.connect_show = true;
      } else {
        $this.connect_show = false;
      }
    },
    //  修改设备连接状态
    change_device_status($status = 0) {
      $this.device_status = $status;
      //当蓝牙连接已断开
      //当脑环断开
      if ($status == 0) {
        game_store.setters.setGameStatus(0);
        // 清空链接得设备 三值
        $this.connect_toy = $status;
        $this.connect_show = false;
        $this.device_bg = false;

        $this.$bluetooth.SendOrder("09");
        let deviceId = game_store.getters.getDeviceId();
        $this.change_toy_connect_status(0);
        //断开蓝牙连接
        wx.closeBLEConnection({
          deviceId: deviceId,
          success(res) {
            Toast.success({
              message: "已成功断开",
            });
            game_store.setters.clearDeviceToy();
            wx.closeBluetoothAdapter();
          },
          fail(res) {
            console.log("断开连接error:", res);
          },
          complete(res) {
            $this.device = {};
            $this.toy_UUID = "";
            $this.$forceUpdate();
          },
        });
      } else if ($status == 2) {
        $this.connect_show = true;
      }
    },

    //开始蓝牙被发现
    startBluetoothDevicesDiscovery() {
      wx.startBluetoothDevicesDiscovery({
        allowDuplicatesKey: true,
        success: (res) => {
          //2021年10月21日15:07:57  通过sn 返回deviceId
          getDeviceBySn($this.code).then((res) => {
            let $data = res.data;
            console.log($data.code);
            $this.change_device_status(1);
            $data = $data.data;
            wx.getSystemInfo({
              success(res) {
                // 判断ios 和 安卓
                if (res.platform == "ios") {
                  $this.onBluetoothDeviceFound();
                } else {
                  if ($data.device_id) {
                    console.log("finded");
                    $this.device_finded = true;
                    $this.createBLEConnection($data.device_id);
                  } else {
                    $this.device_finded = false;
                    console.log("unfinded");
                    $this.onBluetoothDeviceFound();
                  }
                }
              },
            });
          });
        },
        fail(err) {
          $this.change_device_status(3);
        },
      });
    },
    //打开蓝牙搜索
    onBluetoothDeviceFound() {
      try {
        // 5秒后判断 这5秒在搜索设备，搜索到就赋值给_deviceId
        // setTimeout(() => {
        //   if ($this.device_data.deviceId == "") {
        //     wx.stopBluetoothDevicesDiscovery();
        //     $this.change_device_status(0);
        //     Toast.fail("未连接到设备");
        //   }
        // }, 5000);
        // 小乌龟
        wx.onBluetoothDeviceFound((res) => {
          res.devices.forEach((device) => {
            if (!device.name && !device.localName) {
              return;
            }
            if (device.localName && device.localName != "") {
              device.name = device.localName;
            }
            if (device["name"].toUpperCase() == $this.code) {
              $this.stopBluetoothDevicesDiscovery();
              console.log("搜索设备", device);
              $this.createBLEConnection(device.deviceId);
              $this.device_data.deviceId = device.deviceId;
            }
          });
        });
      } catch (e) {
        console.log("打开蓝牙error", e);
      }
    },
    // 停止蓝牙搜索
    stopBluetoothDevicesDiscovery() {
      wx.stopBluetoothDevicesDiscovery();
    },
    //连接低功耗蓝牙设备。
    createBLEConnection(deviceId) {
      wx.createBLEConnection({
        deviceId: deviceId,
        success: (res) => {
          LogInDb(`${$this.code},连接成功`)
          $this.$bluetooth.current_device_sn = $this.code;
          game_store.setters.setDeviceId(deviceId);

          //成功连接脑环蓝牙
          $this.change_device_status(2);

          $this.$bluetooth.getBLEDeviceServices(deviceId);
          let $checkServices = setInterval(() => {
            let $serviceId = game_store.getters.getServiceId();
            if ($serviceId) {
              clearInterval($checkServices);
              $this.$bluetooth.openNotify($this);
              $this.$bluetooth.watchingDevice($this);
              $this.$bluetooth.watch_bluetooth_status($this);
              //录入库
              //读取信息逐个写入
              if (!$this.device_finded) {
                setTimeout(() => {
                  $this.$bluetooth.SendOrder("02");
                }, 3000);
              }
            }
          }, 1500);
        },
        fail(err) {
          console.log(err);
        },
      });
    },
    //  获取游戏设备玩具
    get_toy_list() {
      //      清空toy_list
      $this.toy_list = [];
      game_devices().then((res) => {
        let $data = res.data;
        let $toylist = $data.data;
        let _item = {};
        $toylist.forEach(($val, $index) => {
          _item = {
            id: parseInt($val["device_id"]),
            name: $val["name"],
            img: "https://img.shuimuai.com/" + $val["img"],
            hex: $val["bluetooth"],
          };
          $this.toy_list.push(_item);
        });
        game_store.setters.setToyList($this.toy_list);
      });
    },
    onStartGameShowClose() {
      $this.start_show = false;
      $this.game_status = 0;
    },
    gameStart() {
      $this.game_status = 1;
      $this.connect_toy = 4;
    },
  },
  mounted() {
    $this.get_toy_list();
  },
  created() {
    $this = this;
  },
  onShow() {
    //判断是否游戏中
    let $game_status = game_store.getters.getGameStatus();
    // 游戏过程中关闭脑环状态
    let $game_close_status = game_store.getters.getGameCloseStatus();
    console.log("返回时：" + $game_status, $game_close_status);
    let $ble_status = wx.getStorageSync("ble_link_status");
    if ($ble_status == false) {
      //断开蓝牙连接
      $this.change_device_status(0);
    }
    if ($game_status == 3) {
      //不在游戏状态
      $this.connect_toy = 0;
      $this.connect_show = true;
      $this.$bluetooth.watchingDevice($this);
      $this.$bluetooth.watch_bluetooth_status($this);

      $this.toy_UUID = "";
      $this.$forceUpdate();
      // 状态为1的时候重置为1 小乌龟
      if ($game_close_status == 1) {
        // 重置默认条件
        $this.connect_toy = 0;
        $this.connect_show = false;
        $this.device_status = 0;
        $this.$bluetooth.watch_bluetooth_status($this);
        $this.toy_UUID = "";
        $this.$forceUpdate();
        // 清空链接的设备
        game_store.setters.clearDeviceToy();
      }
    }
  },
  onHide() {
    // game_store.setters.setGameStatus(0);
  },
  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>
.second_device_text {
  position: relative;
  bottom: 5px;
}

.connect_img {
  width: 85px;
  height: 80px;
}

/*玩具不同背景*/
.toy_item_normal_bg {
  background-image: url("https://img.shuimuai.com/web/toy_bg.png");
  background-position: center;
  background-size: 100% 100%;
}

/*玩具选中背景*/
.toy_item_action_bg {
  background-image: url("https://img.shuimuai.com/web/toy_bg_action.png");
  background-position: center;
  background-size: 100% 100%;
}

.ring_2 {
  width: 199px;
  height: 203px;
  background: rgba(93, 77, 184, 0);
  border: 2px solid #f7f7f7;
  opacity: 0.43;
  border-radius: 50%;
}

.ring_3 {
  width: 158px;
  height: 158px;
  background: rgba(93, 77, 184, 0);
  border: 3px solid #f6f6f6;
  opacity: 0.54;
  border-radius: 50%;
}

.dot_container {
  height: 100px;
}

.dot_wait {
  height: 5px;
  width: 80px;
  background-image: url("https://img.shuimuai.com/web/connect_line.png");
  background-position: center;
  background-size: 100% 100%;
}

.device_phone {
  width: 30px;
  height: 40px;
  bottom: 5px;
}

.device_brain {
  width: 40px;
  height: 40px;
  bottom: 10px;
}

.device_text {
  padding: 3px;
  font-size: 9px;
}

.moving_dot {
  width: 18px;
  height: 18px;
  position: relative;
  left: 15px;
  bottom: 7px;
}

.moving {
  animation: moving 2s linear infinite;
}

/*左右移动动画*/
@keyframes moving {
  0% {
    left: 0px;
  }
  50% {
    left: 35px;
  }
  100% {
    left: 0px;
  }
}

.cut_brain_icon {
  width: 11px;
  height: 11px;
}

.cut_text {
  font-size: 11px;
}

/*设备绿色信号灯*/
.sign_green {
  width: 20px;
  height: 10px;
  position: relative;
  top: 9px;
  left: 0;
}

/*水母男孩*/
.connected_boy {
  width: 110px;
  height: 110px;
  position: absolute;
  right: -60px;
  top: 63px;
}

.boy_session {
  background-image: url("https://img.shuimuai.com/web/boy_session.png");
  background-position: center;
  background-size: 100% 100%;
  width: 120px;
  height: 100px;
  position: absolute;
  top: 18px;
  right: 25px;
  z-index: 4;
}

.boy_session_text {
  font-size: 12px;
  color: #6b6b6b;
}

.device_electric {
  position: relative;
  width: 16px;
  height: 16px;
  top: 0px;
  right: 0px;
  z-index: 5;
}

/*设备连接模块*/
.device_bg {
  width: 90px;
  height: 100px;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("https://img.shuimuai.com/web/device_bg.png");
}

.left {
  line-height: 32px;
}
</style>

<!--私有样式-->
<style scoped>
#device_container {
  position: relative;
  bottom: 80px;
}

.head .line {
  width: 4px;
  height: 14px;
  background-color: #5d4db8;
  margin-right: 7px;
}

.head view {
  display: flex;
  justify-self: start;
  align-items: center;
}

/*玩具列表*/
.toy_list {
  overflow-x: scroll;
}

.toy_item {
  margin: 0px auto;
  /* width: 120px; */
  width: 140px;
  height: 130px;
}

/*玩具图片*/
.toy_img {
  width: 65px;
  height: 65px;
}

.toy_text {
  font-size: 12px;
}

.toy_action_text {
  font-size: 11px;
  width: 100%;
}

/* 选择玩具 */
.toy_list {
  width: 100%;
  overflow-x: auto;
}

.toy_list_content {
  width: 130%;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
}

/* padding toy_list */
</style>