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">
          <img src="https://img.shuimuai.com/web/brain.png" alt="" class="device_brain">
          <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 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="https://img.shuimuai.com/web/uav.png" alt="" class="uav_toy">
          <text class="text-gray device_text">
            <template v-if="connect_toy == 1 || connect_toy == 3">
              智能喷雾恐龙
            </template>
            <template v-if="connect_toy == 2 || connect_toy == 4">
              已连接
            </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="choose_pay_window">
            <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">
          <button class="cu-btn bg-red lg cu-btn-primary" @click="choose_pay_window">
            <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-green lg ">
            <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(1)">
              <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(2)">
              <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>
  </div>
</template>

<script>
let $this;
export default {
  name: "connected",
  props: ['connect_toy'],
  data() {
    return {
      pay_window: false,
      // 0:未选择 1：时间 2：次数
      pay_type: 0
    }
  },
  watch: {
    pay_type($new, $old) {
      if ($new > 0) {
        $this.change_toy_connect_status(4)
        $this.to_playing()
      }
    }
  },
  methods: {
    open_choose_toy() {
      $this.$emit('open_choose_toy', true)
    },
    //打开选择消费的选项框
    choose_pay_window() {
      $this.pay_window = true
    },
    //选择消费的时间或者次数
    choose_pay($event) {
      $this.pay_type = $event
      mpvue.navigateTo({
        url: "/pages/start/main?mode=" + $event
      })
    },
    //点击隐藏
    onClickHide() {
      $this.pay_window = false
    },
    // 前往正在玩的波动时间界面
    to_playing() {
      console.log('跳转')
    },
    //修改连接状态
    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>
@import url('../../static/connecting.css');
</style>