program/src/components/device/toy/connecting.vue

<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
            src="https://img.shuimuai.com/web/sign_green.png"
            alt=""
            class="sign_green"
            v-if="device_bg == true"
          >
          <img
            src="https://img.shuimuai.com/web/sign_red.png"
            class="sign_green"
            alt=""
            v-else
          >
          <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 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="change_status"
        >
          <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="open_choose_toy"
          >
            <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="choose_pay_window"
          >
            <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="open_choose_toy"
          >
            <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="8" style="visibility: hidden">-->
        <!--          <button class="cu-btn bg-red lg cu-btn-primary" @click="open_choose_toy">-->
        <!--            <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="16">
          <button
            class="cu-btn bg-green lg "
            @click="to_playing"
            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="onClickHide"
      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="choose_pay(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="choose_pay(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>

<script>
import { timestamp } from "@/requests/user";
import { gameStart } from "@/requests/game";
import Toast from "../../../../static/vant/toast/toast";
import game_store from "../../../store/game";

let $this;
export default {
  name: "connected",
  props: [
    "connect_toy",
    "toy_id",
    "toy",
    "device_bg",
    "device_power",
    "toy_power",
    "toy_sn",
  ],
  data() {
    return {
      pay_window: false,
      //  使用类型 1次数 2时间 0未选择
      pay_type: 0,

      start_show: false,
    };
  },
  methods: {
    open_choose_toy() {
      $this.$emit("open_choose_toy", true);
    },
    //打开选择消费的选项框
    choose_pay_window() {
      if (!$this.device_bg) {
        Toast.fail("请佩戴好脑环开始训练");
        return false;
      }

      if(wx.getStorageSync("userinfo").level == 11){
        $this.choose_pay(2)
      }else{
        $this.pay_window = true;
      }
    },
    //选择消费的时间或者次数
    choose_pay($event) {
      if (!$this.device_bg) {
        Toast.fail("请佩戴好脑环开始训练");
        return false;
      }
      $this.pay_type = $event;
      let $params = {
        type: $event,
        device_id: $this.toy_id,
        access_token: wx.getStorageSync("token"),
      };
      gameStart($params).then(
        (res) => {
          // 重置断开脑环的状态
          game_store.setters.setGameCloseStatus(0);
          let $data = res.data;
          let $res = $data.data;
          if ($data.code == 0) {
            // 设置游戏中
            // 设置游戏模式
            game_store.setters.setMode($event);
            // 设置游戏状态为游戏中
            // game_store.setters.setGameStatus(1);
            // 设置游戏记录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(() => {
            //   mpvue.navigateTo({
            //     url: "/pages/start/main",
            //     success() {
            //       // 记录消费方式 选择时间卡还是次卡
                  
            //       $this.$emit("gameStart", true);
            //     },
            //   });
            // }, 800);
          } else {
            Toast.fail($data.errmsg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    //点击隐藏
    onClickHide() {
      $this.pay_window = false;
    },
    // 前往正在玩的波动时间界面
    to_playing() {
      $this.$emit("gameStart", true);
      mpvue.navigateTo({
        url: "/pages/start/main",
      });
    },
    //修改连接状态
    change_toy_connect_status($status) {
      $this.$emit("change_toy_connect_status", $status);
    },
    change_status() {
      $this.$emit("change_status", 0);
    },
  },
  created() {
    $this = this;
  },
};
</script>

<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;
}
</style>