udxcms 1.0.1

package/dist/components/pageComponents/header/header_pointx.vue

@@ -0,0 +1,472 @@
+<template>
+  <div class="header-wrapper pointx" :class="['theme-' + themeMode]">
+    <div class="header-inner" :class="{ 'header-fixed': headerFixed }">
+      <div class="header-left ivu-scroll">
+        <div class="logo-wrapper" @click="toHome">
+          <img
+              :src="logoUrl"
+              class="logo"
+              v-theme="{ height: commonConfig.logoHeight }"
+          />
+          <!-- 处理不同主题 -->
+          <div class="origin-img">
+            <img
+                :src="logoUrl"
+                class="logo-origin"
+                v-theme="{ height: commonConfig.logoHeight }"
+            />
+          </div>
+        </div>
+        <ul class="menu-wrapper" v-show="showMiddleInfo">
+          <li
+              v-for="(item, index) in navList"
+              :key="index"
+              @click="onClickMenu(item)"
+          >
+            <span class="menu-text">
+                {{ item.bar_name }}
+                <a-icon
+                    v-if="item.child.length"
+                    type="caret-down" class='icon'/>
+                <menu-tag :content='item.menu_tag' v-if='item.menu_tag' top='-10px'></menu-tag>
+            </span>
+
+            <SubMenuMore :menus="item.child" :isBasic='isBasic'></SubMenuMore>
+          </li>
+        </ul>
+      </div>
+      <ul class="user-wrapper">
+        <!-- 已登录 - 订单 -->
+        <li v-if="account && !hideWalletBtn" class="my-orders">
+            <span class="menu-text">
+                {{ $t("user_common_portfolio") }}
+            </span>
+            <!-- sub menu -->
+            <BasePopup class="menu-dropdown">
+                <BaseMenu menuType="portfolio" />
+            </BasePopup>
+        </li>
+        <!-- 已登录 - 钱包 -->
+        <li v-if="(account || isLocked) && !hideWalletBtn">
+          <WalletConnected class='pointx-wallet-connected'/>
+        </li>
+        <li v-else-if='!hideWalletBtn'>
+            <a
+              class="wallet-connect"
+              type="primary"
+              @click="login"
+            >
+                <img src="../../../assets/component_img/index-pointx/Wallet.png" alt="">
+                <span>CONNECT WALLET</span>
+            </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import config from "../../../config/index";
+import _ from "lodash";
+import themeMixin from "../../../mixins/themeMixin-votex";
+
+export default {
+  name: "HeaderVortex",
+  mixins: [themeMixin],
+  props: {
+    navList: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    scrollTop: {
+      type: Number,
+      default: null,
+    },
+    showMiddleInfo: {
+      type: Boolean,
+      default: true,
+    },
+    hideWalletBtn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      sitePath: config.sitePath,
+      walletMenuVisible: true,
+      token: localStorage.getItem("TOKEN"),
+      headerFixed: false
+    };
+  },
+  computed: {
+
+    commonConfig() {
+      return this.$store.state.theme.common.common_conf;
+    },
+    logoUrl() {
+      return 'https://d1qu701gfywrk1.cloudfront.net/2024/03/28/aeaa402f-75a5-4704-8220-1a13adfeb92b.png'
+    //   if(this.themeMode === 'light') {
+    //     return this.sitePath +location.hostname + '/light/logo.png'
+    //   } else {
+    //     return window.site_config[
+    //       "site_common_logo_image_" + location.hostname
+    //       ];
+    //   }
+    },
+    userInfo() {
+      return this.$store.state.user.userInfo || {};
+    },
+    btcWallet() {
+        return this.$store.state.wallet.btcWallet || {}
+    },
+    account() {
+        return this.btcWallet?.btcAccoount || this.$store.getters.account || "";
+    },
+    isLocked() {
+      return this.$store.getters.isLocked;
+    },
+    walletAccount() {
+      return this.walletData && this.walletData.getAddress()
+    },
+    chainId() {
+      return this.$store.state.chainId;
+    },
+    walletNetworks() {
+      return this.$store.getters.walletNetworks;
+    },
+    chainIcon() {
+      const networkDetail = this.$store.getters.filterNetworkItem(
+          this.chainId,
+          "L1"
+      );
+      return networkDetail.networkLogo;
+    },
+
+    userMenus() {
+      return this.$store.state.navigation.user;
+    },
+    walletIcon() {
+      return this.$store.getters.walletIcon || '';
+    },
+    isBasic() {
+      return this.$store.state.siteConfig.tradeMoel == 'Basic'
+    }
+  },
+  watch: {
+    account() {
+      this.checkAccount();
+    }
+  },
+  created() {
+    window.addEventListener("scroll", this.scrollFn());
+  },
+  mounted() {
+    // refresh event
+    this.$nextTick(() => {
+      $Vue.$bus.$on("refresh", (events) => {
+        events.map((type) => {
+          switch (type) {
+            case "initActiveUser":
+              this.checkAccount();
+              break;
+            default:
+              break;
+          }
+        })
+      })
+    })
+  },
+  methods: {
+    scrollFn() {
+      return _.throttle(() => {
+        let scrollT = window.scrollY * 1;
+        if (scrollT && this.$route.name == 'home') {
+            localStorage.setItem('vortexIndexScorll', scrollT)
+        }
+        if (scrollT >= this.scrollTop) {
+          this.headerFixed = true;
+        } else {
+          this.headerFixed = false;
+        }
+      }, 50);
+    },
+    checkAccount() {
+      this.token = localStorage.getItem("TOKEN");
+    },
+    toHome() {
+      this.$router.push({
+        path: "/",
+      });
+    },
+    onClickMenu(item) {
+      if (this.isBasic && item.click_url.includes('/trade?')) {
+        item.click_url = item.click_url.replace('/trade', '/trade/spot/swap')
+        console.log('item.click_url', item.click_url)
+      }
+      if (item.child && item.child.length) return;
+      if (item.click_url.startsWith("http")) {
+        if (item.bar_name !== "Faucet") {
+          window.open(item.click_url, "_blank");
+        }
+      } else {
+        this.$store.commit('setRouteUrl', item.click_url);
+        this.$router.push({
+          path: item.click_url,
+        });
+      }
+    },
+    goThirdUrl(url) {
+      if (url) {
+        window.open(this.faucetTips.url, "_blank");
+      }
+      this.faucetTips.show = false;
+    },
+    async changeChain(chainId) {
+      this.$store.commit("setChainId", chainId);
+    },
+    login() {
+      $Vue.$bus.$emit("linkWalletByConnetBtn");
+    },
+    formatAccount(value) {
+      if (!value) return ''
+      return value.slice(0, 4) + "******" + value.slice(-4, value.length);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+
+.header-wrapper {
+  --height: 36px;
+  height: 60px;
+  &.pointx {
+    width: 1220px;
+    margin: 18px auto;
+    height: 50px;
+    --height: 50px;
+  }
+  .header-inner {
+    font-size: 14px;
+    background-color: var(--header-bg-color);
+    height: 50px;
+    padding: 0 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    &.header-fixed {
+      position: fixed;
+      z-index: 1000;
+      width: 1240px;
+      margin: 0 auto;
+      transition: transform 0.3s ease;
+      top: -100px;
+      transform: translateY(100px);
+      background-color: transparent;
+      box-shadow: var(--box-shadow-base);
+      padding: 10px 14px;
+      height: 70px;
+      &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: var(--header-fixed-bg-color);
+        backdrop-filter: blur(15px);
+      }
+    }
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+  }
+  .logo-wrapper {
+    position: relative;
+    overflow: hidden;
+    flex: none;
+    cursor: pointer;
+    .logo {
+      height: 26px;
+      width: auto
+    }
+    .origin-img {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      overflow: hidden;
+    }
+  }
+
+  li {
+    height: var(--height);
+    line-height: var(--height);
+    cursor: pointer;
+    position: relative;
+    &:hover {
+      .menu-text {
+        color: var(--link-color);
+      }
+      .menu-dropdown {
+        display: block;
+      }
+    }
+    .menu-text {
+      display: flex;
+      white-space: nowrap;
+      align-items: center;
+      font-family: MFontBold;
+      font-size: 16px;
+      &:hover {
+        color: #A5FF87;
+      }
+    }
+    .anticon {
+      font-size: 12px;
+      margin-left: 4px;
+    }
+  }
+
+  .menu-wrapper {
+    margin-left: 30px;
+    display: flex;
+    align-items: center;
+    gap: 26px;
+  }
+  .menu-dropdown {
+    display: none;
+    position: absolute;
+    top: var(--height);
+    left: 0;
+    min-width: 160px;
+    z-index: 800;
+    /deep/ .portfolio {
+      ul {
+        background: var(--popup-bg);
+        border-radius: var(--border-radius-base);
+        box-shadow: var(--box-shadow-base);
+        li {
+          margin: 0px;
+          height: 48px;
+          line-height: 48px;
+          font-size: 16px;
+          color: var(--text-color);
+          white-space: nowrap;
+          &:hover {
+            color: var(--link-color);
+            background-color: var(--select-item-bg);
+          }
+        }
+      }
+    }
+    &.currency-dropdown {
+      right: 0;
+      left: auto;
+    }
+    .submenu-wrapper {
+      // margin-top: 10px;
+      background: var(--popup-bg);
+      border-radius: var(--border-radius-base);
+      overflow: hidden;
+      box-shadow: var(--box-shadow-base);
+      .submenu-item {
+        height: 48px;
+        line-height: 48px;
+        padding: 0 16px;
+        font-size: 16px;
+        white-space: nowrap;
+        &:hover {
+          background-color: var(--select-item-bg);
+          color: var(--link-color);
+        }
+      }
+    }
+  }
+
+  .user-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-left: 20px;
+
+    .my-orders, .my-portfolio {
+      margin-right: 12px;
+    }
+
+    .wallet-connect {
+      display: inline-block;
+      box-sizing: border-box;
+      height: 40px;
+      font-size: 14px;
+      padding: 0 10px;
+      color: var(--white);
+      border-radius:  50px;
+      font-family: CFontBold;
+      min-width: 160px;
+      border: 1px solid #A5FF87;
+      line-height: 40px;
+      &:hover,
+      &:active {
+        color: var(--primary-text-color-hover);
+        background: none;
+        border: 1px solid white;
+        color: #A5FF87;
+      }
+      & > img {
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .pointx-wallet-connected {
+    display: flex;
+    align-items: center;
+    border: 1px solid #A5FF87;
+    height: 40px;
+    border-radius: var(--border-radius-base);
+    padding: 8px 12px;
+    border-radius: 40px;
+    /deep/ .wallet-connected {
+        border: 0 !important;
+    }
+    img {
+      width: 24px;
+      height: 24px;
+    }
+    .icon-locked {
+      font-size: 14px;
+    }
+    .user-account {
+      margin: 0 6px;
+    }
+    &.wallet-locked {
+      color: var(--error-color);
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .header-wrapper {
+    .menu-wrapper {
+      margin-left: 20px;
+    }
+  }
+}
+
+@media screen and (min-width: 1500px) {
+  .header-wrapper {
+    .menu-wrapper {
+      margin-left: 130px;
+      width: fit-content;
+      gap: 100px;
+    }
+  }
+}
+</style>