updata

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

@@ -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">
-        <p>请先登录百度云账号</p>
+        <div class="prompt-content">
-        <button @click="getToken">重试</button>
+          <i class="el-icon-warning prompt-icon"></i>
+          <p>请先登录百度云账号</p>
+          <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>

f/web-kboss/src/views/product/productHome/baiduProductShow/index.vue

@@ -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>
+    <div v-if="isAllShow" class="auth-notification-container">
-        <img @click="zheBtn" class="zheStyle" src="./svg/展开向右开.svg" alt="">
+      <!-- 展开状态：完整提示窗口 -->
-        <span style="margin-top: 12px; text-indent: 2em;  display: inline-block;line-height: 1.5;">
+      <div v-show="isShowWindow" class="notification-card">
-         您当前还没有进行实名认证，请先进行
+        <div class="notification-header">
-         <span class="linkStyle" @click="goConfigPeople">实名认证</span>
+          <div class="notification-title">
-         ！
+            <i class="notification-icon el-icon-warning"></i>
-       </span>
+            <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="zhanStyle" @click="zhanBtn">
+
-        <img style="padding: 0 5px" src="./svg/展开向左开.svg" alt="">
+      <!-- 收起状态：简化按钮 -->
-        <span>实名</span>
+      <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>
     </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;
+.notification-card {
-  justify-content: center;
+  background: pink;
-  align-items: center;
+  border-radius: 12px;
-  flex-direction: column;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
-  position: absolute;
+  border: 1px solid #e8e8e8;
-  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;
   overflow: hidden;
-  background-color: white;
+  animation: slideIn 0.3s ease-out;
 }
 
-.title-word {
+@keyframes slideIn {
-  width: 100%;
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
-.linkStyle {
+/* 通知头部 */
-  color: blue;
+.notification-header {
-  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;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  background-color: #dddd;
+  padding: 16px 20px 12px;
-  border-radius: 5px;
+  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>