udxcms 1.0.1

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

@@ -0,0 +1,590 @@
+<template>
+	<div class="header-wrapper" :class="['theme-' + themeMode]">
+		<div class="header-inner" :class="{ 'header-fixed': headerFixed }">
+			<div class="header-left">
+				<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"
+							/>
+						</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>
+					<NetworkSelect
+						:networks="walletNetworks"
+						:defaultChainId="chainId"
+                        :isShowLabel='!account'
+						@change="changeChain"
+					/>
+				</li>
+				<li v-if="!account">
+                    <img src="../../../assets/img/user-login.png" alt="" @click="login"/>
+				</li>
+
+				<!-- 已登录 - 订单 -->
+				<li v-if="false && account" class="my-orders">
+					<span class="menu-text">{{
+						$t("index_header_menu_order")
+					}}</span>
+					<!-- sub menu -->
+					<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="account">
+
+                    <img v-if="userAvatar" :src="userAvatar" class="avatar" alt="" />
+                    <img v-else  src="../../../assets/img/user-logined.png" alt="" />
+					<!-- 已经登录正常状态 -->
+					<!-- <div v-if="isActive" class="wallet-connected">
+						<img :src="chainIcon" alt="" />
+						<span class="user-account">{{
+							formatAccount(account)
+						}}</span>
+						<a-icon type="caret-down" />
+					</div> -->
+					<!-- 锁定状态 -->
+					<!-- <div v-else class="wallet-connected wallet-locked">
+						<img :src="chainIcon" alt="" />
+						<span class="user-account">{{
+							formatAccount(account)
+						}}</span>
+						<a-icon type="lock" class="icon-locked" />
+					</div> -->
+
+					<!-- wallet 菜单 -->
+					<div class="menu-dropdown currency-user">
+						<userPanel
+							v-model="walletMenuVisible"
+							top="0"
+							:isClickstatus="fale"
+							type="2mr"
+						/>
+					</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"
+                            defaultCurrency="SGD"
+							@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
+        }
+	},
+	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,
+            scrollDes: 400,
+			walletTypes: [],
+            fale: 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 + "/" + this.language + "/w72.png";
+		},
+        userInfo() {
+            return this.$store.state.user.userInfo || {}
+        },
+        userAvatar() {
+            return this.userInfo.profile ? this.userInfo.profile.avatar : ''
+        },
+		// user
+		account() {
+			return this.$store.state.wallet.wallet.address || this.userInfo.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;
+		},
+
+	},
+	watch: {
+		account() {
+			this.checkAccount();
+		},
+	},
+	created() {
+		window.addEventListener("scroll", this.scrollFn());
+		this.$store.dispatch('fetchNetworkList');
+	},
+	mounted() {
+		// refresh event
+		this.$nextTick(() => {
+			$Vue.$bus.$on("refresh", (events) => {
+				events.map((type) => {
+					switch (type) {
+						case "initActiveUser":
+							this.checkAccount();
+							break;
+						default:
+							break;
+					}
+				});
+			});
+		});
+	},
+	methods: {
+		scrollFn() {
+            let scrollDes = this.scrollDes || this.scrollTop
+			return _.throttle(() => {
+				let scrollT = window.scrollY;
+				if (scrollT >= scrollDes) {
+					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 (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() {
+      		this.walletTypes = window.walletTypes;
+			// 只支持托管钱包
+        	if (this.walletTypes.length === 1 && this.walletTypes[0] === "MW") {
+				this.$router.push({
+					path: '/user/login'
+				})
+			} else {
+				$Vue.$bus.$emit("linkWalletByConnetBtn");
+			}
+		},
+		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>
+.theme-light {
+	// 浅色风格下logo处理
+	.header-wrapper {
+		.logo-wrapper {
+			.logo {
+				// filter: invert(1);
+			}
+			.origin-img {
+				display: block;
+				width: 36px;
+			}
+		}
+	}
+}
+
+.header-wrapper {
+	--height: 36px;
+	height: 72px;
+
+	.header-inner {
+		font-size: 14px;
+		background-color: var(--header-bg-color);
+		height: 72px;
+		padding: 0 4%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+        // border-bottom: 1px solid #F5F5F5;
+		&.header-fixed {
+			position: fixed;
+			z-index: 1000;
+			left: 0;
+			right: 0;
+			transition: transform 0.3s ease;
+			top: -100px;
+			transform: translateY(100px);
+			background-color: rgba(255, 255, 255, .4);
+			box-shadow: var(--box-shadow-base);
+			&::before {
+				content: "";
+				display: block;
+				position: absolute;
+				top: 0;
+				right: 0;
+				bottom: 0;
+				left: 0;
+				// background: rgba(0, 0, 0, 0.2);
+				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 {
+			white-space: nowrap;
+            font-family: FontMedium;
+		}
+		&:hover {
+			.menu-text {
+				color: var(--link-color);
+			}
+			.menu-dropdown {
+				display: block;
+			}
+		}
+		.anticon {
+			font-size: 12px;
+			margin-left: 4px;
+		}
+	}
+
+	.menu-wrapper {
+		margin-left: 8%;
+		display: flex;
+		align-items: center;
+		gap: 26px;
+	}
+	.menu-dropdown {
+		display: none;
+		position: absolute;
+		top: var(--height);
+		left: 0;
+		min-width: 160px;
+		z-index: 800;
+        &.currency-user {
+            padding-top: 20px;
+        }
+        .user-panel {
+            min-width: 200px;
+            transform: translateX(-50% + 18px);
+            margin-top: 10px;
+        }
+		&.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: 36px;
+		margin-left: 20px;
+
+		.my-orders {
+			margin-right: 20px;
+		}
+
+		.wallet-connect, img {
+			height: var(--height);
+			font-size: 14px;
+            cursor: pointer;
+            width: var(--height);
+			&:hover {
+				color: var(--primary-color);
+				background-color: var(--white);
+			}
+		}
+
+		.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;
+		}
+		.avatar {
+			width: 36px;
+			height: 36px;
+			border-radius: 50%;
+			overflow: hidden;
+		}
+	}
+
+	// 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: 1500px) {
+	.header-wrapper {
+		.menu-wrapper {
+			margin-left: 8%;
+		}
+	}
+}
+</style>