自动play按钮交互优化

pages/index.vue

@@ -55,7 +55,7 @@ export default {
             }
             const { id } = data
             if (id) {
-              if (this.$router.name !== 'index-game-id') {
+              if (this.$route.name !== 'index-game-id') {
                 this.$router.replace(`/game/${id}`)
               }
             }

pages/index/game/_id.vue

@@ -59,8 +59,9 @@
         <!-- 自动下注 -->
         <div v-audio class="auto">
           <img v-show="!isAuto" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/ic_autoChinese.png" alt="" class="auto-btn btn" @click="showTime = !showTime;">
-          <img v-show="isAuto" src="@/assets/images/temp/game/auto-time-button.png" alt="" class="auto-btn btn down" @click="autoTime = 0">
-          <div v-if="isAuto" :style="autoTime === -1 ? 'font-size: 40px;' : ''" class="auto-time-text">
+          <img v-show="isAuto" src="@/assets/images/temp/game/auto-time-button.png" alt="" class="auto-btn btn down" @click="click().cancelAuto()">
+          <div v-if="isAuto" :style="autoTime === -1 ? 'font-size: 40px;' : ''" class="auto-time-text btn" @click="click().cancelAuto()">
+            <div class="tips">DOUBLE CLICK TO STOP AUTO-SPINNING</div>
             {{ autoTime | autoTimeFilter }}
           </div>
           <div class="auto-time-block">
@@ -112,6 +113,7 @@ export default {
       autoTimeList: [30, 20, 15, 5],
       showTime: false,
       autoTime: 0, // 自动游戏时间，-1表示无穷
+      cancelAutoClick: 0, // 计数器，用来实现双击
     }
   },
   computed: {
@@ -205,7 +207,7 @@ export default {
             this.click().play()
             setTimeout(() => {
               this.init().autoPlay()
-            }, 2000)
+            }, 5000)
           }
         },
       }
@@ -360,6 +362,16 @@ export default {
           }
           this.init().autoPlay()
         },
+        cancelAuto: () => {
+          this.cancelAutoClick++
+          setTimeout(() => {
+            this.cancelAutoClick = 0
+          }, 500)
+          if (this.cancelAutoClick >= 2) {
+            this.autoTime = 0
+            this.cancelAutoClick = 0
+          }
+        },
       }
     },
   },
@@ -577,7 +589,7 @@ export default {
     }
     .auto-time-text {
       position: absolute;
-      bottom: 25px;
+      bottom: 6px;
       right: 5px;
       z-index: 3;
       text-align: center;
@@ -585,7 +597,26 @@ export default {
       font-weight: bold;
       font-size: 20px;
       width: 60px;
-      line-height: 20px;
+      line-height: 60px;
+      border-radius: 60px;
+      .tips {
+        display: none;
+        color: #2f49e9;
+        border-radius: 8px;
+        background: #e4dede;
+        width: 189px;
+        font-size: 16px;
+        padding: 4px;
+        position: relative;
+        line-height: 20px;
+        left: -64px;
+        top: -10px;
+      }
+      &:hover {
+        .tips {
+          display: block !important;
+        }
+      }
     }
     .auto-time-block {
       position: absolute;

pages/index/game/components/right-player.vue

 <template>
   <div class="box">
-    <div :class="showPlayer1 ? 'show' : ''" class="btn camera" @click="showPlayer1 = !showPlayer1">
+    <div v-if="videoTopNumber && +videoTopNumber !== 0" :class="showPlayer1 ? 'show' : ''" class="btn camera" @click="showPlayer1 = !showPlayer1">
       <div class="left-icon">
         <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/photo-camera-interface-symbol-for-button.png" alt="">
       </div>
@@ -14,7 +14,7 @@
         <WebRTCPlayer ref="player1" class="player"/>
       </div>
     </div>
-    <div :class="showPlayer2 ? 'show' : ''" class="btn camera camera2" @click="showPlayer2 = !showPlayer2">
+    <div v-if="videoCamNumber && +videoCamNumber !== 0" :class="showPlayer2 ? 'show' : ''" class="btn camera camera2" @click="showPlayer2 = !showPlayer2">
       <div class="left-icon">
         <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/photo-camera-interface-symbol-for-button.png" alt="">
       </div>
@@ -51,24 +51,40 @@ export default {
       showPlayer2: false,
     }
   },
+  computed: {
+    videoCamNumber() {
+      return this.device.videoCamNumber
+    },
+    videoTopNumber() {
+      return this.device.videoTopNumber
+    },
+  },
   watch: {
     device() {
+      this.play1()
       this.play2()
     },
   },
   mounted() {
     if (this.device) {
+      this.play1()
       this.play2()
     }
   },
   methods: {
     play1() {
-      const url = this.device.videoMainNumber
+      const url = this.videoTopNumber
+      if (!url || +url === 0) {
+        return
+      }
       const webrtc = `webrtc://eslotstreaming.com${url}`
       this.$refs.player1.initVideo(webrtc)
     },
     play2() {
-      const url = this.device.videoCamNumber
+      const url = this.videoCamNumber
+      if (!url || +url === 0) {
+        return
+      }
       const webrtc = `webrtc://eslotstreaming.com${url}`
       this.$refs.player2.initVideo(webrtc)
     },