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

@@ -1,12 +1,31 @@
 <template>
   <div class="box">
-    <!-- 添加全屏加载效果 -->
+    <!-- 使用全屏加载效果 -->
-    <div v-loading="loading" class="loading-container">
+    <div v-loading="loading"
-      <iframe v-if="url" :src="url" frameborder="0" class="baidu-style">
+         element-loading-text="页面加载中..."
+         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">
+
-        <p>请先登录百度云账号</p>
+      <div v-if="!url && !loading" class="login-prompt">
-        <button @click="getToken">重试</button>
+        <el-alert
+          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>
@@ -24,6 +43,7 @@ export default {
       url: '',
       loading: true,
       userid: '',
+      iframeLoading: false // 单独控制iframe加载状态
     }
   },
   async created() {
@@ -40,8 +60,11 @@ 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');
@@ -55,64 +78,81 @@ export default {
         console.error('获取百度云Token失败:', error);
         this.$message.error('网络错误，获取登录信息失败');
       } finally {
-        this.loading = false;
+        // 这里不立即关闭loading，等待iframe加载
       }
     },
 
+    // iframe加载完成回调
+    onIframeLoad() {
+      console.log('iframe加载完成');
+      this.loading = false;
+      this.iframeLoading = false;
+    },
+
     receiveMessage(event) {
       console.log('接收到消息:', event);
       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 (sessionStorage 中缺少 userId)');
+          console.error('未获取到用户ID');
           this.$message.error('用户信息获取失败，请重新登录');
           return;
         }
 
-        // 5. 构造请求参数
         const payload = {
           order_id: uuidListArray,
           userid: this.userid
         };
 
-        // 6. 显示加载状态
+        // 显示退订操作的加载状态
-        this.loading = true;
+        const loadingInstance = this.$loading({
+          lock: true,
+          text: '退订处理中...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
 
-        // 7. 调用退订API
         reqConfirmBtn(payload)
           .then((res) => {
-            console.log("调用 reqBaiduJudgePrice 接口返回:", res);
+            console.log("退订接口返回:", res);
-            if (res.status) { // 假设 status 为 true 表示成功
+            if (res.status) {
               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);
-            console.error("调用退订接口 reqBaiduJudgePrice 失败 (网络/请求错误):", error);
+            this.$message.error('网络请求失败，请检查网络连接后重试');
-            this.$message.error('网络请求失败或服务异常，请检查网络连接后重试');
           })
           .finally(() => {
-            // 无论成功或失败，都结束加载状态
+            loadingInstance.close();
-            this.loading = false;
           });
       } else {
-        console.log('接收到的消息不包含有效的退款信息或 uuidList 为空');
+        console.log('接收到的消息不包含有效的退款信息');
       }
     }
   }
@@ -123,21 +163,44 @@ 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,8 +907,7 @@ export default Vue.extend({
       justify-content: center;
       align-items: center;
       background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
-      border-radius: 10px;
+      border-radius: 12px 12px 12px 12px;
-      padding: 6px 10px;
       color: white;
 
       &:hover {