main #34
@ -1,31 +1,12 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<!-- 使用全屏加载效果 -->
|
||||
<div v-loading="loading"
|
||||
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">
|
||||
<!-- 添加全屏加载效果 -->
|
||||
<div v-loading="loading" class="loading-container">
|
||||
<iframe v-if="url" :src="url" frameborder="0" class="baidu-style">
|
||||
</iframe>
|
||||
|
||||
<div v-if="!url && !loading" class="login-prompt">
|
||||
<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 v-else class="login-prompt">
|
||||
<p>请先登录百度云账号</p>
|
||||
<button @click="getToken">重试</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,81 +55,64 @@ export default {
|
||||
console.error('获取百度云Token失败:', error);
|
||||
this.$message.error('网络错误，获取登录信息失败');
|
||||
} finally {
|
||||
// 这里不立即关闭loading，等待iframe加载
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 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');
|
||||
console.error('未获取到用户ID (sessionStorage 中缺少 userId)');
|
||||
this.$message.error('用户信息获取失败，请重新登录');
|
||||
return;
|
||||
}
|
||||
|
||||
// 5. 构造请求参数
|
||||
const payload = {
|
||||
order_id: uuidListArray,
|
||||
userid: this.userid
|
||||
};
|
||||
|
||||
// 显示退订操作的加载状态
|
||||
const loadingInstance = this.$loading({
|
||||
lock: true,
|
||||
text: '退订处理中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
// 6. 显示加载状态
|
||||
this.loading = true;
|
||||
|
||||
// 7. 调用退订API
|
||||
reqConfirmBtn(payload)
|
||||
.then((res) => {
|
||||
console.log("退订接口返回:", res);
|
||||
if (res.status) {
|
||||
console.log("调用 reqBaiduJudgePrice 接口返回:", res);
|
||||
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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user