[add] pin、发布校验弹窗、bug修复

src/entry/background.js

@@ -29,9 +29,7 @@ function onInstalledMethod() {
             chrome.tabs.create({
                 url: "https://twitter.com",
             });
-            let { isOnToolbar } = checkIsPinned();
-            console.log(isOnToolbar);
-        }
+        }   
     })
     getChromeCookie(LANDING_PAGE_MIND, (res_arr) => {
         // 没有cookie
@@ -46,29 +44,27 @@ function onInstalledMethod() {
         }
     })
 
-    // 无刷新插入js
-    chrome.tabs.query({}, (tab) => {
-        for (let i in tab) {
-            if (tab[i].url.indexOf('twitter.com') >= 0) {
-                chrome.scripting.executeScript({
-                    target: { tabId: tab[i].id },
-                    files: ['js/content.js'],
-                }, () => {
-                    setTimeout(() => {
-                        setChromeStorage({ executeScript: JSON.stringify({executeScript:1}) })    
-                    }, 2000);
-                    
-                })
+    chrome.action.getUserSettings().then(res => {
+        let isOnToolbar = res.isOnToolbar;
+        // 无刷新插入js
+        chrome.tabs.query({}, (tab) => {
+            for (let i in tab) {
+                if (tab[i].url.indexOf('twitter.com') >= 0) {
+                    chrome.scripting.executeScript({
+                        target: { tabId: tab[i].id },
+                        files: ['js/content.js'],
+                    }, () => {
+                        setTimeout(() => {
+                            setChromeStorage({ executeScript: JSON.stringify({executeScript:1, isOnToolbar}) })    
+                        }, 2000);
+                        
+                    })
+                }
             }
-        }
+        })
     })
 }
 
-async function checkIsPinned(){
-    let userSettings = await chrome.action.getUserSettings();
-    console.log('userSettings', userSettings.isOnToolbar)
-}
-
 function onMessageMethod(req, sender, sendResponse) {
     if (req) {
         switch (req.method) {
@@ -113,3 +109,34 @@ chrome.runtime.onConnect.addListener(function (port) {
         }
     });
 });
+
+chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
+    sendResponse('');
+    switch(req.actionType) {
+        case 'CONTENT_GET_PINED':
+            chrome.action.getUserSettings(res => {
+                let {isOnToolbar} = res;
+                console.log('isOnToolbar', isOnToolbar)
+                if(!isOnToolbar) {
+                    sendActivetabMessage({
+                        actionType: 'BG_SHOW_PIN_TIPS'
+                    });
+                }
+            })
+            break;
+    }
+})
+
+
+function sendActivetabMessage (message = {}) {
+    chrome.tabs.query({
+        active: true,
+        currentWindow: true
+    }, (tabs) => {
+        chrome.tabs.sendMessage(tabs[0].id, message, res => {
+            console.log(res)
+        })
+    })
+}
+
+

src/entry/content.js

@@ -10,6 +10,7 @@ import {
     hideIframeHandler,
     showTwitterPublishDialogHandler,
     setIframeRedPacket,
+    showPinTips
 } from "../logic/twitter.js";
 
 import { getChromeStorage } from "../uilts/chromeExtension";
@@ -26,9 +27,7 @@ chrome.storage.onChanged.addListener(changes => {
     if (changes.executeScript) {
         let item = JSON.parse(changes.executeScript.newValue)
         if (item.executeScript) {
-            // location.reload()
-            init()
-            console.log('yeeee')
+            init(item.isOnToolbar)
         }
     }
 })
@@ -37,12 +36,12 @@ window.onload = () => {
     init()
 };
 
-function init() {
+function init(isOnToolbar = true) {
     if (window.location.href.indexOf('twitter.com') < 0) {
         return
     }
     contentTwitterPinLogin(port);
-    renderDom(port);
+    renderDom(port, isOnToolbar);
     setIframeRedPacket();
 
     getChromeStorage("popupShowPublishDialog", (res) => {
@@ -74,3 +73,12 @@ window.onmessage = (res) => {
         }
     }
 };
+
+chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
+    sendResponse('');
+    switch(req.actionType) {
+        case 'BG_SHOW_PIN_TIPS':
+            showPinTips()
+            break;
+    }
+})

src/logic/twitter.js

@@ -70,16 +70,16 @@ export function backTwitterPinLoginCode(code) {
  * 渲染要插入的dom,初始化逻辑
  * @param port
  */
-export function renderDom(port) {
+export function renderDom(port, isOnToolbar) {
     if (window.location.href.indexOf('https://twitter.com') > -1) {
         _createBtnDom(port);
         onWindowResize();
         checkHasDeBtn();
         setTimeout(() => {
-            console.log('home', chrome.runtime.getURL('/iframe/home.html'));
             _addIframe();
             _addDeNetBtn();
             _getSliderTwitterBtn();
+            addPinedPop(isOnToolbar);
         }, 800)
     }
 }
@@ -115,6 +115,15 @@ export function showTwitterPublishDialogHandler(publishRes) {
     _publishTweetEvent(publishRes.postId);
 }
 
+export function showPinTips() {
+    getChromeStorage('pinData', (res) => {
+        if (!res || res.show) {
+            let domPop = document.getElementById('de-pin-pop');
+            domPop.style.display = 'block';
+        }
+    })
+}
+
 function getUserInfo(cb) {
     getChromeStorage('userInfo', (res) => {
         cb && cb(res);
@@ -380,6 +389,41 @@ function _createBtnDom(port) {
     dom.loadingImg = loadingImg;
 }
 
+function addPinedPop(isOnToolbar) {
+    let domPop = document.getElementById('de-pin-pop');
+
+    if(domPop || isOnToolbar) {
+        return;
+    }
+
+    let popWrapper = document.createElement('div');
+    popWrapper.style.cssText = 'position: fixed; height: 400px;width: 300px;top: 12px;right: 20px;border-radius: 12px;border: 0.5px solid #919191;box-sizing: border-box;padding: 20px;background: #fff';
+    popWrapper.id = 'de-pin-pop'
+
+    let img = document.createElement('img');
+    img.src = require("../assets/img/img-pined-guide.png");
+
+    let contentDom = document.createElement('div');
+    contentDom.innerHTML = "<div style='font-weight: 500;font-size: 18px;margin-top: 20px;margin-bottom: 20px'>📌 Pin an Extension is more convenient to open😄</div><div style='display: flex; align-items: center; justify-content: space-between;'><div style='display: flex; align-items: center; font-size: 14px; color: #899099; cursor: pointer;'><input id='de-check' type='checkbox'/> Don't remind</div><div class='de-pin-skip' style='font-weight: 500; font-size: 16px; color: #389AFF;cursor: pointer;'>Skip</div></div>"
+
+    let arrow = document.createElement('div');
+    arrow.style.cssText = 'position: absolute;height: 15px;width: 15px;top: -8px;right: 80px;border-left: 0.5px solid rgb(145, 145, 145);border-top: 0.5px solid rgb(145, 145, 145);background: rgb(255, 255, 255);transform: rotate(45deg);';
+
+    popWrapper.appendChild(arrow);
+    popWrapper.appendChild(img);
+    popWrapper.appendChild(contentDom);
+
+    document.querySelector('body').appendChild(popWrapper);
+
+    document.querySelector('#de-check').onclick = function() {
+        setChromeStorage({ pinData: JSON.stringify({show: !this.checked}) })
+    }
+
+    document.querySelector('.de-pin-skip').onclick = function() {
+        document.querySelector('#de-pin-pop').style.display = 'none';
+    }
+}
+
 function addSliderNavDeBtn(isSmall = false) {
     if (!isSmall) {
         let bigDom = document.querySelector('h1[role]').parentNode.parentNode;

src/view/components/follow-input.vue

@@ -59,7 +59,7 @@
 import { reactive, ref, onMounted, defineEmits, defineProps, watch } from "vue";
 import {searchTwitterUser} from "../../http/publishApi";
 import {getChromeStorage} from "../../uilts/chromeExtension"
-import {debounce, getStorage} from "../../uilts/help";
+import {debounce} from "../../uilts/help";
 
 const props = defineProps({
     atUserList: {
@@ -88,7 +88,7 @@ const emits = defineEmits(["addUser", "setUser", "delUser"]);
 onMounted(() => {
     if(!pageAtUserList.value.length) {
         getUserInfo((info) => {
-            if(info.nickName && props.isAddSelf) {
+            if(info && info.nickName && props.isAddSelf) {
                 addUser(info.nickName);
                 setTimeout(() => {
                     setIptWidth(0);

src/view/components/give-dialog.vue

@@ -88,6 +88,7 @@
                                         @delUser="delFollowUser"></follow-input>
                                     </div>
                                     <el-switch v-if="item.type == 2" v-model="item.checked" />
+                                    <img  v-if="item.type == 3"  :src="require('../../assets/svg/icon-option-checked.svg')" />
                                 </div>
                             </div>
                             <div class="anti-bot-wrapper">
@@ -140,6 +141,11 @@
                 </div>
             </div>
         </div>
+        <message-box :dialogVisible="showMessageBox"
+            :title="messageBoxData.title"
+            :content="messageBoxData.content"
+            @cancel="messageBoxCancel"
+            @confirm="messageBoxConfirm"></message-box>
     </div>
 </template>
 
@@ -154,6 +160,7 @@ import 'element-plus/es/components/message/style/css'
 import previewCard from "./preview-card";
 import paypalButton from "./paypal-button";
 import followInput from "./follow-input";
+import messageBox from "./message-box.vue";
 
 let paypalClientId = ref('');
 let paypalHtml = ref('');
@@ -168,6 +175,12 @@ let submitIng = ref(false);
 let atUserList = ref([]);
 let iptErrMsgTxt = ref('');
 let isBack = ref(false);
+let showMessageBox = ref(false);
+
+let messageBoxData = ref({
+    title: '',
+    content: ''
+})
 
 let finalAmountData = ref({
     currencyCode: "USD",
@@ -271,11 +284,30 @@ const confirm = () => {
     if(submitIng.value) {
         return;
     }
-    let {amountValue = 0, totalCount = 0, amountCurrencyCode} = baseFormData;
+    let {totalCount = 0} = baseFormData;
     if(!totalCount) {
         return;
     }
-    amountValue = amountValue * 100; // 元转分
+    if(!calcIptValue()) {
+        showMessageBox.value = true;
+        messageBoxData.value.title = 'Quantity is too small';
+        messageBoxData.value.content = 'A Reward of $100 is recommended to be allocated to 100~10000 participants, would you prefer to modify it?';
+        return;
+    }
+    submitRequest();
+};
+
+const messageBoxCancel = () => {
+    showMessageBox.value = false;
+    submitRequest();
+}
+
+const messageBoxConfirm = () => {
+    showMessageBox.value = false;
+}
+
+const submitRequest = () => {
+    let {amountValue = 0, totalCount = 0, amountCurrencyCode} = baseFormData;
     formList[0]['text'] = atUserList.value;
 
     let finishConditions = [];
@@ -291,7 +323,6 @@ const confirm = () => {
         }
     }
     let receiveConditions = openAntiBot.value ? '' : [];
-    console.log('finishConditions', finishConditions);
     let formData = {
         amountCurrencyCode,
         amountValue,
@@ -299,11 +330,6 @@ const confirm = () => {
         finishConditions,
         receiveConditions
     }
-
-    if(!calcIptValue()) {
-        return;
-    }
-
     submitIng.value = true;
     getPayAmount(amountValue, (res) => {
         formData['payAmountValue'] = res.finalAmountValue;
@@ -316,19 +342,19 @@ const confirm = () => {
         }
         postPublish(data).then((res) => {
             submitIng.value = false;
-                if(res.code == 0) {
-                    publishRes = res.data;
-                    // setPreviewDialogHeight();
-                    showPreview.value = true;
-                    isBack.value = false;
-                } else {
-                    console.log(res);
-                }
-            }).catch(err => {
-                console.log(err);
-            })
-        });
-};
+            if(res.code == 0) {
+                publishRes = res.data;
+                // setPreviewDialogHeight();
+                showPreview.value = true;
+                isBack.value = false;
+            } else {
+                console.log(res);
+            }
+        }).catch(err => {
+            console.log(err);
+        })
+    });
+}
 
 const calcIptValue = (cb) => {
     let amountValue = baseFormData.amountValue;
@@ -340,7 +366,7 @@ const calcIptValue = (cb) => {
     }
 
     //每人平均要分到大于 0.01美元（1美分)
-    if(amountValue / totalCount < 1) {
+    if((amountValue * 100) / totalCount < 1) {
         flag = false;
     }
     cb && cb(flag);
@@ -467,7 +493,7 @@ const onCountBlur = () => {
 const setIptAmountErrorMsg = (cb) => {
     let res = calcIptValue();
     if(!res) {
-        iptErrMsgTxt.value = 'If you wish to send {100} red packets, please send USD amount > {$1.00}';
+        iptErrMsgTxt.value = 'If you wish to send 100 red packets, please send USD amount > $1.00';
     } else {
         iptErrMsgTxt.value = '';
     }

src/view/components/message-box.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="overlay" v-if="dialogVisible">
+        <div class="content-wrapper">
+            <div class="title">{{title}}</div>
+            <div class="desc">{{content}}</div>
+            <div class="btn-wrapper">
+                <div class="btn cancel" @click="cancel">Continue</div>
+                <div class="btn confirm" @click="confirm">Modify</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+/* eslint-disable */
+import { ref, defineEmits, defineProps } from "vue";
+const props = defineProps({
+    dialogVisible: {
+        type: Boolean,
+        default: false,
+    },
+    title: {
+        type: String,
+        default: ''
+    },
+    content: {
+        type: String,
+        default: ''
+    },
+});
+
+const emits = defineEmits(["cancel", "confirm"]);
+
+
+const cancel = () => {
+    emits("cancel", {});
+};
+
+const confirm = () => {
+    emits("confirm", {});
+};
+
+</script>
+
+<style lang="scss" scoped>
+.overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    overflow: auto;
+
+    .content-wrapper {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 375px;
+        height: 220px;
+        background: #FFFFFF;
+        border-radius: 20px;
+        padding: 20px;
+        box-sizing: border-box;
+        transform: translate(-50%, -50%);
+        text-align: center;
+
+        .title {
+            font-weight: 600;
+            font-size: 20px;
+            margin-bottom: 13px;
+        }
+        .desc {
+            height: 68px;
+            font-weight: 400;
+            font-size: 15px;
+            margin-bottom: 25px;
+        }
+        .btn-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .btn {
+                height: 46px;
+                width: 163px;
+                text-align: center;
+                line-height: 46px;
+                border-radius: 100px;
+                border: 1px solid #389AFF;
+                box-sizing: border-box;
+                font-weight: 600;
+                font-size: 16px;
+                cursor: pointer;
+            }
+
+            .cancel {
+                color: #389AFF;
+            }
+            .confirm {
+                background: #389AFF;
+                color: #fff;
+            }
+        }
+    }
+}
+</style>

src/view/components/option-withdraw.vue

@@ -179,7 +179,8 @@ const doneWithdraw = () => {
 
 
 const withdrawalAll = () => {
-    console.log(canWithdrawBalance.value)
+    console.log(canWithdrawBalance.value);
+    showWithdrawIptError.value = false;
     requestWithdrawParams.value.amountValue =
             canWithdrawBalance.value / 100;
     setWithdrawIptStatus(canWithdrawBalance.value);

src/view/popup.vue

@@ -229,10 +229,6 @@ import optionWithdraw from "./components/option-withdraw.vue";
 import {
     getChromeStorage,
 } from "../uilts/chromeExtension";
-import {
-    setStorage,
-    getStorage,
-} from "../uilts/help";
 import { getBalance, getMineLuckdropRecords, getWithdrawConfig } from "../http/account";
 var moment = require("moment");
 
@@ -345,7 +341,6 @@ const checkLoginState = (cb) => {
     getUserInfo((res) => {
         if (res && res.accessToken) {
             userInfo.value = res;
-            setStorage("de-userInfo", res);
             isLogin.value = true;
             homeVisibility.value = true;
         } else {

src/view/publish.vue

@@ -11,7 +11,6 @@
 
 <script setup>
 import { ref } from "vue";
-import {setStorage} from "../uilts/help";
 import giveDialog from "./components/give-dialog.vue";
 
 let dialogVisible = ref(false);
@@ -34,7 +33,6 @@ window.addEventListener("message", function (event) {
     console.log("addEventListener", event);
     if (event.data && event.data.actionType == "CONTENT_SHOW_GIVE_DIALOG") {
         window.parent.postMessage({ actionType: "IFRAME_SHOW_IFREME" }, "*");
-        setStorage('de-userInfo', event.data.userInfo);
         dialogVisible.value = true;
     }
 });

src/view/red-packet.vue

@@ -507,6 +507,11 @@ onMounted(() => {
 
 // 点击领取
 function clickOpenRedPacket() {
+  chrome.runtime.sendMessage({
+    actionType: 'CONTENT_GET_PINED'
+  }, res => {
+    console.log(res);
+  })
   handleRedPacket()
 }