udxcms 1.0.8 → 1.0.10

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

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