[bugFix] 样式bug修复，插件主页发送绑定推文Id，content注入dom修改

src/entry/background.js

@@ -20,6 +20,7 @@ function callback(req, sender, sendResponse) {
                     popupShowPublishDialog: JSON.stringify({
                         show: true,
                         srcContent: req.data.srcContent,
+                        postId: req.data.postId
                     }),
                 });
                 chrome.tabs.create({

src/entry/content.js

@@ -33,6 +33,7 @@ window.onload = () => {
             setTimeout(() => {
                 showTwitterPublishDialogHandler({
                     srcContent: res.srcContent,
+                    postId: res.postId
                 });
             }, 1500);
             chrome.storage.local.remove("popupShowPublishDialog");

src/logic/twitter.js

@@ -1,5 +1,5 @@
-/* eslint-disable */
 import { getChromeStorage, setChromeStorage, LANDING_PAGE } from '../uilts/chromeExtension.js'
+import { throttle } from '../uilts/help'
 import { getTtwitterRequestToken, twitterLogin } from '../server/twitter.js'
 import { srcPublishSuccess } from '../http/publishApi'
 
@@ -73,6 +73,8 @@ export function backTwitterPinLoginCode(code) {
 export function renderDom(port) {
     if (window.location.href.indexOf('https://twitter.com') > -1) {
         _createBtnDom(port);
+        onWindowResize();
+        checkHasDeBtn();
         setTimeout(() => {
             _addIframe();
             _addDeNetBtn();
@@ -85,7 +87,14 @@ export function renderDom(port) {
  * 展示give弹窗
  */
 export function showGiveDialogHandler(userInfo) {
-    dom.iframe.contentWindow.postMessage({ actionType: 'CONTENT_SHOW_GIVE_DIALOG', userInfo }, '*');
+    let iframe = document.getElementById('iframe-content');
+    if(iframe) {
+        iframe.contentWindow.postMessage({ actionType: 'CONTENT_SHOW_GIVE_DIALOG', userInfo }, '*');
+    } else {
+        _addIframe();
+        let iframe = document.getElementById('iframe-content');
+        iframe.contentWindow.postMessage({ actionType: 'CONTENT_SHOW_GIVE_DIALOG', userInfo }, '*');
+    }
 }
 
 export function showIframeHandler() {
@@ -114,7 +123,7 @@ export function showTwitterPublishDialogHandler(publishRes) {
                             postId: publishRes.postId,
                             srcContentId: twitterArtId
                         }
-                    }).then((res) => {
+                    }).then(() => {
                     })
                 }
             })
@@ -169,12 +178,12 @@ function _addDeNetEditBtn(parent, dom, isClick = false) {
  * 在dialog插入deNet按钮
  * @private
  */
-function _addDeNetBtnToDialog() {
-    setTimeout(() => {
-        let dialogScheduleBtn = _getScheduleDom(true);
-        _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn2);
-    }, 800)
-}
+// function _addDeNetBtnToDialog() {
+//     setTimeout(() => {
+//         let dialogScheduleBtn = _getScheduleDom(true);
+//         _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn2);
+//     }, 800)
+// }
 
 /**
  * 获取左侧twitter按钮
@@ -231,7 +240,7 @@ function _addIframe() {
     // const shadowRoot = span.attachShadow({mode: 'closed'})
     let iframe = document.createElement('iframe');
     iframe.src = chrome.runtime.getURL('/iframe/publish.html')
-    iframe.id = 'iframe-test'
+    iframe.id = 'iframe-content'
     iframe.style.cssText = 'position:fixed;top:0px;right:0;display:block; width:100%;height:100%;z-index:0; border: medium none;display:none';
     // shadowRoot.appendChild(iframe);
     // document.body.appendChild(span)
@@ -316,11 +325,11 @@ function _createBtnDom(port) {
     loadingImg.style.cssText = 'width:20px;height: 20px;margin-right:3px;-webkit-animation:load 1.1s infinite linear;';
 
     let style = document.createElement('style');
-    style.innerHTML = " @-webkit-keyframes load{from{ transform: rotate(0deg);} to{transform: rotate(360deg);}}";
+    style.innerHTML = "#de-btn:hover{opacity: .9;};@-webkit-keyframes load{from{ transform: rotate(0deg);} to{transform: rotate(360deg);}}";
     document.getElementsByTagName('head').item(0).appendChild(style);
 
     let deBtn = document.createElement('span');
-    const shadowDiv = document.createElement('div');
+    // const shadowDiv = document.createElement('div');
     deBtn.innerHTML = '<span>DeNet</span>';
     deBtn.id = 'de-btn';
     deBtn.style.cssText = 'width:90%;height: 52px;text-align:center;line-height:52px;margin-bottom: 4px;margin-top: 4px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:17px;font-weight:700;border-radius:100px;cursor: pointer;display: flex;align-items: center;justify-content: center;';
@@ -337,6 +346,11 @@ function _createBtnDom(port) {
     deBtn2.style.cssText = smallDeBtnStyle;
     deBtn2.src = "../assets/img/icon-gift-pack.png"
 
+    const deBtn3 = document.createElement('img');
+    deBtn3.id = 'de-btn3'
+    deBtn3.src = require("../assets/img/icon-slider-de-net-btn.png");
+    deBtn3.style.cssText = 'width:52px;height: 52px;margin-top:20px;';
+
     deBtn.addEventListener('click', () => {
         _deNetBtnClick(port);
     })
@@ -346,23 +360,61 @@ function _createBtnDom(port) {
     deBtn2.addEventListener('click', () => {
         _deNetBtnClick(port);
     })
+    deBtn3.addEventListener('click', () => {
+        _deNetBtnClick(port);
+    })
     dom.deBtn = deBtn;
     dom.deBtn1 = deBtn1;
     dom.deBtn2 = deBtn2;
+    dom.deBtn3 = deBtn3;
     dom.loadingImg = loadingImg;
 }
 
-setInterval(() => {
-    let toolBar = document.querySelector('div[data-testid="toolBar"]');
-    let innerDeIcon = document.getElementById('de-icon');
-    if (toolBar && !innerDeIcon) {
-        let dialogScheduleBtn = _getScheduleDom(false);
-        _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn1);
-    }
-}, 800)
+function onWindowResize () {
+    window.onresize = throttle(function() {
+        try {
+            if(window.innerWidth < 1270) {
+                let bigBtn = document.querySelector('#de-btn');
+                bigBtn && bigBtn.remove();
+                setTimeout(() => {
+                    let smallDom = document.querySelector('header[role="banner"]').querySelector('.r-1awozwy');
+                    if (smallDom) {
+                        smallDom.appendChild(dom.deBtn3);
+                    }
+                })
+            } else {
+                let smallBtn = document.querySelector('#de-btn3');
+                smallBtn && smallBtn.remove();
+                setTimeout(() => {
+                    let bigDom = document.querySelector('header[role="banner"]').querySelector('.r-1habvwh');
+                    if (bigDom) {
+                        bigDom.appendChild(dom.deBtn);
+                    }
+                })
+            }
+        } catch (e) {
+            console.log(e)
+        }
+    }, 2000)
+}
+
+function checkHasDeBtn () {
+    setInterval(() => {
+        try {
+            let toolBar = document.querySelector('div[data-testid="toolBar"]');
+            let innerDeIcon = document.getElementById('de-icon');
+            if (toolBar && !innerDeIcon) {
+                let dialogScheduleBtn = _getScheduleDom(false);
+                _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn1);
+            }
+        } catch(e) {
+            console.log(e)
+        }
+    }, 1000)
+}
 
 function parseDOMRedPacket() {
-    let _dom = null
+    // let _dom = null
     //     let denet_arr = document.querySelector('article[data-testid=tweet]').querySelectorAll('a')
     //     let _dom = null
     //     for (let i in denet_arr) {

src/uilts/help.js

@@ -19,7 +19,28 @@ export function getQueryString(name) {
         fn.apply(context,args);
       },delay)
     }
+}
+
+export function throttle(fn, thresh) {
+  var timeout
+  var start = new Date;
+  var threshhold = thresh || 500
+  return function () {
+
+    var context = this, args = arguments, curr = new Date() - 0
+
+    clearTimeout(timeout)//总是干掉事件回调
+    if(curr - start >= threshhold){
+      fn.apply(context, args) //只执行一部分方法，这些方法是在某个时间段内执行一次
+      start = curr
+    }else{
+      // 让方法在脱离事件后也能执行一次
+      timeout = setTimeout(function(){
+        fn.apply(context, args)
+      }, threshhold);
+    }
   }
+}
   
 export function setStorage(key, value) {
     return localStorage.setItem(key, JSON.stringify(value));

src/view/components/followInput.vue

@@ -10,6 +10,7 @@
                     v-model="item.name" 
                     @change="onIptChange(item, index)"
                     @input="onInput(item, index)"
+                    @keydown="onKeydown(item, index)"
                     @keyup="onKeyup(item, index)"
                     @blur="onblur(item, index)"
                     @focus="onfocus(item, index)"/>
@@ -84,7 +85,7 @@ onMounted(() => {
                 addUser(info.nickName);
                 setTimeout(() => {
                     setIptWidth(0);
-                })
+                }, 600)
             }
         });
     } else {
@@ -146,6 +147,10 @@ const onInput = debounce(function(params, index) {
     getTwitterUsers(params.name)
 }, 800) 
 
+const onKeydown = (params, index) => {
+    // setIptWidth(index);
+}
+
 const onKeyup = (params, index) => {
     setIptWidth(index);
 }

src/view/components/give-dialog.vue

@@ -37,6 +37,7 @@
                                     <el-input
                                         v-model="baseFormData.amountValue"
                                         placeholder="Amount entered"
+                                        autofocus
                                         @input = "onUsdInput"
                                         :input-style="{ 'box-shadow': 'none','padding': '1px', 'width': '110px', 'text-align': 'right', 'font-size' : '15px', 'color': '#000' }"/>
                                 </div>
@@ -140,7 +141,7 @@ let visible = ref(false);
 let showPreview = ref(false);
 let openAntiBot = ref(false);
 let dialogHeight = ref(680);
-let previewDialogHeight = ref(860);
+let previewDialogHeight = ref(680);
 let submitIng = ref(false);
 let atUserList = ref([]);
 let finalAmountData = ref({
@@ -287,7 +288,7 @@ const confirm = () => {
             submitIng.value = false;
                 if(res.code == 0) {
                     publishRes = res.data;
-                    setPreviewDialogHeight();
+                    // setPreviewDialogHeight();
                     showPreview.value = true;
                 } else {
                     console.log(res);
@@ -358,6 +359,16 @@ const onCountInput = (val) => {
 
 onMounted(() => {
     setPreviewDialogHeight();
+    document.onkeydown = function(e){    
+        var keyNum=window.event ? e.keyCode :e.which;
+        let escKey = 27;
+        if(keyNum == escKey) {
+            if(visible.value) {
+                close();
+            }
+        }
+        console.log(keyNum)
+    }
 })
 
 </script>

src/view/components/options-transactions.vue

@@ -86,7 +86,7 @@
                                 <!-- 提现失败 -->
                                 <template v-if="item.bizType == 3">
                                     <div class="balance">
-                                        -${{item.balance/100}} (returned)     
+                                        -${{item.trxAmountValue/100}} (returned)     
                                     </div>
                                     <div class="desc">
                                         Withdrawal failed
@@ -94,7 +94,7 @@
                                 </template>
                                 <template v-else>
                                     <template v-if="item.bizType == -1">-</template>
-                                    ${{item.balance/100}}
+                                    ${{item.trxAmountValue/100}}
                                 </template>
                                 
                             </div>

src/view/components/paypal-button.vue

@@ -66,7 +66,7 @@ onMounted(() => {
     position: absolute;
     left: 0;
     bottom: 0;
-    box-shadow: 0px -2px 20px 0px #00000026;
+    box-shadow: 0 -4px 8px -3px #00000026;
     border-bottom-right-radius: 16px;
     padding: 12px 30px;
     box-sizing: border-box;

src/view/popup.vue

@@ -115,7 +115,7 @@
                                         <!-- 发出的红包显示 -->
                                         <div class="desc" v-if="item.type == 2">
                                             <!-- 未发送-->
-                                            <template v-if="item.status == 0">
+                                            <template v-if="!item.postTaskLuckdrop.srcPublishStatus">
                                                 Unpublished
                                             </template>
                                             <!-- 进行中 -->
@@ -479,9 +479,10 @@ const callEventPageMethod = (method, data, callback) => {
  * 点击发送，去发推
  */
 const sendTwitter = (params) => {
+    console.log(params)
     callEventPageMethod(
         "POPUP_PUBLISH_TWITTER_RED_PACK",
-        { srcContent: params.postTaskLuckdrop.srcContent },
+        { srcContent: params.postTaskLuckdrop.srcContent, postId: params.postTaskLuckdrop.postId },
         function (response) {
             console.log("res", response);
         }