udxcms 1.0.8 → 1.0.10

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

@@ -1,590 +0,0 @@
-<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>