udxcms 1.0.1

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

@@ -0,0 +1,391 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author:
+ * @Date: 2021-12-17 01:00:24
+ * @LastEditors: Lewis
+ * @LastEditTime: 2022-01-12 15:30:04
+-->
+<template>
+    <div :class="['header flex-space', false && active && 'headerActive']">
+        <div class="logo" @click="goHome">
+            <img :src="logoSrc + '/' + lang +'/w72.png'" class='imgsvg' v-if="titleType == 'logo'" :style='{height: logoHeight}'/>
+            <span v-else>{{$t('site_common_site_name')}}</span>
+        </div>
+        <div class="navbar">
+            <ul class="flex">
+                <li
+                    v-for="(item, index) in navList"
+                    :key="index"
+                    class="nav-bar-item"
+                    @click="goUrl(item)"
+                >
+                    <span class='menu-text'>
+                        {{ item.bar_name }}
+                        <svg-icon
+                            className="li-img-2"
+                            icon-class="arrow-down-w"
+                            v-if="item.child.length"
+                        ></svg-icon>
+                        <menu-tag :content='item.menu_tag' v-if='item.menu_tag' top='-10px'></menu-tag>
+                    </span>
+                    <SubMenu
+                        v-if="item.child && item.child.length"
+                        :list="item.child"
+                        class="sub-menu"
+                        @goUrl="goUrl"
+                        :isBasic='isBasic'
+                    />
+                </li>
+            </ul>
+        </div>
+        <div class="menu">
+            <span @click='login' v-if='!walletName.length'>{{$t('index_header_menu_wallet')}}</span>
+            <div class="wallet" v-if="walletName.length">
+                <div class="user-account" v-if="!activeUser">
+                    <img :src="walletIcon || require('../../../assets/img/walletconnect.png')" v-if="walletIcon.indexOf('<svg') == -1"/>
+                    <span v-html="walletIcon" v-else></span>
+                    {{ walletAccount || walletName }}
+                    <img :src="require('../../../assets/img/unlock.png')" class="walletLock"/>
+                </div>
+                <div class="user-account" v-if="activeUser">
+                    <img :src="walletIcon || require('../../../assets/img/walletconnect.png')" v-if="walletIcon.indexOf('<svg') == -1" />
+                    <span v-html="walletIcon" v-else></span>
+                    {{ walletAccount || walletName }}
+                    <svg-icon class="li-img-2" icon-class="arrow-down-w"></svg-icon>
+                </div>
+                <div class="wallet-more-box">
+                    <userPanel v-model="isShowUserPanel" top="20" :isClickstatus="false" type="B" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import SubMenu from '../../cmsComponents/paragen/SubMenu.vue'
+import _ from 'lodash';
+import conf from '../../../config/index'
+import { mapState } from "vuex";
+import config from '@/config/index'
+import {unwrapJSONStr} from "@/common_modules/cms-submodule/utils/parse";
+export default {
+    components: {
+        SubMenu
+    },
+    props: {
+        navList: {
+            type: Array,
+            default: function () {
+                return []
+            }
+        },
+        scrollTop: {
+            type: Number,
+            default: 500,
+        },
+        titleType: {
+            type: String,
+            default: config.siteTitle || 'logo'
+        }
+    },
+    created() {
+        let fn = this.init();
+        window.addEventListener("scroll", fn)
+    },
+    data() {
+        return {
+            active: false,
+            walletName: "",
+            activeAccount: "",
+            walletAccount: "",
+            walletActive: false,
+            isShowUserPanel: true,
+            lang: localStorage.getItem("language") || conf.baseLanguage,
+            logoHeight: 0
+        }
+    },
+    computed: {
+        ...mapState("user", ["userInfo", "currency"]),
+        logoSrc() {
+        let path =
+            this.$t("site_common_logo_base_url") +
+            (window.location.host.indexOf(conf.localHostIp) == -1
+            ? window.location.hostname
+            : conf.testSite);
+        return path;
+        },
+        walletIcon() {
+            return this.$store.getters.walletIcon || '';
+        },
+        isBasic() {
+            return this.$store.state.siteConfig.tradeMoel == 'Basic'
+        }
+    },
+    watch: {
+        "$store.state.wallet.wallet": {
+            handler: function (wallet) {
+                this.walletlistenerFunc(wallet)
+            },
+            deep: true,
+        },
+        "$store.state.user.userInfo.uid"(val) {
+            this.initActiveUser()
+            if (val && val.length && typeof val != "undefined") {
+                this.walletName = val;
+                this.activeAccount = this.walletAccount = val.slice(0, 4) + "******" + val.slice(-4, val.length)
+            } else {
+                let syncWallet = this.walletData.getSyncWallet()
+                if (!syncWallet) {
+                    this.activeUser = false
+                    this.walletName = ""
+                    this.walletAccount = this.activeAccount.length ? this.activeAccount : ""
+                }
+            }
+        },
+    },
+    mounted() {
+        this.walletlistenerFunc()
+        this.SetcomponentName()
+    },
+    methods: {
+        init() {
+            return _.throttle(() => {
+                let scrollT = window.scrollY;
+                if (scrollT >= this.scrollTop) {
+                    this.active = true;
+                } else {
+                    this.active = false;
+                }
+            }, 50)
+        },
+        async goHome() {
+            this.$router.push({
+                name: 'home'
+            })
+        },
+        goUrl(item) {
+            if (item.child && item.child.length) return
+            switch (item.bar_name) {
+                default:
+                    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.click_url.indexOf('http') >= 0) {
+                        if (item.bar_name !== 'Faucet') {
+                            window.open(item.click_url, '_blank')
+                        }
+                    } else {
+                        this.$router.push({
+                            path: item.click_url
+                        })
+                    }
+                    break;
+            }
+        },
+        walletlistenerFunc(wallet) {
+            wallet = wallet || this.$store.state.wallet.wallet;
+            let walletName = wallet.address || "";
+            if (walletName && walletName.length) {
+                this.walletAccount = this.activeAccount = this.walletName = walletName.slice(0, 4) + "******" + walletName.slice(-4, walletName.length);
+            } else {
+                this.walletName = "";
+            }
+            this.initActiveUser();
+        },
+        initActiveUser() {
+            let activeUser = (this.userInfo && this.userInfo.uid && this.userInfo.uid.length) || 0;
+            let token = localStorage.getItem("TOKEN");
+            let syncWallet = this.walletData.getSyncWallet();
+            let walletActive =  (syncWallet && Object.keys(syncWallet).length) || false;
+            this.activeUser = activeUser && walletActive && token;
+        },
+        login() {
+            // @ts-nocheck
+            $Vue.$bus.$emit("linkWalletByConnetBtn", () => {});
+        },
+        SetcomponentName() {
+            let indexConfigList = theme_config && theme_config.length && theme_config[0].pageList && theme_config[0].pageList.filter(v => {
+                return v.pageKey == 'common'
+            })
+            let indexConfig = indexConfigList && indexConfigList.length && indexConfigList[0].configList && indexConfigList[0].configList.filter(v => {
+                return v.componentsKey == 'common_conf'
+            })
+            let indexConfig_obj = indexConfig && indexConfig.length && indexConfig[0].config && unwrapJSONStr(indexConfig[0].config) || {}
+            this.logoHeight = indexConfig_obj.logoHeight
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.header {
+    position: absolute;
+    top: 0;
+    height: 65px;
+    width: 100%;
+    padding: 0 32px;
+    color: var(--top-header-color);
+    z-index: 20;
+    background: var(--top-header-bg);
+    max-width: 100%;
+}
+.header.headerActive {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+    // color: var(--top-over-header-color);
+    background: var(--top-over-header-bg);
+    backdrop-filter: saturate(180%) blur(20px);
+    top: -100px;
+    transform: translateY(100px);
+    box-shadow: 0px 2px 2px 0px rgba(193, 193, 193, 0.2);
+    transition: transform 0.3s ease;
+    z-index: 20;
+}
+.logo {
+    font-family: Manrope;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 20px;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    color: #ffffff;
+    height: auto;
+    width: auto;
+    .imgsvg {
+        height: auto;
+        width: 112px;
+    }
+}
+.navbar {
+    display: none;
+    ul li {
+        position: relative;
+        font-family: FontMedium;
+        font-size: 14px;
+        cursor: pointer;
+		.menu-text {
+			display: flex;
+            white-space: nowrap;
+            align-items: center;
+		}
+        .sub-menu {
+            display: none;
+        }
+        &:hover {
+            color: white;
+            .sub-menu {
+                display: block;
+                z-index: 10;
+            }
+        }
+    }
+    ul li:not(:first-child) {
+        margin-left: 36px;
+    }
+}
+.menu {
+    font-family: FontMedium;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    width: auto;
+    text-align: right;
+    cursor: pointer;
+}
+
+.headerActive {
+}
+
+
+
+@media screen and (min-width: 768px) {
+    .navbar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .logo,
+    .menu {
+        z-index: 2;
+    }
+
+    .user-account {
+        // opacity: .8;
+        padding: 6px 10px;
+        border: 1px solid rgba(251, 251, 252);
+        border-radius: 7px;
+        display: flex;
+        align-items: center;
+        // background: rgba(246, 246, 246, 1);
+        border-radius: 20px;
+        color: var(--top-header-color);
+        img, /deep/ svg {
+            width: 24px;
+            height: 24px;
+            margin-right: 8px;
+        }
+        .walletLock {
+            filter: hue-rotate(242deg);
+            margin-left: 0.2em;
+        }
+
+        .li-img-2 {
+            width: 20px;
+            height: 20px;
+            vertical-align: -5px;
+            transition: all 0.5s;
+            color: var(--top-header-color);
+        }
+
+    }
+    .wallet {
+        position: relative;
+        .wallet-more-box {
+            display: none;
+            position: absolute;
+            top: 30px;
+            right: 0;
+            min-width: 100%;
+            min-height: 120px;
+            /deep/ .user-panel {
+                border: 0;
+                box-shadow: 0 0 0 transparent;
+                backdrop-filter: blur(12px);
+                background: #2A2A2E;
+                // box-shadow: 0 0 2px #666666;
+                .user-p-item {
+                    text-align: center;
+                    a, span {
+                        color: rgba(255, 255, 255);
+                        &:hover {
+                            color: var(--primary-color);
+                        }
+                    }
+                }
+            }
+
+        }
+    }
+    .wallet:hover {
+        .wallet-more-box {
+            display: block;
+        }
+        .li-img-2 {
+            transform: rotate(180deg);
+            color: rgba(209, 45, 141, 1);
+        }
+        a {
+            color: rgba(209, 45, 141, 1) !important;
+        }
+    }
+}
+</style>