udxcms 1.0.10 → 1.0.12

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

@@ -0,0 +1,582 @@
+<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"/>
+                            <menu-tag :content='item.menu_tag' v-if='item.menu_tag' top='-10px'></menu-tag>
+						</span>
+
+						<!-- sub menu -->
+						<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">
+					<a-button
+						class="wallet-connect"
+						type="primary"
+						@click="login"
+					>
+						{{ $t("wallet_common_connect") }}
+					</a-button>
+				</li> -->
+                <!-- 已登录 - 钱包 -->
+                <!-- <li v-if="account" class="my-portfolio">
+                    <span class="menu-text">{{$t('user_common_portfolio')}}</span>
+                    <BasePopup class="menu-dropdown">
+                        <BaseMenu menuType="portfolio" />
+                    </BasePopup>
+                </li> -->
+				<!-- 已登录 - 钱包 -->
+				<li v-if="account">
+					<!-- 已经登录正常状态 -->
+					<div v-if="isActive" class="wallet-connected">
+						<!-- <img :src="chainIcon" alt="" /> -->
+                        <img :src="walletIcon || require('../../../assets/img/walletconnect.png')" alt="" v-if="walletIcon.indexOf('<svg') == -1"/>
+                        <span v-html="walletIcon" v-else></span>
+						<span class="user-account">{{
+							formatAccount(account)
+						}}</span>
+						<a-icon type="caret-down" />
+					</div>
+
+					<!-- wallet 菜单 -->
+					<div class="menu-dropdown">
+						<UserMenu v-if="userMenus.length > 0" />
+						<userPanel
+							v-else
+							v-model="walletMenuVisible"
+							top="0"
+							:isClickstatus="false"
+							type="B"
+						/>
+					</div>
+				</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: "HeaderMorseWallet",
+  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 || {}
+        },
+		// user
+		account() {
+			return this.$store.getters.account || '';
+            // return this.$store.state.wallet.wallet.address
+		},
+		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;
+		},
+		isActive() {
+			return !!this.token;
+		},
+        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);
+			if (item.child && item.child.length) return;
+            if (this.isBasic && item.click_url.includes('/trade?')) {
+                item.click_url = item.click_url.replace('/trade', '/trade/spot/swap')
+            }
+			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.$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;
+		},
+		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() {
+			this.$router.push({
+                path: '/user/login'
+            })
+			// $Vue.$bus.$emit("linkWallet");
+		},
+		setLang(lang) {
+			this.lang = lang;
+			this.language = localStorage.getItem("language");
+		},
+		formatAccount(value) {
+			return value.slice(0, 4) + "******" + value.slice(-4, value.length);
+		},
+	},
+};
+</script>
+
+<style lang="less" scoped>
+// 影响到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-portfolio {
+            margin-right: 12px;
+        }
+		.my-orders {
+			margin-right: 20px;
+		}
+
+		.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>