Merge branch 'test' into feature_220511_ui_modify

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 = [255, 0, 0, 255]} = 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,6 +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"
+                        v-if="item.unReadMsgCount > 0"></red-dot> 
                     <div class="img-wrapper">
                         <!-- 收入- 任务红包领取 -->
                         <template v-if="item.bizType == 1">
@@ -141,9 +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([]);
@@ -184,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 = () => {
@@ -248,6 +291,13 @@ const listScroll = (e) => {
             min-height: 66px;
             box-sizing: border-box;
             padding-left: 20px;
+            position: relative;
+
+            .red-dots {
+                position: absolute; 
+                right: 4px; 
+                top: 4px;
+            }
 
             .img-wrapper {
                 position: relative;
@@ -282,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/components/red-dot.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="red-dot" 
+        :style="{width: size + 'px', height: size + 'px',
+        background: color}">
+    </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+defineProps({
+    size: {
+        type: String,
+        default: '8'
+    },
+    color: {
+        type: String,
+        default: '#FF0000'
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.red-dot {
+    border-radius: 50%;
+}
+</style>

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/iframe/publish/give-dialog.vue

@@ -7,6 +7,7 @@
             <div class="pop-mask"  
                 v-show="showCurrencyPop" 
                 @click.stop="showCurrencyPop = false"></div>
+
             <!-- 头部 -->
             <div class="head">
                 <div class="left">
@@ -41,18 +42,22 @@
                     </div>
                 </div>
             </div>
+
             <!-- 内容 -->
             <div class="body">
                 <img src="@/assets/gif/icon-guide-select.gif"
                     class="icon-guide-select"
                     v-if="!currentCurrencyInfo.currencyCode && showComType == 'default'">
+
                 <!-- 充值组件 -->
                 <top-up v-if="showComType == 'topUp'" 
                     :asyncIng="asyncIng"
                     :currentCurrencyInfo="tempCurrentCurrencyInfo"
                     @topUpDone="topUpDone"></top-up>
+
                 <!-- 表单填写容器 -->
                 <div class="body-content" v-if="showComType != 'topUp'">
+
                     <!-- 货币列表  -->
                     <div class="currency-pop" v-show="showCurrencyPop">
                         <currency-list 
@@ -77,6 +82,7 @@
                                 class="img-mode"
                                 :src="require('@/assets/svg/img-mode.svg')"
                             />
+
                             <!-- 金额、数量 -->
                             <div class="form-base">
                                 <div class="item currency-select-wrapper">
@@ -125,6 +131,7 @@
                                     />
                                 </div>
                             </div>
+
                             <!-- 刷新按钮、充值 -->
                             <div class="form-base-help" v-show="currentCurrencyInfo.currencyCode">
                                 <div class="currency-operation">
@@ -153,6 +160,7 @@
                                 </div>
                             </div>
                             <div class="form-label">Tasks</div>
+
                             <!-- 转推、like、关注 -->
                             <div class="form-require">
                                 <div
@@ -216,6 +224,7 @@
                                 </div>
                                 <el-switch v-model="openAntiBot" />
                             </div> -->
+
                             <!-- 提示 -->
                             <ul class="tips-wrapper">
                                 <li class="row">
@@ -244,6 +253,7 @@
                                 </div>
                             </div>
                         </div>
+
                         <!-- 预览 -->
                         <template v-else-if="showComType == 'preview'">
                             <preview-card
@@ -253,6 +263,7 @@
                                 :amountFontSize="previewFontSize"
                             ></preview-card>
                         </template>
+
                         <!-- paypal支付按钮 -->
                         <div v-show="showComType == 'preview'">
                             <paypal-button
@@ -272,6 +283,7 @@
                 </div>
             </div>
         </div>
+        
         <!-- 提示 -->
         <message-box
             :dialogVisible="showMessageBox"

src/view/popup/components/modal.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="msg-box-overlay" v-if="visible">
+        <div class="content-wrapper">
+            <div class="title">{{title}}</div>
+            <div class="desc">{{content}}</div>
+            <div class="btn-wrapper">
+                <div class="btn cancel" @click="cancel">
+                    {{cancelText}}
+                </div>
+                <div class="btn confirm" @click="confirm">
+                    {{confirmText}}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+/* eslint-disable */
+import { defineEmits, defineProps } from "vue";
+const props = defineProps({
+    visible: {
+        type: Boolean,
+        default: false,
+    },
+    title: {
+        type: String,
+        default: ''
+    },
+    content: {
+        type: String,
+        default: ''
+    },
+    cancelText: {
+        type: String, 
+        default: 'Cancel'
+    },
+    confirmText: {
+        type: String, 
+        default: 'Confirm'
+    }
+});
+
+const emits = defineEmits(["cancel", "confirm"]);
+
+
+const cancel = () => {
+    emits("cancel", {});
+};
+
+const confirm = () => {
+    emits("confirm", {});
+};
+
+</script>
+
+<style lang="scss" scoped>
+.msg-box-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    overflow: auto;
+
+    .content-wrapper {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 335px;
+        min-height: 190px;
+        background: #FFFFFF;
+        border-radius: 20px;
+        padding: 20px 13px;
+        box-sizing: border-box;
+        transform: translate(-50%, -50%);
+        text-align: center;
+
+        .title {
+            font-weight: 600;
+            font-size: 18px;
+            margin-bottom: 13px;
+        }
+        .desc {
+            min-height: 44px;
+            font-weight: 400;
+            font-size: 15px;
+            margin-bottom: 20px;
+        }
+        .btn-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .btn {
+                width: 150px;
+                height: 46px;
+                border-radius: 100px;
+                box-sizing: border-box;
+                font-weight: 600;
+                font-size: 16px;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .cancel {
+                color: #fff;
+                background: #FF0000;
+            }
+            .confirm {
+                color: #000;
+                border: 1px solid #000000;
+            }
+        }
+    }
+}
+</style>

src/view/popup/popup.vue

@@ -18,9 +18,13 @@
                     <div class="top-up-btn" @click="clickTopUp">Deposit</div>
                 </div>
             </div>
+
             <div class="tab-bar">
-                <div class="tab-item" :class="{ active: currentTabIndex == index }" v-for="(item, index) in tabList"
-                    :key="index" @click="clickTab(item, index)">
+                <div class="tab-item" 
+                    :class="{ active: currentTabIndex == index }" 
+                    v-for="(item, index) in tabList"
+                    :key="index" 
+                    @click="clickTab(item, index)">
                     <img :src="item.icon" class="icon" />
                     {{ item.label }}
                 </div>
@@ -28,8 +32,14 @@
             <div class="list-wrapper" ref="pageGiveListDom">
                 <div class="give-list" v-if="currentTabIndex == 0">
                     <template v-if="giveList.length">
-                        <div class="cell" v-for="(item, index) in giveList" :key="index"
+                        <div class="cell" 
+                            v-for="(item, index) in giveList" 
+                            :key="index"
                             @click="clickListItem(item, index)">
+
+                            <red-dot class="red-dots"
+                                v-if="item.unReadMsgCount > 0"></red-dot>
+
                             <div class="img-wrapper">
                                 <!-- 收到红包 -->
                                 <template v-if="item.type == 1">
@@ -97,41 +107,50 @@
                                             </template>
                                             <!-- 进行中 -->
                                             <template v-else-if="item.status == 1">
-                                                {{
-                                                        item.postTaskLuckdrop
-                                                            .receivedCount
-                                                }}/{{
-        item.postTaskLuckdrop
-            .totalCount
-}}
+                                                {{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
                                                 }}/{{
-        item.postTaskLuckdrop
-            .totalCount
-}}
+                                                        item.postTaskLuckdrop
+                                                            .totalCount
+                                                }}
                                             </template>
-                                            <!-- 红包未发出显示 -->
-                                            <div v-if="item.postTaskLuckdrop.reSendAvailable" class="send-btn"
-                                                @click.stop="sendTwitter(item)">
-                                                Send
+                                            <!-- 红包提前终止/退款（进行中）显示-->
+                                            <template v-if="item.status == 4">
+                                                Terminating
+                                            </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-if="item.srcContentId"
+                                                    class="btn detail-btn"
+                                                    @click.stop="clickListItem(item, index)">details</div>
                                             </div>
                                         </div>
                                     </div>
-                                    <!-- 发红包，红包未发出隐藏-->
-                                    <img v-if="
-                                        !(
-                                            item.type == 2 &&
-                                            item.postTaskLuckdrop.reSendAvailable
-                                        )
-                                    " class="icon" :src="
-    require('@/assets/svg/icon-cell-arrow-right.svg')
-" />
+                                    <!-- 发红包—— 未发出、进行中 隐藏 -->
+                                    <img v-if="item.type != 2" 
+                                        class="icon" 
+                                        :src="require('@/assets/svg/icon-cell-arrow-right.svg')" />
                                 </div>
                             </div>
                         </div>
@@ -169,20 +188,32 @@
             <popup-withdraw :amountValue="canWithdrawBalance" :walletWithdrawConfig="walletWithdrawConfig"
                 v-if="withdrawVisibility" @back="withdrawBack" />
         </template>
+        <modal :visible="modalVisible"   
+            title="Early termination of Giveaway?"
+            content="This operation will close the red envelope and refund the remaining amount within 2 days"
+            cancelText="Termination"
+            confirmText="Cancel"
+            @cancel="modalCancel"
+            @confirm="modalConfirm" />
     </div>
 </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";
 import popupWithdraw from "@/view/components/popup-withdraw.vue";
+import redDot from "@/view/components/red-dot.vue";
+import modal from "@/view/popup/components/modal.vue";
 
 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'
@@ -199,6 +230,9 @@ let isLogin = ref(false);
 let homeVisibility = ref(false);
 let transactionsVisibility = ref(false);
 let withdrawVisibility = ref(false);
+let modalVisible = ref(false);
+
+let terminaTask = {};
 
 let userInfo = ref({});
 let canWithdrawBalance = ref(0);
@@ -210,6 +244,9 @@ let isRequestWithdrawBalance = ref(false);
 let currentTabIndex = ref(0);
 let giveList = ref([]);
 
+// 钱包未读数
+let unReadCountWallet = ref(0);
+
 let giveReqParams = {
     params: {
         pageNum: 1,
@@ -260,6 +297,7 @@ onMounted(() => {
         if (isLogin.value) {
             getAccountBalance();
             getLuckdropRecordsList();
+            chrome.runtime.connect({ name: "popup" });
             Report.reportLog({
                 pageSource: Report.pageSource.denetHomePage,
                 businessType: Report.businessType.pageView,
@@ -273,8 +311,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);
 }
@@ -368,7 +433,6 @@ const clickListItem = (params) => {
     if (!params.srcContentId) {
         return;
     }
-    let url = "";
     let twitterUrl = "https://twitter.com/";
     let nickName = "";
     if (params.type == 1) {
@@ -376,7 +440,7 @@ const clickListItem = (params) => {
     } else if (params.type == 2) {
         nickName = userInfo.value.nickName;
     }
-    url = twitterUrl + nickName + "/status/" + params.srcContentId;
+    let url = twitterUrl + nickName + "/status/" + params.srcContentId;
 
     chrome.tabs.create({
         url,
@@ -444,7 +508,10 @@ const login = () => {
  */
 const callEventPageMethod = (actionType, data, callback) => {
     chrome.runtime.sendMessage(
-        { actionType: actionType, data: data },
+        { 
+            actionType: actionType, 
+            data: data 
+        },
         function (response) {
             if (typeof callback === "function") callback(response);
         }
@@ -458,7 +525,10 @@ const sendTwitter = (params) => {
     console.log(params)
     callEventPageMethod(
         "POPUP_PUBLISH_TWITTER_RED_PACK",
-        { srcContent: params.postTaskLuckdrop.srcContent, postId: params.postTaskLuckdrop.postId },
+        { 
+            srcContent: params.postTaskLuckdrop.srcContent, 
+            postId: params.postTaskLuckdrop.postId 
+        },
         function (response) {
             console.log("res", response);
         }
@@ -482,6 +552,34 @@ const clickTopUp = () => {
     router.push('/top-up/home');
 }
 
+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 = {};
+}
+
+const modalConfirm = () => {
+    modalVisible.value = false;
+    terminaTask = {};
+}
 
 </script>
 
@@ -657,9 +755,16 @@ body {
                 align-items: center;
                 min-height: 66px;
                 box-sizing: border-box;
-                padding-left: 20px;
+                padding-left: 14px;
+                position: relative;
                 cursor: pointer;
 
+                .red-dots {
+                    position: absolute; 
+                    right: 4px; 
+                    top: 4px;
+                }
+
                 .img-wrapper {
                     position: relative;
                     margin-right: 16px;
@@ -686,7 +791,7 @@ body {
                     align-items: center;
                     border-bottom: 1px solid #d1d1d1;
                     box-sizing: border-box;
-                    padding: 8px 16px 8px 0;
+                    padding: 10px 14px 10px 0;
 
                     .left {
                         .nickname {
@@ -721,10 +826,10 @@ body {
                                     max-width: 68px;
                                     word-break: break-all;
                                     line-height: 18px;
+                                    color: #E29A2E;
                                 }
 
                                 .coin-type {
-                                    color: #E29A2E;
                                     margin-left: 3px;
                                 }
 
@@ -738,23 +843,40 @@ body {
                             .desc {
                                 font-size: 12px;
                                 color: #b6b6b6;
-                                display: flex;
-                                align-items: center;
-                                justify-content: end;
                                 margin-top: 5px;
+                                text-align: right;
 
-                                .send-btn {
-                                    height: 24px;
-                                    width: 54px;
-                                    line-height: 24px;
-                                    text-align: center;
-                                    border-radius: 100px;
-                                    border: 1px solid #1D9BF0;
-                                    color: #1D9BF0;
-                                    font-weight: 500;
-                                    font-size: 14px;
-                                    cursor: pointer;
-                                    margin-left: 8px;
+                                .desc-bottom-bar {
+                                    display: flex;
+                                    align-items: center;
+                                    justify-content: end;
+                                    margin-top: 10px;
+
+                                    .btn {
+                                        min-width: 80px;
+                                        height: 29px;
+                                        padding: 0 8px;
+                                        box-sizing: border-box;
+                                        font-weight: 400;
+                                        font-size: 14px;
+                                        cursor: pointer;
+                                        text-align: center;
+                                        border-radius: 100px;
+                                        color: #5E5E5E;
+                                        border: 1px solid #DFDFDF;
+                                        display: flex;
+                                        align-items: center;
+                                        justify-content: center;
+                                    }
+
+                                    .send-btn {
+                                        border: 1px solid #1D9BF0;
+                                        color: #1D9BF0;
+                                    }
+
+                                    .detail-btn, .send-btn {
+                                        margin-left: 8px;
+                                    }
                                 }
                             }
                         }
@@ -763,6 +885,7 @@ body {
                             width: 18px;
                             height: 24px;
                             margin-left: 4px;
+                            margin-right: -5px;
                         }
                     }
                 }