优化进入页面云机不存在时出错问题

pages/rtcEngine/components/CloudList.vue

@@ -9,7 +9,12 @@
             width="24"
             height="24"
             :src="imgFun(item.buyVipType, item.androidVersion)"
-          />
+          >
+            <!-- 图片加载中显示 -->
+            <template v-slot:loading>
+              <van-loading type="spinner" size="20" />
+            </template>
+          </van-image>
         </div>
         <!-- 云机名称和ID -->
         <div class="cloud-id-desc-wrap">

pages/rtcEngine/components/CloudMainPanel.vue

@@ -7,7 +7,12 @@
         width="24"
         height="24"
         :src="iconUrl"
-      />
+      >
+        <!-- 图片加载中显示 -->
+        <template v-slot:loading>
+          <van-loading type="spinner" size="20" />
+        </template>
+      </van-image>
     </div>
     <!-- 云机名称和ID -->
     <div class="cloud-id-desc-wrap">
@@ -61,12 +66,11 @@ export default {
         return {};
       }
       // 如果当前云机id不为空, 那么就返回当前云机的信息
-      return this.cloudList.find(item => item.userCardId === +this.userCardId);
+      return this.cloudList.find(item => item.userCardId === +this.userCardId) ?? {};
     },
     // 当前云机套餐的图标
     iconUrl() {
-      return this.imgFun(this.cloudInfo.buyVipType, this.cloudInfo.androidVersion);
-      
+      return Object.keys(this.cloudInfo).length ? this.imgFun(this.cloudInfo.buyVipType, this.cloudInfo.androidVersion) : require(`~/assets/image/rtc/userMealUpgradeVO_icon.png`)
     }
   }
 }

pages/rtcEngine/rtc.vue

@@ -202,7 +202,7 @@ export default {
     await this.getCloudList();
 
     // 获取当前云机信息
-    this.activeCloud = this.cloudList.find(item => item.userCardId === +this.parametersData.userCardId);
+    this.activeCloud = this.cloudList.find(item => item.userCardId === +this.parametersData.userCardId) ?? {};
 
     // 获取所有云机套餐信息
     await this.getMealIconInfo();
@@ -211,9 +211,14 @@ export default {
 
     if(this.sdkLoadStatus === 'success') {
       // 开始运行程序
-      this.start(this.activeCloud);
+      if(Object.keys(this.activeCloud).length) {
+        this.start(this.activeCloud);
+      }else {
+        this.$toast('云手机不存在');
+      }
     }else {
       console.log('SDK加载失败');
+      this.$toast('加载失败');
     }
   },
   computed: {
@@ -403,7 +408,7 @@ export default {
         // 不支持webRTC跳转到指定的页面进行拉流
         if (!cardData.isWebrtc) {
           // 关闭日志上报
-          this.logReportObj.destroy();
+          this.logReportObj?.destroy();
 
           // 跳转指定页面
           location.replace(`${location.origin}/h5/webRtcYJ/WXtrialInterface.html${location.search}`)
@@ -758,11 +763,11 @@ export default {
 
         // 重置相关数据
         // 关闭日志上报
-        this.logReportObj.destroy();
+        this.logReportObj?.destroy();
         // 关闭webRTC
-        this.engine.disconnect && this.engine.disconnect();
+        this.engine?.disconnect && this.engine?.disconnect();
         // 关闭业务指令通道
-        this.doConnectDirectivesWs && this.doConnectDirectivesWs.close();
+        this.doConnectDirectivesWs?.close();
         // 重置重连次数
         this.doConnectDirectivesRequestNum = 1;
         // 重置 end
@@ -809,11 +814,11 @@ export default {
     // 退出功能
     exit() {
       // 关闭日志上报
-      this.logReportObj.destroy();
+      this.logReportObj?.destroy();
       // 关闭webRTC
-      this.engine.disconnect && this.engine.disconnect();
+      this.engine?.disconnect && this.engine?.disconnect();
       // 关闭业务指令通道
-      this.doConnectDirectivesWs && this.doConnectDirectivesWs.close();
+      this.doConnectDirectivesWs?.close();
 
       // 获取当前环境
       const env = isBrowserEnvironment();
@@ -848,6 +853,7 @@ export default {
     },
     // 开始运行程序
     async start(activeCloud) {
+      console.log('start activeCloud', activeCloud);
       try {
         this.$toast.loading({
           className: 'rtc-loading',
@@ -934,26 +940,8 @@ $-bg-yellow: rgb(255, 253, 241);
   color: #fff;
 }
 
+// 
 .rtc-page >>> .van-toast.rtc-loading{
   white-space: nowrap;
 }
-// 样式穿透的常用方法
-
-// 在SCSS中，样式穿透可以通过以下几种方式实现：
-
-// 使用>>>操作符： 这是一个深度选择器，它可以穿透scoped样式，使得样式可以作用于子组件。在SCSS中，你可以这样写： .parent >>> .child { color: red; } 这段代码会被编译成.parent[data-v-f3f3eg9] .child { color: red; }，从而实现样式穿透。
-
-// 使用/deep/或::v-deep： 这两个操作符是>>>的别名，它们在不同的预处理器中有不同的应用。在SCSS中，你可以使用::v-deep来实现样式穿透： .parent ::v-deep .child { color: red; } 在LESS中，你可以使用/deep/来实现相同的效果： .parent /deep/ .child { color: red; }
-
-// 直接在<style>标签中写入： 如果你不使用预处理器，可以直接在<style>标签中使用>>>操作符： .parent >>> .child { color: red; }
-
-// 注意事项
-
-// 使用样式穿透时，需要注意选择器的具体写法，以确保样式能够正确应用。
-
-// 在不同的预处理器中，样式穿透的写法可能会有所不同。例如，在LESS中使用/deep/，而在SCSS中使用::v-deep。
-
-// 有些预处理器可能无法正确解析>>>操作符，这时可以使用/deep/或::v-deep作为替代。
-
-// 通过上述方法，我们可以在保持样式封装的同时，对第三方组件库中的样式进行定制化修改，实现更加精细的样式控制。
 </style>