退订管理添加逻辑

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

@@ -1,22 +1,111 @@
 <template>
-  <div class="box">
+  <div
-    <iframe src="https://console.vcp.baidu.com/billing/#/refund/list" frameborder="0" class="baidu-style"></iframe>
+    class="baidu-unsubscribe-style"
+    v-loading="loading" element-loading-text="退订处理中，请稍后···"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)">
+    <iframe :src="url" v-if="flag" frameborder="0" class="baidu-style"></iframe>
   </div>
 </template>
 
 <script>
-  export default {
+import {reqBaiduToken} from "@/api/baidu/login";
+import {reqBaiduJudgePrice, reqIsReallyPeople} from "@/api/baidu";
 
+export default {
+  name: "BaiduNetdiskUnsubscribe",
+  data() {
+    return {
+      loading: false,
+      url: '',
+      flag: false,
+      userid: '',
+      isShowWindow: true,
+      isAllShow: false
+    }
+  },
+  mounted() {
+    this.userid = sessionStorage.getItem('userId')
+    
+    // 检查实名认证状态
+    reqIsReallyPeople({user_id: this.userid}).then(res => {
+      if (!res.status) {
+        this.isShowWindow = true
+        this.isAllShow = true
+        this.$message.warning('您当前还没有进行实名认证，请先进行实名认证后再进行退订操作')
+      }
+    })
+
+    // 获取token并构建退订页面URL
+    let resultUrlLast = 'https://console.vcp.baidu.com/api/loginvcp/login/securitytoken?'
+    reqBaiduToken({userid: this.userid}).then(res => {
+      if (res.status) {
+        this.baiduToken = res.data
+        // 退订页面的重定向URL
+        const unsubscribeUrl = 'https://console.vcp.baidu.com/billing/#/refund/list'
+        resultUrlLast = resultUrlLast + '&redirectUrl=' + encodeURIComponent(unsubscribeUrl) + '&signinSecurityToken=' + encodeURIComponent(res.data)
+        this.url = resultUrlLast
+        console.log('退订页面iframeurl', resultUrlLast)
+        this.flag = true
+      } else {
+        this.$message.error('获取token失败！')
+      }
+    })
+
+    // 监听来自iframe的消息
+    window.addEventListener('message', this.receiveMessage, false);
+  },
+  beforeDestroy() {
+    this.flag = false
+    window.removeEventListener('message', this.receiveMessage, false);
+  },
+  methods: {
+    receiveMessage(event) {
+      const data = event.data;
+      if (data && data.orderInfo && data.orderInfo.orderId) {
+        // 处理退订订单信息
+        this.loading = true
+        
+        const orderId = data.orderInfo.orderId
+        console.log('接收到退订订单ID:', orderId);
+        
+        let ploay = {
+          order_id: orderId,
+          userid: this.userid
+        }
+        
+        // 调用退订价格判断接口
+        reqBaiduJudgePrice(ploay).then((res) => {
+          console.log("退订接口返回:", res)
+          this.loading = false
+          
+          if (res.status) {
+            this.$message.success('退订申请提交成功')
+            // 可以在这里添加退订成功后的处理逻辑
+            // 例如刷新页面或跳转到其他页面
+          } else {
+            this.$message.error(res.msg || '退订申请提交失败')
+          }
+        }).catch(error => {
+          this.loading = false
+          this.$message.error('退订处理失败，请稍后重试')
+          console.error('退订处理错误:', error)
+        })
+      }
+    }
+  }
 }
 </script>
 
 <style lang="less" scoped>
-.box{
+.baidu-unsubscribe-style {
-  padding: 10px;
+  width: 100%;
+  height: 100%;
   
-}
   .baidu-style {
     width: 100%;
     height: calc(100vh - 100px);
+    border: none;
+  }
 }
 </style>