[bug] 修复jira，完善提示

src/entry/background.js

@@ -5,11 +5,27 @@ import {
     backTwitterPinLoginCode,
 } from "../logic/twitter.js";
 
-import { setChromeStorage } from "../uilts/chromeExtension";
+import { setChromeStorage, getChromeCookie, LANDING_PAGE } from "../uilts/chromeExtension";
 
-chrome.runtime.onMessage.addListener(callback);
+chrome.runtime.onInstalled.addListener(onInstalledMethod);
 
-function callback(req, sender, sendResponse) {
+chrome.runtime.onMessage.addListener(onMessageMethod);
+
+function onInstalledMethod() {
+    getChromeCookie(LANDING_PAGE, (res_arr) => {
+        if(res_arr && res_arr.length) {
+            let {postNickName, srcContentId} = res_arr[0];
+            let url = `https://twitter.com/${postNickName}/status/${srcContentId}`
+            chrome.tabs.create({
+                url
+            });
+        } else {
+            backTwitterPinLoginToken();
+        }
+    })
+}
+
+function onMessageMethod(req, sender, sendResponse) {
     if (req) {
         switch (req.method) {
             case "POPUP_LOGIN":

src/http/publishApi.js

@@ -32,4 +32,12 @@ export function searchTwitterUser(params) {
     method: 'post',
     data: params
   })
+}
+
+export function getUser(params) {
+  return service({
+    url: `/openapi/getUser`,
+    method: 'post',
+    data: params
+  })
 }

src/logic/twitter.js

@@ -202,10 +202,7 @@ function _getSliderTwitterBtn() {
  */
 function _addDeNetBtn() {
     setTimeout(() => {
-        let node = document.querySelector('header[role="banner"]').querySelector('.r-1habvwh');
-        if (node) {
-            node.appendChild(dom.deBtn);
-        }
+        addSliderNavDeBtn(window.innerWidth < 1270);
 
         let dialogScheduleBtn = _getScheduleDom(false);
         _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn1);
@@ -293,6 +290,10 @@ function _deNetBtnClick(port) {
             }
             showGiveDialogHandler(res);
         } else {
+            let loadIcon = document.getElementById('de-btn-loading');
+            if(loadIcon) {
+                return;
+            }
             dom.deBtn.insertBefore(dom.loadingImg, dom.deBtn.querySelector('span'));
             setTimeout(() => {
                 dom.deBtn.innerHTML = '<span>DeNet<span>';
@@ -321,6 +322,7 @@ function _setPublishContent(content) {
  */
 function _createBtnDom(port) {
     let loadingImg = document.createElement('img');
+    loadingImg.id = 'de-btn-loading'
     loadingImg.src = require("../assets/img/icon-btn-loading.png");
     loadingImg.style.cssText = 'width:20px;height: 20px;margin-right:3px;-webkit-animation:load 1.1s infinite linear;';
 
@@ -349,7 +351,7 @@ function _createBtnDom(port) {
     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;';
+    deBtn3.style.cssText = 'width:52px;height: 52px;margin-top:20px;cursor: pointer;';
 
     deBtn.addEventListener('click', () => {
         _deNetBtnClick(port);
@@ -370,6 +372,20 @@ function _createBtnDom(port) {
     dom.loadingImg = loadingImg;
 }
 
+function addSliderNavDeBtn (isSmall = false) {
+    if(!isSmall) {
+        let bigDom = document.querySelector('header[role="banner"]').querySelector('.r-1habvwh');
+        if (bigDom) {
+            bigDom.appendChild(dom.deBtn);
+        }
+    } else {
+        let smallDom = document.querySelector('header[role="banner"]').querySelector('.r-1awozwy');
+        if (smallDom) {
+            smallDom.appendChild(dom.deBtn3);
+        }
+    }
+}
+
 function onWindowResize () {
     window.onresize = throttle(function() {
         try {
@@ -377,25 +393,19 @@ function onWindowResize () {
                 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);
-                    }
+                    addSliderNavDeBtn(true);
                 })
             } 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);
-                    }
+                    addSliderNavDeBtn()
                 })
             }
         } catch (e) {
             console.log(e)
         }
-    }, 2000)
+    }, 800)
 }
 
 function checkHasDeBtn () {

src/view/components/followInput.vue → src/view/components/follow-input.vue

@@ -15,26 +15,28 @@
                     @blur="onblur(item, index)"
                     @focus="onfocus(item, index)"/>
 
-            <div class="user-list-wrapper" v-if="currentIptIndex == index && userList.length">
-                <div class="item" 
-                    v-for="(item, index) in userList"
-                    :key="index"
-                    :class="{'active': index === currentUserIndex}"
-                    @mouseenter="onUserMouseEnter(item, index)"
-                    @mouseleave="onUserMouseLeave(item, index)"
-                    @click="selectedUser(item, index)">
-                    <div class="following" v-if="item.following">
-                        <img :src="require('../../assets/svg/icon-following-user.svg')">following 
-                    </div>
-                    <div class="content">
-                        <img class="avatar" :src="item.avatarlUrl">
-                        <div>
-                            <div class="name">{{item.name}}</div>
-                            <div class="screenName">@{{item.screenName}}</div>
+            <template v-if="currentIptIndex == index && userList.length">
+                <div class="user-list-wrapper">
+                    <div class="item" 
+                        v-for="(item, index) in userList"
+                        :key="index"
+                        :class="{'active': index === currentUserIndex}"
+                        @mouseenter="onUserMouseEnter(item, index)"
+                        @mouseleave="onUserMouseLeave(item, index)"
+                        @click="selectedUser(item, index)">
+                        <div class="following" v-if="item.following">
+                            <img :src="require('../../assets/svg/icon-following-user.svg')">following 
+                        </div>
+                        <div class="content">
+                            <img class="avatar" :src="item.avatarlUrl">
+                            <div>
+                                <div class="name">{{item.name}}</div>
+                                <div class="screenName">@{{item.screenName}}</div>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
+            </template>
         </div>
 
         <div class="icon-add-wrapper"  v-if="pageAtUserList.length < 5"
@@ -56,6 +58,7 @@
 /* eslint-disable */
 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";
 
 const props = defineProps({
@@ -64,6 +67,10 @@ const props = defineProps({
         default: () => {
             return []
         }
+    },
+    isAddSelf: {
+        type: Boolean,
+        default: true
     }
 })
 
@@ -81,7 +88,7 @@ const emits = defineEmits(["addUser", "setUser", "delUser"]);
 onMounted(() => {
     if(!pageAtUserList.value.length) {
         getUserInfo((info) => {
-            if(info.nickName) {
+            if(info.nickName && props.isAddSelf) {
                 addUser(info.nickName);
                 setTimeout(() => {
                     setIptWidth(0);
@@ -95,6 +102,16 @@ onMounted(() => {
             })
         }
     }
+
+    document.addEventListener('click',e => { 
+        let dom = document.querySelector('.user-list-wrapper');
+        if (dom) {
+            if (!dom.contains(e.target)) {
+                userList.value = [];
+            } else {
+            }
+        }
+    })
 }) 
 
 watch(
@@ -109,12 +126,12 @@ watch(
 
 
 const getUserInfo = (cb) => {
-    let localUserInfo = getStorage('de-userInfo');
-    console.log('localUserInfo',localUserInfo)
-    if(localUserInfo) {
-        userInfo = localUserInfo;
-    }
-    cb && cb(localUserInfo);
+    getChromeStorage('userInfo', (res) => {
+        if(res) {
+            userInfo.value = res;
+        }
+        cb && cb(res);
+    })
 }
 
 const addUser = (name = '') => {

src/view/components/give-dialog.vue

@@ -12,7 +12,7 @@
                         Giveaways
                     </div>
                 </div>
-                <img class="icon-question" :src="require('../../assets/svg/icon-question.svg')">
+                <!-- <img class="icon-question" :src="require('../../assets/svg/icon-question.svg')"> -->
             </div>
             <div class="body">
                 <div class="left">
@@ -27,6 +27,9 @@
                 <div class="right">
                     <template v-if="!showPreview">
                         <div class="form-wrapper">
+                            <div class="error-msg">
+                                {{iptErrMsgTxt}}
+                            </div>
                             <div class="form-base">
                                 <div class="item">
                                     <div class="label">
@@ -39,6 +42,7 @@
                                         placeholder="Amount entered"
                                         autofocus
                                         @input = "onUsdInput"
+                                        @blur = "onUsdBlur"
                                         :input-style="{ 'box-shadow': 'none','padding': '1px', 'width': '110px', 'text-align': 'right', 'font-size' : '15px', 'color': '#000' }"/>
                                 </div>
                                 <div class="item">
@@ -51,6 +55,7 @@
                                         v-model="baseFormData.totalCount"
                                         placeholder="Quantity entered"
                                         @input = "onCountInput"
+                                        @blur = "onCountBlur"
                                         :input-style="{ 'box-shadow': 'none','padding': '1px', 'width': '120px',
                                         'text-align': 'right', 'font-size' : '15px', 'color': '#000'}"/>
                                 </div>
@@ -70,6 +75,7 @@
                                     </div>
                                     <div class="control"  v-if="item.nodeType == 'textarea'">
                                         <follow-input 
+                                        :isAddSelf="!isBack"
                                         :atUserList="atUserList"
                                         @addUser="addFollowUser" @setUser="setFollowUser"
                                         @delUser="delFollowUser"></follow-input>
@@ -91,13 +97,13 @@
                                     TIPS
                                 </div>
                                 <div class="row">
-                                    1. 用户完成你的任务后，即可自动领取你的Giveaways
+                                    1. Only after the user completes the tasks you set, they can claim your red envelopes
                                 </div>
                                 <div class="row">
-                                    2. Paypal charges 4.4% + $0.3 fee
+                                    2. Each user can only receive one red envelope
                                 </div>
                                 <div class="row">
-                                    3. Giveaways 有效期是7天，过期后余额将自动返回到你的钱包账户
+                                    3. The red envelope issued is valid for 7 days. Please promote your red envelope as much as possible within the validity period. After the red envelope expires, the red envelope will be returned to your DeNet wallet.
                                 </div>
                                 <div class="more">
                                     More
@@ -128,10 +134,12 @@
 import { ref, watch, reactive, defineProps, defineEmits, onMounted } from "vue";
 import {postPublish, verifyPaypalResult} from "../../http/publishApi"
 import {payCalcFee} from "../../http/pay"
+import { ElMessage } from 'element-plus';
+import 'element-plus/es/components/message/style/css'
 
 import previewCard from "./preview-card";
 import paypalButton from "./paypal-button";
-import followInput from "./followInput";
+import followInput from "./follow-input";
 
 const paypalClientId = 'ASn7k0zqyS5AWYikVSfmamR-RFpjyU_QFJWSxOHHoWE04-RgHNO6nahn0GyHUaUAEBxj-aKgtSrq4O4G';
 
@@ -144,6 +152,9 @@ let dialogHeight = ref(680);
 let previewDialogHeight = ref(680);
 let submitIng = ref(false);
 let atUserList = ref([]);
+let iptErrMsgTxt = ref('');
+let isBack = ref(false);
+
 let finalAmountData = ref({
     currencyCode: "USD",
     feeAmountValue: 0,
@@ -202,6 +213,7 @@ const emits = defineEmits(["close", "confirm", "payPalFinsh"]);
 const close = () => {
     if (showPreview.value) {
         showPreview.value = false;
+        isBack.value = true;
     } else {
         initParams();
         emits("close", false);
@@ -269,8 +281,7 @@ const confirm = () => {
         receiveConditions
     }
 
-    //每人平均要分到大于 0.01美元（1美分）,需要提示语
-    if(amountValue / totalCount < 1) {
+    if(!calcIptValue()) {
         return;
     }
 
@@ -290,6 +301,7 @@ const confirm = () => {
                     publishRes = res.data;
                     // setPreviewDialogHeight();
                     showPreview.value = true;
+                    isBack.value = false;
                 } else {
                     console.log(res);
                 }
@@ -299,6 +311,23 @@ const confirm = () => {
         });
 };
 
+const calcIptValue = (cb) => {
+    let amountValue = baseFormData.amountValue;
+    let totalCount = baseFormData.totalCount;
+    let flag = true;
+
+    if(!amountValue || !totalCount) {
+        return flag;
+    }
+
+    //每人平均要分到大于 0.01美元（1美分)
+    if(amountValue / totalCount < 1) {
+        flag = false;
+    }
+    cb && cb(flag);
+    return flag
+}
+
 const initParams = () => {
     baseFormData.amountValue = '';
     baseFormData.totalCount = '';
@@ -322,6 +351,11 @@ const payPalFinsh = (params) => {
                 emits("payPalFinsh", {publishRes});
                 showPreview.value = false;
                 initParams();
+            } else {
+                ElMessage({
+                    message: 'pay error',
+                    type: 'warning',
+                })
             }
         }
     })
@@ -342,6 +376,9 @@ const delFollowUser = (params) => {
 const onUsdInput = (val) => {
     val = val.replace(/[^\d]/g,'');
     baseFormData.amountValue = val;
+
+    setIptAmountErrorMsg();
+
     return val;
 }
 
@@ -354,9 +391,44 @@ const onCountInput = (val) => {
         val = 9999;
     }
     baseFormData.totalCount = val;
+    setIptAmountErrorMsg();
     return val;
 }
 
+const onUsdBlur = () => {
+    if(!baseFormData.amountValue) {
+        iptErrMsgTxt.value = 'Please enter the giveaways amount in USD input box.';
+    } else {
+        setIptAmountErrorMsg((res) => {
+            if(res) {
+                iptErrMsgTxt.value = '';
+            }
+        })
+    }
+}
+
+const onCountBlur = () => {
+    if(!baseFormData.amountValue) {
+        iptErrMsgTxt.value = 'Please enter the number of giveaways in Quantity input box.';
+    } else {
+        setIptAmountErrorMsg((res) => {
+            if(res) {
+                iptErrMsgTxt.value = '';
+            }
+        })
+    }
+}
+
+const setIptAmountErrorMsg = (cb) => {
+    let res = calcIptValue();
+    if(!res) {
+        iptErrMsgTxt.value = 'If you wish to send {100} red packets, please send USD amount > {$1.00}';
+    } else {
+        iptErrMsgTxt.value = '';
+    }
+    cb && cb(res);
+}
+
 onMounted(() => {
     setPreviewDialogHeight();
     document.onkeydown = function(e){    
@@ -471,11 +543,18 @@ onMounted(() => {
                 border-left: 1px solid #ececec;
 
                 .form-wrapper {
-                    padding: 26px 18px;
+                    padding: 8px 18px 26px 18px;
                     height: calc(100% - 80px);
                     overflow-y: scroll;
                     box-sizing: border-box;
 
+                    .error-msg {
+                        font-size: 12px;
+                        color: #FF0000;
+                        margin-bottom: 8px;
+                        height: 16px;
+                    }
+
                     .form-base {
                         display: flex;
                         justify-content: space-between;

src/view/components/option-withdraw.vue

@@ -63,21 +63,32 @@
                         </div>
                     </div>
 
-                    <div class="error-msg" v-if="showWithdrawError">
-                        *提现金额不足以支付Paypal手续费
+                    <div class="error-msg">
+                        <template  v-if="showWithdrawError">
+                            The minimum withdrawal amount is ${{walletWithdrawConfig.withdrawUSDPreMinAmount}} USD
+                        </template>
+                        <template  v-if="showWithdrawIptError">
+                            The withdrawal amount exceeds the total account balance of ${{canWithdrawBalance}} USD
+                        </template>
                     </div>
                 </div>
 
                 <div class="bottom-msg">
-                    <div v-show="finalWithdrawalAmount">
-                        final amount
-                        <span
-                            >${{
-                                finalWithdrawalAmount > 0
-                                    ? finalWithdrawalAmount
-                                    : 0
-                            }}</span
-                        >
+                    <div class="top">
+                        <template v-if="!calcReq">
+                            <template v-if="finalWithdrawalAmount">
+                                final amount
+                                <span>${{
+                                        finalWithdrawalAmount > 0
+                                            ? finalWithdrawalAmount
+                                            : 0
+                                    }}
+                                </span>
+                            </template>
+                        </template>
+                        <template v-else>
+                            计算中
+                        </template>
                     </div>
                     <div>{{walletWithdrawConfig.withdrawUSDPaypalFeeDesc}}</div>
                 </div>
@@ -135,7 +146,6 @@ const props = defineProps({
     }
 });
 
-
 let requestWithdrawParams = ref({
     amountValue: "",
     currencyCode: "USD",
@@ -146,10 +156,12 @@ let requestWithdrawParams = ref({
 let canWithdrawBalance = ref(props.amountValue);
 
 let showWithdrawError = ref(false);
+let showWithdrawIptError = ref(false);
 let isSubmit = ref(false);
 let withdrawIng = ref(false);
 
 let finalWithdrawalAmount = ref('');
+let calcReq = ref(false);
 
 onMounted(() => {
 });
@@ -178,10 +190,17 @@ const withdrawalAll = () => {
             props.walletWithdrawConfig.withdrawUSDPaypalFee)
     ) {
         showWithdrawError.value = true;
+    } else {
+        showWithdrawError.value = false;
     }
 };
 
 const withdrawCalcAmount = () => {
+    if(showWithdrawIptError.value || showWithdrawError.value || !requestWithdrawParams.value.amountValue) {
+        return;
+    }
+    
+    calcReq.value = true;
     withdrawCalcFee({
         params: {
             amountValue: requestWithdrawParams.value.amountValue * 100,
@@ -189,6 +208,7 @@ const withdrawCalcAmount = () => {
             withdrawChannel: requestWithdrawParams.value.withdrawChannel
         }
     }).then(res => {
+        calcReq.value = false;
         if(res.code == 0) {
             finalWithdrawalAmount.value = res.data.finalAmountValue / 100;
         }
@@ -197,7 +217,7 @@ const withdrawCalcAmount = () => {
 
 const withdrawCalcAmountDebounce = debounce(function() {
     withdrawCalcAmount();
-}, 3000) 
+}, 1000) 
 
 /**
  * 提现
@@ -217,10 +237,10 @@ const withdraw = () => {
     params.withdrawReceiveAccount = params.withdrawReceiveAccount.replace(/\s*/g,"");
     params.amountValue = params.amountValue * 100;
     if(params.amountValue > canWithdrawBalance.value) {
-        ElMessage({
-            message: '大于可提现金额',
-            type: 'warning',
-        })
+        // ElMessage({
+        //     message: '大于可提现金额',
+        //     type: 'warning',
+        // })
         return;
     }
     if(params.amountValue <= props.walletWithdrawConfig.withdrawUSDPaypalFee) {
@@ -267,26 +287,37 @@ const onAmountInput = (value) => {
     requestWithdrawParams.value.amountValue = value;
 
     let amount = value * 100;
+
+    setWithdrawIptStatus(amount);
+
+     // 输入金额大于可提现金额
+    if(amount > canWithdrawBalance.value) {
+        // value = '';
+        // requestWithdrawParams.value.amountValue = '';
+
+        if(!showWithdrawError.value) {
+            showWithdrawIptError.value = true;
+        }
+    } else {
+        showWithdrawIptError.value = false;
+    }
+
+    withdrawCalcAmountDebounce();
+
+    return value;
+};
+
+const setWithdrawIptStatus = (amount) => {
     //显示tips
     if (
         amount > 0 &&
-        amount < props.walletWithdrawConfig.withdrawUSDPaypalFee
+        amount < props.walletWithdrawConfig.withdrawUSDPreMinAmount
     ) {
         showWithdrawError.value = true;
     } else {
         showWithdrawError.value = false;
     }
-    // 输入金额大于可提现金额
-    // if(amount > canWithdrawBalance.value) {
-    //     // let newVal = canWithdrawBalance.value / 100;
-    //     value = '';
-    //     requestWithdrawParams.value.amountValue = '';
-    // }
-
-    withdrawCalcAmountDebounce();
-
-    return value;
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -351,6 +382,7 @@ const onAmountInput = (value) => {
                 font-size: 13px;
                 color: #ff0000;
                 margin-top: -15px;
+                height: 38px;   
             }
         }
 
@@ -358,11 +390,14 @@ const onAmountInput = (value) => {
             font-size: 13px;
             color: #9d9d9d;
             text-align: right;
-            margin-top: 60px;
-            span {
-                font-weight: 500;
-                font-size: 15px;
-                color: #000000;
+            margin-top: 52px;
+            .top {
+                height: 22px;
+                span {
+                    font-weight: 500;
+                    font-size: 15px;
+                    color: #000000;
+                }
             }
         }
     }

src/view/components/preview-card.vue

@@ -24,14 +24,19 @@
                 <img :src="userInfo.avatarUrl"
                     class="avatar"/>
                 <div class="article-wrapper">
-                    <div class="nickname">{{userInfo.nickName}}</div>
+                    <div class="nickname">
+                        {{userInfo.name}}
+                    </div>
+                    <div class="name">
+                        @{{userInfo.nickName}}
+                    </div>
                 </div>
             </div>
             <div v-if="previewType == 1" class="after-cover-wrapper">
                 <div class="cover-text"> 
                     <img :src="userInfo.avatarUrl"
                     class="avatar"/>
-                    Giveaways from: {{userInfo.nickName}}
+                    Giveaways from: {{userInfo.name}}
                 </div>
                 <img class="content-after" 
                 :src="require('../../assets/img/img-red-pack-cover.png')" />
@@ -56,7 +61,8 @@
 
 <script setup>
 import { reactive, ref, defineProps, onMounted } from "vue";
-import {getStorage} from "../../uilts/help"
+import {getChromeStorage} from "../../uilts/chromeExtension"
+import {getUser} from "../../http/publishApi"
 
 let previewType = ref(1);
 let userInfo = ref({});
@@ -89,16 +95,34 @@ const previewCard = (params) => {
     previewType.value = params.value;
 };
 
-const getUserInfo = () => {
-    let localUserInfo = getStorage('de-userInfo');
-    console.log('localUserInfo',localUserInfo)
-    if(localUserInfo) {
-        userInfo.value = localUserInfo;
-    }
+const getUserInfo = (cb) => {
+    getChromeStorage('userInfo', (res) => {
+        if(res) {
+            userInfo.value = res;
+        }
+        cb && cb(res);
+    })
+}
+
+const getUserName = (screenName) => {
+    getUser({
+        params:{
+            screenName
+        }
+    }).then(res => {
+        console.log(res);
+        if(res.code == 0) {
+            userInfo.value.name = res.data.name || ''
+        }
+    });
 }
 
 onMounted(() => {
-    getUserInfo(); 
+    getUserInfo((res) => {
+        if(res) {
+            getUserName(res.nickName);
+        }
+    }); 
 })
 
 </script>
@@ -147,10 +171,15 @@ onMounted(() => {
             }
 
             .article-wrapper {
-                .nickname {
+                display: flex;
+                .nickname, .name {
                     font-weight: 500;
                     font-size: 15px;
                 }
+                .name {
+                    color: #566370;
+                    margin-left: 7px;
+                }
 
                 .desc {
                     margin-top: 8px;

src/view/popup.vue

@@ -439,6 +439,7 @@ const withdrawBack = () => {
         }
         homeVisibility.value = true;
         getAccountBalance();
+        giveReqParams.params.pageNum = 1;
         getLuckdropRecordsList();
     }
 };