facebook渲染卡片

src/logic/content/ParseCard.js

@@ -132,7 +132,7 @@ class ParseCard {
         let json_data = []
         this.parseFaceBookCard().forEach((item) => {
             let _obj = this.parseFaceBookParmas(item.dom)
-            if (_obj.tweet_Id && _obj.short_url && _obj.dom_card) {
+            if (_obj.short_url && _obj.dom_card) {
                 _obj.time = item.time
                 json_data.push(_obj)
             }
@@ -194,10 +194,14 @@ class ParseCard {
         return _array
     }
 
-    createIframe({ post_Id, tweet_Id, tweet_author }, if_center = false) {
+    createIframe({ post_Id = '', tweet_Id = '', tweet_author = '' }, if_center = false) {
         let _iframe = document.createElement('iframe')
+        let tweet_str = '';
+        if (tweet_Id) {
+            tweet_str = `&tweetId=${tweet_Id}`;
+        }
         _iframe.id = post_Id
-        _iframe.src = chrome.runtime.getURL('/iframe/red-packet.html') + `?postId=${post_Id}&tweetId=${tweet_Id}&tweet_author=${tweet_author}&window_origin=${window.location.origin}`;
+        _iframe.src = chrome.runtime.getURL('/iframe/red-packet.html') + `?postId=${post_Id}${tweet_str}&tweet_author=${tweet_author}&window_origin=${window.location.origin}`;
         _iframe.style.cssText = 'border:medium none; width:375px; min-height:500px;'
         if (if_center) {
             _iframe.style.cssText = 'border:medium none; width:375px; min-height:500px; display:block; margin:auto;'
@@ -320,7 +324,7 @@ class ParseCard {
             let originUrl = new URL(short_url);
             let post_Id = originUrl.pathname.slice(1);
 
-            dom.appendChild(this.createIframe({ post_Id, tweet_Id, tweet_author }, true))
+            dom.appendChild(this.createIframe({ post_Id, tweet_author }, true))
         }
     }
 }

src/view/iframe/red-packet/red-packet.vue

@@ -353,6 +353,10 @@
       <img :src="require('@/assets/svg/icon-loading.svg')" alt />
     </div>
 
+    <div v-show="state.loading_redbag" class="redbag">
+      <img :src="require('@/assets/img/icon-loading-redbag.gif')" alt />
+    </div>
+
   </div>
   <div style="width: 100%; height: 30px; position: fixed; color: red; top:0;" v-if="state.process_mode != 'production'">
     {{ state.detail.validity }}</div>
@@ -391,7 +395,8 @@ let facebookAppConfig = {
 
 let state = reactive({
   status: '',
-  loading_show: true,
+  loading_show: false,
+  loading_redbag: true,
   detail: {},
   luck_list_end: false,
   page_index: 1,
@@ -1029,6 +1034,8 @@ function init(initParams) {
       }
       state.detail = JSON.parse(res.data.postBizData)
       state.detail.taskCondition = state.detail.taskCondition || []
+      state.tweetId = state.srcContentId;
+      state.tweet_author = state.detail.postUserInfo && state.detail.postUserInfo.nickName || '';
       // 不要删除这个console
       console.log('postBizData',state.detail)
       checkFacebookReply();
@@ -1036,6 +1043,8 @@ function init(initParams) {
     } else {
       handleErrorCode(res)
     }
+  }).finally(() => {
+      state.loading_redbag = false
   })
 }
 
@@ -1159,9 +1168,11 @@ const doTaskReport = (req, sender) => {
 onMounted(() => {
   state.process_mode = process.env.NODE_ENV
   state.postId = getQueryString('postId')
-  state.tweetId = getQueryString('tweetId')
-  state.tweet_author = getQueryString('tweet_author');
   state.window_origin = getQueryString('window_origin');
+  if (state.window_origin.indexOf('twitter.com') > -1) {
+    state.tweetId = getQueryString('tweetId')
+    state.tweet_author = getQueryString('tweet_author');
+  }
 
   getTweetAuthor();
 
@@ -1804,6 +1815,22 @@ body {
     }
   }
 
+  .redbag {
+    z-index: 222;
+    text-align: center;
+    width: 375px;
+    height: 500px;
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    img {
+      margin-top: 172px;
+      width: 130px;
+      height: 130px;
+    }
+  }
+
   .error {
     width: 100%;
     height: 100%;