<script> import {gameStart} from "@/requests/game"; import Toast from "../../../../static/vant/toast/toast"; import game_store from "../../../store/game"; let $this; export default { name: "ToySelected", props: [ "connect_toy", "toy", "device_bg", "device_power", "toy_power", "toy_sn", ], data() { return { pay_window: false, // 使用类型 1 次数 2时间 0未选择 pay_type: 0, // 限制点击一次 is_started: false, start_show: false, }; }, created() { $this = this; }, methods: { // 断开脑机 cancelConnect() { $this.$emit("deviceStatus", 3); }, // 打开玩具下拉列表 openToyList() { $this.$emit("openToys", true); }, // 打开选择消费的选项框 openPayWindow() { if (!$this.device_bg) { Toast.fail("请佩戴好脑机开始训练"); return false; } if (wx.getStorageSync("userinfo").level*1 === 11) { $this.choosePayType(2); } else { $this.pay_window = true; } }, //点击隐藏 hidePayWindow() { $this.pay_window = false; }, //选择消费的时间或者次数 choosePayType($type) { if (!$this.device_bg) { Toast.fail("请佩戴好脑机开始训练"); return false; } let $toyId = $this.toy.id; if($toyId === 8){ $toyId = 0; } $this.pay_type = $type; let $params = { type: $type, device_id: $toyId, access_token: wx.getStorageSync("token"), }; gameStart($params).then( (res) => { let $data = res.data; let $res = $data.data; if ($data.code === 0) { $this.is_started = true; // 设置游戏模式: 1次数 2时间 game_store.setters.setMode($type); // 设置游戏记录id game_store.setters.setGameRecordId($res["game_record_id"]); //打开脑控 $this.$bluetooth.sendControl(); Toast.success($data.errmsg); game_store.setters.setPlayTime($res["play_time"]); game_store.setters.setOverPlayTime($res["play_time"]); setTimeout(() => { $this.pageToPlay(); }, 800); } else { $this.is_started = false; Toast.fail($data.errmsg); } }, (err) => { $this.is_started = false; console.log(err); } ); }, // 前往正在玩的波动时间界面 pageToPlay() { $this.$emit("gameStart", true); mpvue.navigateTo({ url: "/pages/start/main", success() { // 设置游戏状态为游戏中 game_store.setters.setGameStatus(1); }, }); }, }, onShow() { $this.is_started = false; }, }; </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="openPayWindow" :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="pageToPlay" 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="hidePayWindow" 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="choosePayType(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="choosePayType(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; height: 47px; } .cut_text { padding: 0px 5px; font-size: 11px; } .cut_start_game_icon { width: 21px; height: 23px; } /*消费类型窗口*/ .pay_type_window { width: 95%; height: 180px; background-image: url("https://img.shuimuai.com/web/dialog.png"); background-position: center; background-size: 100% 100%; position: absolute; bottom: 225px; right: 10px; } .pay_type_title_text { color: #6b6b6b; font-size: 12px; } .pay_type_item { width: 100%; height: 100px; background-image: url("https://img.shuimuai.com/web/pay_type_bg.png"); background-position: center; background-size: 100% 100%; } .connected_boy2 { width: 60px; height: 82px; position: absolute; right: 0px; bottom: 160px; } .started_bg { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, 0); z-index: 999; } </style>