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