program/src/components/connection/index.vue

<script>
import ble_store from "@/store/bluetooth";
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";

let $this;
export default {
  name: "ConnectionIndex",
  components: {
    ConnectionScan,
    Connecting,
    Connected,
    ToySelected,
    ToySelection
  },
  data() {
    return {
      // 设备状态 0:为未连接，1:连接中，2:已连接 3:连接失败 5:取消连接
      device_status: 0,
      // 教具选择弹框
      popup_show: false,
      // 选择的教具
      toy_item: {
        id: 0,
        name: "",
        img: "",
        hex: "",
      },
      // $this.$connection 设置的参数
      // 连接教具 0:未连接 1：连接中 2：已连接 3：连接失败 4:游戏中
      connect_toy: 0,
      // 设置图标的颜色
      device_bg: false,
      // 脑机电量
      device_power: 0,
      // 教具电量
      toy_power: 0,
      toy_sn:"",
    }
  },
  created() {
    $this = this;
  },
  watch: {
    'connect_toy': {
      handler: function($status) {
        console.log("监听connect_toy状态变化",$status);
      }, immediate: true
    }
  },
  methods: {
    /**
     * 获取设备扫码连接状态
     */
    getScanStatus($status) {
      // 扫码成功连接中1,失败未连接0
      $this.device_status = $status * 1;
      console.log("接收到设备扫码连接状态:", $status);
    },
    /**
     * 获取设备连接状态
     * @param $status 设备状态 0:为未连接，1:连接中，2:已连接 3:连接失败 5:取消连接
     */
    setDeviceStatus($status) {
      // 重置教具连接状态
      $this.connect_toy = 0;
      console.log("接收到设备连接状态:", $status);
      if ($status * 1 === 2) {
        $this.device_status = 2;
        // 已连接
        let $checkServices = setInterval(() => {
          let $serviceId = ble_store.getters.getServiceId();
          if ($serviceId) {
            clearInterval($checkServices);
            // 监听数据
            //$this.$connection.openNotify($this);
            $this.$connection.notifyDatas($this);
            $this.$connection.watchBLEstatus($this);
          }
        }, 1500);
      } else {
        if ($status * 1 > 0) {
          // 取消连接-关闭脑机蓝牙连接
          $this.$connection.closeConnection($this);
        }
        $this.device_status = 0;
      }
    },
    /**
     * 打开教具选择
     */
    openToyList(){
      this.popup_show = true;
      this.toy_sn = "教具";
      if ($this.device_status*1 === 2) {
        // 关闭脑控
        this.$connection.SendOrder("09");
      }
    },
    //关闭窗口
    closePopup() {
      $this.popup_show = false;
    },
    // 选好教具
    chooseOK() {
      $this.popup_show = false;
      $this.toy_item = ble_store.getters.getToyItem();
      // 初始化教具连接的id
      ble_store.setters.setCurrentToyId("00");
      if($this.toy_item && $this.toy_item.id > 0) {
        $this.setToyStatus(1);
        $this.$connection.sendToyConnection($this.toy_item);
        //2022-5-25 09:07:59 设置10秒后是否已经连接
        // setTimeout(() => {
        //   if ($this.connect_toy !== 2) {
        //     $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;
    },
  },
  onShow() {
    // 未连接蓝牙状态
    if($this.device_status*1 === 0){
      // 打开蓝牙扫描 重置游戏状态
      game_store.setters.setGameStatus(0);
    }
    //判断是否游戏中
    let $game_status = game_store.getters.getGameStatus();
    // 游戏过程中关闭脑机状态
    let $game_close_status = game_store.getters.getGameCloseStatus();

    if ($game_status === 3) {
      // getBluetoothLinkStatus
      let $ble_status = ble_store.getters.getBluetoothLinkStatus();
      if ($ble_status === false) {
        //断开蓝牙连接
        $this.setDeviceStatus(0);
      }

      //不在游戏状态
      $this.connect_toy = 0;
      //$this.connect_show = true;
      // 监听数据
      $this.$connection.notifyDatas($this);
      $this.$connection.watchBLEstatus($this);

      //$this.toy_UUID = "";

      // 状态为1的时候重置为1 小乌龟
      if ($game_close_status === 1) {
        // 重置默认条件
        $this.connect_toy = 0;
        //$this.connect_show = false;
        $this.device_status = 0;
        $this.$connection.watchBLEstatus($this);
        //$this.toy_UUID = "";
        // 清空链接的设备
        ble_store.setters.clearDeviceToy();
      }
      $this.$forceUpdate();
    }
  },
};
</script>

<template>
  <div>
    <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>
          <template v-else>
            <!-- 连接中 -->
            <div v-if="device_status !== 2" 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>
          </template>
        </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>
    <van-dialog id="van-dialog"/>
    <van-toast id="van-toast"/>
    <van-notify id="van-notify"/>
  </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>