[edit] 联调

src/entry/background.js

@@ -9,9 +9,15 @@ import {
     checkPined,
     popupRePublish,
     setBadgeInfo,
-    hideBadge
+    hideBadge,
+    setMessageCount,
+    getMessageInfo,
+    readTaskAllMsg
 } from "@/logic/background/twitter";
 
+//加载bg.js 执行
+setMessageCount();
+
 // 消息通讯
 chrome.runtime.onConnect.addListener(function (port) {
     port.onMessage.addListener(function (res) {
@@ -27,6 +33,13 @@ chrome.runtime.onConnect.addListener(function (port) {
                 break
         }
     });
+    if (port.name === "popup") {
+        port.onDisconnect.addListener(function() {
+            readTaskAllMsg(() => {
+                getMessageInfo();
+            })
+        });
+    }
 });
 
 chrome.runtime.onInstalled.addListener(onInstalledMethod);

src/http/messageApi.js

@@ -0,0 +1,18 @@
+import { service } from "./request";
+
+export function readAllMsgByType(params) {
+    return service({
+        url: `/message/readAllMsgByType`,
+        method: 'post',
+        data: params
+    })
+}
+
+export function getAllMessageInfo(params) {
+    return service({
+        url: `/message/getStat`,
+        method: 'post',
+        data: params
+    })
+}
+

src/http/redPacket.js

@@ -73,4 +73,12 @@ export function getReceivedList(params){
     method: 'post',
     data: params
   }) 
-}
+}
+
+export function terminatedLuckdrop(params){
+  return service({
+    url: `/post/luckdrop/terminatedLuckdrop`,
+    method: 'post',
+    data: params
+  }) 
+}

src/logic/background/fetch/twitter.js

@@ -73,4 +73,77 @@ export async function fetchTwitterShortUrl(url) {
                 resolve(res.toString());
             })
     })
+}
+
+
+export async function fetchAllMessageInfo(params = {}) {
+    let storage_mid = await getChromeStorage('mid') || ''
+    const { accessToken: token = '', uid = '' } = await getChromeStorage('userInfo') || {}
+    const { mid } = storage_mid || {};
+    return new Promise(function (resolve, reject) {
+        if(!token) {
+            resolve({});
+        }
+        let _url = `${baseAPIUrl}/message/getStat`
+        fetch(_url, {
+            method: 'POST', 
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                "baseInfo": {
+                    appVersionCode,
+                    mid,
+                    machineCode: mid,
+                    token: token,
+                    uid,
+                    loginUid: uid,
+                    appType:1,
+                },
+                "params": params
+            }),
+        }).then(response => response.json())
+            .then(data => {
+                resolve(data);
+            })
+            .catch((error) => {
+                reject(error);
+            });
+    })
+}
+
+export async function fetchReadTaskAllMsg(params = {}) {
+    let storage_mid = await getChromeStorage('mid') || ''
+    const { accessToken: token = '', uid = '' } = await getChromeStorage('userInfo') || {}
+    const { mid } = storage_mid || {};
+    return new Promise(function (resolve, reject) {
+        if(!token) {
+            resolve({});
+        }
+        let _url = `${baseAPIUrl}/message/readAllMsgByType`
+        fetch(_url, {
+            method: 'POST', 
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                "baseInfo": {
+                    appVersionCode,
+                    mid,
+                    machineCode: mid,
+                    token: token,
+                    uid,
+                    loginUid: uid,
+                    appType:1,
+                },
+                "params": params
+            }),
+        }).then(response => response.json())
+            .then(data => {
+                resolve(data);
+            })
+            .catch((error) => {
+                reject(error);
+            });
+    })
 }

src/logic/background/twitter.js

@@ -1,4 +1,4 @@
-import { fetchTtwitterRequestToken, fetchTwitterLogin, fetchTwitterShortUrl } from '@/logic/background/fetch/twitter.js'
+import { fetchTtwitterRequestToken, fetchTwitterLogin, fetchTwitterShortUrl, fetchAllMessageInfo, fetchReadTaskAllMsg } from '@/logic/background/fetch/twitter.js'
 import { LANDING_PAGE, LANDING_PAGE_MID, setChromeStorage, setChromeCookie, getChromeCookie ,getChromeStorage, removeChromeCookie} from '@/uilts/chromeExtension.js'
 import { guid } from '@/uilts/help.js'
 import { pageUrl } from '@/http/configAPI'
@@ -50,6 +50,8 @@ export function twitterPinLoginCode(port,code) {
         fetchTwitterLogin(authToken, code, receivedIds).then(res => {
             if (res.code == 0) {
                 setChromeStorage({ userInfo: JSON.stringify(res.data) })
+                // 获取全局消息数据
+                setMessageCount()
                 chrome.cookies.remove(LANDING_PAGE)
             }
         })
@@ -201,8 +203,8 @@ export function popupRePublish(req) {
     });
 }
 
-export function setBadgeInfo() {
-    let {text = '', color = '#DF3535'} = req.data || {};
+export function setBadgeInfo(params) {
+    let {text = '', color = '#DF3535'} = params.data || {};
     chrome.action.setBadgeText({text: text});
     chrome.action.setBadgeBackgroundColor({color: color });
 }
@@ -210,4 +212,38 @@ export function setBadgeInfo() {
 export function hideBadge() {
     chrome.action.setBadgeText({text: ''});
     chrome.action.setBadgeBackgroundColor({color: [0, 0, 0, 0]});
-}
+}
+
+export async function setMessageCount () {
+    const { accessToken: token = '', uid = '' } = await getChromeStorage('userInfo') || {}
+    if(token) {
+        getMessageInfo();
+        setInterval(() => {
+            getMessageInfo();
+        }, 60000);
+    }
+}
+
+export  function getMessageInfo () {
+    fetchAllMessageInfo().then(res => {
+        if(res.code == 0) {
+            let {unReadCountTotal = 0 } = res.data;
+            if(unReadCountTotal > 0) {
+                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
+                setBadgeInfo({data: {text}});
+            } else {
+                hideBadge();
+            }
+        }
+    })
+}
+
+export function readTaskAllMsg(cb) {
+    fetchReadTaskAllMsg({
+        msgType: 1 // 1:任务红包 2:钱包明细
+    }).then(res => {
+        if(res.code == 0) {
+            cb && cb();
+        }
+    });
+}

src/view/components/message-box.vue

@@ -50,7 +50,7 @@ const confirm = () => {
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 1000;
+    z-index: 3000;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     overflow: auto;

src/view/components/popup-transactions.vue

@@ -15,7 +15,8 @@
         <div class="list-wrapper" ref="listContent">
             <div>
                 <div class="cell" v-for="(item, index) in dataList" :key="index">
-                    <red-dot class="red-dots"></red-dot> 
+                    <red-dot class="red-dots"
+                        v-if="item.unReadMsgCount > 0"></red-dot> 
                     <div class="img-wrapper">
                         <!-- 收入- 任务红包领取 -->
                         <template v-if="item.bizType == 1">
@@ -142,11 +143,13 @@
 
 <script setup>
 /* eslint-disable */
-import { onMounted, ref, defineProps, defineEmits } from "vue";
+import { onMounted, ref, defineProps, defineEmits, onBeforeUnmount } from "vue";
 
 import redDot from "@/view/components/red-dot.vue";
 
 import { transactionsList } from "@/http/account";
+import { readAllMsgByType, getAllMessageInfo } from "@/http/messageApi"
+import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";
 var moment = require('moment');
 
 let dataList = ref([]);
@@ -187,9 +190,46 @@ const getTransactionsList = () => {
 };
 
 onMounted(() => {
+    readAllMsgByType({
+        params: {
+            msgType: 1
+        }
+    }).then(res => {
+        setMessageCount();
+    });
     getTransactionsList();
 });
 
+onBeforeUnmount(() => {
+    readAllMsgByType({
+        params: {
+            msgType: 1 // 1:任务红包 2:钱包明细
+        }
+    });
+    readAllMsgByType({
+        params: {
+            msgType: 2
+        }
+    });
+})
+
+
+const setMessageCount = () => {
+    getAllMessageInfo({params: {
+    }}).then(res => {
+        if(res.code == 0) {
+            let {unReadCountTotal = 0 } = res.data;
+            if(unReadCountTotal > 0) {
+                let text = unReadCountTotal > 99 ? '99+' : text+'';
+                setBadgeInfo({data: {text}});
+            } else {
+                hideBadge();
+            }
+        }
+    });
+}
+
+
 const emits = defineEmits(["back"]);
 
 const back = () => {
@@ -292,6 +332,8 @@ const listScroll = (e) => {
                         font-weight: 500;
                         font-size: 14px;
                         margin-bottom: 5px;
+                        word-break: break-all;
+                        max-width: 120px;
                     }
 
                     .time {

src/view/iframe/publish/components/preview-card.vue

@@ -160,7 +160,8 @@ const getUserName = (screenName) => {
 
 const calcPreviewCanvasParams = () => {
     nextTick(() => {
-        let domHeight = document.querySelector('.card-container').offsetHeight;
+        let containerDom = document.querySelector('.card-container');
+        let domHeight = containerDom && containerDom.offsetHeight || 500;
         const canvasHeight = 820, canvasWidth = 600;
         if(domHeight < canvasHeight) {
             //比例: 高 / 宽

src/view/popup/popup.vue

@@ -41,7 +41,8 @@
                             :key="index"
                             @click="clickListItem(item, index)">
 
-                            <!-- <red-dot class="red-dots"></red-dot> -->
+                            <red-dot class="red-dots"
+                                v-if="item.unReadMsgCount > 0"></red-dot>
 
                             <div class="img-wrapper">
                                 <!-- 收到红包 -->
@@ -112,9 +113,9 @@
                                             <template v-else-if="item.status == 1">
                                                 {{item.postTaskLuckdrop.receivedCount}}/{{item.postTaskLuckdrop.totalCount}}
                                             </template>
-                                            <!-- 已结束 -->
-                                            <template v-else-if="item.status == 2">
-                                                (Time expired)
+                                            <!-- 2:已结束; 3:提前终止-->
+                                            <template v-else-if="item.status == 2 || item.status == 3">
+                                                ({{item.status == 2 ? 'Time expired' : 'Termination'}})
                                                 {{
                                                         item.postTaskLuckdrop
                                                             .receivedCount
@@ -123,34 +124,35 @@
                                                             .totalCount
                                                 }}
                                             </template>
-                                            <!-- 红包提前终止/退款（进行中）显示 缺少if判断-->
-                                            <!-- <template>
+                                            <!-- 红包提前终止/退款（进行中）显示-->
+                                            <template v-if="item.status == 4">
                                                 Terminating
-                                            </template> -->
-
-                                            <!-- 进行中或者未发送成功时显示 -->
-                                            <div  class="desc-bottom-bar" 
-                                                v-if="item.status == 1 || item.postTaskLuckdrop.reSendAvailable">
-                                                <!-- 没有终止红包时显示 缺少if判断 -->
-                                                <div class="btn"
-                                                    @click="terminaHandler(item)">
+                                            </template>
+
+                                            <!-- 进行中或者未发送成功时显示 
+                                                v-if="item.status == 1 || item.postTaskLuckdrop.reSendAvailable"-->
+                                            <div  class="desc-bottom-bar">
+                                                <!-- 没有终止红包时显示 -->
+                                                <div v-if="item.postTaskLuckdrop.terminatedAvailable"
+                                                    class="btn"
+                                                    @click.stop="terminaHandler(item, index)">
                                                     Termination
                                                 </div>
+                                                
                                                 <!-- 红包未发出显示 -->
                                                 <div class="btn send-btn"
                                                     v-if="item.postTaskLuckdrop.reSendAvailable"       
                                                     @click.stop="sendTwitter(item)">
                                                     Send
                                                 </div>
-                                                <div v-else
+                                                <div v-else-if="item.srcContentId"
                                                     class="btn detail-btn"
                                                     @click.stop="clickListItem(item, index)">details</div>
                                             </div>
                                         </div>
                                     </div>
                                     <!-- 发红包—— 未发出、进行中 隐藏 -->
-                                    <img v-if="!(item.type == 2 &&
-                                                (item.status == 1 || item.postTaskLuckdrop.reSendAvailable))" 
+                                    <img v-if="item.type != 2" 
                                         class="icon" 
                                         :src="require('@/assets/svg/icon-cell-arrow-right.svg')" />
                                 </div>
@@ -201,7 +203,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, inject } from "vue";
+import { ref, onMounted, inject, onBeforeUnmount } from "vue";
 
 import popupLogin from "@/view/popup/components/login.vue";
 import popupTransactions from "@/view/components/popup-transactions";
@@ -213,6 +215,9 @@ import {
     getChromeStorage,
 } from "@/uilts/chromeExtension";
 import { getBalance, getMineLuckdropRecords } from "@/http/account";
+import { readAllMsgByType, getAllMessageInfo } from "@/http/messageApi"
+import { terminatedLuckdrop } from "@/http/redPacket";
+import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";
 import Report from "@/log-center/log";
 import router from "@/router/popup.js";
 import VHead from '@/view/popup/components/head.vue'
@@ -243,6 +248,9 @@ let isRequestWithdrawBalance = ref(false);
 let currentTabIndex = ref(0);
 let giveList = ref([]);
 
+// 钱包未读数
+let unReadCountWallet = ref(0);
+
 let giveReqParams = {
     params: {
         pageNum: 1,
@@ -285,6 +293,7 @@ onMounted(() => {
         if (isLogin.value) {
             getAccountBalance();
             getLuckdropRecordsList();
+            chrome.runtime.connect({ name: "popup" });
             Report.reportLog({
                 pageSource: Report.pageSource.denetHomePage,
                 businessType: Report.businessType.pageView,
@@ -298,8 +307,35 @@ onMounted(() => {
             });
         }
     });
+    setMessageCount();
+});
+
+onBeforeUnmount(() => {
+    readAllMsgByType({
+        params: {
+            msgType: 1
+        }
+    }).then(res => {
+        setMessageCount();
+    })
 });
 
+const setMessageCount = () => {
+    getAllMessageInfo({params: {
+    }}).then(res => {
+        if(res.code == 0) {
+            let {unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0} = res.data;
+            unReadCountWallet.value = unReadCountWalletDetail;
+            if(unReadCountTotal > 0) {
+                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
+                setBadgeInfo({data: {text}});
+            } else {
+                hideBadge();
+            }
+        }
+    });
+}
+
 const moreItemHandle = (params) => {
     window.open(params.href);
 }
@@ -512,14 +548,27 @@ const clickTopUp = () => {
     router.push('/top-up/home');
 }
 
-const terminaHandler = (params) => {
+const terminaHandler = (params, index) => {
     terminaTask = params;
+    terminaTask.index = index;
     modalVisible.value = true;
 }
 
 const modalCancel = () => {
     //请求终止接口 id terminaTask.id 、 刷新当前列表、 关闭 
     modalVisible.value = false;
+    let index = terminaTask.index;
+    terminatedLuckdrop({
+        params: {
+            luckdropId: terminaTask.id
+        }
+    }).then(res => {
+        if(res.code == 0) {
+            giveList.value[index]['status'] = res.data.status;
+            giveList.value[index]['postTaskLuckdrop']['reSendAvailable'] = false;
+            giveList.value[index]['postTaskLuckdrop']['terminatedAvailable'] = false;
+        }
+    });
     terminaTask = {};
 }
 
@@ -777,7 +826,6 @@ body {
                                     .btn {
                                         min-width: 80px;
                                         height: 29px;
-                                        line-height: 29px;
                                         padding: 0 8px;
                                         box-sizing: border-box;
                                         font-weight: 400;
@@ -787,6 +835,9 @@ body {
                                         border-radius: 100px;
                                         color: #5E5E5E;
                                         border: 1px solid #DFDFDF;
+                                        display: flex;
+                                        align-items: center;
+                                        justify-content: center;
                                     }
 
                                     .send-btn {