program/src/components/device/device.vue

<template>
  <div id="device_container" class="padding-lr">
    <div class="device">
      <div class="head flex justify-between">
        <div>
          <div class="line"></div>
          <div class="title">我的设备</div>
        </div>
        <div class="my_msg">
          <text class="cuIcon-mark"></text>
          <text class="under_line">消息中心</text>
        </div>
      </div>
      <div v-if="connect_toy==0">

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

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

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

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

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

let $this;
export default {
  name: "device",
  components: {
    device_unconnect, device_connecting, device_connected, toy_connecting
  },
  data() {
    return {
      //设备状态 0为未连接，1：连接中，2：已连接 3：连接失败
      status: 0,
      choose_toy_window: {
        show: false
      },
      toy_list: [
        {
          id: 1,
          name: "智能喷泉",
          img: "https://img.shuimuai.com/web/toy_car.png"
        },
        {
          id: 2,
          name: "智能喷雾恐龙",
          img: "https://img.shuimuai.com/web/toy_dinasour.png"
        },
        {
          id: 3,
          name: "智能喷雾恐龙2",
          img: "https://img.shuimuai.com/web/toy_dinasour.png"
        },
        {
          id: 4,
          name: "智能轨道车",
          img: "https://img.shuimuai.com/web/toy_car_roat.png"
        },
        {
          id: 5,
          name: "智能越野车",
          img: "https://img.shuimuai.com/web/toy_car.png"
        },
        {
          id: 6,
          name: "智能越野车2",
          img: "https://img.shuimuai.com/web/toy_car.png"
        },
      ],
      toy_action: 1,
      connect_show: false,
      //连接玩具 0:未连接 1：连接中 2：已连接 3：连接失败 4:游戏中
      connect_toy: 0
    }
  },
  watch: {
    status(newStatus, oldStatus) {
      if (oldStatus == 0 && newStatus == 1) {
        setTimeout(() => {
          $this.success_connected()
        }, 2000)
      }
    },
    connect_toy($new, $old) {
      if ($old == 0 && $new == 1) {
        setTimeout(() => {
          $this.connect_toy = 2
        }, 2000)
      }
    }
  },
  methods: {
    //打开 扫描二维码
    open_scan() {
      let $this = this
      wx.scanCode({
        success: (res) => {
          let $data = res
          if ($data.result) {
            $this.status = 1
          }
        }
      })
    },
    //成功连接的方法
    success_connected() {
      $this.status = 2
      setTimeout(() => {
        $this.connect_show = true
      }, 2000)
    },
    //关闭窗口的方法
    on_close() {
      $this.choose_toy_window.show = false
    },
    //选择玩具
    choose_toy($index) {
      $this.toy_action = $this.toy_list[$index].id
    },
    // 打开选择玩具窗口
    open_choose_toy() {
      $this.choose_toy_window.show = true
    },
    // 选好玩具
    choose_ok() {
      $this.on_close()
      $this.change_toy_connect_status(1)
    },
    change_toy_connect_status($status = 0) {
      $this.connect_toy = $status
    }
  },
  created() {
    $this = this
  }
}
</script>

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