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 class="head flex justify-between">-->

      <!--        <div class="my_msg" @click="get_toy_list">-->
      <!--          <text class="cuIcon-mark"></text>-->
      <!--          <text class="under_line">获取设备列表</text>-->
      <!--        </div>-->
      <!--      </div>-->
      <div v-if="connect_toy == 0">
        <!--      未连接部分-->
        <div
          class="connect_box"
          v-if="device_status == 0"
        >
          <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"
          ></device_connected>
        </div>
      </div>
      <div v-else>
        <!--      玩具模块-->
        <!--      玩具连接中-->
        <div class="connecting_toy">
          <toy_connecting
            :connect_toy="connect_toy"
            :deviceId="_deviceId"
            :toy_id="toy_action"
            :toy="toy_item"
            :device_bg="device_bg"
            :device_power="device_power"
            @open_choose_toy="open_choose_toy"
            @change_toy_connect_status="change_toy_connect_status"
            @change_status="change_device_status"
            @game_start="game_start"
          ></toy_connecting>
        </div>
      </div>
    </div>
    <!--      选择玩具-->
    <van-popup
      :show="choose_toy_window.show"
      @close="on_close"
      position="bottom"
      round
      closeable
      safe-area-inset-bottom
    >
      <!-- 标题 -->
      <div class="head padding">
        <div>
          <div class="line"></div>
          <div class="title">选择玩具</div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="padding toy_list">
        <van-row
          gutter="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 Toast from "../../../static/vant/toast/toast";
import { game_devices } from "../../requests/game";
import game_store from "@/store/game";
import bluetooth from "@/utils/bluetooth";
import ble_store from "../../store/bluetooth";
import Dialog from "../../../static/vant/dialog/dialog";

let $this;
export default {
  name: "device",
  components: {
    device_unconnect,
    device_connecting,
    device_connected,
    toy_connecting,
  },
  data() {
    return {
      //设备状态 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",
      device: {},
      _deviceId: "",
      _device_index: false,
      toy_id: 0,

      // 电量
      device_power: 100,
    };
  },
  methods: {
    //打开 扫描二维码
    open_scan() {
      // 打开蓝牙扫描 重置游戏状态
      game_store.setters.setGameStatus(0);
      //
      $this.scan_to_bluetooth();
    },
    //扫描连接蓝牙
    scan_to_bluetooth() {
      wx.scanCode({
        onlyFromCamera: true,
        success: (res) => {
          let $data = res;
          if ($data.result) {
            let url = decodeURIComponent($data.result);
            let $code = url.match(/\?ring=(.*)/)
              ? url.match(/\?ring=(.*)/)
              : url.match(/\?code=(.*)/);
            // 判断新的标识值
            $this.code = $code[1].toUpperCase();
            console.log("头环码", $code);
            //打开蓝牙设备
            wx.openBluetoothAdapter({
              success(res) {
                //判断已经打开连接了
                if (res["errMsg"] == "openBluetoothAdapter:ok") {
                  $this.startBluetoothDevicesDiscovery();
                }
              },
              fail(err) {
                if (err["errCode"] == 10001) {
                  Toast.fail({
                    message: "请打开手机蓝牙！",
                  });
                } else {
                  Toast.fail({
                    message: "蓝牙连接失败",
                  });
                }
              },
            });
          }
        },
      });
    },
    //关闭窗口的方法
    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;
    },
    // 选好玩具
    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 = $toy["hex"].substr($toy["hex"].length - 2, 2);
      let toy_hex = "0x" + $hex;
      // game_store.setters.setToyHex(toy_hex)
      //连接玩具
      // 打开数据帧
      let $serviceId = game_store.getters.getServiceId();
      let $charateristic = game_store.getters.getCharacterId();

      bluetooth.sendConnect(
        toy_hex,
        $this._deviceId,
        $serviceId,
        $charateristic,
        Toast,
        $this
      );
    },
    //修改玩具连接状态
    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);
        let $deviceId = game_store.getters.getDeviceId();
        let $serviceId = game_store.getters.getServiceId();
        let $cid = game_store.getters.getCharacterId();
        bluetooth.shutdownSendControl($deviceId, $serviceId, $cid);
        // 清空链接得设备 三值
        game_store.setters.clearDeviceToy();
        $this.connect_toy = $status;
        $this.connect_show = false;
        wx.closeBLEConnection({
          deviceId: $this._deviceId,
          success(res) {
            Toast.success({
              message: "已成功断开",
            });
          },
        });
        wx.closeBluetoothAdapter();
      } else if ($status == 2) {
        $this.connect_show = true;
      }
    },

    //开始蓝牙被发现
    startBluetoothDevicesDiscovery() {
      wx.startBluetoothDevicesDiscovery({
        allowDuplicatesKey: true,
        success: (res) => {
          $this.onBluetoothDeviceFound();
          $this.change_device_status(1);
        },
        fail(err) {
          $this.change_device_status(3);
        },
      });
    },
    //打开蓝牙搜索
    onBluetoothDeviceFound() {
      console.log("打开蓝牙搜索");
      try {
        setTimeout(() => {
          if (!$this.device.deviceId) {
            wx.offBluetoothDeviceFound();
            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();
              $this.device = device;
              game_store.setters.setDeviceId(device.deviceId);
              $this._deviceId = device.deviceId;

              $this.createBLEConnection();
            }
          });
        });
      } catch (e) {
        console.log("打开蓝牙error", e);
      }
    },
    // 停止蓝牙搜索
    stopBluetoothDevicesDiscovery() {
      wx.stopBluetoothDevicesDiscovery();
    },
    //连接低功耗蓝牙设备。
    createBLEConnection() {
      wx.createBLEConnection({
        deviceId: $this.device.deviceId,
        success: (res) => {
          console.log("成功连接");
          //成功连接脑环蓝牙
          $this.change_device_status(2);
          bluetooth.watch_bluetooth_status($this);
          bluetooth.getBLEDeviceServices($this.device.deviceId);
          bluetooth.watchingDevice($this);
        },
        fail(err) {
          console.log(err);
        },
      });
    },
    //  获取游戏设备玩具
    get_toy_list() {
      //      清空toy_list
      $this.toy_list = [];
      //       device_id: "1"
      // name: "音响"
      // img: "penquan.png"
      // bluetooth: "aadd0a0001"
      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);
      });
    },
  },
  mounted() {
    $this.get_toy_list();
    wx.getSystemInfo({
      success(res) {
        console.log(res);
        console.log(res.brand);
      },
    });
  },
  created() {
    $this = this;
  },
  onShow() {
    //判断是否游戏中
    let $game_status = game_store.getters.getGameStatus();
    if ($game_status == 1) {
      Dialog.confirm({
        title: "系统提示",
        message: "确认要退出游戏了吗？",
      })
        .then(() => {
          // on confirm
          mpvue.navigateTo({
            url: "/pages/start/main?end=1",
          });
        })
        .catch(() => {
          // on cancel
          mpvue.navigateTo({
            url: "/pages/start/main",
          });
        });
      $this.change_toy_connect_status(4);
    } else if ($game_status == 3) {
      //不在游戏状态
      $this.change_toy_connect_status(0);
      $this.connect_show = true;
      let $ble_status = ble_store.getters.getBluetoothLinkStatus();
      bluetooth.watchingDevice($this);
      bluetooth.watch_bluetooth_status($this);
      if ($ble_status == false) {
        //断开蓝牙连接
        $this.change_device_status(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: 10px;
}

.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>