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

<template>
  <div class="message-wrapper">
    <!-- <div class="tab-bar">
      <div
        class="tab-item"
        :class="{ active: currentTabIndex == index }"
        v-for="(item, index) in tabList"
        :key="index"
        @click="clickTab(item, index)"
      >
        {{ item.label }}
      </div>
    </div> -->
    <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 }"
              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">
                  <img class="icon-avatar" :src="item.userInfo.avatarUrl" />
                  <img
                    class="icon-give"
                    :src="require('@/assets/svg/icon-get-giveaways-s.svg')"
                  />
                </template>
                <!-- 发出去红包 -->
                <template v-else-if="2">
                  <img
                    class="icon-big-give"
                    :src="require('@/assets/svg/icon-send-giveaways-s.svg')"
                  />
                </template>
              </div>
              <div
                class="info-wrapper"
                :class="{ 'info-center': item.type == 1 }"
              >
                <div class="left">
                  <div class="nickname">
                    {{ item.type == 1 ? "Get Giveaway" : "Send Giveaway" }}
                  </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.amount.length + item.currencySymbol.length > 12,
                      }"
                    >
                      <!-- 收到的 -->
                      <template v-if="item.type == 1">
                        <!-- 进行中-->
                        <template v-if="item.status == 0">
                          in progress
                        </template>
                        <!-- 已完成 -->
                        <template v-else-if="item.status == 1">
                          <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 == 2">
                          Timeout
                        </template>
                      </template>
                      <!-- 发出去的 -->
                      <template v-else-if="item.type == 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>
                    </div>
                    <!-- 发出的红包显示 -->
                    <div class="desc" v-if="item.type == 2">
                      <!-- 未发送-->
                      <template v-if="item.postTaskLuckdrop.reSendAvailable">
                        Unpublished
                      </template>
                      <!-- 进行中 -->
                      <template v-else-if="item.status == 1">
                        {{ item.postTaskLuckdrop.receivedCount }}/{{
                          item.postTaskLuckdrop.totalCount
                        }}
                      </template>
                      <!-- 2:已结束; 3:提前终止-->
                      <template
                        v-else-if="item.status == 2 || item.status == 3"
                      >
                        ({{
                          item.status == 2 ? "Time expired" : "Termination"
                        }}) {{ item.postTaskLuckdrop.receivedCount }}/{{
                          item.postTaskLuckdrop.totalCount
                        }}
                      </template>
                      <!-- 红包提前终止/退款（进行中）显示-->
                      <template v-if="item.status == 4"> Terminating </template>

                      <!-- 进行中或者未发送成功时显示 
                                                v-if="item.status == 1 || item.postTaskLuckdrop.reSendAvailable"-->
                      <div class="desc-bottom-bar">
                        <!-- 没有终止红包时显示 -->
                        <div
                          v-if="item.postTaskLuckdrop.terminatedAvailable"
                          class="btn"
                          @click.stop="terminaHandler(item, index)"
                        >
                          Termination
                        </div>

                        <!-- 红包未发出显示 -->
                        <div
                          class="btn send-btn"
                          v-if="item.postTaskLuckdrop.reSendAvailable"
                          @click.stop="sendTwitter(item)"
                        >
                          Send
                        </div>
                        <div
                          v-else-if="item.srcContentId"
                          class="btn detail-btn"
                          @click.stop="clickListItem(item, index)"
                        >
                          details
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 发红包—— 未发出、进行中 隐藏 -->
                  <img
                    v-if="item.type != 2"
                    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="Early termination of Giveaway?"
      content="The remaining amount will be returned to your wallet within 1 day."
      cancelText="Termination"
      confirmText="Cancel"
      @cancel="modalCancel"
      @confirm="modalConfirm"
    />
  </div>
</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 { getBit } from "@/uilts/help";
import { getMineLuckdropRecords } from "@/http/account";
import { terminatedLuckdrop } from "@/http/redPacket";
import { readAllMsgByType, getAllMessageInfo } from "@/http/messageApi"
import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";
import { getChromeStorage } from "@/uilts/chromeExtension";

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 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;
      }
      giveReqParams.loadMore = false;
    }
  });
};

/**
 * 点击列表跳转到推文
 */
const clickListItem = (params) => {
  if (!params.srcContentId) {
    return;
  }
  let twitterUrl = "https://twitter.com/";
  let nickName = "";
  if (params.type == 1) {
    nickName = params.userInfo.nickName;
  } else if (params.type == 2) {
    nickName = userInfo.value.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;
  modalVisible.value = true;
};

const modalCancel = () => {
  //请求终止接口 id terminaTask.id 、 刷新当前列表、 关闭
  modalVisible.value = false;
  let index = terminaTask.index;
  terminatedLuckdrop({
    params: {
      luckdropId: terminaTask.id,
    },
  }).then((res) => {
    if (res.code == 0) {
      giveList.value[index]["status"] = res.data.status;
      giveList.value[index]["postTaskLuckdrop"]["reSendAvailable"] = false;
      giveList.value[index]["postTaskLuckdrop"]["terminatedAvailable"] = false;
    }
  });
  terminaTask = {};
};

const modalConfirm = () => {
  modalVisible.value = false;
  terminaTask = {};
};

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();
            }
        }
    });
}


const getUserInfo = (cb) => {
  getChromeStorage("userInfo", (res) => {
    if (res && res.accessToken) {
      userInfo.value = res;
    } else {
      userInfo.value = {};
    }
    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) => {
  sendResponse('');
  switch (req.actionType) {
      case 'CONTENT_POPUP_PAGE_SHOW':
          init();
          break;
  }
}

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 {
    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;
            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;
            }
          }

          .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: 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;
                  }

                  .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: 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>