feat: 重构p2pPlayer组件，优化视频加载状态显示，增强用户交互体验

pages/p2p/p2pPlayer.vue

@@ -44,14 +44,25 @@
       />
       <!-- #endif -->
     </view>
+    <view v-if="!isVideoLoaded">
       <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>
-
+      <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
-      v-if="(isApp || buttonInfo) && isVideoLoaded"
         :style="{
           top: isApp ? '60px' : buttonInfo.bottom + 15 + 'px'
         }"
@@ -61,21 +72,12 @@
           {{ range[index].name }}
         </cover-view>
       </cover-view>
-
-    <!-- #ifdef MP-WEIXIN -->
-    <iot-p2p-voice
-      v-if="deviceInfo"
-      id="voiceComponent"
-      :deviceInfo="deviceInfo"
-      :xp2pInfo="xp2pInfo"
-      voiceType="Pusher"
-    >
-    </iot-p2p-voice>
-    <!-- #endif -->
-
       <cover-view
-      v-if="isVideoLoaded"
+        class="fixed bottom-[calc(32rpx+env(safe-area-inset-bottom))] left-1/2 -translate-x-1/2 w-622"
-      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="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">
@@ -159,18 +161,20 @@
             </cover-view>
           </cover-view>
         </cover-view>
-    <view
+      </cover-view>
-      v-if="!isVideoLoaded"
+    </cover-view>
-      class="fixed bottom-[calc(48rpx+env(safe-area-inset-bottom))] w-full flex justify-center"
+    <view class="safe-area-bottom"></view>
+
+    <!-- #ifdef MP-WEIXIN -->
+    <iot-p2p-voice
+      v-if="deviceInfo"
+      id="voiceComponent"
+      :deviceInfo="deviceInfo"
+      :xp2pInfo="xp2pInfo"
+      voiceType="Pusher"
     >
-      <up-loading-icon
+    </iot-p2p-voice>
-        size="70rpx"
+    <!-- #endif -->
-        :vertical="true"
-        textSize="28rpx"
-        text="连接中"
-        mode="circle"
-      ></up-loading-icon>
-    </view>
   </view>
 </template>