完成个人首页模块交互，进行游戏计费面板

src/components/device/device.vue

@@ -28,7 +28,17 @@
           <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
@@ -58,16 +68,6 @@
             <button class="cu-btn lg cu-btn-primary text-white text-center padding" @click="choose_ok">选好了</button>
           </div>
         </van-popup>
-      </div>
-      <div v-else>
-        <!--      玩具模块-->
-        <!--      玩具连接中-->
-        <div class="connecting_toy">
-          <toy_connecting :connect_toy="connect_toy"></toy_connecting>
-        </div>
-      </div>
-
-    </div>
   </div>
 </template>
 
@@ -89,7 +89,7 @@ export default {
   },
   data() {
     return {
-      //0为未连接，1：连接中，2：已连接 3：连接失败
+      //设备状态 0为未连接，1：连接中，2：已连接 3：连接失败
       status: 0,
       choose_toy_window: {
         show: false
@@ -128,7 +128,7 @@ export default {
       ],
       toy_action: 1,
       connect_show: false,
-      //连接玩具 0:未连接 1：连接中 2：已连接 3：连接失败
+      //连接玩具 0:未连接 1：连接中 2：已连接 3：连接失败 4:游戏中
       connect_toy: 0
     }
   },

src/components/device/toy/connecting.vue

@@ -28,6 +28,8 @@
                  :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>
@@ -35,10 +37,10 @@
         <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">
+            <template v-if="connect_toy == 1 || connect_toy == 3">
               智能喷雾恐龙
             </template>
-            <template v-if="connect_toy == 2">
+            <template v-if="connect_toy == 2 || connect_toy == 4">
               已连接
             </template>
           </text>
@@ -46,11 +48,11 @@
       </van-col>
     </van-row>
     <!--        按钮组合-->
-    <van-row>
-      <van-col span="7" offset="1">
+    <van-row gutter="6">
+      <van-col span="8">
         <button class="cu-btn bg-red lg text-white">
           <img src="https://img.shuimuai.com/m_duankainaohuan.png" class="cut_brain_icon" alt="">
-          <text class="padding-lr cut_text">断开脑环</text>
+          <text class=" cut_text">断开脑环</text>
         </button>
       </van-col>
 
@@ -64,37 +66,144 @@
 
       <!--      已经连接玩具-->
       <div v-if="connect_toy == 2">
-        <van-col span="7" offset="1">
+        <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="padding-lr cut_text">选择玩具</text>
+            <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>
 
-        <van-col span="7" offset="1">
-          <button class="cu-btn bg-red lg text-white">
-            <img src="https://img.shuimuai.com/m_duankainaohuan.png" class="cut_brain_icon" alt="">
-            <text class="padding-lr cut_text">游戏中..</text>
+      </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')
+      $this.$emit('open_choose_toy', true)
+    },
+    //打开选择消费的选项框
+    choose_pay_window() {
+      $this.pay_window = true
+    },
+    //选择消费的时间或者次数
+    choose_pay($event) {
+      $this.pay_type = $event
+    },
+    //点击隐藏
+    onClickHide() {
+      $this.pay_window = false
+    },
+    // 前往正在玩的波动时间界面
+    to_playing(){
+      console.log('跳转')
+    },
+    //修改连接状态
+    change_toy_connect_status($status){
+      $this.$emit('change_toy_connect_status',$status)
     }
+  },
+  created() {
+    $this = this
   }
 }
 </script>
 
 <style scoped>
-
+@import url('../../static/connecting.css');
 </style>

src/components/static/connecting.css

@@ -0,0 +1,42 @@
+.cut_text {
+  padding: 0px 5px;
+  font-size: 10px;
+}
+
+.cut_start_game_icon {
+  width: 30px;
+  height: 30px;
+}
+
+/*消费类型窗口*/
+.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;
+}

src/pages/index/main.json

@@ -2,6 +2,7 @@
   "usingComponents": {
     "van-row": "../../static/vant/row/index",
     "van-col": "../../static/vant/col/index",
-    "van-popup": "../../static/vant/popup/index"
+    "van-popup": "../../static/vant/popup/index",
+    "van-overlay": "../../static/vant/overlay/index"
   }
 }

src/pages/start/index.css

@@ -1,78 +1,35 @@
-.login_card {
-  height: 410px;
-  background-color: #ffffff;
-  position: relative;
-  z-index: 3;
-  top: -100px;
-  margin: 0px 10px;
-  background-image: url('https://img.shuimuai.com/shuimugongzhu.png');
-  background-position: center;
-  background-size: 100% 100%;
-  background-color: rgba(255, 255, 255, 0);
-}
-
-/*体验页面*/
-.slogen {
-  color: #4B4B4B;
-  font-size: 13px;
-}
-
-
-.sub_slogen {
-  font-size: 22px;
-  margin-top: 130px;
-  color: #4C4C4C;
-}
-
-/*扫码页*/
-.sub_slogen_sm {
-  font-size: 13px;
-  margin: 180px auto 0px;
-  color: #4C4C4C;
-}
-
-/*注册页面*/
-.register_form_container {
-  margin: 120px auto 0px;
-  width: 90%;
-  height: 108px;
-  background: rgba(242, 243, 255, 0.6);
-  box-shadow: 0px 3px 7px 0px rgba(159, 159, 159, 0.84);
-  border-radius: 11px;
-}
-
-/* 功能服务 */
-.service {
-  position: absolute;
+#playing_container {
   width: 100%;
-  padding: 5px 7px 35px;
-  margin-top: 20px;
-  top: 560px;
+  background: linear-gradient(0deg, rgba(40, 157, 206, 0.51), rgba(135, 145, 226, 0.26));
+  background-color: #46425E;
+  padding: 5px;
+
 }
 
-.service .content {
+.game_panel {
   width: 100%;
-  float: left;
+  height: 76px;
+  background: #46425E;
+  box-shadow: 0px 3px 4px 0px #302D43;
+  border-radius: 11px;
+  margin: 0px auto;
 }
 
-.service .content image {
-  width: 50%;
-  height: 89px;
+.game_panel .title {
+  color: #9A96B7;
 }
 
-.head .line {
-  width: 4px;
-  height: 14px;
-  background-color: #5d4db8;
-  margin-right: 7px;
+.game_panel .type {
+  color: #FFFFFF;
 }
 
-.head view {
-  display: flex;
-  justify-self: start;
-  align-items: center;
+.van-count-down {
+  font-weight: bold;
+  font-size: 30px !important;
+  color: white !important;
 }
 
-.cu-form-group {
-  background-color: rgba(255, 255, 255, 0);
+.cut_brain_icon {
+  width: 11px;
+  height: 11px;
 }

src/pages/start/index.vue

@@ -1,38 +1,44 @@
 <template>
-  <div id="container">
-    <button class="cu-btn bg-primary text-white">hello world</button>
+  <div id="playing_container">
+    <!--    计费面板模块-->
+    <div class="game_panel padding-top-sm">
+      <van-row gutter="16">
+        <van-col span="8" offset="2">
+          <view class="text-sm">
+            <text class="title">已游玩时间</text>
+          </view>
+          <view class="text-lg   padding-top">
+            <van-count-down :time="time" format="mm:ss" auto-start></van-count-down>
+          </view>
+        </van-col>
+        <van-col span="10" offset="4">
+          <view class="text-sm">
+            <text class="title">计费模式</text>
+            <text class="type padding-left-sm">
+              会员时间消费
+            </text>
+          </view>
+          <button class="cu-btn bg-red text-white margin-top-sm">
+            <img src="https://img.shuimuai.com/m_duankainaohuan.png" class="cut_brain_icon" alt="">
+            <text class="padding-lr cut_text text-sm">停止游玩</text>
+          </button>
+        </van-col>
+      </van-row>
+    </div>
   </div>
 </template>
 
 <script>
-import banner from '@/components/banner'
-import login_container from '@/components/index/login'
-import scan_container from '@/components/index/scan'
-import regist_container from '@/components/index/regist'
-import personal_container from "@/components/index/personal";
-import device_container from "@/components/device/device";
-
 
 export default {
   name: "index_container",
-  components: {
-    banner, login_container, scan_container, regist_container, personal_container, device_container
-  },
+  components: {},
   data() {
     return {
-      // 三种状态 扫码scan 注册regist 登录login
-      status: "regist",
-      is_login: true
-    }
-  },
-  methods: {
-    get_init_data() {
-    },
-    //切换到扫码
-    change_status($status) {
-      this.status = $status
+      time: 10 * 60 * 1000,
     }
   },
+  methods: {},
   mounted() {
   }
 }

src/pages/start/main.json

@@ -2,6 +2,7 @@
   "usingComponents": {
     "van-row": "../../static/vant/row/index",
     "van-col": "../../static/vant/col/index",
-    "van-popup": "../../static/vant/popup/index"
+    "van-popup": "../../static/vant/popup/index",
+    "van-count-down": "../../static/vant/count-down/index"
   }
 }