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

<template>
    <div class="more-page">
        <div class="more-list">
            <template
                :key="index"
                v-for="(item, index) in moreTabList">
                <template v-if="item.icon">
                    <div class="cell" @click="moreItemHandle(item)">
                        <img class="icon" :src="item.icon" />
                        <div class="info-wrapper">
                            <div class="left">
                                {{ item.label }}
                            </div>
                            <div class="right">
                                <img class="icon" :src="require('@/assets/svg/icon-cell-arrow-right.svg')" />
                            </div>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="clear"></div>
                </template>
            </template>
        </div>
    </div>
</template>

<script setup>
import Report from "@/log-center/log"
import { ref, onMounted } from "vue";
import { websiteUrl } from '@/http/configAPI'
import { getChromeStorage } from '@/uilts/chromeExtension.js'

let userStorage = ref({})
let moreTabList = ref([
  {
    icon: require("@/assets/svg/icon-website.svg"),
    label: "Official Website",
    href: "https://www.denet.me",
    type: 'link'
  },
  {
    icon: require("@/assets/svg/icon-twitter.svg"),
    label: "Twitter",
    href: "https://twitter.com/denet2022",
    type: 'link'
  },
  // {
  //   icon: require("@/assets/svg/icon-discord.svg"),
  //   label: "Discord",
  //   href: "https://discord.gg/wZSz9p8ddG",
  //   type: 'link'
  // },
  {
      icon: require("@/assets/svg/icon-telegram.svg"),
      label: "Telegram",
      href: 'https://t.me/denetpro',
      type: 'link'
  },
  {},
  {
      icon: require("@/assets/svg/icon-create-nfts.svg"),
      label: "Create NFTs",
      type: 'jumpWebsite'
  }
]);

const moreItemHandle = (params) => {
    switch (params.type) {
        case 'link':
            window.open(params.href);
            break;
        case 'jumpWebsite':
            let url = websiteUrl + `/nft/list?params=${btoa(JSON.stringify(userStorage.value))}`
            window.open(url);
            // report
            Report.reportLog({
                pageSource: Report.pageSource.denetMorePage,
                businessType: Report.businessType.buttonClick,
                objectType: Report.objectType.create_nfts_button,
            });
            break;
    }
};

const getUserInfo = async () => {
    userStorage.value = await getChromeStorage('userInfo') || {}
}

onMounted(() => {
    getUserInfo()
    // report
    Report.reportLog({
        pageSource: Report.pageSource.denetMorePage,
        businessType: Report.businessType.pageView,
    });
})

</script>

<style scoped lang="scss">
.more-page {
  background: #f6f6f6;
  width: 100%;
  height: 100%;
  overflow: auto;
  margin-top: 1px;

  .more-list {
    background: #fff;
    margin-top: 10px;

    .cell {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 56px;
      box-sizing: border-box;
      padding: 0 16px;

      .icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }

      .info-wrapper {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        margin-left: 13px;

        .left {
          font-size: 14px;
          .time {
            color: #b0b0b0;
          }
        }

        .right {
          display: flex;
          align-items: center;
          cursor: pointer;

          .icon {
            width: 18px;
            height: 24px;
          }
        }
      }
    }
  }
}

.clear {
    overflow: hidden;
    height: 10px;
    background-color: #f6f6f6;
}
</style>