main #34
@ -1,12 +1,47 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<!-- 实名认证通知 -->
|
||||
<div v-if="showAuthNotification" class="auth-notification-container">
|
||||
<!-- 展开状态：完整提示窗口 -->
|
||||
<div v-show="isNotificationExpanded" class="notification-card">
|
||||
<div class="notification-header">
|
||||
<div class="notification-title">
|
||||
<i class="notification-icon el-icon-warning"></i>
|
||||
<span>实名认证提示</span>
|
||||
</div>
|
||||
<button class="collapse-btn" @click="toggleNotification" aria-label="收起提示">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="notification-content">
|
||||
<p>您当前还没有完成实名认证，部分功能可能受限。请先完成<span class="link-text" @click="goToAuth">实名认证</span>，以确保正常使用所有服务。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收起状态：简化按钮 -->
|
||||
<div v-show="!isNotificationExpanded" class="notification-minimized" @click="toggleNotification">
|
||||
<div class="minimized-content">
|
||||
<i class="minimized-icon el-icon-warning"></i>
|
||||
<span>实名认证</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加全屏加载效果 -->
|
||||
<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">
|
||||
<div class="prompt-content">
|
||||
<i class="el-icon-warning prompt-icon"></i>
|
||||
<p>请先登录百度云账号</p>
|
||||
<button @click="getToken">重试</button>
|
||||
<button @click="getToken" class="retry-btn">重试</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -15,6 +50,7 @@
|
||||
<script>
|
||||
import { baiducloudAPI } from '@/api/BaiDuTokenapi'
|
||||
import { reqBaiduJudgePrice, reqConfirmBtn } from '@/api/baidu'
|
||||
import { reqIsReallyPeople } from '@/api/baidu' // 引入实名认证检查API
|
||||
|
||||
export default {
|
||||
name: 'baiduProductShow',
|
||||
@ -24,9 +60,12 @@ export default {
|
||||
url: '',
|
||||
loading: true,
|
||||
userid: '',
|
||||
showAuthNotification: false, // 控制是否显示实名认证通知
|
||||
isNotificationExpanded: true, // 控制通知是展开还是收起状态
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.checkRealNameAuth();
|
||||
await this.getToken();
|
||||
},
|
||||
mounted() {
|
||||
@ -36,6 +75,38 @@ export default {
|
||||
window.removeEventListener('message', this.receiveMessage, false);
|
||||
},
|
||||
methods: {
|
||||
// 检查实名认证状态
|
||||
async checkRealNameAuth() {
|
||||
try {
|
||||
this.userid = sessionStorage.getItem('userId');
|
||||
if (!this.userid) {
|
||||
console.warn('未获取到用户ID，无法检查实名认证状态');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await reqIsReallyPeople({user_id: this.userid});
|
||||
// 假设API返回res.status为true表示已实名认证，false表示未实名认证
|
||||
this.showAuthNotification = !response.status;
|
||||
|
||||
if (!response.status) {
|
||||
console.log('用户未完成实名认证，显示通知');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查实名认证状态失败:', error);
|
||||
// 出错时默认不显示通知，避免干扰用户体验
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到实名认证页面
|
||||
goToAuth() {
|
||||
window.open('https://console.vcp.baidu.com/qualify/#/qualify/index', '_blank');
|
||||
},
|
||||
|
||||
// 切换通知展开/收起状态
|
||||
toggleNotification() {
|
||||
this.isNotificationExpanded = !this.isNotificationExpanded;
|
||||
},
|
||||
|
||||
// 获取百度云token
|
||||
async getToken() {
|
||||
try {
|
||||
@ -120,7 +191,8 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
padding: 10px;
|
||||
height:calc(100vh - 100px);
|
||||
height: calc(100vh - 100px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
@ -131,12 +203,197 @@ export default {
|
||||
|
||||
.login-prompt {
|
||||
height: calc(100vh - 100px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.prompt-content {
|
||||
max-width: 300px;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
background: #f8f9fa;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.prompt-icon {
|
||||
font-size: 48px;
|
||||
color: #ffc107;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.prompt-content p {
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
.baidu-style {
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
/* 实名认证通知容器 */
|
||||
.auth-notification-container {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1000;
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
/* 通知卡片样式 */
|
||||
.notification-card {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
|
||||
border: 1px solid #e8e8e8;
|
||||
overflow: hidden;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 通知头部 */
|
||||
.notification-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.notification-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
color: #FFBA00;
|
||||
margin-right: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
/* 通知内容 */
|
||||
.notification-content {
|
||||
padding: 16px 20px 20px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-text {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
margin: 0 4px;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #40a9ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* 收起状态样式 */
|
||||
.notification-minimized {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e8e8e8;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.minimized-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.minimized-icon {
|
||||
color: #FFBA00;
|
||||
margin-right: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.auth-notification-container {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.notification-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.notification-header {
|
||||
padding: 12px 16px 8px;
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
padding: 12px 16px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,25 +5,43 @@
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||||
<iframe :src="url" v-if="flag"></iframe>
|
||||
<div v-if="isAllShow" style="font-size: 16px">
|
||||
<div class="windowTip" v-show="isShowWindow">
|
||||
<span class="title-word"><i style="color: #FFBA00;margin-right: 5px" class="el-icon-warning"></i>提示</span>
|
||||
<img @click="zheBtn" class="zheStyle" src="./svg/展开向右开.svg" alt="">
|
||||
<span style="margin-top: 12px; text-indent: 2em; display: inline-block;line-height: 1.5;">
|
||||
您当前还没有进行实名认证，请先进行
|
||||
<span class="linkStyle" @click="goConfigPeople">实名认证</span>
|
||||
！
|
||||
</span>
|
||||
|
||||
<!-- 实名认证提示弹窗 -->
|
||||
<div v-if="isAllShow" class="auth-notification-container">
|
||||
<!-- 展开状态：完整提示窗口 -->
|
||||
<div v-show="isShowWindow" class="notification-card">
|
||||
<div class="notification-header">
|
||||
<div class="notification-title">
|
||||
<i class="notification-icon el-icon-warning"></i>
|
||||
<span>提示</span>
|
||||
</div>
|
||||
<button class="collapse-btn" @click="zheBtn" aria-label="收起提示">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="notification-content">
|
||||
<p>您当前还没有进行实名认证，请先进行<span class="link-text" @click="goConfigPeople">实名认证</span>！</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收起状态：简化按钮 -->
|
||||
<div v-show="!isShowWindow" class="notification-minimized" @click="zhanBtn">
|
||||
<div class="minimized-content">
|
||||
<i class="minimized-icon el-icon-warning"></i>
|
||||
<span>实名认证</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-show="!isShowWindow" class="zhanStyle" @click="zhanBtn">
|
||||
<img style="padding: 0 5px" src="./svg/展开向左开.svg" alt="">
|
||||
<span>实名</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 脚本部分保持不变
|
||||
import {reqBaiduToken} from "@/api/baidu/login";
|
||||
import {mapState} from "vuex";
|
||||
import {reqBaiduJudgePrice, reqBaiduOrderCost, reqIsReallyPeople} from "@/api/baidu";
|
||||
@ -47,21 +65,16 @@ export default {
|
||||
reqIsReallyPeople({user_id: this.userid}).then(res => {
|
||||
this.isShowReallyBtn = !res.status;
|
||||
if (!res.status) {
|
||||
// this.open2()
|
||||
this.isShowWindow = true
|
||||
this.isAllShow = true
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// this.openFullScreen2()
|
||||
|
||||
let resultUrlLast = 'https://console.vcp.baidu.com/api/loginvcp/login/securitytoken?'
|
||||
reqBaiduToken({userid: this.userid}).then(res => {
|
||||
if (res.status) {
|
||||
this.baiduToken = res.data
|
||||
resultUrlLast = resultUrlLast + '&redirectUrl=' + encodeURIComponent(localStorage.getItem('redirectUrl')) + '&signinSecurityToken=' + encodeURIComponent(res.data)
|
||||
// this.$message.success('获取回调成功')
|
||||
this.url = resultUrlLast
|
||||
console.log('iframeurl', resultUrlLast)
|
||||
this.flag = true
|
||||
@ -70,12 +83,7 @@ export default {
|
||||
}
|
||||
})
|
||||
|
||||
// this.url = 'https://my.oschina.net/hongjiang/blog/3224875'
|
||||
// this.flag = true
|
||||
// window.addEventListener('message', this.handleMessage);
|
||||
window.addEventListener('message', this.receiveMessage, false);
|
||||
|
||||
|
||||
},
|
||||
activated() {
|
||||
|
||||
@ -93,7 +101,6 @@ export default {
|
||||
goToAuthentication() {
|
||||
console.log("回调方法执行了")
|
||||
},
|
||||
//未实名认证信息 点击实名认证去www.baidu.com
|
||||
open1() {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
@ -110,14 +117,8 @@ export default {
|
||||
});
|
||||
},
|
||||
receiveMessage(event) {
|
||||
// if (event.origin !== "https://example.com") {
|
||||
// // 确保消息来自预期的源
|
||||
// return;
|
||||
// }
|
||||
// console.log("iframe中的event是", event);
|
||||
const data = event.data;
|
||||
if (data && data.orderInfo && data.orderInfo.orderId) {
|
||||
// 检查接收到的数据是否包含 orderId 或者 orderIdList
|
||||
this.loading = true
|
||||
|
||||
const orderId = data.orderInfo.orderId
|
||||
@ -129,10 +130,6 @@ export default {
|
||||
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: {
|
||||
@ -141,30 +138,13 @@ export default {
|
||||
}
|
||||
})
|
||||
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
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
goConfigPeople() {
|
||||
@ -184,65 +164,161 @@ export default {
|
||||
.baidu-product-style {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.c {
|
||||
color: blue;
|
||||
/* 实名认证通知容器 */
|
||||
.auth-notification-container {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1000;
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
.windowTip {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
width: 330px;
|
||||
padding: 14px 26px 14px 13px;
|
||||
border-radius: 8px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e6ebf5;
|
||||
/* 通知卡片样式 */
|
||||
.notification-card {
|
||||
background: pink;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
|
||||
border: 1px solid #e8e8e8;
|
||||
overflow: hidden;
|
||||
background-color: white;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.title-word {
|
||||
width: 100%;
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.linkStyle {
|
||||
color: blue;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.zheStyle {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zhanStyle {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 25px;
|
||||
cursor: pointer;
|
||||
/* 通知头部 */
|
||||
.notification-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #dddd;
|
||||
border-radius: 5px;
|
||||
padding: 16px 20px 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.notification-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
color: #FFBA00;
|
||||
margin-right: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
/* 通知内容 */
|
||||
.notification-content {
|
||||
padding: 16px 20px 20px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-text {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
margin: 0 4px;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #40a9ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* 收起状态样式 */
|
||||
.notification-minimized {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e8e8e8;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.minimized-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.minimized-icon {
|
||||
color: #FFBA00;
|
||||
margin-right: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.auth-notification-container {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.notification-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.notification-header {
|
||||
padding: 12px 16px 8px;
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
padding: 12px 16px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user