优化蓝牙连接流程

src/components/device/connected.vue → src/components/connection/brains/connected.vue

@@ -1,3 +1,25 @@
+<script>
+export default {
+  name: "connected",
+  props: ['device_bg', 'device_power'],
+  methods: {
+    /**
+     * 修改设备连接状态
+     * @param $status 设备状态 0为未连接，1：连接中，2：已连接 3：连接失败
+     */
+    setDeviceStatus($status = 0) {
+      this.$emit("deviceStatus", $status);
+    },
+    /**
+     * 打开教具选择
+     */
+    openToyList() {
+      this.$emit('openToys')
+    },
+  }
+}
+</script>
+
 <template>
   <div>
     <van-row class="padding">
@@ -30,42 +52,23 @@
     <!--        按钮组合-->
     <van-row>
       <van-col span="9" offset="1">
-        <button class="cu-btn bg-red lg text-white" @click="change_status(0)">
+        <button class="cu-btn bg-red lg text-white" @click="setDeviceStatus(0)">
           <img src="https://img.shuimuai.com/m_duankainaohuan.png" class="cut_brain_icon" alt="">
           <text class="padding-lr cut_text">断开脑机</text>
         </button>
       </van-col>
 
       <van-col span="12" offset="1">
-        <button class="cu-btn bg-red lg cu-btn-primary" @click="open_choose_toy">
+        <button class="cu-btn bg-red lg cu-btn-primary" @click="openToyList">
           <img src="https://img.shuimuai.com/m_xuanzewanju.png" alt="" class="cut_brain_icon">
           <text class="padding-lr cut_text">选择教具</text>
         </button>
       </van-col>
     </van-row>
-<!--    <div class="boy_session padding">-->
-<!--      <text class="boy_session_text">点击选择你喜欢 的教具类别就可 以开始玩囖！</text>-->
-<!--    </div>-->
-<!--    <img src="https://img.shuimuai.com/web/boy.png" alt="" class="connected_boy">-->
   </div>
 </template>
 
-<script>
-export default {
-  name: "connected",
-  props: ['device_bg', 'device_power', 'rssi'],
-  methods: {
-    open_choose_toy() {
-      this.$emit('open_choose_toy')
-    },
-    change_status($status) {
-      this.$emit('change_brain_status', $status)
-    }
-  }
-}
-</script>
-
-<style>
+<style scoped>
 .cut_text {
   padding: 0px 5px;
   font-size: 11px;
@@ -76,5 +79,4 @@ export default {
   border-radius: 2.5px;
   bottom: 1.5px;
 }
-
 </style>

src/components/connection/brains/connecting.vue

@@ -0,0 +1,230 @@
+<script>
+import game_store from "@/store/game";
+import Dialog from "../../../../static/vant/dialog/dialog";
+import Toast from "../../../../static/vant/toast/toast";
+import WechatLog from "@/utils/wechat_log";
+let $this;
+export default {
+  name: "Connecting",
+  props: ['status'],
+  data() {
+    return {
+      // 设备状态 0为未连接，1：连接中，2：已连接 3：连接失败
+      device_status: 0,
+      // 脑机sn码
+      code: "jellyfish1234",
+      bleFoundTimeOut: undefined
+    }
+  },
+  created() {
+    $this = this;
+  },
+  mounted() {
+    $this.code = game_store.getters.getDeviceSn();
+  },
+  watch: {
+    'status': {
+      handler: function($status) {
+        console.log("监听到父级扫码状态",$status);
+        if ($status*1 === 1) {
+          this.device_status = 1;
+          this.getBluetoothState();
+        }
+      }, immediate: true
+    }
+  },
+  methods:{
+    /**
+     * 修改设备连接状态
+     * @param $status 设备状态 0为未连接，1：连接中，2：已连接 3：连接失败
+     */
+    setDeviceStatus($status = 0) {
+      $this.device_status = $status;
+      $this.$emit("deviceStatus", $status);
+    },
+    /**
+     * 获取蓝牙状态
+     *
+     */
+    getBluetoothState() {
+      // 获取本机蓝牙适配器状态
+      wx.getBluetoothAdapterState({
+        success: function (res) {
+          if (res.available) {
+            // 开始搜寻附近的蓝牙外围设备。此操作比较耗费系统资源，请在搜索到需要的设备后及时调用 wx.stopBluetoothDevicesDiscovery 停止搜索。
+            wx.startBluetoothDevicesDiscovery({
+              allowDuplicatesKey: true,
+              success: () => {
+                $this.onBluetoothFound();
+              },
+              fail() {
+                // 失败取消连接
+                $this.cancelConnect();
+              },
+            });
+          } else {
+            // 打印相关信息
+            console.log(res["errMsg"])
+            setTimeout(() => {
+              Toast.fail({
+                message: res["errMsg"],
+              });
+            }, 3000);
+          }
+        },
+        fail: function (err) {
+          // 打印相关信息
+          console.log(err["errMsg"])
+          setTimeout(() => {
+            Toast.fail({
+              message: err["errMsg"],
+            });
+          }, 3000);
+        }
+      })
+    },
+    /**
+     * 监听搜索到新设备的事件
+     */
+    onBluetoothFound() {
+      $this.bleFoundTimeOut = setTimeout(() => {
+        if ($this.device_status === 0 || $this.device_status === 3) {
+          // 移除搜索到新设备的事件的全部监听函数
+          wx.offBluetoothDeviceFound();
+          // 停止搜寻附近的蓝牙外围设备。若已经找到需要的蓝牙设备并不需要继续搜索时，建议调用该接口停止蓝牙搜索。
+          wx.stopBluetoothDevicesDiscovery();
+          Dialog.confirm({
+            message: '脑机连接失败',
+            showCancelButton: true,
+            cancelButtonText: "查看指引",
+          }).catch(() => {
+            wx.navigateTo({
+              url: "/pages/guide/main"
+            })
+          });
+        }
+      }, 7000)
+      try {
+        // 监听搜索到新设备的事件
+        wx.onBluetoothDeviceFound((res) => {
+          $this.code = game_store.getters.getDeviceSn();
+          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) {
+              // 停止搜寻附近的蓝牙外围设备
+              wx.stopBluetoothDevicesDiscovery();
+              // 连接低功耗蓝牙设备
+              $this.bLEConnection(device.deviceId);
+              //$this.device_data.deviceId = device.deviceId;
+              clearTimeout($this.bleFoundTimeOut);
+              console.log("连接低功耗蓝牙设备：", JSON.stringify(device));
+            }
+          });
+        });
+      } catch (e) {
+        console.log("打开蓝牙error", e);
+      }
+    },
+    /**
+     * 连接低功耗蓝牙设备
+     */
+    bLEConnection(deviceId) {
+      // 移除搜索到新设备的事件的全部监听函数
+      wx.offBluetoothDeviceFound();
+      // 停止搜寻附近的蓝牙外围设备
+      wx.stopBluetoothDevicesDiscovery();
+      // 连接蓝牙低功耗设备。(若小程序在之前已有搜索过某个蓝牙设备，并成功建立连接，可直接传入之前搜索获取的 deviceId 直接尝试连接该设备，无需再次进行搜索操作)
+      wx.createBLEConnection({
+        deviceId: deviceId,
+        success: () => {
+          // 协商设置蓝牙低功耗的最大传输单元 (Maximum Transmission Unit, MTU)。需在 wx.createBLEConnection 调用成功后调用。仅安卓系统 5.1 以上版本有效，iOS 因系统限制不支持。
+          wx.setBLEMTU({
+            deviceId,
+            mtu: 250,
+            success(res) {
+              console.log("设置mtu成功", JSON.stringify(res));
+            }
+          })
+          // 记录日志
+          WechatLog.info("脑机蓝牙连接成功:", $this.code);
+
+          $this.$bluetooth.current_device_sn = $this.code;
+          game_store.setters.setDeviceId(deviceId);
+          // 获取蓝牙设备服务
+          $this.$bluetooth.getBLEDeviceServices(deviceId);
+          //成功连接脑机蓝牙
+          $this.setDeviceStatus(2);
+        },
+        fail(err) {
+          console.log(err);
+        },
+      });
+    },
+    /**
+     * 取消连接
+     */
+    cancelConnect() {
+      clearTimeout($this.bleFoundTimeOut);
+      $this.setDeviceStatus(3);
+    },
+  },
+}
+</script>
+
+<template>
+  <div>
+    <van-row class="padding">
+      <van-col span="5" offset="4">
+        <div class="device_bg flex flex-direction align-center justify-center">
+          <img src="https://img.shuimuai.com/web/phone.png" alt="" class="device_phone">
+          <text class="text-gray device_text"> 我的手机</text>
+        </div>
+      </van-col>
+      <van-col span="3" offset="1">
+        <div class="dot_container flex align-center">
+          <div class="dot_wait">
+            <img v-if="status*1 === 1" src="https://img.shuimuai.com/web/dot.png" alt="" class="moving_dot"
+                 :class="{moving: status*1 === 1}"
+            />
+            <img v-if="status*1 === 2" src="https://img.shuimuai.com/m_sign_gou%402x.png" alt="" class="moving_dot">
+            <img v-if="status*1 === 3" src="https://img.shuimuai.com/fail.png" alt="" class="moving_dot">
+          </div>
+        </div>
+      </van-col>
+      <van-col span="5" offset="0">
+        <div class="device_bg flex flex-direction align-center justify-center">
+          <img src="https://img.shuimuai.com/web/brain.png" alt="" class="device_brain">
+          <text class="text-gray device_text"> 水母智能脑机</text>
+        </div>
+      </van-col>
+    </van-row>
+    <van-row>
+      <van-col span="9" offset="1">
+        <button class="cu-btn bg-red lg text-white" @click="cancelConnect">
+          <img src="https://img.shuimuai.com/m_duankainaohuan.png" class="cut_brain_icon" alt="">
+          <text class="padding-lr cut_text">取消连接</text>
+        </button>
+      </van-col>
+      <van-col span="12" offset="1">
+        <text class="text-gray text-lg">
+          <template v-if="status*1 === 1">
+            连接中...
+          </template>
+          <template v-if="status*1 === 2">
+            连接成功
+          </template>
+          <template v-if="status*1 === 3">
+            连接失败
+          </template>
+        </text>
+      </van-col>
+    </van-row>
+    <van-toast id="van-toast"/>
+    <van-dialog id="van-dialog"/>
+  </div>
+</template>
+
+<style scoped></style>

src/components/connection/brains/index.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>脑机模块</div>
-</template>
-
-<script>
-export default {
-  name: "Brains"
-};
-</script>
-
-<style scoped>
-
-</style>

src/components/connection/brains/scan.vue

@@ -0,0 +1,209 @@
+<script>
+import game_store from "@/store/game";
+import Dialog from "../../../../static/vant/dialog/dialog";
+import Toast from "../../../../static/vant/toast/toast";
+
+let $this;
+export default {
+  name: "ConnectionScan",
+  created() {
+    $this = this;
+  },
+  methods: {
+    /**
+     * 扫描二维码连接脑机
+     */
+    openScan() {
+      // 打开蓝牙扫描 重置游戏状态
+      game_store.setters.setGameStatus(0);
+      // 微信异步获取系统信息
+      wx.getSystemInfoAsync({
+        success(res) {
+          // 蓝牙的系统开关 boolean
+          if (!res.bluetoothEnabled) {
+            Dialog.alert({
+              title: '蓝牙功能未开启',
+              message: '请打开蓝牙，允许水母星球使用蓝牙服务',
+            }).then(() => {
+              // 跳转系统蓝牙设置页
+              wx.openSystemBluetoothSetting()
+            });
+          }
+          // 地理位置的系统开关 boolean
+          else if (!res.locationEnabled) {
+            // 如果是苹果系统则直接打开扫描
+            if (res.system.indexOf("iOS") !== -1) {
+              $this.scanBluetooth();
+            } else {
+              Dialog.alert({
+                title: '位置信息未开启',
+                message: '当前无位置访问权限，请在设置中，允许水母星球使用位置服务',
+              }).then(() => {
+              });
+            }
+          }
+          // 允许微信使用定位的开关 boolean
+          else if (!res.locationAuthorized) {
+            Dialog.alert({
+              title: '位置权限未开启',
+              message: '当前无位置访问权限，请在手机[设置]应用中，允许[微信]使用位置服务',
+            }).then(() => {
+              // 跳转系统微信授权管理页
+              wx.openAppAuthorizeSetting()
+            });
+          }
+          // 已允许权限
+          else {
+            $this.scanBluetooth();
+          }
+        },
+      });
+    },
+    /**
+     * 扫描连接蓝牙
+     */
+    scanBluetooth() {
+      // 调起微信客户端扫码界面进行扫码
+      wx.scanCode({
+        // 是否只能从相机扫码
+        onlyFromCamera: true,
+        // barCode:一维码, qrCode:二维码
+        scanType: ["barCode", "qrCode"],
+        success: (scan) => {
+          if (scan.result) {
+            let url = decodeURIComponent(scan.result);
+            let $code = "";
+            // 二维码
+            if (scan.scanType === "QR_CODE") {
+              if (url.indexOf("AI") !== -1) {
+                $code = url.substr(url.indexOf("AI"));
+              } else if (url.toUpperCase().indexOf("JELLYFISH")) {
+                $code = url.substr(url.toUpperCase().indexOf("JELLYFISH"));
+              }
+            } else {
+              // 一维码
+              $code = scan.result.toUpperCase();
+            }
+            game_store.setters.setDeviceSn($code);
+            // 判断是新还是旧
+            game_store.setters.setIsNew($code.indexOf("AI") !== -1);
+            console.log("扫码得到头环SN码:", $code);
+            // 标识值
+            // $this.code = $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();
+            this.openSystemBluetooth();
+          }
+        },
+        fail(err) {
+          console.log(err["errMsg"])
+          setTimeout(() => {
+            Toast.fail({
+              message: err["errMsg"],
+            });
+          }, 3000);
+        },
+      });
+    },
+    /**
+     * 检查系统蓝牙权限
+     */
+    openSystemBluetooth: function () {
+      // 获取系统信息
+      wx.getSystemInfo({
+        success(res) {
+          // 判断ios
+          if (res.platform === "ios") {
+            // 初始化蓝牙模块。iOS上开启主机central/从机peripheral（外围设备）模式时需分别调用一次，并指定对应的 mode
+            wx.openBluetoothAdapter({
+              // 判断主机模式蓝牙是否打开
+              mode: "central",
+              success(res) {
+                // 正常
+                if (res["errMsg"] === "openBluetoothAdapter:ok") {
+                  // 判断从机模式蓝牙是否打开
+                  wx.openBluetoothAdapter({
+                    // 判断从机模式蓝牙是否打开
+                    mode: "peripheral",
+                    success(res) {
+                      if (res["errMsg"] === "openBluetoothAdapter:ok") {
+                        $this.setScanStatus(1);
+                      }
+                    },
+                    fail(err) {
+                      setTimeout(() => {
+                        Toast.fail({
+                          message: $this.$bluetooth.GetopenBluetoothAdapterError(err["errCode"]),
+                        });
+                      }, 3000);
+                    },
+                  });
+                }
+              },
+              fail(err) {
+                setTimeout(() => {
+                  Toast.fail({
+                    message: $this.$bluetooth.GetopenBluetoothAdapterError(err["errCode"]),
+                  });
+                }, 3000);
+              },
+            });
+          } else {
+            // 安卓手机
+            wx.openBluetoothAdapter({
+              mode: "peripheral",
+              success(res) {
+                // 正常
+                if (res["errMsg"] === "openBluetoothAdapter:ok") {
+                  $this.setScanStatus(1);
+                }
+              },
+              fail(err) {
+                setTimeout(() => {
+                  Toast.fail({
+                    message: err["errMsg"],
+                  });
+                }, 3000);
+              },
+            });
+          }
+        },
+      });
+    },
+    /**
+     * 修改扫码状态
+     * @param $status 0未，1扫码成功
+     */
+    setScanStatus($status = 0) {
+      $this.$emit("scanStatus", $status);
+    },
+
+  },
+};
+</script>
+
+<template>
+  <div>
+    <van-row>
+      <van-col span="11" class="text-gray text-sm left" offset="1">
+        <view>1.打开手机蓝牙和位置信息</view>
+        <view>2.长按脑机侧面按钮启动脑机</view>
+        <view>3.点击扫码开始连接</view>
+      </van-col>
+      <van-col span="8" offset="2">
+        <img src="https://img.shuimuai.com/lanyashuimu.png" class="connect_img"/>
+      </van-col>
+    </van-row>
+    <button class="cu-btn lg cu-btn-primary text-white text-center scan_button margin-tb" @click="openScan">扫码连接脑机</button>
+    <van-toast id="van-toast"/>
+    <van-dialog id="van-dialog"/>
+  </div>
+</template>
+<style scoped></style>

src/components/connection/index.vue

@@ -1,33 +1,400 @@
-<template>
-    <div id="device_container">
-      <view>
-        <text class="cuIcon-titles text-primary"></text>
-        <text class="">我的设备</text>
-      </view>
-      <div class="device padding">
-        <!-- 脑机 -->
-        <Brains></Brains>
-        <!-- 教具模块 -->
-        <Toys></Toys>
-      </div>
-    </div>
-</template>
-
 <script>
-import Brains from "@/components/connection/brains/index";
-import Toys from "@/components/connection/toys/index";
+import game_store from "@/store/game";
+import ConnectionScan from "@/components/connection/brains/scan";
+import Connecting from "@/components/connection/brains/connecting";
+import Connected from "@/components/connection/brains/connected";
+import ToySelected from "@/components/connection/toys/selected";
+import ToySelection from "@/components/connection/toys/selection";
+import Toast from "../../../static/vant/toast/toast";
+let $this;
 export default {
   name: "ConnectionIndex",
   components: {
-    Brains,
-    Toys
+    ConnectionScan,
+    Connecting,
+    Connected,
+    ToySelected,
+    ToySelection
+  },
+  data() {
+    return {
+      // 设备状态 0为未连接，1：连接中，2：已连接 3：连接失败
+      device_status: 0,
+      // 教具选择弹框
+      popup_show: false,
+      // 选择的教具
+      toy_item: {
+        id: 0,
+        name: "",
+        img: "",
+        hex: "",
+      },
+      // 连接教具 0:未连接 1：连接中 2：已连接 3：连接失败 4:游戏中
+      connect_toy: 0,
+
+
+
+      // $this.$bluetooth 设置的参数
+      // 电量
+      device_power: 0,
+      device_voltage: 0,
+      rssi: 0,
+      current_hex:"",
+      // 判断是否已经连接教具
+      toy_connected: false,
+      toy_sn:"",
+      toy_power:0,
+      toy_voltage:0,
+      // 设置图标的颜色
+      device_bg: false,
+      toy_UUID:"",
+      hasUsb:false,
+
+      connect_show: false,
+      device:{},
+
+    }
+  },
+  created() {
+    $this = this;
   },
+  methods: {
+    /**
+     * 获取设备扫码连接状态
+     */
+    getScanStatus($status) {
+      // 扫码成功连接中1,失败未连接0
+      $this.device_status = $status * 1;
+      console.log("接收到设备扫码连接状态:", $status);
+    },
+    /**
+     * 获取设备连接状态
+     * @param $status 设备状态 0为未连接，1：连接中，2：已连接 3：连接失败 4:取消連接
+     */
+    setDeviceStatus($status) {
+      $this.device_status = $status * 1;
+      console.log("接收到设备连接状态:", $status);
+      if ($status * 1 === 2) {
+        let $checkServices = setInterval(() => {
+          let $serviceId = game_store.getters.getServiceId();
+          if ($serviceId) {
+            clearInterval($checkServices);
+            // 监听数据
+            $this.$bluetooth.openNotify($this);
+            $this.$bluetooth.notifyDatas($this);
+            $this.$bluetooth.watchBLEstatus($this);
+          }
+        }, 1500);
+      } else {
+        game_store.setters.setGameStatus(0);
+        // todo 清空链接的设备
+        $this.connect_toy = $status;
+        $this.connect_show = false;
+        $this.device_bg = false;
+        $this.connect_status = false;
+        if ($status * 1 > 0) {
+          // 断开脑机
+          // 移除搜索到新设备的事件的全部监听函数
+          wx.offBluetoothDeviceFound();
+          // 停止搜寻附近的蓝牙外围设备。若已经找到需要的蓝牙设备并不需要继续搜索时，建议调用该接口停止蓝牙搜索。
+          wx.stopBluetoothDevicesDiscovery();
+          $this.$bluetooth.SendOrder("09");
+          let deviceId = game_store.getters.getDeviceId();
+          //断开蓝牙连接
+          wx.closeBLEConnection({
+            deviceId: deviceId,
+            success() {
+              Toast.success({
+                message: "断开蓝牙连接成功",
+              });
+              game_store.setters.clearDeviceToy();
+              wx.closeBluetoothAdapter();
+            },
+            fail(res) {
+              console.log("断开蓝牙连接失败error:", res);
+            },
+            complete() {
+              $this.device = {};
+              $this.toy_UUID = "";
+              $this.$forceUpdate();
+            },
+          });
+        }
+      }
+    },
+    /**
+     * 打开教具选择
+     */
+    openToyList(){
+      this.popup_show = true;
+      this.toy_sn = "教具";
+      if ($this.device_status*1 === 2) {
+        // 关闭脑控
+        this.$bluetooth.SendOrder("09");
+      }
+    },
+    //关闭窗口
+    closePopup() {
+      $this.popup_show = false;
+    },
+    // 选好教具
+    chooseOK() {
+      $this.popup_show = false;
+      $this.toy_item = game_store.getters.getToyItem();
+      if($this.toy_item && $this.toy_item.id > 0) {
+        $this.setToyStatus(1);
+        let $hex = ($this.toy_hex = $this.toy_item["hex"].substr($this.toy_item["hex"].length - 2, 2));
+        if ($hex === "80") {
+          wx.setStorageSync("report_mode", 2)
+        } else {
+          wx.setStorageSync("report_mode", 1)
+        }
+        console.log("连接教具:", `03 00 ${$hex} 00 0a`, JSON.stringify($this.toy_item));
+        // 连接教具: 03 00 ${$hex} 00 0a
+        $this.$bluetooth.sendConnectOneToMore($hex);
+        //2022-5-25 09:07:59 设置10秒后是否已经连接
+        setTimeout(() => {
+          if ($this.toy_connected === false) {
+            $this.setToyStatus(3);
+          }
+        }, 10000);
+      }
+    },
+    /**
+     * 修改教具连接状态 0:未连接 1：连接中 2：已连接 3：连接失败 4:游戏中
+     * @param $status
+     */
+    setToyStatus($status = 0) {
+      $this.connect_toy = $status;
+    },
+    gameStart() {
+      $this.game_status = 1;
+      $this.connect_toy = 4;
+    },
+  }
 };
 </script>
 
+<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 v-if="device_status === 0" class="connect_box">
+          <ConnectionScan @scanStatus="getScanStatus"></ConnectionScan>
+        </div>
+        <!-- 连接中 -->
+        <div v-if="device_status === 1" class="connecting_box">
+          <Connecting :status="device_status" @deviceStatus="setDeviceStatus"></Connecting>
+        </div>
+        <!-- 已链接 -->
+        <div v-if="device_status === 2" class="connected_box">
+          <Connected :device_bg="device_bg" :device_power="device_power" @deviceStatus="setDeviceStatus" @openToys="openToyList"></Connected>
+        </div>
+      </div>
+      <!-- 教具模块 -->
+      <div v-else>
+        <div class="connecting_toy">
+          <ToySelected :connect_toy="connect_toy"
+                       :toy="toy_item"
+                       :toy_sn="toy_sn"
+                       :device_bg="device_bg"
+                       :device_power="device_power"
+                       :toy_power="toy_power"
+                       @openToys="openToyList"
+                       @deviceStatus="setDeviceStatus"
+                       @gameStart="gameStart"
+          ></ToySelected>
+        </div>
+      </div>
+      <!-- 选择教具 -->
+      <van-popup :show="popup_show" @close="closePopup" position="bottom" round closeable safe-area-inset-bottom>
+        <ToySelection></ToySelection>
+        <div class="padding">
+          <button class="cu-btn lg cu-btn-primary text-white text-center padding" @click="chooseOK">
+            选好了
+          </button>
+        </div>
+      </van-popup>
+    </div>
+  </div>
+</template>
+
+<!--共有样式-->
+<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;
 }
+
 </style>

src/components/connection/toys/index.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>教具模块</div>
-</template>
-
-<script>
-export default {
-  name: "Toys"
-};
-</script>
-
-<style scoped>
-
-</style>

src/components/device/toy/connecting.vue → src/components/connection/toys/selected.vue

@@ -1,270 +1,13 @@
-<template>
-  <div>
-    <van-row class="padding">
-      <van-col span="5">
-        <div class="device_bg flex flex-direction align-center justify-center">
-          <img
-            src="https://img.shuimuai.com/web/phone.png"
-            alt=""
-            class="device_phone"
-          />
-          <text class="text-gray device_text"> 我的手机</text>
-        </div>
-      </van-col>
-      <van-col span="3" offset="1">
-        <div class="dot_container flex align-center">
-          <div class="dot_wait">
-            <img
-              src="https://img.shuimuai.com/m_sign_gou%402x.png"
-              alt=""
-              class="moving_dot"
-            />
-          </div>
-        </div>
-      </van-col>
-      <van-col span="5" offset="0">
-        <div class="device_bg flex flex-direction align-center justify-center">
-          <img
-            src="https://img.shuimuai.com/web/sign_green.png"
-            alt=""
-            class="sign_green"
-            v-if="device_bg == true"
-          />
-          <img
-            src="https://img.shuimuai.com/web/sign_red.png"
-            class="sign_green"
-            alt=""
-            v-else
-          />
-          <img
-            src="https://img.shuimuai.com/web/brain.png"
-            alt=""
-            class="device_brain"
-          />
-          <text class="text-gray device_text second_device_text">
-            已连接({{ device_power }}%)</text
-          >
-        </div>
-      </van-col>
-      <van-col span="3" offset="1">
-        <div class="dot_container flex align-center">
-          <div class="dot_wait">
-            <img
-              v-if="connect_toy == 1"
-              src="https://img.shuimuai.com/web/dot.png"
-              alt=""
-              class="moving_dot"
-              :class="{ moving: connect_toy == 1 }"
-            />
-            <img
-              v-if="connect_toy == 2"
-              src="https://img.shuimuai.com/m_sign_gou%402x.png"
-              alt=""
-              class="moving_dot"
-            />
-            <img
-              v-if="connect_toy == 3"
-              src="https://img.shuimuai.com/fail.png"
-              alt=""
-              class="moving_dot"
-            />
-          </div>
-        </div>
-      </van-col>
-      <van-col span="5" offset="0">
-        <div class="device_bg flex flex-direction align-center justify-center">
-          <img :src="toy['img']" alt="" class="uav_toy" />
-          <text class="text-gray device_text">
-            <template v-if="connect_toy == 1 || connect_toy == 3">
-              {{ toy["name"] }}
-            </template>
-            <template v-if="connect_toy == 2 || connect_toy == 4">
-              {{ toy_sn }}
-            </template>
-          </text>
-        </div>
-      </van-col>
-    </van-row>
-    <!--        按钮组合-->
-    <van-row gutter="6">
-      <van-col span="8">
-        <button class="cu-btn bg-red lg text-white" @click="change_status">
-          <img
-            src="https://img.shuimuai.com/m_duankainaohuan.png"
-            class="cut_brain_icon"
-            alt=""
-          />
-          <text class="cut_text">断开脑机</text>
-        </button>
-      </van-col>
-
-      <van-col span="12" offset="1" v-if="connect_toy == 1">
-        <van-row class="text-center">
-          <text class="text-gray text-lg"> 连接中... </text>
-        </van-row>
-      </van-col>
-
-      <!--      已经连接教具-->
-      <div v-if="connect_toy == 2">
-        <van-col span="8">
-          <button
-            class="cu-btn bg-red lg cu-btn-primary"
-            @click="open_choose_toy"
-          >
-            <img
-              src="https://img.shuimuai.com/m_xuanzewanju.png"
-              alt=""
-              class="cut_brain_icon"
-            />
-            <text class="cut_text">选择教具</text>
-          </button>
-        </van-col>
-
-        <van-col span="8">
-          <button
-            class="cu-btn bg-red lg cu-btn-primary"
-            @click="choose_pay_window"
-            :disabled="is_started"
-          >
-            <img
-              src="https://img.shuimuai.com/web/start_game_icon.png"
-              alt=""
-              class="cut_start_game_icon"
-            />
-            <text class="cut_text" style="padding: 0px">开始训练</text>
-          </button>
-        </van-col>
-      </div>
-
-      <!--      教具连接失败-->
-      <div v-if="connect_toy == 3">
-        <van-col span="8">
-          <button
-            class="cu-btn bg-red lg cu-btn-primary"
-            @click="open_choose_toy"
-          >
-            <img
-              src="https://img.shuimuai.com/m_xuanzewanju.png"
-              alt=""
-              class="cut_brain_icon"
-            />
-            <text class="cut_text">选择教具</text>
-          </button>
-        </van-col>
-
-        <van-col span="8">
-          <van-row class="text-center">
-            <text class="text-gray text-lg"> 连接失败 </text>
-          </van-row>
-        </van-col>
-      </div>
-
-      <!--      教具连接中-->
-      <div v-if="connect_toy == 4">
-        <!--        <van-col span="8" style="visibility: hidden">-->
-        <!--          <button class="cu-btn bg-red lg cu-btn-primary" @click="open_choose_toy">-->
-        <!--            <img src="https://img.shuimuai.com/m_xuanzewanju.png" alt="" class="cut_brain_icon">-->
-        <!--            <text class=" cut_text">选择教具</text>-->
-        <!--          </button>-->
-        <!--        </van-col>-->
-
-        <van-col span="16">
-          <button
-            class="cu-btn bg-green lg"
-            @click="to_playing"
-            style="width: 100%"
-          >
-            <img
-              src="https://img.shuimuai.com/web/start_game_icon.png"
-              alt=""
-              class="cut_start_game_icon"
-            />
-            <text class="cut_text" style="padding: 0px">游戏中</text>
-          </button>
-        </van-col>
-      </div>
-    </van-row>
-
-    <!--  选择消费方式的窗口  -->
-
-    <van-overlay :show="pay_window" @click="onClickHide" z-index="5">
-      <div class="pay_type_window">
-        <div class="pay_type_title padding">
-          <text class="text-bold pay_type_title_text">选择消费方式</text>
-        </div>
-
-        <van-row gutter="11">
-          <van-col span="11" offset="1">
-            <div
-              class="
-                pay_type_item
-                flex flex-direction
-                justify-center
-                align-center
-              "
-              @click.prevent="choose_pay(2)"
-            >
-              <view class="text-xl padding">
-                <text class="text-white text-bold">消费时间</text>
-              </view>
-            </div>
-          </van-col>
-          <van-col span="11">
-            <div
-              class="
-                pay_type_item
-                flex flex-direction
-                justify-center
-                align-center
-              "
-              @click.prevent="choose_pay(1)"
-            >
-              <view class="text-xl padding">
-                <text class="text-white text-bold">消费次卡</text>
-              </view>
-              <view class="text-sm">
-                <text class="text-white">次卡时间为10分钟</text>
-              </view>
-            </div>
-          </van-col>
-        </van-row>
-      </div>
-      <img
-        src="https://img.shuimuai.com/web/boy2.png"
-        alt=""
-        class="connected_boy2"
-      />
-    </van-overlay>
-    <van-toast id="van-toast" />
-
-    <van-popup
-      :show="start_show"
-      closeable
-      position="bottom"
-      custom-style="height: 100%"
-    >
-      <view>
-        <text>游戏中界面</text>
-      </view>
-    </van-popup>
-
-    <!-- 防止多次开始 -->
-    <!-- <cover-view class="started_bg" v-show="is_started"></cover-view> -->
-  </div>
-</template>
-
 <script>
-import { timestamp } from "@/requests/user";
-import { gameStart } from "@/requests/game";
+import {gameStart} from "@/requests/game";
 import Toast from "../../../../static/vant/toast/toast";
 import game_store from "../../../store/game";
 
 let $this;
 export default {
-  name: "connected",
+  name: "ToySelected",
   props: [
     "connect_toy",
-    "toy_id",
     "toy",
     "device_bg",
     "device_power",
@@ -274,7 +17,7 @@ export default {
   data() {
     return {
       pay_window: false,
-      //  使用类型 1次数 2时间 0未选择
+      //  使用类型 1 次数 2时间 0未选择
       pay_type: 0,
       // 限制点击一次
       is_started: false,
@@ -283,10 +26,10 @@ export default {
     };
   },
   methods: {
-    open_choose_toy() {
-      $this.$emit("open_choose_toy", true);
+    openToyList() {
+      $this.$emit("openToys", true);
     },
-    //打开选择消费的选项框
+    // 打开选择消费的选项框
     choose_pay_window() {
       if (!$this.device_bg) {
         Toast.fail("请佩戴好脑机开始训练");
@@ -305,10 +48,9 @@ export default {
         Toast.fail("请佩戴好脑机开始训练");
         return false;
       }
-
-      let $toyId = $this.toy_id;
-      if($this.toy_id == 8){
-        $toyId = "0";
+      let $toyId = $this.toy.id;
+      if($toyId === 8){
+        $toyId = 0;
       }
       $this.pay_type = $event;
       let $params = {
@@ -322,7 +64,7 @@ export default {
           game_store.setters.setGameCloseStatus(0);
           let $data = res.data;
           let $res = $data.data;
-          if ($data.code == 0) {
+          if ($data.code === 0) {
             $this.is_started = true;
 
             // 设置游戏模式
@@ -342,7 +84,6 @@ export default {
                 url: "/pages/start/main",
                 success() {
                   $this.$emit("gameStart", true);
-
                   // 设置游戏状态为游戏中
                   game_store.setters.setGameStatus(1);
                 },
@@ -371,12 +112,8 @@ export default {
         url: "/pages/start/main",
       });
     },
-    //修改连接状态
-    change_toy_connect_status($status) {
-      $this.$emit("change_toy_connect_status", $status);
-    },
-    change_status() {
-      $this.$emit("change_status", 0);
+    cancelConnect() {
+      $this.$emit("deviceStatus", 3);
     },
   },
   onShow() {
@@ -388,6 +125,141 @@ export default {
 };
 </script>
 
+<template>
+  <div>
+    <van-row class="padding">
+      <van-col span="5">
+        <div class="device_bg flex flex-direction align-center justify-center">
+          <img src="https://img.shuimuai.com/web/phone.png" alt="" class="device_phone" />
+          <text class="text-gray device_text"> 我的手机</text>
+        </div>
+      </van-col>
+      <van-col span="3" offset="1">
+        <div class="dot_container flex align-center">
+          <div class="dot_wait"> <img src="https://img.shuimuai.com/m_sign_gou%402x.png" alt="" class="moving_dot" />
+          </div>
+        </div>
+      </van-col>
+      <van-col span="5" offset="0">
+        <div class="device_bg flex flex-direction align-center justify-center">
+          <img v-if="device_bg" src="https://img.shuimuai.com/web/sign_green.png" alt="" class="sign_green"/>
+          <img v-else src="https://img.shuimuai.com/web/sign_red.png" class="sign_green" alt=""/>
+          <img src="https://img.shuimuai.com/web/brain.png" alt="" class="device_brain"/>
+          <text class="text-gray device_text second_device_text"> 已连接({{ device_power }}%)</text>
+        </div>
+      </van-col>
+      <van-col span="3" offset="1">
+        <div class="dot_container flex align-center">
+          <div class="dot_wait"> <img v-if="connect_toy === 1" src="https://img.shuimuai.com/web/dot.png" alt="" class="moving_dot" :class="{ moving: connect_toy === 1 }"/>
+            <img v-if="connect_toy === 2" src="https://img.shuimuai.com/m_sign_gou%402x.png" alt="" class="moving_dot"/>
+            <img v-if="connect_toy === 3" src="https://img.shuimuai.com/fail.png" alt="" class="moving_dot"/>
+          </div>
+        </div>
+      </van-col>
+      <van-col span="5" offset="0">
+        <div v-if="toy" class="device_bg flex flex-direction align-center justify-center">
+          <img :src="toy['img']" alt="" class="uav_toy" />
+          <text class="text-gray device_text">
+            <template v-if="connect_toy === 1 || connect_toy === 3">
+              {{ toy["name"] }}
+            </template>
+            <template v-if="connect_toy === 2 || connect_toy === 4">
+              {{ toy_sn }}
+            </template>
+          </text>
+        </div>
+      </van-col>
+    </van-row>
+    <!-- 按钮组合 -->
+    <van-row gutter="6">
+      <van-col span="8">
+        <button class="cu-btn bg-red lg text-white" @click="cancelConnect">
+          <img src="https://img.shuimuai.com/m_duankainaohuan.png" class="cut_brain_icon" alt=""/>
+          <text class="cut_text">断开脑机</text>
+        </button>
+      </van-col>
+      <van-col span="12" offset="1" v-if="connect_toy === 1">
+        <van-row class="text-center">
+          <text class="text-gray text-lg"> 连接中... </text>
+        </van-row>
+      </van-col>
+      <!-- 已经连接教具 -->
+      <div v-if="connect_toy === 2">
+        <van-col span="8">
+          <button class="cu-btn bg-red lg cu-btn-primary" @click="openToyList">
+            <img src="https://img.shuimuai.com/m_xuanzewanju.png" alt="" class="cut_brain_icon"/>
+            <text class="cut_text">选择教具</text>
+          </button>
+        </van-col>
+
+        <van-col span="8">
+          <button class="cu-btn bg-red lg cu-btn-primary" @click="choose_pay_window" :disabled="is_started">
+            <img src="https://img.shuimuai.com/web/start_game_icon.png" alt="" class="cut_start_game_icon"/>
+            <text class="cut_text" style="padding:0px">开始训练</text>
+          </button>
+        </van-col>
+      </div>
+      <!-- 教具连接失败 -->
+      <div v-if="connect_toy === 3">
+        <van-col span="8">
+          <button class="cu-btn bg-red lg cu-btn-primary" @click="openToyList">
+            <img src="https://img.shuimuai.com/m_xuanzewanju.png" alt="" class="cut_brain_icon"/>
+            <text class="cut_text">选择教具</text>
+          </button>
+        </van-col>
+        <van-col span="8">
+          <van-row class="text-center">
+            <text class="text-gray text-lg"> 连接失败 </text>
+          </van-row>
+        </van-col>
+      </div>
+      <!-- 教具连接中 -->
+      <div v-if="connect_toy === 4">
+        <van-col span="16">
+          <button class="cu-btn bg-green lg" @click="to_playing" style="width: 100%">
+            <img src="https://img.shuimuai.com/web/start_game_icon.png" alt="" class="cut_start_game_icon"/>
+            <text class="cut_text" style="padding: 0px">游戏中</text>
+          </button>
+        </van-col>
+      </div>
+    </van-row>
+    <!-- 选择消费方式的窗口  -->
+    <van-overlay :show="pay_window" @click="onClickHide" z-index="5">
+      <div class="pay_type_window">
+        <div class="pay_type_title padding">
+          <text class="text-bold pay_type_title_text">选择消费方式</text>
+        </div>
+        <van-row gutter="11">
+          <van-col span="11" offset="1">
+            <div class=" pay_type_item flex flex-direction justify-center align-center" @click.prevent="choose_pay(2)">
+              <view class="text-xl padding"><text class="text-white text-bold">消费时间</text></view>
+            </div>
+          </van-col>
+          <van-col span="11">
+            <div class=" pay_type_item flex flex-direction justify-center align-center"@click.prevent="choose_pay(1)">
+              <view class="text-xl padding"><text class="text-white text-bold">消费次卡</text></view>
+              <view class="text-sm"><text class="text-white">次卡时间为10分钟</text></view>
+            </div>
+          </van-col>
+        </van-row>
+      </div>
+      <img src="https://img.shuimuai.com/web/boy2.png" alt="" class="connected_boy2"/>
+    </van-overlay>
+    <van-toast id="van-toast" />
+
+    <van-popup
+      :show="start_show"
+      closeable
+      position="bottom"
+      custom-style="height: 100%"
+    >
+      <view>
+        <text>游戏中界面</text>
+      </view>
+    </van-popup>
+  </div>
+</template>
+
 <style scoped>
 .uav_toy {
   width: 47px;

src/components/connection/toys/selection.vue

@@ -0,0 +1,127 @@
+<script>
+import game_store from "@/store/game";
+import {game_devices} from "../../../requests/game";
+let $this;
+export default {
+  name: "ToySelection",
+  data() {
+    return {
+      select_status: false,
+      // 教具列表
+      toy_list: [],
+      toy_action: 1,
+    }
+  },
+  created() {
+    $this = this;
+  },
+  mounted() {
+    $this.getToyList();
+  },
+  methods: {
+    //选择教具
+    chooseToy($index) {
+      $this.toy_action = $this.toy_list[$index].id;
+      game_store.setters.setToyItem($this.toy_list[$index]);
+    },
+    //  获取游戏设备教具
+    getToyList() {
+      $this.toy_list = [];
+      game_devices().then((res) => {
+        let $data = res.data;
+        let $toyList = $data.data;
+        let _item = {};
+        $toyList.forEach(($val, $index) => {
+          if ($val){
+            _item = {
+              id: parseInt($val["device_id"]),
+              name: $val["name"],
+              img: "https://img.shuimuai.com/" + $val["img"],
+              hex: $val["bluetooth"],
+            };
+            $this.toy_list.push(_item);
+          }
+        });
+        $this.select_status = true;
+      });
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+      <!-- 标题 -->
+      <div class="head padding">
+        <div>
+          <div class="line"></div>
+          <div class="title">选择教具</div>
+        </div>
+      </div>
+      <!-- 内容 -->
+      <div v-if="select_status" 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 v-if="toy" class="toy_item flex flex-direction justify-center align-center" @click="chooseToy(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>
+      </div>
+  </div>
+</template>
+
+<style scoped>
+.head .line {
+  width: 4px;
+  height: 14px;
+  background-color: #5d4db8;
+  margin-right: 7px;
+}
+
+.head view {
+  display: flex;
+  justify-self: start;
+  align-items: center;
+}
+/*教具列表*/
+.toy_list {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.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_content {
+  width: 130%;
+  display: inline-block;
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>

src/components/device/connecting.vue

@@ -1,63 +0,0 @@
-<template>
-  <div>
-    <van-row class="padding">
-      <van-col span="5" offset="4">
-        <div class="device_bg flex flex-direction align-center justify-center">
-          <img src="https://img.shuimuai.com/web/phone.png" alt="" class="device_phone">
-          <text class="text-gray device_text"> 我的手机</text>
-        </div>
-      </van-col>
-      <van-col span="3" offset="1">
-        <div class="dot_container flex align-center">
-          <div class="dot_wait">
-            <img v-if="status == 1" src="https://img.shuimuai.com/web/dot.png" alt="" class="moving_dot"
-                 :class="{moving:status==1}"
-            />
-            <img v-if="status == 2" src="https://img.shuimuai.com/m_sign_gou%402x.png" alt="" class="moving_dot">
-            <img v-if="status == 3" src="https://img.shuimuai.com/fail.png" alt="" class="moving_dot">
-          </div>
-        </div>
-      </van-col>
-      <van-col span="5" offset="0">
-        <div class="device_bg flex flex-direction align-center justify-center">
-          <img src="https://img.shuimuai.com/web/brain.png" alt="" class="device_brain">
-          <text class="text-gray device_text"> 水母智能脑机</text>
-        </div>
-      </van-col>
-    </van-row>
-    <van-row class="text-center">
-      <van-col :span="12">
-        <van-button type="danger" @click="change_status">取消连接</van-button>
-      </van-col>
-      <van-col :span="12">
-        <text class="text-gray text-lg">
-          <template v-if="status == 1">
-            连接中...
-          </template>
-          <template v-if="status == 2">
-            连接成功
-          </template>
-          <template v-if="status == 3">
-            连接失败
-          </template>
-        </text>
-      </van-col>
-
-    </van-row>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "connecting",
-  props: ['status'],
-  methods:{
-    change_status() {
-      this.$emit('change_brain_status', 0)
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

src/components/device/device.vue

@@ -1,982 +0,0 @@
-<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"
-            @change_brain_status="change_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"/>
-    <van-overlay :show="update_show" :z-index="4">
-      <div class="update_show_container">
-        <p class="update_version_label">{{ remote_version }}</p>
-        <p class="update_desc">当前版本过低，为能使用更多专注力
-          服务功能，建议您更新至最新版本</p>
-        <button class="update_button" @click="toBleUpate">立即升级</button>
-        <div class="skip_update_coontainer" @click="update_show=false" v-if="force_update == false">
-          <p class="skip_update_label">稍后再说</p>
-        </div>
-      </div>
-    </van-overlay>
-  </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 Dialog from "../../../static/vant/dialog/dialog";
-import {game_devices, getDeviceBySn, getFirmwareVersion} 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: "",
-      },
-      connect_status: false,
-      bleFoundTimeOut:undefined
-    };
-  },
-  methods: {
-    //打开 扫描二维码
-    open_scan() {
-      $this.connect_status = false
-      // 打开蓝牙扫描 重置游戏状态
-      game_store.setters.setGameStatus(0);
-
-      wx.getSystemInfoAsync({
-        success(res) {
-          //未打开蓝牙
-          if (res.bluetoothEnabled == false) {
-            Dialog.alert({
-              title: '蓝牙功能未开启',
-              message: '请打开蓝牙，允许水母星球使用蓝牙服务',
-            }).then(() => {
-              wx.openSystemBluetoothSetting()
-            });
-          }
-
-          //未打开应用位置授权
-          else if (res.locationAuthorized == false) {
-            Dialog.alert({
-              title: '位置权限未开启',
-              message: '当前无位置访问权限，请在手机[设置]应用中，允许[微信]使用位置服务',
-            }).then(() => {
-              wx.openAppAuthorizeSetting()
-            });
-          }
-
-          //未打开位置
-          else if (res.locationEnabled == false) {
-            // 如果是苹果系统则直接打开扫描
-            if (res.system.indexOf("iOS") != -1) {
-              $this.scan_to_bluetooth();
-            } else {
-              Dialog.alert({
-                title: '位置信息未开启',
-                message: '当前无位置访问权限，请在设置中，允许水母星球使用位置服务',
-              }).then(() => {
-              });
-            }
-          }
-
-
-          // 权限全开
-          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") {
-              if (url.indexOf("AI") != -1) {
-                $code = url.substr(url.indexOf("AI"));
-              } else if (url.toUpperCase().indexOf("JELLYFISH")) {
-                $code = url.substr(url.toUpperCase().indexOf("JELLYFISH"));
-              }
-            } 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) {
-                      setTimeout(() => {
-                        Toast.fail({
-                          message: err["errCode"],
-                        });
-                      }, 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.toy_sn = "教具";
-      $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`;
-      if ($hex == "80") {
-        wx.setStorageSync("report_mode", 2)
-      } else {
-        wx.setStorageSync("report_mode", 1)
-      }
-
-      $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 || $status == 3) {
-        clearTimeout($this.bleFoundTimeOut)
-        wx.offBluetoothDeviceFound();
-        wx.stopBluetoothDevicesDiscovery();
-        game_store.setters.setGameStatus(0);
-        // 清空链接得设备 三值
-        $this.connect_toy = $status;
-        $this.connect_show = false;
-        $this.device_bg = false;
-        $this.connect_status = 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) => {
-          $this.onBluetoothDeviceFound();
-        },
-        fail(err) {
-          $this.change_device_status(3);
-        },
-      });
-    },
-    //打开蓝牙搜索
-    onBluetoothDeviceFound() {
-      $this.change_device_status(1)
-      $this.bleFoundTimeOut = setTimeout(() => {
-        if ($this.connect_status == false) {
-          wx.offBluetoothDeviceFound();
-          wx.stopBluetoothDevicesDiscovery();
-          $this.change_device_status(0)
-          Dialog.confirm({
-            message: '脑机连接失败',
-            showCancelButton: true,
-            cancelButtonText: "查看指引",
-          }).then(() => {
-            // on close
-          }).catch(() => {
-            wx.navigateTo({
-              url: "/pages/guide/main"
-            })
-          });
-        }
-      }, 7000)
-      try {
-        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;
-              clearTimeout($this.bleFoundTimeOut)
-            }
-          });
-        });
-      } catch (e) {
-        console.log("打开蓝牙error", e);
-      }
-    },
-    // 停止蓝牙搜索
-    stopBluetoothDevicesDiscovery() {
-      wx.stopBluetoothDevicesDiscovery();
-    },
-    //连接低功耗蓝牙设备。
-    createBLEConnection(deviceId) {
-      wx.offBluetoothDeviceFound();
-      wx.stopBluetoothDevicesDiscovery();
-      wx.createBLEConnection({
-        deviceId: deviceId,
-        success: (res) => {
-          $this.connect_status = true
-
-          // 设置mtu单位大小
-          wx.setBLEMTU({
-            deviceId,
-            mtu: 250,
-            success(res) {
-              console.log("设置mtu成功", JSON.stringify(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);
-
-              //打开原始数据
-              // $this.$bluetooth.SendOpenRawData()
-            }
-          }, 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();
-
-    if ($game_status == 3) {
-      let $ble_status = wx.getStorageSync("ble_link_status");
-      if ($ble_status == false) {
-        //断开蓝牙连接
-        $this.change_device_status(0);
-      }
-
-      //不在游戏状态
-      $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;
-}
-
-.update_show_container {
-  width: 325px;
-  height: 425px;
-  background: url("https://img.shuimuai.com/update_show_bg.png") no-repeat;
-  background-size: 100%;
-  margin: 50px auto;
-}
-
-@font-face {
-  font-family: Din;
-  src: url("https://img.shuimuai.com/DIN-Bold.otf");
-}
-
-.update_version_label {
-  font-family: Din;
-  width: 100%;
-  height: 16px;
-  font-size: 21px;
-  font-family: Din;
-  font-weight: bold;
-  font-style: italic;
-  color: #FFFFFF;
-
-  padding: 90px 130px 0px;
-}
-
-.update_desc {
-  width: 268px;
-  height: 41px;
-  font-size: 17px;
-  font-family: PingFang SC;
-  font-weight: 400;
-  color: #151515;
-  margin: 150px 30px 0px;
-}
-
-.update_button {
-  width: 250px;
-  height: 45px;
-  background: #7078FF;
-  border-radius: 23px;
-
-
-  font-size: 17px;
-  font-family: PingFang SC;
-  font-weight: bold;
-  color: #FFFFFF;
-
-  margin-top: 30px;
-}
-
-.skip_update_coontainer {
-  width: 100%;
-  text-align: center;
-  margin-top: 20px;
-}
-
-.skip_update_label {
-  font-size: 13px;
-  font-family: PingFang SC;
-  font-weight: bold;
-  color: #999999;
-}
-
-/* padding toy_list */
-</style>

src/components/device/unconnect.vue

@@ -1,55 +0,0 @@
-<template>
-  <div>
-    <van-row>
-      <van-col
-        span="11"
-        class="text-gray text-sm left"
-        offset="1"
-      >
-        <view>1.打开手机蓝牙和位置信息</view>
-        <view>2.长按脑机侧面按钮启动脑机</view>
-        <view>3.点击扫码开始连接</view>
-      </van-col>
-
-      <van-col
-        span="8"
-        offset="2"
-      >
-        <img
-          src="https://img.shuimuai.com/lanyashuimu.png"
-          class="connect_img"
-        />
-      </van-col>
-    </van-row>
-    <button
-      class="cu-btn lg cu-btn-primary text-white text-center scan_button margin-tb"
-      @click="open_scan"
-    >扫码连接脑机
-    </button>
-    <van-toast id="van-toast" />
-
-  </div>
-</template>
-
-<script>
-var $this;
-
-export default {
-  name: "unconnect",
-  data() {
-    return {};
-  },
-  methods: {
-    open_scan() {
-      this.$emit("open_scan");
-    },
-  },
-  created() {
-    $this = this;
-  },
-  onShow() {},
-};
-</script>
-
-<style scoped>
-</style>

src/pages/index/index.vue

@@ -3,7 +3,7 @@ import Banner from "@/components/banner";
 import Welcome from "@/components/welcome";
 import Login from "@/components/login";
 import Cards from "@/components/cards";
-import device_container from "@/components/device/device";
+import Connection from "@/components/connection/index";
 import Toast from "../../../static/vant/toast/toast";
 import Dialog from "../../../static/vant/dialog/dialog";
 import {setUserLogin} from "../../requests/user";
@@ -19,7 +19,7 @@ export default {
     Welcome,
     Login,
     Cards,
-    device_container,
+    Connection,
   },
   data() {
     return {
@@ -63,9 +63,9 @@ export default {
     }
   },
   onLoad() {
-    // if (process.env.NODE_ENV == "development") {
-    //   wx.setStorageSync('token', "WxN3rgbWyVpjyBhi4uT6mZmwajZ3dFlm");
-    // }
+    if (process.env.NODE_ENV == "development") {
+      wx.setStorageSync('token', "WxN3rgbWyVpjyBhi4uT6mZmwajZ3dFlm");
+    }
     if (game_store.getters.getGameStatus() * 1 === 1) {
       Dialog.alert({
         title: "系统提示",
@@ -106,9 +106,9 @@ export default {
       <Login v-else :sign="welcome_status" @welcomeStatus="changeWelcome" @loginStatus="changeLoginStatus"></Login>
     </div>
     <!-- 登陆后 个人首页-->
-    <div class="personal_card" v-if="is_login">
+    <div v-if="is_login" class="personal_card">
       <Cards></Cards>
-      <device_container></device_container>
+      <Connection></Connection>
     </div>
     <div class="service" :class="{'service_login_page':!is_login}">
       <view class="padding-tb">

src/pages/start/index.vue

@@ -446,7 +446,7 @@ export default {
         keepScreenOn: true,
       });
       $this.$bluetooth.sendAutoConnectRf(true, Math.round($this.played_time / 60));
-      $this.$bluetooth.watchingDevice($this);
+      $this.$bluetooth.notifyDatas($this);
       setTimeout(()=>{
         // 获取LED灯状态并设置
         let led_status = game_store.getters.getLED();
@@ -683,7 +683,7 @@ export default {
       $this.start_game();
 
       //打开蓝牙监听
-      $this.$bluetooth.watch_bluetooth_status($this);
+      $this.$bluetooth.watchBLEstatus($this);
     }
 
     $this.is_new = game_store.getters.getIsNew()

src/pages/user_center/firmware/index.vue

@@ -280,8 +280,8 @@ export default {
             if ($serviceId) {
               clearInterval($checkServices);
               $this.$bluetooth.openNotify($this);
-              $this.$bluetooth.watchingDevice($this);
-              $this.$bluetooth.watch_bluetooth_status($this);
+              $this.$bluetooth.notifyDatas($this);
+              $this.$bluetooth.watchBLEstatus($this);
             }
             // setTimeout(() => {
             //     $this.$bluetooth.SendOrder("02");

src/store/game.js

@@ -22,8 +22,8 @@ const setters = {
   setGameCloseStatus(status) {
     wx.setStorageSync('game_close_status', status)
   },
-  setToyList(toy_list) {
-    wx.setStorageSync('toy_list', toy_list)
+  setToyItem(toy_item) {
+    wx.setStorageSync('toy_item', toy_item)
   },
   setToySn(toy_sn) {
     wx.setStorageSync('toy_sn', toy_sn)
@@ -85,8 +85,8 @@ const getters = {
     return wx.getStorageSync('game_close_status')
   },
 
-  getToyList() {
-    return wx.getStorageSync('toy_list')
+  getToyItem() {
+    return wx.getStorageSync('toy_item')
   },
   getToySn() {
     return wx.getStorageSync('toy_sn')

src/utils/bluetooth.js

@@ -245,8 +245,9 @@ export default {
 
   /**
    *  todo:监听蓝牙连接状态
+   *  监听蓝牙低功耗连接状态改变事件。包括开发者主动连接或断开连接，设备丢失，连接异常断开等
    */
-  watch_bluetooth_status($this) {
+  watchBLEstatus($this) {
     let that = this;
     // 微信自身监听低功耗蓝牙连接状态的改变事件
     wx.onBLEConnectionStateChange((res) => {
@@ -277,7 +278,6 @@ export default {
           $this.connect_toy = 0;
           $this.connect_show = false;
           $this.device_bg = false;
-          $this.change_toy_connect_status(0);
           $this.device_status = 0;
           $this.device = {}
           $this.toy_UUID = "";
@@ -309,10 +309,10 @@ export default {
             let $system = wx.getSystemInfoSync()
             if ($system.platform == 'ios') {
               that.getBLEDeviceServices($deviceInfo.deviceId)
-              that.watchingDevice($this)
+              that.notifyDatas($this)
             } else {
               that.openNotify($this)
-              that.watch_bluetooth_status($this);
+              that.watchBLEstatus($this);
             }
             // that.sendToyPower();
 
@@ -412,7 +412,7 @@ export default {
       },
     });
   },
-
+  // 启用蓝牙低功耗设备特征值变化时的 notify 功能，订阅特征。
   openNotify($this) {
     let that = this;
     let $deviceInfo = getServicesAndCharateristc();
@@ -423,7 +423,7 @@ export default {
       characteristicId: $deviceInfo.charateristic.notify,
       state: true,
       success() {
-        that.watchingDevice($this)
+        that.notifyDatas($this)
       }
     });
   },
@@ -448,9 +448,10 @@ export default {
    * todo 监听脑机数据
    * @param $this
    */
-  watchingDevice($this) {
+  notifyDatas($this) {
     const that = this;
     let DeviceId = game_store.getters.getDeviceId();
+    // 监听蓝牙低功耗设备的特征值变化事件
     wx.onBLECharacteristicValueChange((characteristic) => {
       // 获取脑机信号值
       wx.getBLEDeviceRSSI({
@@ -508,7 +509,7 @@ export default {
         //没连接上教具
         if (hexStr.toUpperCase().indexOf("AADD0A0000") != -1) {
           if (is_new) {
-            $this.change_toy_connect_status(3);
+            $this.connect_toy = 3;
           }
           return false;
         }
@@ -529,7 +530,7 @@ export default {
               title: "已连接到" + $this.toy_item.name
             });
             $this.toy_connected = true;
-            $this.change_toy_connect_status(2);
+            $this.connect_toy = 2;
           }
         }
         if (new RegExp("01").test($hex_index) == true) {
@@ -540,8 +541,7 @@ export default {
           });
           $this.toy_connected = true;
           connect_toy = true;
-
-          $this.change_toy_connect_status(2);
+          $this.connect_toy = 2;
 
           //连接成功后 获取一次教具名称
           //TODO 2022-5-25 08:51:15 延迟发送教具UUID