[feature] red dot、termination

src/logic/background/twitter.js

@@ -202,7 +202,7 @@ export function popupRePublish(req) {
 }
 
 export function setBadgeInfo() {
-    let {text = '', color = [255, 0, 0, 255]} = req.data || {};
+    let {text = '', color = '#DF3535'} = req.data || {};
     chrome.action.setBadgeText({text: text});
     chrome.action.setBadgeBackgroundColor({color: color });
 }

src/view/components/popup-transactions.vue

@@ -15,6 +15,7 @@
         <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> 
                     <div class="img-wrapper">
                         <!-- 收入- 任务红包领取 -->
                         <template v-if="item.bizType == 1">
@@ -143,6 +144,8 @@
 /* eslint-disable */
 import { onMounted, ref, defineProps, defineEmits } from "vue";
 
+import redDot from "@/view/components/red-dot.vue";
+
 import { transactionsList } from "@/http/account";
 var moment = require('moment');
 
@@ -248,6 +251,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;

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/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

@@ -21,11 +21,14 @@
                     <div class="withdraw-btn" @click="clickWithdraw">Withdraw</div>
                     <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>
@@ -33,8 +36,13 @@
             <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"></red-dot> -->
+
                             <div class="img-wrapper">
                                 <!-- 收到红包 -->
                                 <template v-if="item.type == 1">
@@ -102,13 +110,7 @@
                                             </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">
@@ -117,26 +119,40 @@
                                                         item.postTaskLuckdrop
                                                             .receivedCount
                                                 }}/{{
-        item.postTaskLuckdrop
-            .totalCount
-}}
+                                                        item.postTaskLuckdrop
+                                                            .totalCount
+                                                }}
                                             </template>
-                                            <!-- 红包未发出显示 -->
-                                            <div v-if="item.postTaskLuckdrop.reSendAvailable" class="send-btn"
-                                                @click.stop="sendTwitter(item)">
-                                                Send
+                                            <!-- 红包提前终止/退款（进行中）显示 缺少if判断-->
+                                            <!-- <template>
+                                                Terminating
+                                            </template> -->
+
+                                            <!-- 进行中或者未发送成功时显示 -->
+                                            <div  class="desc-bottom-bar" 
+                                                v-if="item.status == 1 || item.postTaskLuckdrop.reSendAvailable">
+                                                <!-- 没有终止红包时显示 缺少if判断 -->
+                                                <div class="btn"
+                                                    @click="terminaHandler(item)">
+                                                    Termination
+                                                </div>
+                                                <!-- 红包未发出显示 -->
+                                                <div class="btn send-btn"
+                                                    v-if="item.postTaskLuckdrop.reSendAvailable"       
+                                                    @click.stop="sendTwitter(item)">
+                                                    Send
+                                                </div>
+                                                <div v-else
+                                                    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 &&
+                                                (item.status == 1 || item.postTaskLuckdrop.reSendAvailable))" 
+                                        class="icon" 
+                                        :src="require('@/assets/svg/icon-cell-arrow-right.svg')" />
                                 </div>
                             </div>
                         </div>
@@ -174,6 +190,13 @@
             <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>
 
@@ -183,6 +206,8 @@ import { ref, onMounted, inject } 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,
@@ -204,6 +229,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);
@@ -365,7 +393,6 @@ const clickListItem = (params) => {
     if (!params.srcContentId) {
         return;
     }
-    let url = "";
     let twitterUrl = "https://twitter.com/";
     let nickName = "";
     if (params.type == 1) {
@@ -373,7 +400,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,
@@ -441,7 +468,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);
         }
@@ -455,7 +485,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);
         }
@@ -479,6 +512,21 @@ const clickTopUp = () => {
     router.push('/top-up/home');
 }
 
+const terminaHandler = (params) => {
+    terminaTask = params;
+    modalVisible.value = true;
+}
+
+const modalCancel = () => {
+    //请求终止接口 id terminaTask.id 、 刷新当前列表、 关闭 
+    modalVisible.value = false;
+    terminaTask = {};
+}
+
+const modalConfirm = () => {
+    modalVisible.value = false;
+    terminaTask = {};
+}
 
 </script>
 
@@ -629,9 +677,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;
@@ -658,7 +713,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 {
@@ -693,10 +748,10 @@ body {
                                     max-width: 68px;
                                     word-break: break-all;
                                     line-height: 18px;
+                                    color: #E29A2E;
                                 }
 
                                 .coin-type {
-                                    color: #E29A2E;
                                     margin-left: 3px;
                                 }
 
@@ -710,23 +765,38 @@ 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;
+                                        line-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;
+                                    }
+
+                                    .send-btn {
+                                        border: 1px solid #1D9BF0;
+                                        color: #1D9BF0;
+                                    }
+
+                                    .detail-btn, .send-btn {
+                                        margin-left: 8px;
+                                    }
                                 }
                             }
                         }
@@ -735,6 +805,7 @@ body {
                             width: 18px;
                             height: 24px;
                             margin-left: 4px;
+                            margin-right: -5px;
                         }
                     }
                 }