de-net-hotload/src/pages/tabbar/message/index.vue

<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';

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);
let iframeId = 'de-nav-message-page';

/**
 * 获取红包列表
 */
const getLuckdropRecordsList = () => {
  getMineLuckdropRecords({
    params: giveReqParams.params,
  }).then((res) => {
    messageCenter.send({
      info: {
        actionType: MESSAGE_ENUM.IFRAME_RUNTIME_CONNECT_POPUP,
        iframeId: iframeId,
      },
      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({
    info: {
      actionType: MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_CREATE_TAB,
      iframeId: iframeId,
    },
    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({
    info: {
      actionType: MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_PUBLISH_TWITTER,
      iframeId: iframeId,
    },
    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({
          info: {
            actionType: MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_SETBADGEINFO,
            iframeId: iframeId,
          },
          data: { text }
        })
      } else {
        messageCenter.send({
          info: {
            actionType: MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_HIDEBADGE,
            iframeId: iframeId,
          },
          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>