update loading

f/web-kboss/src/views/customer/unsubscribe/BaiduNetdisk.vue/index.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="box">
-
-    <iframe v-loading="loading" v-if="url" :src="url" frameborder="0" class="baidu-style">
-    </iframe>
-    <div v-else>
-      <p>请先登录百度云账号</p>
-      <button @click="getToken">重试</button>
+    <!-- 添加全屏加载效果 -->
+    <div v-loading="loading" class="loading-container">
+      <iframe v-if="url" :src="url" frameborder="0" class="baidu-style">
+      </iframe>
+      <div v-else class="login-prompt">
+        <p>请先登录百度云账号</p>
+        <button @click="getToken">重试</button>
+      </div>
     </div>
   </div>
 </template>
@@ -22,7 +24,6 @@ export default {
       url: '',
       loading: true,
       userid: '',
-
     }
   },
   async created() {
@@ -62,24 +63,12 @@ export default {
       console.log('接收到消息:', event);
       const data = event.data;
       console.log('接收到的 data 是:', data);
-      // 1. 检查数据结构和来源 (可选但推荐)
-      // const expectedOrigin = 'https://console.vcp.baidu.com';
-      // if (event.origin !== expectedOrigin) {
-      //   console.warn('Received message from unexpected origin:', event.origin);
-      //   return;
-      // }
 
       // 2. 检查是否存在 refundInfo 和 uuidList
       if (data && data.refundInfo && Array.isArray(data.refundInfo.uuidList) && data.refundInfo.uuidList.length > 0) {
         const uuidListArray = data.refundInfo.uuidList; // 这是一个数组
 
-        // 3. 提取订单ID (这里假设取第一个，或者根据需要处理整个数组)
-        // 如果只需要一个订单ID进行退订
-        const orderId = uuidListArray;
-        // 如果需要处理多个订单ID，可以用逗号连接
-        // const orderId = uuidListArray.join(',');
-
-        console.log('提取到的订单ID:', orderId);
+        console.log('提取到的订单ID:', uuidListArray);
 
         // 4. 获取用户ID
         this.userid = sessionStorage.getItem('userId');
@@ -91,7 +80,7 @@ export default {
 
         // 5. 构造请求参数
         const payload = {
-          order_id: orderId,
+          order_id: uuidListArray,
           userid: this.userid
         };
 
@@ -104,9 +93,9 @@ export default {
             console.log("调用 reqBaiduJudgePrice 接口返回:", res);
             if (res.status) { // 假设 status 为 true 表示成功
               this.$message.success('退订成功');
-              // 跳转页面
+              // 修复页面跳转 - 使用 path 而不是 url
               this.$router.push({
-                url: '/BaiduNetdisk',
+                path: '/BaiduNetdisk',
               });
             } else {
               // 显示后端返回的错误信息
@@ -124,7 +113,6 @@ export default {
           });
       } else {
         console.log('接收到的消息不包含有效的退款信息或 uuidList 为空');
-        // 根据需要决定是否提示用户
       }
     }
   }
@@ -137,11 +125,19 @@ export default {
   height: 100%;
 }
 
+.loading-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.login-prompt {
+  text-align: center;
+  padding: 50px;
+}
+
 .baidu-style {
   width: 100%;
   height: calc(100vh - 100px);
 }
 </style>
-
-
-