|
|
@@ -1,855 +1,58 @@
|
|
|
<template>
|
|
|
- <div class="message-wrapper">
|
|
|
- <div class="tab-content" ref="pageWrapperDom" @scroll="pageScroll">
|
|
|
- <div class="list-wrapper" ref="pageGiveListDom">
|
|
|
- <div class="give-list" v-if="currentTabIndex == 0">
|
|
|
- <template v-if="giveList.length">
|
|
|
- <div class="cell" :class="{ 'cell-center': item.type == 1 || item.type == 3 || item.type == 5 }"
|
|
|
- v-for="(item, index) in giveList" :key="index" @click="clickListItem(item, index)">
|
|
|
- <red-dot class="red-dots" v-if="item.unReadMsgCount > 0 && isReadMsg"></red-dot>
|
|
|
-
|
|
|
- <div class="img-wrapper">
|
|
|
- <!-- 收到红包 -->
|
|
|
- <template v-if="item.type == 1 || item.type == 3 || item.type == 5">
|
|
|
- <img class="icon-avatar" :src="item.userInfo.avatarUrl" />
|
|
|
- <img class="icon-give" v-if="item.type == 5" :src="require('@/assets/svg/icon-small-treasure.svg')" />
|
|
|
- <img class="icon-give" v-else :src="require('@/assets/svg/icon-get-giveaways-s.svg')" />
|
|
|
- </template>
|
|
|
- <!-- 发出去红包 -->
|
|
|
- <template v-else-if="item.type == 2">
|
|
|
- <template v-if="item.postTaskLuckdrop.luckdropType === PlayType.treasure">
|
|
|
- <img class="icon-big-give" :src="require('@/assets/svg/icon-big-treasure.svg')" />
|
|
|
- <img class="icon-mark-give" :src="require('@/assets/svg/icon-send-giveaways-mark.svg')" />
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <img class="icon-big-give" :src="require('@/assets/svg/icon-send-giveaways-s.svg')" />
|
|
|
- <img class="icon-mark-give" :src="require('@/assets/svg/icon-send-giveaways-mark.svg')" />
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <!-- 转出NFT记录 -->
|
|
|
- <template v-else-if="item.type == 4">
|
|
|
- <img v-if="item.nftItemVO?.imagePath" class="icon-big-give" :src="item.nftItemVO?.imagePath" />
|
|
|
- <div v-else style="margin-top: 12px;">
|
|
|
- <nft-card :nftItemId="item.nftItemId" :item="item.nftItemVO.createImageInfo" :width="34">
|
|
|
- </nft-card>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div class="info-wrapper" :class="{ 'info-center': item.type == 1 || item.type == 5 }">
|
|
|
- <div class="left">
|
|
|
- <div class="nickname">
|
|
|
- <template v-if="item.type == 1">
|
|
|
- Get Giveaway
|
|
|
- </template>
|
|
|
- <template v-else-if="item.type == 2">
|
|
|
- <template v-if="item.postTaskLuckdrop.luckdropType === PlayType.common">
|
|
|
- Send Giveaway
|
|
|
- </template>
|
|
|
- <template v-else-if="item.postTaskLuckdrop.luckdropType === PlayType.lottery">
|
|
|
- Lottery Giveaway
|
|
|
- </template>
|
|
|
- <template v-else-if="item.postTaskLuckdrop.luckdropType === PlayType.treasure">
|
|
|
- Treasure Hunt
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template v-else-if="item.type == 3">
|
|
|
- Lottery
|
|
|
- </template>
|
|
|
- <template v-else-if="item.type == 4">
|
|
|
- Transfer NFT
|
|
|
- </template>
|
|
|
- <template v-else-if="item.type == 5">
|
|
|
- Treasure Hunt
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div class="time">
|
|
|
- {{ moment(item.timestamp).format("MM-DD HH:mm:ss") }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <div class="msg">
|
|
|
- <div class="bold" :class="{
|
|
|
- 'align-content':
|
|
|
- (item.type == 2 ||
|
|
|
- (item.type == 1 && item.status == 1 || item.type == 5 && item.status == 1)) &&
|
|
|
- item?.amount?.length + item?.currencySymbol?.length > 12,
|
|
|
- 'custom-bold': item.rewardType === RewardType.custom
|
|
|
- }">
|
|
|
- <!-- 领取的普通红包 -->
|
|
|
- <template v-if="item.type == 1">
|
|
|
- <!-- 进行中-->
|
|
|
- <template v-if="item.status == 0">
|
|
|
- In Progress
|
|
|
- </template>
|
|
|
- <!-- 已完成 -->
|
|
|
- <template v-else-if="item.status == 1">
|
|
|
- <!-- 已中奖-货币型奖品展示 -->
|
|
|
- <template v-if="item.rewardType === RewardType.money">
|
|
|
- <span class="blance">
|
|
|
- <a-tooltip :title="item.amount">
|
|
|
- {{ getBit(item.amount) }}</a-tooltip>
|
|
|
- </span>
|
|
|
- <div class="coin-type-wrapper">
|
|
|
- <span class="coin-type">{{
|
|
|
- item.currencySymbol || ""
|
|
|
- }}</span>
|
|
|
- <img :src="item.currencyIconPath" alt="" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 已中奖-通用型奖品展示 -->
|
|
|
- <template v-else>
|
|
|
- <span class="blance cuntom-prize">{{ item.customizedReward }}</span>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <!-- 已过期 -->
|
|
|
- <template v-else-if="item.status == 2">
|
|
|
- Timeout
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <!-- 发出去的 -->
|
|
|
- <template v-else-if="item.type == 2">
|
|
|
- <!-- 已中奖-货币型奖品展示 -->
|
|
|
- <template v-if="item.rewardType === RewardType.money">
|
|
|
- <span class="blance">
|
|
|
- <a-tooltip :title="'-' + item.amount">
|
|
|
- -{{ getBit(item.amount) }}
|
|
|
- </a-tooltip>
|
|
|
- </span>
|
|
|
- <div class="coin-type-wrapper">
|
|
|
- <span class="coin-type">{{
|
|
|
- item.currencySymbol || ""
|
|
|
- }}</span>
|
|
|
- <img :src="item.currencyIconPath" alt="" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 已中奖-通用型奖品展示 -->
|
|
|
- <template v-else>
|
|
|
- <span class="blance cuntom-prize">
|
|
|
- {{ item.customizedReward || '' }}<span class="cuntom-prize-icon">X</span>
|
|
|
- <span class="cuntom-prize-total">{{ item?.postTaskLuckdrop?.totalCount || '' }}</span>
|
|
|
- </span>
|
|
|
-
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <!-- 抽奖 -->
|
|
|
- <template v-else-if="item.type == 3">
|
|
|
- <template v-if="item.status == 1">In Progress</template>
|
|
|
- <template v-else-if="item.status == 2">
|
|
|
- Open in {{ item.downTime || '' }}
|
|
|
- </template>
|
|
|
- <template v-else-if="item.status == 3">
|
|
|
- Unfinished
|
|
|
- </template>
|
|
|
- <template v-else-if="item.status == 4">
|
|
|
- <!-- 已中奖-货币型奖品展示 -->
|
|
|
- <template v-if="item.rewardType === RewardType.money">
|
|
|
- <span class="blance">
|
|
|
- <a-tooltip :title="item.amount">
|
|
|
- +{{ getBit(item.amount) }}
|
|
|
- </a-tooltip>
|
|
|
- </span>
|
|
|
- <div class="coin-type-wrapper">
|
|
|
- <span class="coin-type">{{
|
|
|
- item.currencySymbol || ""
|
|
|
- }}</span>
|
|
|
- <img :src="item.currencyIconPath" alt="" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 已中奖-通用型奖品展示 -->
|
|
|
- <template v-else>
|
|
|
- <span class="blance cuntom-prize">{{ item.customizedReward }}</span>
|
|
|
- </template>
|
|
|
-
|
|
|
- </template>
|
|
|
- <template v-else-if="item.status == 5">
|
|
|
- Didn't win
|
|
|
- </template>
|
|
|
- <template v-else-if="item.status == 6">
|
|
|
- Giveaway Expired
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <!-- NFT 转出记录 -->
|
|
|
- <template v-else-if="item.type == 4">
|
|
|
- <template v-if="item.status == 0 || item.status == 1">Transferring</template>
|
|
|
- <template v-else-if="item.status == 2">Successful</template>
|
|
|
- <template v-else-if="item.status == 3">Transfe Failed</template>
|
|
|
- </template>
|
|
|
- <!-- 领取的夺宝红包 -->
|
|
|
- <template v-else-if="item.type == 5">
|
|
|
- <!-- 进行中-->
|
|
|
- <template v-if="item.status == 0">
|
|
|
- In Progress
|
|
|
- </template>
|
|
|
- <!-- 已完成 -->
|
|
|
- <template v-else-if="item.status == 2">
|
|
|
- <span class="blance">
|
|
|
- <a-tooltip :title="item.amount">
|
|
|
- {{ getBit(item.amount) }}</a-tooltip>
|
|
|
- </span>
|
|
|
- <div class="coin-type-wrapper">
|
|
|
- <span class="coin-type">{{
|
|
|
- item.currencySymbol || ""
|
|
|
- }}</span>
|
|
|
- <img :src="item.currencyIconPath" alt="" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 已过期 -->
|
|
|
- <template v-else-if="item.status == 3">
|
|
|
- Giveaway Expired
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 发出的红包显示 -->
|
|
|
- <div class="desc" v-if="item.type == 2">
|
|
|
- <!-- 未发送-->
|
|
|
- <template v-if="item.postTaskLuckdrop.reSendAvailable">
|
|
|
- Unpublished
|
|
|
- </template>
|
|
|
- <!-- 进行中 -->
|
|
|
- <template v-else-if="item.status == 1">
|
|
|
- <template v-if="item.postTaskLuckdrop && item.postTaskLuckdrop.luckdropType == PlayType.lottery">
|
|
|
- {{ item.downTime || '' }}
|
|
|
- </template>
|
|
|
- <template v-else-if="item.postTaskLuckdrop.luckdropType != PlayType.treasure">
|
|
|
- {{ item.postTaskLuckdrop.receivedCount }}/{{
|
|
|
- item.postTaskLuckdrop.totalCount
|
|
|
- }}
|
|
|
- </template>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 2:已结束; 3:提前终止-->
|
|
|
- <template v-else-if="item.status == 2 || item.status == 3">
|
|
|
- <!-- 普通红包 -->
|
|
|
- <template v-if="item.postTaskLuckdrop.luckdropType == PlayType.common || item.postTaskLuckdrop.luckdropType == PlayType.treasure">
|
|
|
- <template v-if="item.status == 2">
|
|
|
- {{item.postTaskLuckdrop.luckdropType == PlayType.common ? '(Time expired)': 'Complete'}}
|
|
|
- </template>
|
|
|
- <template v-if="item.status == 3">
|
|
|
- {{ item.srcContentId && item.postTaskLuckdrop.luckdropType != PlayType.treasure ? '(Termination)' : 'Termination' }}
|
|
|
- </template>
|
|
|
- <template v-if="(item.status == 2 || item.status == 3) && item.srcContentId && item.postTaskLuckdrop.luckdropType != PlayType.treasure">
|
|
|
- {{ item.postTaskLuckdrop.receivedCount }}/{{
|
|
|
- item.postTaskLuckdrop.totalCount
|
|
|
- }}
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <!-- 抽奖红包 -->
|
|
|
- <template v-else>
|
|
|
- <!-- 自定义奖品类型 结束时显示 Complete -->
|
|
|
- {{ item.rewardType === RewardType.custom && item.status == 2 ? 'Complete' : 'Termination' }}
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <!-- 红包提前终止/退款（进行中）显示-->
|
|
|
- <template v-if="item.status == 4">
|
|
|
- {{ item.postTaskLuckdrop && item.postTaskLuckdrop.luckdropType == 1 ? 'Terminating' : 'Open in '
|
|
|
- + item.downTime || ''
|
|
|
- }}
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 进行中或者未发送成功时显示 -->
|
|
|
- <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.type != 4" class="icon"
|
|
|
- :src="require('@/assets/svg/icon-cell-arrow-right.svg')" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <img class="icon-empty" :src="require('@/assets/svg/icon-empty-list.svg')" />
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <modal :visible="modalVisible" :title="modalTitle" :content="modalContent" cancelText="Termination"
|
|
|
- confirmText="Cancel" @cancel="modalCancel" @confirm="modalConfirm" />
|
|
|
- </div>
|
|
|
+ <iframe class="iframe" :id="iframeId" :src="iframeSrc"></iframe>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, onMounted, inject, onBeforeUnmount } from "vue";
|
|
|
-
|
|
|
-import modal from "@/view/popup/components/modal.vue";
|
|
|
-import redDot from "@/view/components/red-dot.vue";
|
|
|
-import nftCard from '@/view/components/nft-card.vue'
|
|
|
-
|
|
|
-import { getBit, formatSecondsAsDaysOrTime } from "@/uilts/help";
|
|
|
-import { getMineLuckdropRecords } from "@/http/account";
|
|
|
-import { terminatedLuckdrop } from "@/http/redPacket";
|
|
|
-import { readAllMsgByType, getAllMessageInfo } from "@/http/messageApi"
|
|
|
+import { ref, onBeforeMount } from "vue";
|
|
|
+import { iframeHost } from '@/http/configAPI';
|
|
|
+import { getInnerIframeURL } from '@/uilts/help';
|
|
|
+import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";
|
|
|
+import { getExtensionStorgeDataForIframe } from "@/logic/content/twitter.js";
|
|
|
import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";
|
|
|
-import { getChromeStorage } from "@/uilts/chromeExtension";
|
|
|
-import { PlayType, RewardType } from '@/types';
|
|
|
-
|
|
|
-var moment = require("moment");
|
|
|
-
|
|
|
-let currentTabIndex = ref(0);
|
|
|
-let userInfo = ref({});
|
|
|
-
|
|
|
-let tabList = ref([
|
|
|
- {
|
|
|
- label: "ALL",
|
|
|
- },
|
|
|
- {
|
|
|
- label: "Giveaway",
|
|
|
- },
|
|
|
- {
|
|
|
- label: "NFT",
|
|
|
- },
|
|
|
-]);
|
|
|
-
|
|
|
-let pageWrapperDom = ref(null);
|
|
|
-let pageGiveListDom = ref(null);
|
|
|
-
|
|
|
-let modalVisible = ref(false);
|
|
|
-let modalTitle = ref('');
|
|
|
-let modalContent = ref('');
|
|
|
-let terminaTask = {};
|
|
|
-
|
|
|
-let giveList = ref([]);
|
|
|
-let giveReqParams = {
|
|
|
- params: {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 20,
|
|
|
- },
|
|
|
- loadMore: false,
|
|
|
-};
|
|
|
-
|
|
|
-
|
|
|
-let isReadMsg = ref(true);
|
|
|
-
|
|
|
-const clickTab = (params, index) => {
|
|
|
- currentTabIndex.value = index;
|
|
|
-};
|
|
|
-
|
|
|
-/**
|
|
|
- * 获取红包列表
|
|
|
- */
|
|
|
-const getLuckdropRecordsList = () => {
|
|
|
- getMineLuckdropRecords({
|
|
|
- params: giveReqParams.params,
|
|
|
- }).then((res) => {
|
|
|
- chrome.runtime.connect({ name: "popup" });
|
|
|
- if (res.data && res.data.length) {
|
|
|
- if (giveReqParams.params.pageNum < 2) {
|
|
|
- giveList.value = res.data;
|
|
|
- } else {
|
|
|
- let data = giveList.value;
|
|
|
- data = data.concat(res.data);
|
|
|
- giveList.value = data;
|
|
|
- }
|
|
|
- downTimeBegin()
|
|
|
- giveReqParams.loadMore = false;
|
|
|
- }
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-const getCurrentList = () => {
|
|
|
- getMineLuckdropRecords({
|
|
|
- params: {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: giveList.value.length || 20,
|
|
|
- }
|
|
|
- }).then((res) => {
|
|
|
- if (res.data && res.data.length) {
|
|
|
- giveList.value = res.data;
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 点击列表跳转到推文
|
|
|
- */
|
|
|
-const clickListItem = (params) => {
|
|
|
- if (!params.srcContentId) {
|
|
|
- return;
|
|
|
- }
|
|
|
- let twitterUrl = "https://twitter.com/";
|
|
|
- let nickName = "";
|
|
|
- if (params.type == 2) {
|
|
|
- nickName = userInfo.value.nickName;
|
|
|
- } else {
|
|
|
- nickName = params.userInfo.nickName;
|
|
|
- }
|
|
|
|
|
|
- let url = twitterUrl + nickName + "/status/" + params.srcContentId;
|
|
|
- chrome.tabs.create({
|
|
|
- url,
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-const pageScroll = (e) => {
|
|
|
- let wrapperHeight = pageWrapperDom.value.offsetHeight;
|
|
|
- let pageGiveListHeight = pageGiveListDom.value.offsetHeight;
|
|
|
- let scrollTop = e.target.scrollTop || 0;
|
|
|
- if (currentTabIndex.value != 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (
|
|
|
- giveReqParams.loadMore === false &&
|
|
|
- wrapperHeight + scrollTop >= pageGiveListHeight - 60
|
|
|
- ) {
|
|
|
- giveReqParams.loadMore = true;
|
|
|
- giveReqParams.params.pageNum++;
|
|
|
- getLuckdropRecordsList();
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-/**
|
|
|
- * 点击发送，去发推
|
|
|
- */
|
|
|
-const sendTwitter = (params) => {
|
|
|
- console.log(params);
|
|
|
- callEventPageMethod(
|
|
|
- "POPUP_PUBLISH_TWITTER_RED_PACK",
|
|
|
- {
|
|
|
- srcContent: params.postTaskLuckdrop.srcContent,
|
|
|
- postId: params.postTaskLuckdrop.postId,
|
|
|
- },
|
|
|
- function (response) {
|
|
|
- console.log("res", response);
|
|
|
- }
|
|
|
- );
|
|
|
-};
|
|
|
-
|
|
|
-/**
|
|
|
- * sendMessage
|
|
|
- */
|
|
|
-const callEventPageMethod = (actionType, data, callback) => {
|
|
|
- chrome.runtime.sendMessage(
|
|
|
- {
|
|
|
- actionType: actionType,
|
|
|
- data: data,
|
|
|
- },
|
|
|
- function (response) {
|
|
|
- if (typeof callback === "function") callback(response);
|
|
|
- }
|
|
|
- );
|
|
|
-};
|
|
|
-
|
|
|
-const terminaHandler = (params, index) => {
|
|
|
- terminaTask = params;
|
|
|
- terminaTask.index = index;
|
|
|
-
|
|
|
- // set font
|
|
|
- if(params && params.postTaskLuckdrop) {
|
|
|
- if (params.postTaskLuckdrop.luckdropType == PlayType.lottery) {
|
|
|
- modalTitle.value = `Early Termination of Lottery?`
|
|
|
- modalContent.value = `This operation will terminate the lottery process and refund the lottery prizes.`
|
|
|
- } else if(params.postTaskLuckdrop.luckdropType == PlayType.treasure) {
|
|
|
- modalTitle.value = `Early Termination of treasure Hunt?`
|
|
|
- modalContent.value = `This operation will stop the treasure hunt and refund the remaining amount within 2 days`
|
|
|
- } else{
|
|
|
- modalTitle.value = `Early termination of Giveaway?`
|
|
|
- modalContent.value = `The remaining amount will be returned to your wallet within 1 day.`
|
|
|
- }
|
|
|
- } else {
|
|
|
- modalTitle.value = `Early termination of Giveaway?`
|
|
|
- modalContent.value = `The remaining amount will be returned to your wallet within 1 day.`
|
|
|
- }
|
|
|
-
|
|
|
- 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;
|
|
|
- // 重新拉取
|
|
|
- getCurrentList()
|
|
|
- }
|
|
|
- });
|
|
|
- terminaTask = {};
|
|
|
-};
|
|
|
-
|
|
|
-const modalConfirm = () => {
|
|
|
- modalVisible.value = false;
|
|
|
- terminaTask = {};
|
|
|
-};
|
|
|
-
|
|
|
-const readAllMsg = ({ msgType }, cb) => {
|
|
|
- readAllMsgByType({
|
|
|
- params: {
|
|
|
- msgType
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- cb && cb();
|
|
|
- })
|
|
|
-};
|
|
|
-
|
|
|
-const setMessageCount = () => {
|
|
|
- getAllMessageInfo({
|
|
|
- params: {
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- let { unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0 } = res.data;
|
|
|
- if (unReadCountTotal > 0) {
|
|
|
- let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal + '';
|
|
|
- setBadgeInfo({ data: { text } });
|
|
|
- } else {
|
|
|
- hideBadge();
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
-}
|
|
|
+let iframeId = ref('de-nav-message-page');
|
|
|
+let iframeSrc = ref('');
|
|
|
|
|
|
+onBeforeMount(() => {
|
|
|
+ iframeSrc.value = getInnerIframeURL(`${iframeHost}/nav-message` + `?iframeID=${iframeId.value}`)
|
|
|
+})
|
|
|
|
|
|
-const getUserInfo = (cb) => {
|
|
|
- getChromeStorage("userInfo", (res) => {
|
|
|
- if (res && res.accessToken) {
|
|
|
- userInfo.value = res;
|
|
|
- } else {
|
|
|
- userInfo.value = {};
|
|
|
+window.onmessage = (res) => {
|
|
|
+ if (res.data && res.data.actionType) {
|
|
|
+ let data = res.data.data;
|
|
|
+ switch (res.data.actionType) {
|
|
|
+ case MESSAGE_ENUM.IFRAME_GET_EXTENSION_STORGE_DATA:
|
|
|
+ getExtensionStorgeDataForIframe(data)
|
|
|
+ break;
|
|
|
+ case MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_CREATE_TAB:
|
|
|
+ chrome.tabs.create({
|
|
|
+ url: data.url,
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case MESSAGE_ENUM.IFRAME_RUNTIME_CONNECT_POPUP:
|
|
|
+ chrome.runtime.connect({ name: "popup" });
|
|
|
+ break;
|
|
|
+ case MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_PUBLISH_TWITTER:
|
|
|
+ chrome.runtime.sendMessage({
|
|
|
+ actionType: "POPUP_PUBLISH_TWITTER_RED_PACK",
|
|
|
+ data: data,
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_SETBADGEINFO:
|
|
|
+ setBadgeInfo({ data: data });
|
|
|
+ break;
|
|
|
+ case MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_HIDEBADGE:
|
|
|
+ hideBadge();
|
|
|
+ break;
|
|
|
+ }
|
|
|
}
|
|
|
- cb && cb(res);
|
|
|
- });
|
|
|
};
|
|
|
-
|
|
|
-const init = () => {
|
|
|
- getUserInfo();
|
|
|
- getLuckdropRecordsList();
|
|
|
-
|
|
|
- setMessageCount();
|
|
|
- setTimeout(() => {
|
|
|
- isReadMsg.value = false;
|
|
|
- readAllMsg({ msgType: 1 }, () => {
|
|
|
- setMessageCount();
|
|
|
- });
|
|
|
- }, 2000);
|
|
|
-}
|
|
|
-
|
|
|
-const onMessage = () => {
|
|
|
- chrome.runtime.onMessage.addListener(msgListener)
|
|
|
-}
|
|
|
-
|
|
|
-const msgListener = (req, sender, sendResponse) => {
|
|
|
- switch (req.actionType) {
|
|
|
- case 'CONTENT_POPUP_PAGE_SHOW':
|
|
|
- init();
|
|
|
- break;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 倒计时
|
|
|
-const downTimeBegin = () => {
|
|
|
- let list = giveList.value || []
|
|
|
- let ifDown = false
|
|
|
- list.forEach((item) => {
|
|
|
- if (item.endTimestamp) {
|
|
|
- let time = moment(new Date().getTime())
|
|
|
- let endTime = moment(item.endTimestamp + 5000)
|
|
|
- let downTime = (endTime - time) || 0
|
|
|
- if (downTime > 0) {
|
|
|
- item.downTime = formatSecondsAsDaysOrTime(downTime / 1000, false);
|
|
|
- ifDown = true;
|
|
|
- }
|
|
|
- if (item && item.downTime && item.downTime == '00:00:00') {
|
|
|
- getCurrentList()
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- if (ifDown) {
|
|
|
- setTimeout(() => {
|
|
|
- downTimeBegin()
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- onMessage();
|
|
|
- init();
|
|
|
-});
|
|
|
-
|
|
|
-onBeforeUnmount(() => {
|
|
|
- chrome.runtime.onMessage.removeListener(msgListener);
|
|
|
-})
|
|
|
</script>
|
|
|
|
|
|
-
|
|
|
<style scoped lang="scss">
|
|
|
-.message-wrapper {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- margin-top: 1px;
|
|
|
-
|
|
|
- .tab-bar {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background-color: #fff;
|
|
|
- box-shadow: 0px 0.5px 0px #d1d9dd;
|
|
|
-
|
|
|
- .tab-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 14px 0px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-bottom: 2px solid #fff;
|
|
|
- margin: 0 12px;
|
|
|
- font-size: 14px;
|
|
|
- color: #949494;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .active {
|
|
|
- border-bottom: 2px solid #1d9bf0;
|
|
|
- font-weight: 500;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tab-content {
|
|
|
+.iframe {
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .list-wrapper {
|
|
|
- min-height: 202px;
|
|
|
-
|
|
|
- .give-list {
|
|
|
- min-height: 202px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .cell {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- min-height: 76px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 14px;
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- .red-dots {
|
|
|
- position: absolute;
|
|
|
- right: 4px;
|
|
|
- top: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .img-wrapper {
|
|
|
- position: relative;
|
|
|
- width: 38px;
|
|
|
- margin-right: 16px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .icon-avatar {
|
|
|
- width: 34px;
|
|
|
- height: 34px;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .icon-give {
|
|
|
- position: absolute;
|
|
|
- right: 1px;
|
|
|
- bottom: -1px;
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .icon-big-give {
|
|
|
- margin-top: 12px;
|
|
|
- width: 34px;
|
|
|
- }
|
|
|
-
|
|
|
- .icon-mark-give {
|
|
|
- position: absolute;
|
|
|
- right: -2px;
|
|
|
- top: 31px;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .info-wrapper {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 10px 14px 10px 0;
|
|
|
-
|
|
|
- .left {
|
|
|
- .nickname {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 13px;
|
|
|
- margin-bottom: 5px;
|
|
|
- max-width: 132px;
|
|
|
- word-break: break-all;
|
|
|
- }
|
|
|
-
|
|
|
- .time {
|
|
|
- font-size: 12px;
|
|
|
- color: #b0b0b0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- .msg {
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .bold {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 13px;
|
|
|
- text-align: right;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: center;
|
|
|
- max-width: 140px;
|
|
|
-
|
|
|
- .blance {
|
|
|
- margin-left: 3px;
|
|
|
- display: inline-block;
|
|
|
- max-width: 80px;
|
|
|
- word-break: break-all;
|
|
|
- line-height: 18px;
|
|
|
- color: #e86f00;
|
|
|
- }
|
|
|
-
|
|
|
- .cuntom-prize {
|
|
|
- max-width: 130px;
|
|
|
- word-break: break-word;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .cuntom-prize-icon {
|
|
|
- color: #000;
|
|
|
- }
|
|
|
-
|
|
|
- .cuntom-prize-total {
|
|
|
- color: #000;
|
|
|
- word-break: break-word;
|
|
|
- }
|
|
|
-
|
|
|
- .coin-type-wrapper {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .coin-type {
|
|
|
- margin-left: 3px;
|
|
|
- word-break: break-all;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- margin-left: 4px;
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .align-content {
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-end;
|
|
|
-
|
|
|
- .blance {
|
|
|
- max-width: 130px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #b6b6b6;
|
|
|
- margin-top: 5px;
|
|
|
- text-align: right;
|
|
|
-
|
|
|
- .desc-bottom-bar {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 18px;
|
|
|
- height: 24px;
|
|
|
- margin-left: 4px;
|
|
|
- margin-right: -5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .info-center {
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .cell-center {
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .icon-empty {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ border: 0;
|
|
|
}
|
|
|
</style>
|
