From 750e689caa1c2ca6e981f94c2df7cfd4f1d1b81d Mon Sep 17 00:00:00 2001
From: fanpeng <438123081@qq.com>
Date: Fri, 11 Jul 2025 10:28:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84p2pPlayer=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E8=A7=86=E9=A2=91=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E7=8A=B6=E6=80=81=E6=98=BE=E7=A4=BA=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=BC=BA=E7=94=A8=E6=88=B7=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/p2p/p2pPlayer.vue | 232 ++++++++++++++++++++--------------------
 1 file changed, 118 insertions(+), 114 deletions(-)

diff --git a/pages/p2p/p2pPlayer.vue b/pages/p2p/p2pPlayer.vue
index 004d9bd..95cdadc 100644
--- a/pages/p2p/p2pPlayer.vue
+++ b/pages/p2p/p2pPlayer.vue
@@ -44,23 +44,126 @@
       />
       <!-- #endif -->
     </view>
-    <image
-      v-if="!isVideoLoaded"
-      src="https://oss-lock.xhjcn.ltd/mp/background_monitor.png"
-      class="w-full h-full absolute top-0 left-0"
-    ></image>
-
-    <cover-view
-      v-if="(isApp || buttonInfo) && isVideoLoaded"
-      :style="{
-        top: isApp ? '60px' : buttonInfo.bottom + 15 + 'px'
-      }"
-      class="bg-[rgba(0,0,0,0.35)] rounded-full px-4 py-1.5 fixed right-32"
-    >
-      <cover-view class="text-white text-xs" @click="showQualitySelector">
-        {{ range[index].name }}
+    <view v-if="!isVideoLoaded">
+      <image
+        src="https://oss-lock.xhjcn.ltd/mp/background_monitor.png"
+        class="w-full h-full absolute top-0 left-0"
+      ></image>
+      <view
+        class="fixed bottom-[calc(48rpx+env(safe-area-inset-bottom))] w-full flex justify-center"
+      >
+        <up-loading-icon
+          size="70rpx"
+          :vertical="true"
+          textSize="28rpx"
+          text="连接中"
+          mode="circle"
+        ></up-loading-icon>
+      </view>
+    </view>
+    <cover-view v-if="isVideoLoaded">
+      <cover-view
+        :style="{
+          top: isApp ? '60px' : buttonInfo.bottom + 15 + 'px'
+        }"
+        class="bg-[rgba(0,0,0,0.35)] rounded-full px-4 py-1.5 fixed right-32"
+      >
+        <cover-view class="text-white text-xs" @click="showQualitySelector">
+          {{ range[index].name }}
+        </cover-view>
+      </cover-view>
+      <cover-view
+        class="fixed bottom-[calc(32rpx+env(safe-area-inset-bottom))] left-1/2 -translate-x-1/2 w-622"
+      >
+        <cover-view
+          class="bg-[rgba(0,0,0,0.3)] rounded-xl p-4 shadow-lg"
+          style="background-color: rgba(0, 0, 0, 0.3)"
+        >
+          <cover-view class="flex items-center justify-around mx-15">
+            <cover-view class="relative">
+              <cover-image
+                v-show="isMute"
+                src="https://oss-lock.xhjcn.ltd/mp/icon_mute.png"
+                :class="isApp ? 'size-48' : 'size-48 p-2'"
+              ></cover-image>
+              <cover-image
+                v-show="!isMute"
+                src="https://oss-lock.xhjcn.ltd/mp/icon_not_mute.png"
+                :class="isApp ? 'size-48' : 'size-48 p-2'"
+              ></cover-image>
+              <cover-view
+                @click="toggleMute"
+                class="absolute top-0 left-0 w-full h-full size-48 p-2"
+              ></cover-view>
+            </cover-view>
+            <cover-view class="relative">
+              <cover-image
+                src="https://oss-lock.xhjcn.ltd/mp/icon_screenshot.png"
+                :class="isApp ? 'size-48' : 'size-48 p-2'"
+              ></cover-image>
+              <cover-view
+                @click="handleScreenshot"
+                class="absolute top-0 left-0 w-full h-full"
+              ></cover-view>
+            </cover-view>
+          </cover-view>
+          <cover-view class="flex items-center justify-between text-white mt-2 px-10">
+            <cover-view class="flex flex-col items-center">
+              <cover-view
+                class="bg-white w-80 h-80 rounded-full flex items-center justify-center relative"
+              >
+                <cover-image
+                  :src="
+                    isVoice
+                      ? 'https://oss-lock.xhjcn.ltd/mp/icon_microphone.png'
+                      : 'https://oss-lock.xhjcn.ltd/mp/icon_no_microphone.png'
+                  "
+                  class="w-55 h-55"
+                ></cover-image>
+                <cover-view
+                  @click="toggleVoice"
+                  class="absolute top-0 left-0 w-full h-full"
+                ></cover-view>
+              </cover-view>
+              <cover-view class="mt-2 text-center whitespace-nowrap text-xs">{{
+                isVoice ? '点击停止' : '点击说话'
+              }}</cover-view>
+            </cover-view>
+            <cover-view class="flex flex-col items-center">
+              <cover-view
+                class="bg-[#eb292b] w-80 h-80 rounded-full flex items-center justify-center relative"
+              >
+                <cover-image
+                  src="https://oss-lock.xhjcn.ltd/mp/icon_hang_up.png"
+                  class="w-60 h-60"
+                ></cover-image>
+                <cover-view
+                  @click="handleHangUp"
+                  class="absolute top-0 left-0 w-full h-full"
+                ></cover-view>
+              </cover-view>
+              <cover-view class="mt-2 text-center whitespace-nowrap text-xs">挂断</cover-view>
+            </cover-view>
+            <cover-view class="flex flex-col items-center">
+              <cover-view
+                class="bg-[#63b8af] w-80 h-80 rounded-full flex items-center justify-center relative"
+              >
+                <cover-image
+                  src="https://oss-lock.xhjcn.ltd/mp/icon_lock_white.png"
+                  class="w-60 h-60"
+                ></cover-image>
+                <cover-view
+                  @click="handleLock"
+                  class="absolute top-0 left-0 w-full h-full"
+                ></cover-view>
+              </cover-view>
+              <cover-view class="mt-2 text-center whitespace-nowrap text-xs">开锁</cover-view>
+            </cover-view>
+          </cover-view>
+        </cover-view>
       </cover-view>
     </cover-view>
+    <view class="safe-area-bottom"></view>
 
     <!-- #ifdef MP-WEIXIN -->
     <iot-p2p-voice
@@ -72,105 +175,6 @@
     >
     </iot-p2p-voice>
     <!-- #endif -->
-
-    <cover-view
-      v-if="isVideoLoaded"
-      class="fixed bottom-[calc(32rpx+env(safe-area-inset-bottom))] bg-[rgba(0,0,0,0.3)] rounded-xl p-4 shadow-lg left-1/2 -translate-x-1/2 w-622"
-    >
-      <cover-view class="flex items-center justify-around mx-15">
-        <cover-view class="relative">
-          <cover-image
-            v-show="isMute"
-            src="https://oss-lock.xhjcn.ltd/mp/icon_mute.png"
-            :class="isApp ? 'size-48' : 'size-48 p-2'"
-          ></cover-image>
-          <cover-image
-            v-show="!isMute"
-            src="https://oss-lock.xhjcn.ltd/mp/icon_not_mute.png"
-            :class="isApp ? 'size-48' : 'size-48 p-2'"
-          ></cover-image>
-          <cover-view
-            @click="toggleMute"
-            class="absolute top-0 left-0 w-full h-full size-48 p-2"
-          ></cover-view>
-        </cover-view>
-        <cover-view class="relative">
-          <cover-image
-            src="https://oss-lock.xhjcn.ltd/mp/icon_screenshot.png"
-            :class="isApp ? 'size-48' : 'size-48 p-2'"
-          ></cover-image>
-          <cover-view
-            @click="handleScreenshot"
-            class="absolute top-0 left-0 w-full h-full"
-          ></cover-view>
-        </cover-view>
-      </cover-view>
-      <cover-view class="flex items-center justify-between text-white mt-2 px-10">
-        <cover-view class="flex flex-col items-center">
-          <cover-view
-            class="bg-white w-80 h-80 rounded-full flex items-center justify-center relative"
-          >
-            <cover-image
-              :src="
-                isVoice
-                  ? 'https://oss-lock.xhjcn.ltd/mp/icon_microphone.png'
-                  : 'https://oss-lock.xhjcn.ltd/mp/icon_no_microphone.png'
-              "
-              class="w-55 h-55"
-            ></cover-image>
-            <cover-view
-              @click="toggleVoice"
-              class="absolute top-0 left-0 w-full h-full"
-            ></cover-view>
-          </cover-view>
-          <cover-view class="mt-2 text-center whitespace-nowrap text-xs">{{
-            isVoice ? '点击停止' : '点击说话'
-          }}</cover-view>
-        </cover-view>
-        <cover-view class="flex flex-col items-center">
-          <cover-view
-            class="bg-[#eb292b] w-80 h-80 rounded-full flex items-center justify-center relative"
-          >
-            <cover-image
-              src="https://oss-lock.xhjcn.ltd/mp/icon_hang_up.png"
-              class="w-60 h-60"
-            ></cover-image>
-            <cover-view
-              @click="handleHangUp"
-              class="absolute top-0 left-0 w-full h-full"
-            ></cover-view>
-          </cover-view>
-          <cover-view class="mt-2 text-center whitespace-nowrap text-xs">挂断</cover-view>
-        </cover-view>
-        <cover-view class="flex flex-col items-center">
-          <cover-view
-            class="bg-[#63b8af] w-80 h-80 rounded-full flex items-center justify-center relative"
-          >
-            <cover-image
-              src="https://oss-lock.xhjcn.ltd/mp/icon_lock_white.png"
-              class="w-60 h-60"
-            ></cover-image>
-            <cover-view
-              @click="handleLock"
-              class="absolute top-0 left-0 w-full h-full"
-            ></cover-view>
-          </cover-view>
-          <cover-view class="mt-2 text-center whitespace-nowrap text-xs">开锁</cover-view>
-        </cover-view>
-      </cover-view>
-    </cover-view>
-    <view
-      v-if="!isVideoLoaded"
-      class="fixed bottom-[calc(48rpx+env(safe-area-inset-bottom))] w-full flex justify-center"
-    >
-      <up-loading-icon
-        size="70rpx"
-        :vertical="true"
-        textSize="28rpx"
-        text="连接中"
-        mode="circle"
-      ></up-loading-icon>
-    </view>
   </view>
 </template>