uptada BaiDuYun
This commit is contained in:
parent
ea954613f3
commit
0312ae479f
@ -1,81 +1,62 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div v-if="loading">正在加载...</div>
|
<div v-if="loading">正在加载...</div>
|
||||||
<iframe v-else-if="url" :src="url" frameborder="0" class="baidu-style" ref="baiduIframe">
|
<iframe v-else-if="url" :src="url" frameborder="0" class="baidu-style">
|
||||||
</iframe>
|
</iframe>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<p>无法加载内容,请检查配置。</p>
|
<p>请先登录百度云账号</p>
|
||||||
<button @click="getToken">重试</button>
|
<button @click="getToken">重试</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { baiducloudAPI, cancelCallbackAPI } from '@/api/BaiDuTokenapi'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'BaiduProductShow',
|
name: 'baiduProductShow',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
userToken: '',
|
userToken: '',
|
||||||
url: '',
|
url: '',
|
||||||
loading: true,
|
loading: true,
|
||||||
// 模拟 session storage 中的 userId
|
}
|
||||||
userid: 'USER_001'
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
async created() {
|
async created() {
|
||||||
// 模拟从 sessionStorage 获取 userId
|
|
||||||
// this.userid = sessionStorage.getItem('userId') || 'DEFAULT_USER';
|
|
||||||
await this.getToken();
|
await this.getToken();
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted(){
|
||||||
window.addEventListener('message', this.receiveMessage, false);
|
window.addEventListener('message', this.receiveMessage, false);
|
||||||
},
|
},
|
||||||
beforeDestroy() { // Vue 2 中使用 beforeDestroy
|
destroyed() {
|
||||||
window.removeEventListener('message', this.receiveMessage, false);
|
window.removeEventListener('message', this.receiveMessage, false);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取模拟的百度云token
|
// 点击退订返回个信息 拿着信息请求 百度回调
|
||||||
|
// 获取百度云token
|
||||||
async getToken() {
|
async getToken() {
|
||||||
try {
|
try {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
const response = await mockBaiducloudAPI();
|
const response = await baiducloudAPI();
|
||||||
this.userToken = response.data;
|
this.userToken = response.data;
|
||||||
console.log('获取到模拟Token:', this.userToken);
|
let resultUrlLast = 'https://console.vcp.baidu.com/api/loginvcp/login/securitytoken?'
|
||||||
|
|
||||||
if (this.userToken) {
|
if (this.userToken) {
|
||||||
// 使用一个公开的、安全的测试 iframe URL 作为示例
|
// 构建最终的 URL
|
||||||
const baseUrl = 'https://example.com'; // 请替换为你的实际百度云页面URL
|
resultUrlLast = resultUrlLast + '&redirectUrl=' + encodeURIComponent('https://console.vcp.baidu.com/billing/#/refund/list') + '&signinSecurityToken=' + encodeURIComponent(this.userToken)
|
||||||
const redirectUrl = encodeURIComponent(`${baseUrl}/billing/#/refund/list`);
|
this.url = resultUrlLast
|
||||||
const token = encodeURIComponent(this.userToken);
|
|
||||||
|
|
||||||
// 构建最终的 URL (请根据实际百度云要求调整参数)
|
|
||||||
this.url = `${baseUrl}/api/loginvcp/login/securitytoken?redirectUrl=${redirectUrl}&signinSecurityToken=${token}`;
|
|
||||||
console.log('构建的 iframe URL:', this.url);
|
|
||||||
} else {
|
} else {
|
||||||
console.error('未能从API响应中获取到token:', response);
|
console.error('未能从API响应中获取到token:', response);
|
||||||
this.url = ''; // 确保 url 为空,以便显示错误信息
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取Token失败:', error);
|
console.error('获取百度云Token失败:', error);
|
||||||
this.url = ''; // 出错时也清空 URL
|
|
||||||
} finally {
|
} finally {
|
||||||
// 注意:这里我们不立即设置 loading = false,
|
|
||||||
// 因为 iframe 加载完成还需要时间。
|
|
||||||
// 可以通过监听 iframe 的 load 事件来更精确地控制。
|
|
||||||
// 为简化,我们稍后用 setTimeout 模拟加载完成。
|
|
||||||
setTimeout(() => {
|
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
}, 1500); // 模拟加载时间
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
receiveMessage(event) {
|
receiveMessage(event) {
|
||||||
// if (event.origin !== "https://example.com") {
|
console.log('接收到消息:', event);
|
||||||
// // 确保消息来自预期的源
|
|
||||||
// return;
|
this.userid = sessionStorage.getItem('userId')
|
||||||
// }
|
|
||||||
// console.log("iframe中的event是", event);
|
|
||||||
const data = event.data;
|
const data = event.data;
|
||||||
if (data && data.orderInfo && data.orderInfo.orderId) {
|
if (data && data.orderInfo && data.orderInfo.orderId) {
|
||||||
// 检查接收到的数据是否包含 orderId 或者 orderIdList
|
// 检查接收到的数据是否包含 orderId 或者 orderIdList
|
||||||
@ -87,63 +68,23 @@ export default {
|
|||||||
order_id: orderId,
|
order_id: orderId,
|
||||||
userid: this.userid
|
userid: this.userid
|
||||||
}
|
}
|
||||||
reqBaiduJudgePrice(ploay).then((res) => {
|
|
||||||
console.log("二级接口是", res)
|
|
||||||
if (res.status) {
|
|
||||||
// let lastPloay = {
|
|
||||||
// orderid: res.orderid,
|
|
||||||
// product_url: this.$route.params.listUrl ? this.$route.params.listUrl : localStorage.getItem('userRescourseUrl')
|
|
||||||
// }
|
|
||||||
this.$router.push({
|
|
||||||
name: 'userResource',
|
|
||||||
params: {
|
|
||||||
listUrl: this.$route.params.listUrl,
|
|
||||||
url: this.$route.params.url
|
|
||||||
}
|
}
|
||||||
|
cancelCallbackAPI(ploay).then((res) => {
|
||||||
|
console.log(res);
|
||||||
})
|
})
|
||||||
this.$message.success('购买成功')
|
|
||||||
// reqBaiduOrderCost(lastPloay).then(res => {
|
|
||||||
// if (res.status) {
|
|
||||||
// this.loading = false
|
|
||||||
// this.$message.success('购买成功')
|
|
||||||
// this.$router.push({
|
|
||||||
// name: 'userResource',
|
|
||||||
// params: {
|
|
||||||
// listUrl: this.$route.params.listUrl,
|
|
||||||
// url: this.$route.params.url
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// })
|
|
||||||
} else {
|
|
||||||
this.loading = false
|
|
||||||
this.$message.error(res.msg)
|
|
||||||
}
|
}
|
||||||
})
|
|
||||||
// 在这里处理接收到的订单ID
|
|
||||||
const orderLog = data
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.box {
|
.box {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border: 1px solid #ccc; // 为了可视化容器
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.baidu-style {
|
.baidu-style {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 100px);
|
height: calc(100vh - 100px);
|
||||||
border: 2px dashed #007bff; // 虚线边框表示 iframe 区域
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user