屏幕点击事件

layouts/default.vue

@@ -42,15 +42,13 @@ export default {
     initSceen() {
       let zoom = 1
       const { innerWidth, innerHeight } = window
-      console.log('innerWidth', innerWidth)
-      console.log('innerHeight', innerHeight)
       if (innerWidth / innerHeight > 1080 / 608) {
         console.log('比例')
         zoom = window.innerHeight / 608
       } else {
         zoom = window.innerWidth / 1080
       }
-      this.zoom = zoom
+      // this.zoom = zoom
     },
   },
 }

pages/index/game/_id.vue

@@ -6,7 +6,7 @@
       <img src="@/assets/images/temp/game/video-play.png" alt="" class="bg">
       <img v-if="isPlay" src="@/assets/images/temp/game/video-play-state.png" alt="" class="play-state">
       <div class="box">
-        <WebRTCPlayer ref="webrtc" :video-src="player"/>
+        <WebRTCPlayer ref="webrtc" :video-src="player" @click="(data) => click().player(data)"/>
       </div>
     </div>
     <div class="option-block">
@@ -48,7 +48,9 @@
         </div>
 
         <!-- play -->
-        <img v-audio src="@/assets/images/temp/game/play-button.png" alt="" class="play-btn btn" @click="click().play()">
+        <div class="play-btn btn" @click="click().play()">
+          <img v-audio src="@/assets/images/temp/game/play-button.png" alt="">
+        </div>
         <!-- 自动下注 -->
         <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;">
@@ -117,13 +119,14 @@ export default {
       return this.deviceButtonPanel.backgroundUrl
     },
     btnList() {
-      return this.deviceButtonPanel.keyMapping || []
+      const btnList = this.deviceButtonPanel.keyMapping || []
+      return btnList.filter(i => i.buttonStatus === 1)
     },
     btnList1() {
-      return this.btnList.filter(i => i.buttonStatus === 1 && i.buttonValue >= 9)
+      return this.btnList.filter((i, index) => index < 6)
     },
     btnList2() {
-      return this.btnList.filter(i => i.buttonStatus === 1 && i.buttonValue <= 8)
+      return this.btnList.filter((i, index) => index >= 6)
     },
     // 当前设备
     device() {
@@ -300,6 +303,21 @@ export default {
             console.log('jackpotList', data)
           })
         },
+        touch: ({ x, y }) => {
+          const url = '/api/game/touch'
+          const { id } = this
+          const params = {
+            deviceId: id,
+            x,
+            y,
+          }
+          this.$request({
+            url,
+            method: 'get',
+            params,
+          }).then(({ data }) => {
+          })
+        },
       }
     },
     click() {
@@ -319,6 +337,9 @@ export default {
         play: () => {
           this.network().button({ buttonValue: 2 })
         },
+        player: ({ x16, y16 }) => {
+          this.network().touch({ x: x16, y: y16 })
+        },
         // 设置自动play时间
         setAutoPlay: (time) => {
           if (time === -1) {
@@ -501,10 +522,20 @@ export default {
     }
 
     .play-btn {
-      width: 186px;
       position: absolute;
-      right: 149px;
-      bottom: 15px;
+      right: 204px;
+      bottom: 26px;
+      overflow: visible;
+      width: 90px;
+      height: 90px;
+      img {
+        width: 186px;
+        position: absolute;
+        left: -48px;
+        bottom: -5px;
+        user-select: none;
+        pointer-events: none;
+      }
     }
     .auto {
       width: 70px;

pages/index/game/components/WebRTCPlayer.vue

 
 <template>
-  <video id="jswebrtc" ref="jswebrtc" style="width: 100%;height: 100%;object-fit: fill"/>
+  <video id="jswebrtc" ref="jswebrtc" style="width: 100%;height: 100%;object-fit: fill" @click="(e) => handler().click(e)"/>
 </template>
 
 <script>
@@ -63,7 +63,25 @@ export default {
           console.log(obj, '播放器开始播放！')
         }
       })
-    }
+    },
+    handler() {
+      return {
+        click: (e) => {
+          console.log('click', e)
+          const video = this.$refs.jswebrtc
+          const { offsetWidth, offsetHeight } = video // 组件宽高
+          const { offsetX, offsetY } = e // 点击位置
+          const clickPercenX = (offsetHeight - offsetY) / offsetHeight
+          const clickPercenY = (offsetX) / offsetWidth
+
+          // 计算点击区域对应的十六进制
+          const max = 32639
+          const x16 = (+(max * clickPercenX).toFixed(0)).toString(16)
+          const y16 = (+(max * clickPercenY).toFixed(0)).toString(16)
+          this.$emit('click', {x16, y16})
+        },
+      }
+    },
   },
 }
 </script>