udxcms 1.0.1

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

@@ -0,0 +1,621 @@
+<template>
+  <div class="header-wrapper" :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>
+
+            <!-- sub menu -->
+            <SubMenuMore :menus="item.child" :isBasic='isBasic'></SubMenuMore>
+            <!-- <div class="menu-dropdown" v-if="item.child.length">
+  <div class="submenu-wrapper">
+    <div
+      class="submenu-item"
+      v-for="(subItem, subIndex) in item.child"
+      :key="subIndex"
+      @click="onClickMenu(subItem)"
+    >
+      {{ subItem.bar_name }}
+    </div>
+  </div>
+</div> -->
+          </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>
+          <!-- <div class="menu-dropdown">
+            <div class="submenu-wrapper">
+              <div
+                class="submenu-item"
+                @click="toOrder('orders')"
+              >
+                {{ $t("trade_history_open_orders") }}
+              </div>
+              <div
+                class="submenu-item"
+                @click="toOrder('history')"
+              >
+                {{ $t("trade_history_order_history") }}
+              </div>
+            </div>
+          </div> -->
+        </li>
+        <li v-if='!hideWalletBtn'>
+          <NetworkSelect
+            :networks="walletNetworks"
+            :defaultChainId="chainId"
+            :isShowLabel='!account && !walletAccount'
+            :chainChangeLogin='true'
+            @change="changeChain"
+          />
+        </li>
+        <!-- 已登录 - 钱包 -->
+        <li v-if="(account || isLocked) && !hideWalletBtn">
+          <WalletConnected/>
+        </li>
+        <li v-else-if='!hideWalletBtn'>
+          <a-button
+            class="wallet-connect"
+            type="primary"
+            @click="login"
+          >
+            {{ $t("wallet_common_connect") }}
+          </a-button>
+        </li>
+
+        <!-- 语言/法币 -->
+        <li class="lang-currency" @mouseenter="isShowCurrency = true">
+                    <span class="menu-text">
+                        {{ lang }}/{{ currency.name || "USD" }}
+                    </span>
+          <a-icon type="caret-down"/>
+          <div class="menu-dropdown currency-dropdown">
+            <Currency
+              v-model="isShowCurrency"
+              top="0"
+              left=""
+              right="0"
+              :isClickstatus="false"
+              @setLang="setLang"
+            />
+          </div>
+        </li>
+        <!-- 主题切换 -->
+        <li v-if="themeSwitchVisible" class="theme-icons">
+          <SvgIcon
+            v-if="themeMode === 'dark'"
+            icon-class="day"
+            stroke="none"
+            className="theme-icon"
+            @click="setTheme('light')"
+          />
+          <SvgIcon
+            v-else
+            icon-class="night"
+            stroke="none"
+            className="theme-icon"
+            @click="setTheme('dark')"
+          />
+        </li>
+      </ul>
+    </div>
+
+    <!-- faucet tips -->
+    <a-modal
+      v-model="faucetTips.show"
+      :width="420"
+      :title="faucetTips.title"
+      :footer="null"
+    >
+      <p class="mb">{{ faucetTips.content }}</p>
+      <p>
+        <a-button type="primary" block @click="goThirdUrl">
+          {{ faucetTips.btnText }}
+        </a-button>
+      </p>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import config from "../../../config/index";
+import _ from "lodash";
+import themeMixin from "../../../mixins/themeMixin";
+
+export default {
+  name: "HeaderB",
+  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 {
+      isShowCurrency: false,
+      lang: "",
+      language: localStorage.getItem("language") || config.baseLanguage,
+
+      walletMenuVisible: true,
+      token: localStorage.getItem("TOKEN"),
+
+      // faucet tips
+      faucetTips: {
+        title: this.$t("common_base_gothird_url_tips_title"),
+        show: false,
+        content: this.$t("common_base_gothird_url_tips_content"),
+        url: "",
+        btnText: this.$t("common_base_gothird_url_btn_text"),
+      },
+      headerFixed: false
+    };
+  },
+  computed: {
+
+    commonConfig() {
+      return this.$store.state.theme.common.common_conf;
+    },
+    logoUrl() {
+      return window.site_config[
+      "site_common_logo_image_" + location.hostname
+        ];
+      // return this.$t("site_common_logo_image_"+ location.hostname);
+      // return this.logoSrc + "/en_US/w72.png";
+    },
+    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;
+    },
+    currency() {
+      return this.$store.state.user.currency;
+    },
+    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;
+        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) {
+      console.log("item:", item);
+      // 监听trade/spot
+      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 {
+          // faucet 有提示。
+          this.faucetTips.show = true;
+          this.faucetTips.url = item.click_url;
+        }
+      } else {
+        this.$router.push({
+          path: item.click_url,
+        });
+      }
+    },
+    goThirdUrl(url) {
+      if (url) {
+        window.open(this.faucetTips.url, "_blank");
+      }
+      this.faucetTips.show = false;
+    },
+    toOrder(type) {
+      let tradeMode = this.$store.state.trade.tradeMode || "spot";
+      let tradeChainId = this.$store.state.trade.tradeChainId || "";
+      let query = {
+        type: type,
+        chainId: tradeChainId,
+      };
+      if (!query.chainId) delete query.chainId;
+      this.$router.push({
+        path: `/order/history/${tradeMode}`,
+        query: query,
+      });
+    },
+    async changeChain(chainId) {
+      this.$store.commit("setChainId", chainId);
+    },
+    login() {
+      $Vue.$bus.$emit("linkWalletByConnetBtn");
+    },
+    setLang(lang) {
+      this.lang = lang;
+      this.language = localStorage.getItem("language");
+    },
+    formatAccount(value) {
+      if (!value) return '';
+      return value.slice(0, 4) + "******" + value.slice(-4, value.length);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+// 影响到wallet 需要将逻辑移动到 trade 页面。
+// .theme-light {
+// 	// 浅色风格下logo处理
+// 	.header-wrapper {
+// 		.logo-wrapper {
+// 			.logo {
+// 				filter: invert(1);
+// 			}
+// 			.origin-img {
+// 				display: block;
+// 				width: 36px;
+// 			}
+// 		}
+// 	}
+// }
+
+.header-wrapper {
+  --height: 36px;
+  height: 60px;
+
+  .header-inner {
+    font-size: 14px;
+    background-color: var(--header-bg-color);
+    height: 60px;
+    padding: 0 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &.header-fixed {
+      position: fixed;
+      z-index: 1000;
+      left: 0;
+      right: 0;
+
+      transition: transform 0.3s ease;
+      top: -100px;
+      transform: translateY(100px);
+      background-color: transparent;
+      box-shadow: var(--box-shadow-base);
+
+      &::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;
+
+    .logo {
+      height: var(--height);
+    }
+
+    .origin-img {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      overflow: hidden;
+    }
+  }
+
+  li {
+    height: var(--height);
+    line-height: var(--height);
+    cursor: pointer;
+    position: relative;
+
+    .menu-text {
+      display: flex;
+      white-space: nowrap;
+      align-items: center;
+    }
+
+    &:hover {
+      .menu-text {
+        color: var(--link-color);
+      }
+
+      .menu-dropdown {
+        display: block;
+      }
+    }
+
+    .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 {
+      height: var(--height);
+      font-size: 14px;
+      // &:hover {
+      // 	color: var(--primary-color);
+      // 	background-color: var(--white);
+      // }
+      &:hover,
+      &:active {
+        color: var(--login-text-color-hover);
+        background-color: var(--login-color-hover);
+        border: 1px solid var(--login-color-hover);
+      }
+    }
+
+    .lang-currency {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .theme-icons {
+      display: flex;
+      align-items: center;
+    }
+
+    .theme-icon {
+      // 24px
+      width: 20px;
+      height: 20px;
+      // padding: 10px;
+    }
+  }
+
+  // wallet-connected
+  .wallet-connected {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--border-color-base);
+    height: var(--height);
+    border-radius: var(--border-radius-base);
+    padding: 8px 12px;
+
+    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: 80px;
+      width: fit-content;
+    }
+  }
+}
+</style>