shuimu-planet/src/components/connection/toys/selected.vue

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