Merge branch 'dev_1.1.5' into feature_220712_US_pay

# Conflicts:
#	src/http/configAPI.js

src/assets/subject/icon-uninstall-bg.svg

@@ -0,0 +1,10 @@
+<svg width="330" height="56" viewBox="0 0 330 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.2" width="330" height="56" fill="url(#paint0_linear_22715_225612)"/>
+<defs>
+<linearGradient id="paint0_linear_22715_225612" x1="1.69508e-06" y1="27.3488" x2="330" y2="27.3488" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.36788" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

src/entry/background.js

@@ -25,8 +25,7 @@ import {
     checkShowPublishDialog
 } from "@/logic/background/twitter";
 import Report from "@/log-center/log"
-import { PingPong, httpNetWork } from "@/logic/background/help";
-import { commonFetch } from '@/http/fetch'
+import { PingPong, httpNetWork, httpContentToBack } from "@/logic/background/help";
 import { appVersionCode } from '@/http/configAPI.js'
 import { getChromeStorage, setChromeStorage } from '@/uilts/chromeExtension.js'
 
@@ -89,11 +88,14 @@ chrome.action.onClicked.addListener(function (tab) {
 chrome.tabs.onActivated.addListener(function (activeInfo) {
     setPopupConfig(activeInfo);
 })
+
 function onInstalledMethod() {
     try {
         // 版本更新判断
         getChromeStorage('baseInfo', (info) => {
-            if (!info || !info.appVersionCode || appVersionCode != info.appVersionCode) {
+            if (!info || !info.appVersionCode) {
+                setChromeStorage({ baseInfo: JSON.stringify({ appVersionCode }) })
+            } else if (appVersionCode != info.appVersionCode) {
                 setChromeStorage({ baseInfo: JSON.stringify({ appVersionCode }) }, () => {
                     chrome.runtime.reload()
                 })
@@ -190,13 +192,7 @@ function onMessageMethod(req, sender, sendResponse) {
                     httpNetWork(req.funcName, req.data, sender)
                     break
                 case 'HTTP_CONTENT_TO_BACK':
-                    commonFetch(req.data)
-                    .then((response) => {
-                        chrome.tabs.sendMessage(sender.tab.id, { actionType: 'HTTP_BACK_TO_CONTENT', data: response, callback_id: req.callback_id });
-                    })
-                    .catch(() => {
-                        chrome.tabs.sendMessage(sender.tab.id, { actionType: 'HTTP_BACK_TO_CONTENT', data: null, callback_id: req.callback_id });
-                    })
+                    httpContentToBack(req, sender)
                     break
                 case 'CONTENT_TWITTER_SHORT_LINK':
                     req.arr_url.forEach(item => {

src/entry/content.js

@@ -148,7 +148,6 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
             setPopupConfByPopupPage();
             break
         case 'IFREME_TAB_GROUP_SET_IFRAME_HEIGHT':
-            console.log('IFREME_TAB_GROUP_SET_IFRAME_HEIGHT', req)
             setTabGroupIframeStyle(req.data);
             break
         case 'IFREME_TAB_GROUP_CONTENT_GET_NAV_TOP':

src/logic/background/fetch/twitter.js

@@ -125,4 +125,5 @@ export async function fetchGetAllUnReadNotices(params = {}) {
         url: '/notice/getAllUnReadNotices',
         params
     })
-}
+}
+

src/logic/background/help.js

@@ -27,9 +27,19 @@ export const setContentMessage = (obj) => {
     chrome.tabs.query({}, (tabs = []) => {
         if (tabs.length) {
             tabs = tabs.filter((item) => { return item.active && item.selected && item.highlighted }) || []
-            tabs.forEach((item)=>{
+            tabs.forEach((item) => {
                 chrome.tabs.sendMessage(item.id, obj);
             })
         }
     })
+}
+
+export const httpContentToBack = (req, sender) => {
+    commonFetch(req.data)
+        .then((response) => {
+            chrome.tabs.sendMessage(sender.tab.id, { actionType: 'HTTP_BACK_TO_CONTENT', data: response, callback_id: req.callback_id });
+        })
+        .catch(() => {
+            chrome.tabs.sendMessage(sender.tab.id, { actionType: 'HTTP_BACK_TO_CONTENT', data: null, callback_id: req.callback_id });
+        })
 }

src/logic/background/twitter.js

@@ -1,7 +1,7 @@
 import { fetchTtwitterRequestToken, fetchTwitterLogin, fetchTwitterShortUrl, fetchAllMessageInfo, fetchReadTaskAllMsg, getDiscordUserInfo, fetchGetTwitterNftPostPre, fetchPublish, fetchGetAllUnReadNotices } from '@/logic/background/fetch/twitter.js'
-import { LANDING_PAGE, LANDING_PAGE_MID, setChromeStorage, setChromeCookie, getChromeCookie, getChromeStorage, removeChromeCookie } from '@/uilts/chromeExtension.js'
+import { LANDING_PAGE, LANDING_PAGE_MID, setChromeStorage, setChromeCookie, getChromeCookie, getChromeStorage, removeChromeCookie, LANDING_PAGE_JUMP_INFO } from '@/uilts/chromeExtension.js'
 import { guid } from '@/uilts/help.js'
-import { pageUrl, discordAuthRedirectUri } from '@/http/configAPI'
+import { discordAuthRedirectUri } from '@/http/configAPI'
 import { setContentMessage } from '@/logic/background/help.js'
 
 let authToken = ''
@@ -250,20 +250,20 @@ function sendActivetabMessage(message = {}) {
  */
 
 export function onInstalledCreateTab() {
-    // 落地页参数
-    let cookiesParams = {
-        name: 'jump_info',
-        url: pageUrl
-    }
-    getChromeCookie(cookiesParams, (res) => {
+    getChromeCookie(LANDING_PAGE_JUMP_INFO, (res) => {
         // jump_info
         if (!res || !res.jump_type) {
+            chrome.tabs.create({
+                url: "https://twitter.com",
+            });
             return
         }
+        let created_detail = false
         switch (String(res.jump_type)) {
             // 普通红包
             case 'red_packet':
                 if (res && res.postNickName && res.srcContentId) {
+                    created_detail = true
                     let url = `https://twitter.com/${res.postNickName}/status/${res.srcContentId}`
                     chrome.tabs.create({
                         url
@@ -273,6 +273,7 @@ export function onInstalledCreateTab() {
             // 抽奖红包
             case 'luck_draw':
                 if (res && res.postNickName && res.srcContentId) {
+                    created_detail = true
                     let url = `https://twitter.com/${res.postNickName}/status/${res.srcContentId}`
                     chrome.tabs.create({
                         url
@@ -282,6 +283,7 @@ export function onInstalledCreateTab() {
             // NFT
             case 'ntf_info':
                 if (res && res.twitterAccount && res.nftProjectId) {
+                    created_detail = true
                     let url = `https://twitter.com/${res.twitterAccount}`
                     chrome.tabs.create({
                         url
@@ -291,6 +293,7 @@ export function onInstalledCreateTab() {
             // NFT 组
             case 'nft_group_info':
                 if (res && res.twitterAccount) {
+                    created_detail = true
                     // setChromeStorage({ groupTabData: JSON.stringify({
                     //     deTabVal: 'deGroupTab'
                     // })})
@@ -309,18 +312,22 @@ export function onInstalledCreateTab() {
             // toolbox
             case 'tool_box':
                 if (res && res.postNickName && res.srcContentId) {
+                    created_detail = true
                     let url = `https://twitter.com/${res.postNickName}/status/${res.srcContentId}`
                     chrome.tabs.create({
                         url
                     });
                 }
                 break
-            default:
-                chrome.tabs.create({
-                    url: "https://twitter.com",
-                });
         }
-        removeChromeCookie(cookiesParams)
+
+        if (created_detail == false) {
+            chrome.tabs.create({
+                url: "https://twitter.com",
+            });
+        }
+
+        removeChromeCookie(LANDING_PAGE_JUMP_INFO)
     })
 }
 
@@ -517,9 +524,11 @@ export const checkShowPublishDialog = (params) => {
 }
 
 const createTabShowGiveaway = (params) => {
-    setChromeStorage({showGiveawayData : JSON.stringify({
-        show: true
-    })});
+    setChromeStorage({
+        showGiveawayData: JSON.stringify({
+            show: true
+        })
+    });
     chrome.tabs.create({
         url: params.url,
     });

src/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "DeNet",
     "description": "Growing more twitter followers with Denet",
-    "version": "1.1.4",
+    "version": "1.1.5",
     "background": {
         "service_worker": "/js/background.js"
     },
@@ -24,6 +24,7 @@
             "js": [
                 "/js/content_help.js"
             ],
+            "all_frames": true,
             "css": [
                 "/css/content_help.css"
             ]

src/uilts/chromeExtension.js

@@ -1,6 +1,6 @@
 import { pageUrl } from "@/http/configAPI.js"
-import { exp } from "mathjs"
 import { guid } from "@/uilts/help";
+
 export const LANDING_PAGE = {
     name: 'received_log',
     url: pageUrl
@@ -11,11 +11,20 @@ export const LANDING_PAGE_MID = {
     url: pageUrl
 }
 
+export const LANDING_PAGE_JUMP_INFO = {
+    name: 'jump_info',
+    url: pageUrl
+}
+
 export function setChromeStorage(params, callback) {
-    if (callback) {
-        chrome.storage.local.set(params, callback)
-    } else {
-        chrome.storage.local.set(params)
+    try {
+        if (callback) {
+            chrome.storage.local.set(params, callback)
+        } else {
+            chrome.storage.local.set(params)
+        }
+    } catch (error) {
+        console.error(error)
     }
 }
 
@@ -44,6 +53,13 @@ export function getChromeStorage(key = '', callback) {
     });
 }
 
+// export function chromeSendMessage() {
+//     try {
+//         // chrome.runtime.sendMessage
+//     } catch {
+//     }
+// }
+
 export function setChromeCookie({
     name,
     url
@@ -56,53 +72,22 @@ export function setChromeCookie({
     })
 }
 
-export function getChromeCookie({
-    name,
-    url
-}, callback) {
-    chrome.cookies.getAll(
-        {
-            name: name || '',
-            url: url || ''
-        }, (e = []) => {
-            let _str = '[]'
-            if (e.length > 0) {
-                _str = e[0].value
-            }
-            let _arr = JSON.parse(decodeURIComponent(_str)) || []
-            callback(_arr)
-        }
-    )
-}
-
-// 累加ChromeCookie
-export function concatChromeCookie({ name, url }, value_obj) {
-    chrome.cookies.getAll(
-        {
-            name: name || '',
-            url: url || ''
-        }, (e = []) => {
-            let _str = '[]'
-            if (e.length > 0) {
-                _str = e[0].value
+export function getChromeCookie({ name = '', url = '' }, callback) {
+    try {
+        chrome.cookies.getAll({ name, url }, (res = []) => {
+            let _str = ''
+            if (Array.isArray(res) && res.length) {
+                _str = res[0].value
             }
-            let _arr = JSON.parse(decodeURIComponent(_str)) || []
-            _arr = _arr.concat(value_obj)
-
-            // 删除cookies
-            chrome.cookies.remove(LANDING_PAGE, () => {
-                chrome.cookies.set({
-                    expirationDate: new Date().getTime() / 10,
-                    name: name,
-                    url: url,
-                    value: encodeURIComponent(JSON.stringify(_arr)) || ''
-                }, (e) => {
-                    console.log(e)
-                })
+            if (_str) {
+                callback(JSON.parse(decodeURIComponent(_str)))
+            } else {
+                callback(null)
             }
-            )
-        }
-    )
+        })
+    } catch (error) {
+        console.error('catch', error)
+    }
 }
 
 export function removeChromeCookie(params, cb) {

src/uilts/help.js

@@ -224,8 +224,36 @@ export function checkURL(URL) {
   var Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
   var objExp = new RegExp(Expression);
   if (objExp.test(str) == true) {
-      return true;
+    return true;
   } else {
-      return false;
+    return false;
   }
 }
+
+let $_data = []
+export function $(key, cache = true) {
+  if (!key || typeof(key) != 'string') {
+    return null
+  }
+  // 不使用缓存
+  if (!cache) {
+    return document.querySelector(key)
+  }
+
+  let _dom
+  for (let i in $_data) {
+    if ($_data[i].key == key) {
+      _dom = $_data[i].element
+      break
+    }
+  }
+
+  // 没有缓存
+  if (!_dom) {
+    _dom = document.querySelector(key)
+    if (_dom) {
+      $_data.push({ key, element: _dom })
+    }
+  }
+  return _dom
+}

src/view/components/component-zoom.vue

@@ -19,13 +19,11 @@ let props = defineProps({
 })
 
 let zoom = ref(1);
-let currentInstance
+let currentInstance;
 
 const setFontZoom = () => {
     const currentInstance = getCurrentInstance()
     let offsetWidth = currentInstance.ctx.$refs.zoomDom.offsetWidth;
-    console.log('currentInstance', currentInstance)
-    console.log('offsetWidth', offsetWidth)
     zoom.value = offsetWidth > props.width ? +props.width / offsetWidth : 1
 }
 

src/view/components/currency-select.vue

@@ -2,12 +2,12 @@
 <template>
     <div class="list-item" v-for="(item, index) in props.list" :key="index">
         <div class="item-title">
-            <img class="icon" :src="item.chainInfo.iconPath" />
-            {{item.chainInfo.chainName}}
+            <img class="icon" :src="item.chainInfo?.iconPath" />
+            {{item.chainInfo?.chainName}}
         </div>
         <div class="item-detail" @click="selectCurrency(item)">
             <div class="left">
-                <img class="icon-currency" :src="item.iconPath" />
+                <img class="icon-currency" :src="item?.iconPath" />
                 <div class="currency-info">
                     <div class="name">{{ item.currencyCode == 'USD' ? 'USD' : item.tokenSymbol }}</div>
                     <div class="desc">{{ item.currencyCode == 'USD' ? 'Paypal' : item.currencyName }}</div>

src/view/components/custom-card-cover.vue

@@ -5,13 +5,15 @@
         <div class="common-bottom">
             <div class="theme">
                 <img v-if="isLottaryCpd" class="icon" :src="require('@/assets/svg/icon-last-time.svg')"/>
-                <span v-if="isLottaryCpd" class="time" >{{formatSecondsAsDaysOrTime(data.validityDuration * 3600)}}</span>
+                <span v-if="isLottaryCpd" class="time" >{{data.countDown || formatSecondsAsDaysOrTime(data.validityDuration * 3600)}}</span>
                 <span class="info">{{isLottaryCpd ? 'Left' : 'Instant Giveaway'}}</span>
             </div>
             <div class="winner-info">
-                <span class="count">{{data.totalCount}} Winners</span>
-                <span>to Share </span>
-                <span class="prize-name">{{isMoneyRewardCpd ? data.amountValue + ' ' + data.tokenSymbol : data.customizedReward}}</span>
+                <component-zoom width="320" fontSize="12">
+                    <span class="count">{{data.totalCount}} Winners</span>
+                    <span>to Share </span>
+                    <span class="prize-name">{{isMoneyRewardCpd ? data.amountValue + ' ' + data.tokenSymbol : data.customizedReward}}</span>
+                </component-zoom>
             </div>
             <div class="open-btn" @click="open">
                 {{isLottaryCpd ? 'Participate Now' : 'Open Now'}}
@@ -101,7 +103,7 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, watch, ref, computed, onMounted } from "vue";
+import { defineProps, defineEmits, ref, computed, onMounted } from "vue";
 import { formatSecondsAsDaysOrTime } from "@/uilts/help";
 import ComponentZoom from "./component-zoom.vue";
 import { RewardType, PlayType } from "@/types";
@@ -123,7 +125,7 @@ const props = defineProps({
                     nickName: "",
                 },
                 rewardType: RewardType.money,
-                customizedReward: ""
+                customizedReward: "",
             };
         },
     },
@@ -141,10 +143,6 @@ const defaultTotalWidth = isMoneyRewardCpd.value ? 360 : 450;
 
 let amount_font_size = ref(defaultBaseWidth);
 
-watch(props, () => {
-    setFontSize();
-})
-
 const setFontSize = () =>{
     let id = isMoneyRewardCpd.value ? 'preview-after-amount' : 'custom-name';
     let lendom = document.querySelector(`#${id}`);
@@ -327,13 +325,14 @@ onMounted(() => {
 .custom-card {
     position: relative;
     width: 100%;
+    height: 100%;
     overflow: hidden;
     background:#111214;
     position: relative;
     border-radius: 10px;
     .customImg {
         width: 100%;
-        min-height: 200px;
+        min-height: calc(100% - 125px);
     }
     .cover {
         width: 100%;

src/view/components/custom-card-horizontal-cover.vue

@@ -61,16 +61,23 @@
                 </div>
             </div>
             <div class="custom-card-prize">
-                <component-zoom width="210">
+                <component-zoom :width="showBottom ? 210 : 300">
                     <span class="custom-card-prize-name" id="custom-name" >
+                        <img class="custom-card-prize-gift-inline" :src="require('@/assets/subject/icon-gift-inline.svg')" />
                         {{data.customizedReward}}
                         <span class="custom-card-prize-name-total">X{{data.totalCount}}</span>
                     </span>
                 </component-zoom>
             </div>
             <div class="custom-card-desc" :class="{'custom-card-desc-lottary': !isLottaryCpd}">
-                <span class="last-time" v-if="isLottaryCpd">{{data.validityDuration}} H</span>
-                <span class="trophy-count">{{data.totalCount}} WINNERS</span>
+                <span class="last-time" v-if="isLottaryCpd">
+                    <img class="custom-card-desc-clock-icon" :src="require('@/assets/subject/icon-clock.png')" />
+                    {{data.validityDuration}} H
+                </span>
+                <span class="trophy-count">
+                    <img class="custom-card-desc-prize-icon" :src="require('@/assets/subject/icon-prize.png')" />
+                    {{data.totalCount}} WINNERS
+                </span>
             </div>
         </template>
     </div>
@@ -237,22 +244,35 @@ watch(() => props.data, () => {
 
     &-prize {
         position: absolute;
-        left: 9%;
-        top: 22%;
-        height: 20px;
+        left: 0%;
+        top: 16%;
+        width: 65%;
+        line-height: 42px;
         display: flex;
+        background-image: url('@/assets/subject/icon-uninstall-bg.svg');
+        background-size: 100% 100%;
+        padding-left: 5px;
 
         &-name {
             font-weight: 800;
             font-size: 16px;
-            line-height: 20px;
+            // line-height: 20px;
             letter-spacing: 0.22px;
             color: #FFFFFF;
             text-shadow: 0px 1.46341px 0px rgba(0, 0, 0, 0.15);
+            display: flex;
+            justify-content: center;
+            align-items: center;
             &-total {
                 color: #F5C03F;
             }
         }
+
+        &-gift-inline {
+            width: 30px;
+            height: 30px;
+            padding: 0 5px;
+        }
     }
     &-desc {
         font-size: 12px;
@@ -260,42 +280,38 @@ watch(() => props.data, () => {
         letter-spacing: 0.219512px;
         color: #FFFFFF;
         opacity: 0.7;
+        position: absolute;
+        left: 0;
+        top: 37%;
+        display: flex;
+        padding-left: 4%;
         .last-time {
-            position: absolute;
-            left: 8%;
-            top: 38%;
-        }
-        .trophy-count {
-            position: absolute;
-            left: 21%;
-            top: 38%;
+            display: flex;
+            align-items: center;
+            margin-right: 12px;
+            img {
+                width: 12px;
+                margin-right: 2px;
+            }
         }
-    }
-    &-desc-lottary {
         .trophy-count {
-            position: absolute;
-            left: 9%;
-            top: 38%;
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 12px;
+                margin-right: 2px;
+            }
         }
     }
- 
 }
-   .custom-card-in-poster {
-        .custom-card-prize {
-            top: 32%;
-        }
-        .custom-card-desc{
-            .last-time {
-                top: 54%;
-            }
-            .trophy-count {
-                top: 54%;
-            }
-        }
-        .custom-card-desc-lottary {
-            .trophy-count {
-                top: 54%;
-            }
-        }
+.custom-card-in-poster {
+    .custom-card-prize {
+        top: 24%;
+        line-height: 54px;
+    }
+    .custom-card-desc{
+        top: 50%;
     }
+}
 </style>

src/view/content/tool-box/full.vue

@@ -10,13 +10,15 @@
             </div>
         </div>
         <div class="content">
-            <iframe :src="state.iframe_url" frameborder="0"></iframe>
+            <iframe :src="state.iframe_url" frameborder="0" allow="camera *;microphone *"></iframe>
         </div>
     </div>
 </template>
 <script setup>
 import { onMounted, reactive, ref } from "vue";
 import { sendEventInfo } from "@/uilts/event";
+import { $ } from "@/uilts/help";
+
 let state = reactive({
     status: '固定', // 全屏
     iframe_url: '',
@@ -50,7 +52,7 @@ const clickFull = () => {
     }
 }
 onMounted(() => {
-    dom_fixed = document.querySelector('#denet-tool-box-fixed')
+    dom_fixed = $('#denet-tool-box-fixed')
 })
 
 const changeFull = () => {

src/view/content/tool-box/index.vue

@@ -11,7 +11,7 @@
             <iframe :src="iframe_url" frameborder="0"></iframe>
         </div>
         <div class="content" v-else>
-            <iframe :src="state.iframe_url" v-show="state.status == ''" ref="dom_iframe" frameborder="0"></iframe>
+            <iframe :src="state.iframe_url" v-show="state.status == ''" ref="dom_iframe" frameborder="0" allow="camera *;microphone *"></iframe>
             <!-- 网页错误 -->
             <div class="state" v-show="state.status == '网页错误'">
                 <img :src="require('@/assets/img/icon-page-fail.png')" alt />
@@ -56,6 +56,7 @@ import { getChromeStorage, setChromeStorage, httpContentToBack, defineProps } fr
 import { guid } from "@/uilts/help";
 import { sendEventInfo } from "@/uilts/event";
 import { onMounted, reactive, ref } from "vue";
+import { $ } from "@/uilts/help";
 let dom_toolbox = ref(null)
 let dom_iframe = ref(null)
 let state = reactive({
@@ -124,7 +125,7 @@ onMounted(() => {
         }
     }
     try {
-        dom.fixed = document.querySelector('#denet-tool-box-fixed')
+        dom.fixed = $('#denet-tool-box-fixed')
         if (dom.fixed && dom.fixed.style.display == 'block') {
             if (dom.fixed.dataset.tweetId == state.tweetId) {
                 state.status = '固定右上角'
@@ -193,6 +194,7 @@ const handleFull = () => {
     }
     // 切换状态
     state.status = '关闭'
+    state.status = '固定右上角'
     // 操作全屏dom
     dom.fixed.style.cssText = `
         width:100%;

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

@@ -3,7 +3,7 @@
     <div class="wrapper">
         <div class="card-container">
             <!-- 安装之后的卡片样式 -->
-            <div v-show="installStatus" class="left" :style="{'width': reviewCanvasParams.width+ 'px'}">
+            <div v-if="installStatus" class="left" :style="{'width': reviewCanvasParams.width+ 'px'}">
                 <div class="head" :style="{'zoom': reviewCanvasParams.zoom}">
                     <img :src="userInfo.avatarUrl"
                         class="avatar"/>
@@ -31,7 +31,7 @@
                                 avatarUrl: userInfo.avatarUrl
                             },
                             rewardType: baseFormData.rewardType,
-                            customizedReward: baseFormData.customizedReward
+                            customizedReward: baseFormData.customizedReward,
                         }"></custom-card-cover>
                     </div>
                 </div>
@@ -39,7 +39,7 @@
 
             <!-- 安装之前的卡片样式 -->
             <div class="content-before"
-                v-show="!installStatus" 
+                v-else 
                 :style="{'width': (baseFormData.rewardType === RewardType.money) ? `${reviewCanvasParams.width}px` : '100%'}">
                 <div class="head" 
                     :style="{'zoom': reviewCanvasParams.zoom}">
@@ -71,7 +71,7 @@
                                 avatarUrl: userInfo.avatarUrl
                             },
                             rewardType: baseFormData.rewardType,
-                            customizedReward: baseFormData.customizedReward
+                            customizedReward: baseFormData.customizedReward,
                         }">
                     </custom-card-horizontal-cover>
                 </div>

src/view/iframe/publish/give-dialog.vue

@@ -34,7 +34,7 @@
                     </div>
                     <!-- 标题 -->
                     <div class="title">
-                        {{publishType.value == 'REDPACKET' ? currentComData[showComType]["title"] : 'Tool Box' }}
+                        {{publishType == 'REDPACKET' ? currentComData[showComType]["title"] : 'Tool Box' }}
                     </div>
                 </div>
                 <div class="right">
@@ -230,6 +230,8 @@
                                                         type: baseFormData.type,
                                                         validityDuration: baseFormData.validityDuration,
                                                         customPosterUrl: customPosterData && customPosterData.after && customPosterData.after.imagePath || '',
+                                                        rewardType: baseFormData.rewardType,
+                                                        customizedReward: baseFormData.customizedReward
                                                     }">
                                                 </custom-card-cover>
                                             </div>
@@ -1210,6 +1212,7 @@ const submitRequest = async () => {
     if(rewardType === RewardType.custom) {
         // 通用奖品 类型的活动，添加奖品名称
         formData.customizedReward = customizedReward;
+        delete formData.amountValue;
     } else {
         // 货币类型 添加货币code
         formData.amountCurrencyCode = baseFormData.amountCurrencyCode;
@@ -1364,6 +1367,8 @@ const onAmountInput = () => {
     // val = val.replace(/[^\d^\.]+/g, "");
     val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');
 
+    const maxCount = baseFormData.rewardType === RewardType.money ? Number.MAX_SAFE_INTEGER : 100000000;
+
     if(val == '00') {
         val = '0'
     }
@@ -1375,8 +1380,12 @@ const onAmountInput = () => {
         }
     }
 
-    if(baseFormData.rewardType === RewardType.custom) {
+    if (baseFormData.rewardType === RewardType.custom) {
+        const maxCount = 100000000;
         val = val.replace(/^(0)*/, '').replace(/\./, ''); // 通用奖品类型 过滤掉起始位的0和小数点符号
+        if (val > maxCount) { 
+            val = maxCount
+        }
         baseFormData.totalCount = val;
     }
 

src/view/iframe/publish/tool-box/child/editor.vue

@@ -21,10 +21,9 @@
             <img :src="require('@/assets/svg/icon-tool-app-history.svg')" />
           </div>
           <div class="app-list">
-            <div class="app" v-for="(app, idx) in historyList" :key="idx"
-              @click="clickHistoryAppHandler(app)">
+            <div class="app" v-for="(app, idx) in historyList" :key="idx" @click="clickHistoryAppHandler(app)">
               <div class="img-wrapper">
-                <img class="img" :class="{'small-img': !app.appId}" :src="app.iconPath" :onerror="imgOnError" />
+                <img class="img" :class="{ 'small-img': !app.appId }" :src="app.iconPath" :onerror="imgOnError" />
               </div>
               <div class="name">
                 {{ app.name }}
@@ -59,10 +58,10 @@ import { getChromeStorage } from "@/uilts/chromeExtension"
 import { checkURL } from "@/uilts/help"
 
 const props = defineProps({
-    linkInputDescImage: {
-        type: String,
-        default: '',
-    },
+  linkInputDescImage: {
+    type: String,
+    default: '',
+  },
 });
 
 
@@ -79,35 +78,43 @@ const emits = defineEmits(["changeShowCom"]);
 
 const searchHandler = async () => {
   let siteTitle = '', favicon = '';
-  
-  if(!siteUrl.value) {
+  let timer = null;
+
+
+  if (!siteUrl.value) {
     return;
   }
 
   siteUrl.value = siteUrl.value.trim();
 
-  if(!checkURL(siteUrl.value)) {
+  if (!checkURL(siteUrl.value)) {
+    message.info('Incorrect URL entered');
     //提示
     return;
-  } 
+  }
   const loadingHide = message.loading('loading...', 0);
+  timer = setTimeout(() => {
+    loadingHide();
+    message.error('Page loading failed');
+  }, 1000 * 15);
+
   let siteRes = await axios.get(siteUrl.value);
 
-  if(siteRes) {
-    if(siteRes.headers['content-type'].indexOf('text/html') < 0 || siteRes.request.status > 399) {
+  if (siteRes) {
+    if (siteRes.headers['content-type'].indexOf('text/html') < 0 || siteRes.request.status > 399) {
       // 提示
       return;
     }
     let urlObj = new URL(siteUrl.value);
-    if(siteRes.data) {
+    if (siteRes.data) {
       siteTitle = getTitleByHtmlStr(siteRes.data);
-      if(!siteTitle) {
+      if (!siteTitle) {
         siteTitle = urlObj.hostname;
-      } 
+      }
       console.log(siteTitle)
     }
     favicon = urlObj.origin + '/favicon.ico';
-  } 
+  }
 
   let currentApp = {
     appId: '',
@@ -121,26 +128,33 @@ const searchHandler = async () => {
     name: siteTitle,
   }
 
-  let convertRes = await convertUrl({params: {originUrl: siteUrl.value}});
+  let convertRes = await convertUrl({ params: { originUrl: siteUrl.value } });
   let params = { convertUrl: siteUrl.value, originUrl: siteUrl.value, appId: '', currentApp };
 
   loadingHide();
+  clearTimeout(timer);
 
-  if(convertRes && convertRes.code == 0) {
-    let {convertUrl} = convertRes.data || {};
+  if (convertRes && convertRes.code == 0) {
+    let { convertUrl } = convertRes.data || {};
     params.convertUrl = convertUrl;
   }
   emits('changeShowCom', params)
 }
 
-const getTitleByHtmlStr = (str) => {
-  let index1 = str.indexOf('<title>') + 7;
-  let index2 = str.indexOf('</title>');
+const getTitleByHtmlStr = (str = '') => {
+  let tag_start = '<title>'
+  let tag_end = '</title>'
+  let index1 = str.indexOf(tag_start) + tag_start.length;
+  let index2 = str.indexOf(tag_end);
+  if (index1 < 0 || index2 < 0) {
+    return '';
+  }
+
   return str.substring(index1, index2) || '';
 };
 
 const clickHistoryAppHandler = (params) => {
-  if(params.appId) {
+  if (params.appId) {
     clickAppHandler(params);
   } else {
     siteUrl.value = params.defaultUrl;
@@ -162,11 +176,11 @@ const clickAppHandler = (params) => {
 
 const openWindow = (params) => {
   chrome.windows.getCurrent({},
-    function(window) {
-      if(window && window.state == "fullscreen") {
-        chrome.windows.update(window.id,{
+    function (window) {
+      if (window && window.state == "fullscreen") {
+        chrome.windows.update(window.id, {
           state: 'normal'
-        }, function() {
+        }, function () {
           setTimeout(() => {
             createGuideWindow(params, true);
           }, 1000)
@@ -174,19 +188,19 @@ const openWindow = (params) => {
       } else {
         createGuideWindow(params);
       }
-  })
+    })
 };
 
 const createGuideWindow = (params, isUpdate = false) => {
   openWindowList = [];
   selectAppGuideData = {};
 
-  let windowWith = window.innerWidth - 500;
+  let windowWith = window.screen.width - 500;
   let guideUrl = chrome.runtime.getURL('/iframe/tool-box-guide.html');
 
   chrome.windows.create({
     width: windowWith,
-    type: 'popup',
+    type: 'normal',
     url: params.defaultUrl,
     state: 'normal'
   }, function (window) {
@@ -202,14 +216,14 @@ const createGuideWindow = (params, isUpdate = false) => {
     openWindowList.push(window);
   })
 
-  if(params.guideData) {
+  if (params.guideData) {
     selectAppGuideData = JSON.parse(params.guideData);
   }
 }
 
 const getAppList = () => {
-  getAllPostEditorAppData({params: {}}).then(res => {
-    if(res.code == 0) {
+  getAllPostEditorAppData({ params: {} }).then(res => {
+    if (res.code == 0) {
       appList.value = res.data || [];
     }
   })
@@ -221,13 +235,13 @@ const onRuntimeMsg = () => {
     sendResponse('ok')
     switch (req.actionType) {
       case 'CONTENT_GET_GUIDE_DATA':
-        chrome.runtime.sendMessage({ 
-            actionType: "CONTENT_EDIT_SEND_GUIDE_DATA", 
-            data: {
-              guideData: selectAppGuideData,
-              windowData: openWindowList
-            }
-        },(response) => {});
+        chrome.runtime.sendMessage({
+          actionType: "CONTENT_EDIT_SEND_GUIDE_DATA",
+          data: {
+            guideData: selectAppGuideData,
+            windowData: openWindowList
+          }
+        }, (response) => { });
         break;
       case 'CONTENT_GUIDE_APPLY_APP':
         siteUrl.value = req.data.siteUrl;
@@ -238,7 +252,7 @@ const onRuntimeMsg = () => {
 }
 
 const getHistoryList = async () => {
-  let {list = []} = await getChromeStorage('toolBoxAppHistoryData') || {};
+  let { list = [] } = await getChromeStorage('toolBoxAppHistoryData') || {};
   historyList.value = list;
 };
 
@@ -327,28 +341,28 @@ onMounted(() => {
       .history-wrapper {
 
         .app-list {
-            .img-wrapper {
-              width: 60px;
-              height: 60px;
+          .img-wrapper {
+            width: 60px;
+            height: 60px;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #E5E5E5;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .img {
+              width: 100%;
+              height: 100%;
               border-radius: 10px;
-              margin-bottom: 10px;
-              border: 1px solid #E5E5E5;
-              box-sizing: border-box;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-
-              .img {
-                width: 100%;
-                height: 100%;
-                border-radius: 10px;
-              }
-
-              .small-img {
-                width: 25px;
-                height: 25px;
-              }
             }
+
+            .small-img {
+              width: 25px;
+              height: 25px;
+            }
+          }
         }
       }
 

src/view/iframe/publish/tool-box/child/guide.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="guide-wrapper">
         <div class="top">
-            <div class="title">Guide</div>
+            <div class="title">Guided Tutorial</div>
             <div class="content">
                 <div class="img-list" 
                     v-if="pageData.guideData.guideType == 'image'">
@@ -15,7 +15,7 @@
         </div>
         <div class="bottom">
             <div class="title">
-                Enter Room Link
+                Enter Link
             </div>
             <div class="search-input-wrapper">
                 <input class="input" v-model="siteUrl" placeholder="Enter link" />

src/view/iframe/publish/tool-box/child/preview.vue

@@ -178,6 +178,10 @@ const setHistoryData = async (params) => {
     const maxLength = 9;
     let {list = []} = await getChromeStorage('toolBoxAppHistoryData') || {};
     if(list.length) {
+        let hasSite = list.find(item => item.defaultUrl == params.defaultUrl);
+        if(hasSite) {
+            return;
+        }
         list.unshift(params);
         if(list.length > maxLength) {
             list.length = maxLength;

src/view/iframe/red-packet/luck-draw.vue

@@ -215,7 +215,7 @@
 
         <!-- no-open -->
         <div v-else-if="state.status == 'not-open'" class="not-open">
-            <template v-if="state.detail.posterType === 2 && state.detail.customPosterInstalled">
+            <!-- <template v-if="state.detail.posterType === 2 && state.detail.customPosterInstalled">
                 <img class="customImg" :src="state.detail.customPosterInstalled" />
                 <div class="customBottom">
                     <div class="theme">
@@ -226,14 +226,14 @@
                     <div class="winner-info">
                         <span class="count">{{state.detail.totalCount}} Winners</span>
                         <span>to Share </span>
-                        <span class="prize-name">{{state.detail.amountValue + ' ' + state.detail.currencySymbol}}</span>
+                        <span class="prize-name">{{state.detail.rewardType === RewardType.money ? state.detail.amountValue + ' ' + state.detail.currencySymbol : state.detail.customizedReward}}</span>
                     </div>
                     <div class="open-red" @click="clickOpenRedPacket">
                         Participate Now
                     </div>
                 </div>
-            </template>
-            <template v-else>
+            </template> -->
+            <!-- <template v-else> -->
                 <custom-card-cover 
                     :data="{
                         totalCount: state.detail.totalCount,
@@ -249,11 +249,11 @@
                         },
                         rewardType: state.detail.rewardType,
                         customizedReward: state.detail.customizedReward,
-                        customPosterUrl: ''
+                        customPosterUrl: state.detail.customPosterInstalled
                     }"
                     @clickOpenRedPacket = "clickOpenRedPacket"
                 ></custom-card-cover>
-            </template>
+            <!-- </template> -->
         </div>
 
 
@@ -503,6 +503,8 @@ let state = reactive({
     page_index: 1,
     page_size: 20,
     srcContentId: '',
+    customCover: '',
+    customGiveaway: '',
     error_txt: `oops, new accounts cannot participate in this event,`,
     receiveAmount: 0,
     money: 0,
@@ -599,6 +601,8 @@ async function clickLikeBtn() {
         postId: state.postId,
         srcContentId: state.tweetId,
         senderId: state.userId,
+        customCover: state.customCover,
+        customGiveaway: state.customGiveaway,
     });
 }
 function clickDone() {
@@ -611,7 +615,9 @@ function clickDone() {
         postId: state.postId,
         srcContentId: state.tweetId,
         senderId: state.userId,
-        redPacketType: 1
+        redPacketType: 1,
+        customCover: state.customCover,
+        customGiveaway: state.customGiveaway,
     });
 }
 function handleScroll(e) {
@@ -712,6 +718,8 @@ async function clickRetweetBtn() {
         postId: state.postId,
         srcContentId: state.tweetId,
         senderId: state.userId,
+        customCover: state.customCover,
+        customGiveaway: state.customGiveaway,
     });
 }
 
@@ -772,7 +780,9 @@ async function clickReply(params) {
         postId: state.postId,
         srcContentId: state.tweetId,
         senderId: state.userId,
-        redPacketType: 1
+        redPacketType: 1,
+        customCover: state.customCover,
+        customGiveaway: state.customGiveaway,
     });
 }
 
@@ -814,7 +824,9 @@ async function clickRepostFacebook(params) {
         postId: state.postId,
         srcContentId: state.tweetId,
         senderId: state.userId,
-        redPacketType: 1
+        redPacketType: 1,
+        customCover: state.customCover,
+        customGiveaway: state.customGiveaway,
     });
 }
 
@@ -1022,7 +1034,9 @@ async function clickFollowAll(item, is_all) {
     let _log_obj = {
         pageSource: Report.pageSource.task_page,
         businessType: Report.businessType.buttonClick,
-        objectType: Report.objectType.follow
+        objectType: Report.objectType.follow,
+        customCover: state.customCover,
+        customGiveaway: state.customGiveaway,
     }
     if (is_all) {
         _log_obj.objectType = Report.objectType.follow_button
@@ -1146,7 +1160,9 @@ const showSuccessPage = () => {
             senderId: state.userId,
             isOldTwitterFans: reportParams.done.follow,
             isOldDiscordFans: reportParams.done.join_discord,
-            redPacketType: 1
+            redPacketType: 1,
+            customCover: state.customCover,
+            customGiveaway: state.customGiveaway,
         });
     }
 }
@@ -1165,7 +1181,9 @@ const showNotOpenPage = () => {
         postId: state.postId,
         srcContentId: state.tweetId,
         senderId: state.userId,
-        redPacketType: 1
+        redPacketType: 1,
+        customCover: state.customCover,
+        customGiveaway: state.customGiveaway,
     });
 }
 const showOpenedPage = () => {
@@ -1188,7 +1206,9 @@ const showOpenedPageReport = () => {
         senderId: state.userId,
         isOldTwitterFans: state.done.follow,
         isOldDiscordFans: state.done.join_discord,
-        redPacketType: 1
+        redPacketType: 1,
+        customCover: state.customCover,
+        customGiveaway: state.customGiveaway,
     });
 }
 
@@ -1371,6 +1391,8 @@ function init(initParams) {
             state.tweetId = state.srcContentId;
             state.userId = res.data.srcUserId;
             state.tweet_author = state.detail.postUserInfo && state.detail.postUserInfo.nickName || '';
+            state.customCover = state.detail.posterType == 2 ? 1 : 0;
+            state.customGiveaway = state.detail.posterType == 2 ? 1 : 0;
             // 不要删除这个console
             console.log('postBizData', state.detail)
             checkFacebookReply();
@@ -1612,7 +1634,9 @@ function handleRedPacket() {
         postId: state.postId,
         srcContentId: state.tweetId,
         senderId: state.userId,
-        redPacketType: 1
+        redPacketType: 1,
+        customCover: state.customCover,
+        customGiveaway: state.customGiveaway,
     });
 }
 
@@ -1674,6 +1698,8 @@ function handleFinishRedPacket() {
                     postId: state.postId,
                     srcContentId: state.tweetId,
                     senderId: state.userId,
+                    customCover: state.customCover,
+                    customGiveaway: state.customGiveaway,
                 }, {
                     get_giveaway_result: Report.extParams.success
                 });
@@ -1754,6 +1780,8 @@ function handleFinishRedPacket() {
                     postId: state.postId,
                     srcContentId: state.tweetId,
                     senderId: state.userId,
+                    customCover: state.customCover,
+                    customGiveaway: state.customGiveaway,
                 }, {
                     get_giveaway_result: Report.extParams.failure,
                 });
@@ -1771,6 +1799,8 @@ function handleFinishRedPacket() {
                 postId: state.postId,
                 srcContentId: state.tweetId,
                 senderId: state.userId,
+                customCover: state.customCover,
+                customGiveaway: state.customGiveaway,
             }, {
                 get_giveaway_result: Report.extParams.failure,
             });
@@ -2077,7 +2107,9 @@ async function joinDiscord() {
         postId: state.postId,
         srcContentId: state.tweetId,
         senderId: state.userId,
-        redPacketType: 1
+        redPacketType: 1,
+        customCover: state.customCover,
+        customGiveaway: state.customGiveaway,
     });
 
     let url = getInviteUrl();

src/view/iframe/red-packet/red-packet.vue

@@ -218,7 +218,7 @@
 
     <!-- no-open -->
     <div v-else-if="state.status == 'not-open'" class="not-open">
-      <template v-if="state.detail.posterType === 2 && state.detail.customPosterInstalled">
+      <!-- <template v-if="state.detail.posterType === 2 && state.detail.customPosterInstalled">
         <img class="customImg" :src="state.detail.customPosterInstalled" />
         <div class="customBottom">
             <div class="theme">
@@ -234,7 +234,7 @@
             </div>
         </div>
       </template>
-      <template v-else>
+      <template v-else> -->
         <custom-card-cover 
           :data="{
               totalCount: state.detail.totalCount,
@@ -248,12 +248,12 @@
                   avatarUrl: state.detail.postUserInfo.avatarUrl
               },
               rewardType: state.detail.rewardType,
-  customizedReward: state.detail.customizedReward,
-              customPosterUrl: ''
+              customizedReward: state.detail.customizedReward,
+              customPosterUrl: state.detail.customPosterInstalled
           }"
           @clickOpenRedPacket = "clickOpenRedPacket"
       ></custom-card-cover>
-      </template>
+      <!-- </template> -->
     </div>
 
 
@@ -453,6 +453,7 @@ let state = reactive({
   page_index: 1,
   page_size: 20,
   srcContentId: '',
+  customCover: '',
   error_txt: `oops, new accounts cannot participate in this event,`,
   receiveAmount: 0,
   money: 0,
@@ -545,6 +546,7 @@ async function clickLikeBtn() {
     postId: state.postId,
     srcContentId: state.tweetId,
     senderId: state.userId,
+    customCover: state.customCover,
   });
 }
 function clickDone() {
@@ -557,7 +559,8 @@ function clickDone() {
     postId: state.postId,
     srcContentId: state.tweetId,
     senderId: state.userId,
-    redPacketType: 0
+    redPacketType: 0,
+    customCover: state.customCover,
   });
 }
 function handleScroll(e) {
@@ -658,6 +661,7 @@ async function clickRetweetBtn() {
     postId: state.postId,
     srcContentId: state.tweetId,
     senderId: state.userId,
+    customCover: state.customCover,
   });
 }
 
@@ -696,7 +700,8 @@ async function clickReply(params) {
     postId: state.postId,
     srcContentId: state.tweetId,
     senderId: state.userId,
-    redPacketType: 0
+    redPacketType: 0,
+    customCover: state.customCover,
   });
 }
 
@@ -738,7 +743,8 @@ async function clickRepostFacebook(params) {
     postId: state.postId,
     srcContentId: state.tweetId,
     senderId: state.userId,
-    redPacketType: 0
+    redPacketType: 0,
+    customCover: state.customCover,
   });
 }
 
@@ -905,7 +911,8 @@ async function clickFollowAll(item, is_all) {
   let _log_obj = {
     pageSource: Report.pageSource.task_page,
     businessType: Report.businessType.buttonClick,
-    objectType: Report.objectType.follow
+    objectType: Report.objectType.follow,
+    customCover: state.customCover,
   }
   if (is_all) {
     _log_obj.objectType = Report.objectType.follow_button
@@ -1021,7 +1028,8 @@ const showSuccessPage = () => {
     senderId: state.userId,
     isOldTwitterFans: reportParams.done.follow,
     isOldDiscordFans: reportParams.done.join_discord,
-    redPacketType: 0
+    redPacketType: 0,
+    customCover: state.customCover,
   });
 }
 const showNotOpenPage = () => {
@@ -1032,7 +1040,8 @@ const showNotOpenPage = () => {
     postId: state.postId,
     srcContentId: state.tweetId,
     senderId: state.userId,
-    redPacketType: 0
+    redPacketType: 0,
+    customCover: state.customCover,
   });
 }
 const showOpenedPage = () => {
@@ -1053,7 +1062,8 @@ const showOpenedPageReport = () => {
     senderId: state.userId,
     isOldTwitterFans: state.done.follow,
     isOldDiscordFans: state.done.join_discord,
-    redPacketType: 0
+    redPacketType: 0,
+    customCover: state.customCover,
   });
 }
 
@@ -1211,6 +1221,7 @@ function init(initParams) {
       state.tweetId = state.srcContentId;
       state.userId = res.data.srcUserId;
       state.tweet_author = state.detail.postUserInfo && state.detail.postUserInfo.nickName || '';
+      state.customCover = state.detail.posterType == 2 ? 1 : 0;
       // 不要删除这个console
       console.log('postBizData', state.detail)
       checkFacebookReply();
@@ -1411,7 +1422,8 @@ function handleRedPacket() {
     postId: state.postId,
     srcContentId: state.tweetId,
     senderId: state.userId,
-    redPacketType: 0
+    redPacketType: 0,
+    customCover: state.customCover,
   });
 }
 
@@ -1479,6 +1491,7 @@ function handleFinishRedPacket() {
           postId: state.postId,
           srcContentId: state.tweetId,
           senderId: state.userId,
+          customCover: state.customCover,
         }, {
           get_giveaway_result: Report.extParams.success
         });
@@ -1558,6 +1571,7 @@ function handleFinishRedPacket() {
           postId: state.postId,
           srcContentId: state.tweetId,
           senderId: state.userId,
+          customCover: state.customCover,
         }, {
           get_giveaway_result: Report.extParams.failure,
         });
@@ -1574,6 +1588,7 @@ function handleFinishRedPacket() {
         postId: state.postId,
         srcContentId: state.tweetId,
         senderId: state.userId,
+        customCover: state.customCover,
       }, {
         get_giveaway_result: Report.extParams.failure,
       });
@@ -1879,7 +1894,8 @@ async function joinDiscord() {
     postId: state.postId,
     srcContentId: state.tweetId,
     senderId: state.userId,
-    redPacketType: 0
+    redPacketType: 0,
+    customCover: state.customCover,
   });
 
   let url = getInviteUrl();

src/view/popup/tabbar-page/message/index.vue

@@ -176,9 +176,12 @@
                         <template v-if="item.postTaskLuckdrop && item.postTaskLuckdrop.luckdropType == 1">
                             ({{
                             item.status == 2 ? "Time expired" : "Termination"
-                            }}) {{ item.postTaskLuckdrop.receivedCount }}/{{
-                            item.postTaskLuckdrop.totalCount
-                            }}
+                            }}) 
+                            <template v-if="item.status == 2 || item.status == 3 && item.srcContentId">
+                              {{ item.postTaskLuckdrop.receivedCount }}/{{
+                              item.postTaskLuckdrop.totalCount
+                              }}
+                            </template>
                         </template>
                         <template v-else>
                             Termination