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

@@ -1,31 +1,12 @@
 <template>
   <div class="box">
-    <!-- 使用全屏加载效果 -->
+    <!-- 添加全屏加载效果 -->
-    <div v-loading="loading"
+    <div v-loading="loading" class="loading-container">
-         element-loading-text="页面加载中..."
+      <iframe v-if="url" :src="url" frameborder="0" class="baidu-style">
-         element-loading-spinner="el-icon-loading"
-         element-loading-background="rgba(255, 255, 255, 0.8)"
-         class="loading-container">
-
-      <iframe
-        v-if="url && !loading"
-        :src="url"
-        frameborder="0"
-        class="baidu-style"
-        @load="onIframeLoad">
       </iframe>
-
+      <div v-else class="login-prompt">
-      <div v-if="!url && !loading" class="login-prompt">
+        <p>请先登录百度云账号</p>
-        <el-alert
+        <button @click="getToken">重试</button>
-          title="登录提示"
-          description="请先登录百度云账号"
-          type="warning"
-          show-icon
-          :closable="false">
-        </el-alert>
-        <el-button type="primary" @click="getToken" style="margin-top: 20px;">
-          重新获取登录信息
-        </el-button>
       </div>
     </div>
   </div>
@@ -43,7 +24,6 @@ export default {
       url: '',
       loading: true,
       userid: '',
-      iframeLoading: false // 单独控制iframe加载状态
     }
   },
   async created() {
@@ -60,11 +40,8 @@ export default {
     async getToken() {
       try {
         this.loading = true;
-        this.url = ''; // 清空url，避免显示旧的iframe
-
         const response = await baiducloudAPI();
         this.userToken = response.data;
-
         if (this.userToken) {
           const baseUrl = 'https://console.vcp.baidu.com/api/loginvcp/login/securitytoken';
           const redirectUrl = encodeURIComponent('https://console.vcp.baidu.com/billing/#/refund/list');
@@ -78,15 +55,8 @@ export default {
         console.error('获取百度云Token失败:', error);
         this.$message.error('网络错误，获取登录信息失败');
       } finally {
-        // 这里不立即关闭loading，等待iframe加载
-      }
-    },
-
-    // iframe加载完成回调
-    onIframeLoad() {
-      console.log('iframe加载完成');
         this.loading = false;
-      this.iframeLoading = false;
+      }
     },
 
     receiveMessage(event) {
@@ -94,65 +64,55 @@ export default {
       const data = event.data;
       console.log('接收到的 data 是:', data);
 
+      // 2. 检查是否存在 refundInfo 和 uuidList
       if (data && data.refundInfo && Array.isArray(data.refundInfo.uuidList) && data.refundInfo.uuidList.length > 0) {
-        const uuidListArray = data.refundInfo.uuidList;
+        const uuidListArray = data.refundInfo.uuidList; // 这是一个数组
 
         console.log('提取到的订单ID:', uuidListArray);
 
+        // 4. 获取用户ID
         this.userid = sessionStorage.getItem('userId');
         if (!this.userid) {
-          console.error('未获取到用户ID');
+          console.error('未获取到用户ID (sessionStorage 中缺少 userId)');
           this.$message.error('用户信息获取失败，请重新登录');
           return;
         }
 
+        // 5. 构造请求参数
         const payload = {
           order_id: uuidListArray,
           userid: this.userid
         };
 
-        // 显示退订操作的加载状态
+        // 6. 显示加载状态
-        const loadingInstance = this.$loading({
+        this.loading = true;
-          lock: true,
-          text: '退订处理中...',
-          spinner: 'el-icon-loading',
-          background: 'rgba(0, 0, 0, 0.7)'
-        });
 
+        // 7. 调用退订API
         reqConfirmBtn(payload)
           .then((res) => {
-            console.log("退订接口返回:", res);
+            console.log("调用 reqBaiduJudgePrice 接口返回:", res);
-            if (res.status) {
+            if (res.status) { // 假设 status 为 true 表示成功
               this.$message.success('退订成功');
+              // 修复页面跳转 - 使用 path 而不是 url
               this.$router.push({
                 path: '/BaiduNetdisk',
               });
-
-              // 修复页面跳转 - 使用 path 而不是 url
-              // this.$router.push({
-              //   path: '/customer/unsubscribe/BaiduNetdisk',
-              // });
-              // 强制刷新整个页面
-              if (this.$router) {
-                this.$router.go(0); // 使用 Vue Router 的方法刷新页面
-              } else {
-                window.location.reload(); // 备用方案，直接刷新页面
-              }
-
-
             } else {
+              // 显示后端返回的错误信息
               this.$message.error(res.msg || '退订失败，请稍后重试');
             }
           })
           .catch((error) => {
-            console.error("退订接口调用失败:", error);
+            // 捕获网络错误或请求异常 (如超时、连接失败)
-            this.$message.error('网络请求失败，请检查网络连接后重试');
+            console.error("调用退订接口 reqBaiduJudgePrice 失败 (网络/请求错误):", error);
+            this.$message.error('网络请求失败或服务异常，请检查网络连接后重试');
           })
           .finally(() => {
-            loadingInstance.close();
+            // 无论成功或失败，都结束加载状态
+            this.loading = false;
           });
       } else {
-        console.log('接收到的消息不包含有效的退款信息');
+        console.log('接收到的消息不包含有效的退款信息或 uuidList 为空');
       }
     }
   }
@@ -163,44 +123,21 @@ export default {
 .box {
   padding: 10px;
   height: 100%;
-  position: relative;
 }
 
 .loading-container {
   width: 100%;
   height: 100%;
   position: relative;
-  min-height: 400px;
 }
 
 .login-prompt {
   text-align: center;
   padding: 50px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
 }
 
 .baidu-style {
   width: 100%;
   height: calc(100vh - 100px);
-  border: none;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-// 自定义加载样式
-::v-deep .el-loading-spinner {
-  .el-icon-loading {
-    color: #409EFF;
-    font-size: 40px;
-  }
-  .el-loading-text {
-    color: #409EFF;
-    font-size: 16px;
-    margin-top: 10px;
-  }
 }
 </style>

f/web-kboss/src/views/homePage/components/topBox/index.vue

@@ -907,7 +907,8 @@ export default Vue.extend({
       justify-content: center;
       align-items: center;
       background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
-      border-radius: 12px 12px 12px 12px;
+      border-radius: 10px;
+      padding: 6px 10px;
       color: white;
 
       &:hover {