message page

package.json

@@ -15,6 +15,7 @@
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
     "element-plus": "2.1.10",
+    "moment": "^2.29.4",
     "vue": "^3.2.13",
     "vue-router": "^4.1.2"
   },

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/modal-layer.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/components/nft-card.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="show" :style="{ zoom: zoom }">
+        <div class="card" :class="item.modelName">
+            <div class="logo">
+                <img v-if="item.logoImagePath" :src="item.logoImagePath" alt="" />
+            </div>
+            <div class="member">{{ item.projectName === '' ? 'xxxx' : item.projectName }}</div>
+            <div class="number">{{ nftItemId === '' ? '0000' : nftItemId }}</div>
+        </div>
+        <img class="bg" :src="item.modelImagePath" />
+    </div>
+</template>
+
+<script setup>
+import { onBeforeMount, defineProps, ref } from 'vue'
+
+const zoom = ref(1);
+
+const props = defineProps({
+    item: {
+        type: Object,
+        default: function() {
+            return {}
+        },
+    },
+    nftItemId: {
+        type: String,
+        default: '0000',
+    },
+    width: {
+        type: Number,
+        default: 400
+    }
+})
+
+onBeforeMount(() => {
+    if (props.width) {
+        zoom.value = props.width / 400
+    }
+})
+</script>
+
+<style lang='scss' scoped>
+.show {
+    position: relative;
+    overflow: hidden;
+    width: 400px;
+    height: 400px;
+    .card {
+        position: absolute;
+        left: 53px;
+        top: 103px;
+        width: 294px;
+        height: 186px;
+        .logo {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            background-color: #fff;
+            img {
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                object-fit: cover;
+            }
+        }
+        .member {
+            position: absolute;
+            top: 11px;
+            left: 11px;
+            width: 228px;
+            font-size: 12px;
+            text-align: left;
+            font-weight: 800;
+            line-height: 13px;
+        }
+        .number {
+            position: absolute;
+            top: 11px;
+            right: 10px;
+            font-size: 12px;
+            font-weight: 800;
+            line-height: 13px;
+            letter-spacing: 1px;
+        }
+        &.s1 {
+            .member, .number {
+                color: #ffffff;
+            }
+        }
+        &.s2 {
+            .member, .number {
+                color: #4AC3E1;
+            }
+        }
+        &.s3 {
+            .member, .number {
+                color: #606C94;
+            }
+        }
+        &.s4 {
+            .member, .number {
+                color: #504215;
+            }
+        }
+    }
+    .bg {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

src/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/pages/nav-message.vue

@@ -0,0 +1,821 @@
+<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>
+</template>
+  
+<script setup>
+import { ref, onMounted } from "vue";
+import modal from "@/components/modal-layer.vue";
+import redDot from "@/components/red-dot.vue";
+import nftCard from '@/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 { getChromeStorageFromExtension } from "@/uilts/chromeExtension";
+import messageCenter from "@/uilts/messageCenter";
+import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";
+import { PlayType, RewardType } from '@/types';
+import messageEnum from "@/uilts/messageCenter/messageEnum";
+
+var moment = require("moment");
+let currentTabIndex = ref(0);
+let userInfo = ref({});
+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 getLuckdropRecordsList = () => {
+  getMineLuckdropRecords({
+    params: giveReqParams.params,
+  }).then((res) => {
+    messageCenter.send({
+      actionType: MESSAGE_ENUM.IFRAME_RUNTIME_CONNECT_POPUP,
+      data: {}
+    })
+    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;
+  messageCenter.send({
+    actionType: MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_CREATE_TAB,
+    data: {
+      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) => {
+  messageCenter.send({
+    actionType: messageEnum.IFRAME_MESSAGE_PAGE_PUBLISH_TWITTER,
+    data: {
+      srcContent: params.postTaskLuckdrop.srcContent,
+      postId: params.postTaskLuckdrop.postId,
+    }
+  })
+};
+
+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(() => {
+    cb && cb();
+  })
+};
+
+const setMessageCount = () => {
+  getAllMessageInfo({
+    params: {
+    }
+  }).then(res => {
+    if (res.code == 0) {
+      let { unReadCountTotal = 0 } = res.data;
+      if (unReadCountTotal > 0) {
+        let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal + '';
+        messageCenter.send({
+          actionType: messageEnum.IFRAME_MESSAGE_PAGE_SETBADGEINFO,
+          data: { text }
+        })
+      } else {
+        messageCenter.send({
+          actionType: messageEnum.IFRAME_MESSAGE_PAGE_HIDEBADGE,
+          data: {}
+        })
+      }
+    }
+  });
+}
+
+
+const getUserInfo = async () => {
+  const res = await getChromeStorageFromExtension("userInfo");
+  if (res && res.accessToken) {
+    userInfo.value = res;
+  } else {
+    userInfo.value = {};
+  }
+};
+
+const init = () => {
+  getUserInfo();
+  getLuckdropRecordsList();
+
+  setMessageCount();
+  setTimeout(() => {
+    isReadMsg.value = false;
+    readAllMsg({ msgType: 1 }, () => {
+      setMessageCount();
+    });
+  }, 2000);
+}
+
+const onMessage = () => {
+  messageCenter.listen(MESSAGE_ENUM.CONTENT_POPUP_PAGE_SHOW, () => {
+    init();
+  })
+}
+
+// 倒计时
+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();
+});
+</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 {
+    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%);
+        }
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -5,8 +5,13 @@ import TabGroup from './../pages/tab-group';
 const routes = [
     {
         path: '/tab-group',
-        name: '',
+        name: 'tabGroup',
         component: TabGroup
+    },
+    {
+        path: '/nav-message',
+        name: 'navMessage',
+        component: () => require('../pages/nav-message')
     }
 ]
 

src/types/global.js

@@ -0,0 +1,50 @@
+/**
+ * 全局通用字段定义
+ */
+
+/**
+ * 玩法类型
+ * 普通任务：common=1;
+ * 抽奖：lottery=2
+ * 夺宝：treasure=3
+ */
+export const PlayType = {
+  common: 1,
+  lottery: 2,
+  treasure: 3,
+  postEditor: 4,
+};
+
+/**
+ * 奖品类型
+ * 货币:money=1;
+ * 自定义奖品:custom=2
+ */
+export const RewardType = {
+  money: 1,
+  custom: 2,
+};
+
+/**
+ * 任务类型
+ */
+export const TaskType = {
+  twitterFollow: 1,
+  twitterLikeTweet: 2,
+  twitterRetweet: 3,
+  joinDiscord: 7,
+  repostToFacebook: 8,
+  twitterCommentAndTag: 9,
+  twitterRePost: 10
+};
+
+/**
+ * 帖子类型
+ */
+
+export const PostType = {
+  giveaway: 1,
+  lottery: 2,
+  postEditor: 3,
+  treasure: 4
+}

src/types/index.js

@@ -0,0 +1 @@
+export * from "@/types/global";

src/uilts/chromeExtension.js

@@ -43,7 +43,7 @@ export async function getChromeStorageFromExtension(key = '') {
     let params = {}
     params[key] = ''
     const value = getSessionStorge(key);
-    if (value) {
+    if (value && value?.uid) {
         return Promise.resolve(value);
     } else { 
         return new Promise((res, rej) => {

src/uilts/messageCenter/messageEnum.js

@@ -5,7 +5,12 @@ const SEND_MESSAGE_ENUM =  {
     IFRAME_PAGE_JUMP: 'IFRAME_PAGE_JUMP',
     IFREME_TAB_GROUP_CONTENT_GET_NAV_TOP: 'IFREME_TAB_GROUP_CONTENT_GET_NAV_TOP',
     /** 获取content的localstorge数据 */
-    IFRAME_GET_EXTENSION_STORGE_DATA: 'IFRAME_GET_EXTENSION_STORGE_DATA'
+    IFRAME_GET_EXTENSION_STORGE_DATA: 'IFRAME_GET_EXTENSION_STORGE_DATA',
+    IFRAME_MESSAGE_PAGE_CREATE_TAB: 'IFRAME_MESSAGE_PAGE_CREATE_TAB',
+    IFRAME_MESSAGE_PAGE_PUBLISH_TWITTER: 'IFRAME_MESSAGE_PAGE_PUBLISH_TWITTER',
+    IFRAME_MESSAGE_PAGE_SETBADGEINFO: 'IFRAME_MESSAGE_PAGE_SETBADGEINFO',
+    IFRAME_MESSAGE_PAGE_HIDEBADGE: 'IFRAME_MESSAGE_PAGE_HIDEBADGE',
+    IFRAME_RUNTIME_CONNECT_POPUP: 'IFRAME_RUNTIME_CONNECT_POPUP',
 }
 
 /** 接收父窗口的事件定义 */
@@ -15,7 +20,8 @@ const RECEIVE_MESSAGE_ENUM = {
     /** group打开时，页面发生滚动 */
     CONTENT_GROUP_LIST_SCROLL: 'CONTENT_GROUP_LIST_SCROLL',
     CONTENT_SEND_GROUP_NAV_TOP: 'CONTENT_SEND_GROUP_NAV_TOP',
-    CONTENT_SYS_THEME_CHANGE: 'CONTENT_SYS_THEME_CHANGE'
+    CONTENT_SYS_THEME_CHANGE: 'CONTENT_SYS_THEME_CHANGE',
+    CONTENT_POPUP_PAGE_SHOW: 'CONTENT_POPUP_PAGE_SHOW',
 }
 
 export default { ...SEND_MESSAGE_ENUM, ...RECEIVE_MESSAGE_ENUM }

yarn.lock

@@ -4319,6 +4319,11 @@ module-alias@^2.2.2:
   resolved "https://registry.yarnpkg.com/module-alias/-/module-alias-2.2.2.tgz#151cdcecc24e25739ff0aa6e51e1c5716974c0e0"
   integrity sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==
 
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 mrmime@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"