udxcms 1.0.10 → 1.0.12

package/dist/components/h5Components/Top.vue

@@ -0,0 +1,648 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-12-22 21:38:13
+ * @LastEditTime: 2025-09-23 18:48:39
+ * @LastEditors: lewis lewis@everylink.ai
+ * @Description:
+-->
+<template>
+    <div v-if="showMobileHeader" :class="['top header-mobile', menuShow && 'header-mobile-more','theme-' + themeMode, type, commonConf.topBannerType]">
+        <div :class="['header', type, commonConf.topBannerType, active && 'active']">
+            <div class='logo-network'>
+                <img :class="['icon-logo', logoPosition]" :src="logoSrc + '/en_US/w60.png'" alt="" @click="toHome" :style="{height: commonConf.mobileLogoHeight ? commonConf.mobileLogoHeight : parseInt(commonConf.logoHeight) / 1.25 + 'px'}" v-if="!chainShow && (!showSmallIcon || routeName === 'home')">
+                <img :class="['icon-logo icon-logo-sm', logoPosition]" :src="logoSrc + '/en_US/s32.png'" alt="" @click="toHome" :style="{height: commonConf.mobileLogoHeight ? commonConf.mobileLogoHeight : parseInt(commonConf.logoHeight) + 'px'}" v-else>
+                <!-- <span v-else class='icon-logo logo'>{{$t('site_common_site_name')}}</span> -->
+                <!-- <div class="message" @click="toNotificat ion">
+                    <svg-icon :class="['icon-message', {'invertClass': routeName == 'home' && isWallet}]" :icon-class="'message'" v-theme="{color: innerIconColor ? innerIconColor : getStyleAttrs('icon_color')}"></svg-icon>
+                    <div class="tip" v-if="count>0"></div>
+                </div> -->
+                <ChainNetH5Work class='chain-network' v-if='!chainShow && chainSelectVisible && !bridgeSite'/>
+                <TradeChainNetWork class='chain-network' :showAllNetwork='true' :symbolConfig='symbolConfig' :isShowLabel='false' v-if='chainShow && chainSelectVisible && !bridgeSite'/>
+            </div>
+            <slot></slot>
+            <div class="right">
+                <div class="lang-currency" v-if='bridgeSite'>
+                    <div class="menu-text">
+                        <img data-role='bridgeRole' @click="isShowCurrency = !isShowCurrency" src="../../assets/component_img/index-bridge/lang.png" alt="">
+                    </div>
+                    <!-- <a-icon type="caret-down" /> -->
+                    <div class="menu-dropdown currency-dropdown">
+                        <Currency
+                            v-model="isShowCurrency"
+                            top="0"
+                            left=""
+                            right="0"
+                            :isClickstatus="false"
+                            :showCurrency='false'
+                            @setLang="isShowCurrency = false"
+                        />
+                    </div>
+                </div>
+                <a-button :class="['wallet-login', 'walletconnect']" @click="login" v-if="!account && chainSelectVisible">
+                    {{ $t("wallet_common_connect_mobile") }}
+                </a-button>
+                <div class='wallet-icon-wrapper' data-bridgeRole='logout' @click="showWalletMenu" v-if="account">
+                    <!-- <img :src="walletIcon || require('../../assets/img/user-wallet.svg')" alt="" v-if="walletIcon.indexOf('<svg') == -1" />
+                    <span v-html="walletIcon" v-else></span> -->
+                    <div v-if="accountIsCustody" class="svg-icon-wrapper">
+                        <SvgIcon
+                                icon-class="user-wallet"
+                                stroke="none"
+                                className="wallet-icon"
+                        />
+                    </div>
+                    <template v-else>
+                        <img data-bridge='logout' :src="walletIcon || require('../../assets/img/walletconnect.png')" alt="" v-if="walletIcon.indexOf('<svg') == -1" />
+                        <span data-bridge='logout' v-html="walletIcon" v-else></span>
+                        <template v-if='bridgeSite'>
+                            <UserMenu v-show='isShowPcMenu' class='user-menu'/>
+                        </template>
+                    </template>
+                </div>
+
+                <div 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')"
+                    />
+                </div>
+                <svg-icon :class="['icon-menu', {'invertClass': routeName == 'home' && isWallet}]" :icon-class="'menu'" @click="openMenu" v-theme="{color: innerIconColor ? innerIconColor : getStyleAttrs('icon_color')}" v-if='!bridgeSite'></svg-icon>
+            </div>
+        </div>
+        <transition name='fade'>
+            <div class='pop-mask' v-if='menuShow'></div>
+        </transition>
+        <transition name='menu'>
+            <Menu v-model="menuShow" :styleConf='styleConf' v-if='menuShow' :menuType='menuType'></Menu>
+        </transition>
+
+
+        <TopMessage />
+    </div>
+
+</template>
+
+<script>
+import _ from 'lodash';
+import conf from '../../config/index'
+import config from '@/config/index'
+import { isInIsWalletApp } from './../../utils'
+import {unwrapJSONStr} from "../../utils/parse";
+import themeMixin from "../../mixins/themeMixin";
+export default {
+    mixins: [themeMixin],
+    name: 'HeaderTop',
+    props: {
+        type: {
+            type: String,
+            default: ""
+        },
+        childPage: {
+            type: Number,
+            default: 1
+        },
+        iconColor: {
+            type: String,
+            default: ''
+        },
+        color: {
+            type: String,
+            default: ''
+        },
+        // active: {
+        //     trype: Boolean,
+        //     default: false
+        // },
+        titleType: {
+            type: String,
+            default: config.siteTitle || 'logo'
+        },
+        logoPosition: {
+            type: String,
+            default: 'left'
+        },
+        showSmallIcon: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            menuShow:false,
+            count: 0,
+            unreadTimer:null,
+            styleConf: {
+            },
+            indexStyleList: [],
+            routeName: this.$route.name,
+            commonConf: {},
+            isWallet: false,
+            lang: localStorage.getItem('language') || conf.baseLanguage,
+            // isInIsWalletApp: isInIsWalletApp(), // 在 iswallet app 中。
+            chainShowArr: ['trade-home', 'trade-spot-swap', 'trade-mobile-orderbook'],
+            chainShow: false,
+            marketShow: false,
+            scrollTop: 100,
+            active: false,
+            symbolConfig: {},
+            menuType: 'main', // main | wallet | portfolio
+            isShowCurrency: false,
+            isShowPcMenu: false,
+            closeFn: null
+        }
+    },
+    computed: {
+        innerColor() {
+            return this.color
+        },
+        innerIconColor() {
+            this.$forceUpdate()
+            return this.iconColor
+        },
+        logoSrc() {
+            let path = config.sitePath + 'site/logo/' + window.location.hostname
+            return path
+        },
+        showMobileHeader() {
+            try {
+                if (location.hostname.endsWith('iswallet.me') && isInIsWalletApp()) {
+                    return false;
+                }
+            } catch (error) {
+
+            }
+            return true;
+        },
+        chainId() {
+            return this.$store.state.trade && this.$store.state.trade.tradeChainId;
+        },
+        account() {
+            return this.$store.getters.account || '';
+        },
+        walletIcon() {
+            return this.$store.getters.walletIcon || window.localStorage.getItem("selectedIcon") || '';
+        },
+        walletTypes() {
+            return this.$store.state.siteConfig.walletTypes;
+        },
+        accountIsCustody() {
+            return this.$store.getters.accountIsCustody;
+        },
+
+        chainSelectVisible() {
+            // return true
+            // debugger
+            if (this.account) {
+                // if (!this.accountIsCustody) {
+                return true && !this.hideWalletBtn;
+                // }
+            } else {
+                if (this.walletTypes.includes("UMW")) {
+                    return true && !this.hideWalletBtn;
+                }
+            }
+            return false;
+        },
+        hideWalletBtn() {
+            return this.$route.name == 'login'
+        },
+        bridgeSite() {
+            return this.$store.state.bridgeSite || ''
+        }
+    },
+    watch: {
+        $route: {
+            handler(val) {
+                let routeName = val.name
+                this.chainShow = this.chainShowArr.indexOf(routeName) != -1
+                if (this.chainShow) {
+                    this.initSymbolConfig()
+                }
+            },
+            immediate: true
+        },
+        account: function() {
+            // clearInterval(this.unreadTimer)
+            // this.initSymbolConfig()
+        },
+        '$store.state.trade.marketSymbolList'() {
+            this.initSymbolConfig()
+        },
+        '$store.state.trade.tradeMode'() {
+            this.initSymbolConfig()
+        },
+        chainId(val) {
+            if (val) {
+                this.initSymbolConfig()
+            }
+        },
+        menuShow(val) {
+            this.$store.commit('setMenuShow', val)
+        }
+    },
+    created() {
+        this.init();
+        let fn = this.scrollInit();
+        window.addEventListener("scroll", fn);
+    },
+    mounted() {
+        let routeName = this.$route.name
+        this.chainShow = this.chainShowArr.indexOf(routeName) != -1
+        if (this.chainShow) {
+            let themeMode = localStorage.getItem("themeMode")
+            if (themeMode) {
+                this.$store.commit("setThemeMode", themeMode);
+            }
+            this.initSymbolConfig()
+        }
+        this.$nextTick(() => {
+            $Vue.$bus.$on('menu-h5', type => {
+                console.log('menu-h5-type:', type)
+                this.menuType = type
+                this.menuShow = true
+            })
+        })
+        this.initBodyClickFunc()
+    },
+    methods: {
+        init() {
+            this.dealTheme()
+        },
+        scrollInit() {
+            return _.throttle(() => {
+                let scrollT = window.scrollY;
+                if (scrollT >= this.scrollTop) {
+                    this.active = true;
+                } else {
+                    this.active = false;
+                }
+            }, 50);
+        },
+        getHoverAttr(type) {
+            let hover = this.styleConf && this.styleConf.hover || {}
+            return hover[type] || ''
+        },
+        getStyleAttrs(type) {
+            return this.styleConf && this.styleConf[type]
+        },
+        getStyleSetAttrs(arr) {
+            let temp = {}
+            arr.map(v => {
+                temp[v] = this.getStyleAttrs(v)
+            })
+            return temp
+        },
+        // getUnreadCount() {
+        //     getUnreadCount().then(res=> {
+        //         this.count = res.data;
+        //     })
+        // },
+        openMenu() {
+            this.menuType = 'main'
+            this.menuShow = true;
+        },
+        toNotification() {
+            this.$router.push({
+                name:'notification'
+            })
+        },
+        toHome() {
+            this.$router.push({
+                path: '/'
+            })
+        },
+        dealTheme() {
+            let pageName = this.$route.name
+            let header_conf, styleConf
+            theme_config.map(v => {
+                v.pageList.map(component => {
+                    component.configList.map(config => {
+                        // console.log('config:', config);
+                        if (component.pageKey == 'common' && config.componentsKey == 'common_conf') {
+                            this.commonConf = unwrapJSONStr(config.config) || {}
+                        }
+                        if (component.pageKey == 'common' && config.componentsKey?.startsWith('header')) {
+                            header_conf = unwrapJSONStr(config.config) || {}
+                        }
+                        if (component.pageKey == 'home' && config.componentsKey?.startsWith('header') && !styleConf) {
+                            styleConf = unwrapJSONStr(config.config)
+                        }
+                        if (component.pageKey == 'home' && config.componentsKey?.startsWith('common_conf')) {
+                            let headerStyleSet = unwrapJSONStr(config.config).headerStyleSet || []
+                            styleConf = headerStyleSet[0]
+                        }
+                    })
+                })
+            })
+            this.styleConf = pageName == 'home' ? styleConf : header_conf
+            this.isWallet = this.commonConf.isInvert == 1
+        },
+        async initSymbolConfig() {
+            let routeName = this.$route.name
+            let chainShow = this.chainShowArr.indexOf(routeName) != -1
+            if (chainShow) {
+                let symbol = this.$route.query.symbol
+                let queryChainId = this.$route.query.chainId
+                if (!this.chainId && queryChainId) this.$store.commit('trade/updateTradeChainId', queryChainId)
+                let optChainId = this.chainId || queryChainId
+                if (optChainId) {
+                    // await this.$store.dispatch('trade/getMarketSymbolList', {chainId: optChainId})
+                    this.symbolConfig = this.$store.getters['trade/marketSymbolDetail'](symbol, optChainId)
+                    this.$set(this, 'symbolConfig', this.symbolConfig)
+                }
+            }
+        },
+        showWalletMenu() {
+            if (this.bridgeSite) {
+                this.isShowPcMenu = !this.isShowPcMenu
+            } else {
+                this.menuType = 'wallet'
+                this.menuShow = true
+            }
+        },
+        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");
+            }
+        },
+        initBodyClickFunc() {
+            let clickCount = 0
+            this.closeFn = (e)=> {
+                const dataset = (e.target.dataset?.bridge  || e.target.dataset?.role) ? e.target.dataset : (e.target.parentNode?.dataset?.bridge ? e.target.parentNode?.dataset : e.target.parentNode?.parentNode?.dataset)
+                let { bridge, role } = dataset || {}
+                if (bridge != 'logout') {
+                    this.isShowPcMenu = false
+                }
+                if (role != 'bridgeRole') {
+                    this.isShowCurrency = false
+                }
+            }
+            this.$nextTick(()=>{
+                document.addEventListener('click', this.closeFn)
+            })
+        }
+    },
+    beforeDestroy() {
+        clearInterval(this.unreadTimer);
+        this.isShowPcMenu = false
+        document.removeEventListener('click', this.closeFn)
+    }
+}
+</script>
+
+
+<style lang="less">
+.dex-page-home{
+    .header-mobile{
+        .header{
+            background-color: transparent;
+            &.active{
+                backdrop-filter: saturate(180%) blur(20px);
+            }
+        }
+    }
+}
+</style>
+
+<style lang="less" scoped>
+// morse logo处理
+.header-mobile.dex{
+    &.theme-dark{
+        .header {
+            img {
+                // filter: invert(1);
+            }
+        }
+    }
+}
+
+// dex theme-light
+.page-trade-home{
+    .header-mobile.dex{
+        .header{
+            background-color: var(--header-bg-color);
+            &.active{
+                backdrop-filter: saturate(180%) blur(20px);
+            }
+        }
+    }
+}
+// .event-entry, .wallet-entry, .marketplace-entry {
+.event-entry {
+    .header-mobile {
+        .header {
+            border-bottom: 1px solid var(--border-color-base);
+            // background-color: #ffffff;
+            &.active{
+                background-color: rgba(255, 255, 255, 0.9);
+                .right {
+                    color: var(--trade-bg);
+                }
+            }
+        }
+    }
+}
+
+.header-mobile{
+    height: 64px;
+    position: relative;
+    z-index: 1000;
+    &.header-mobile-more {
+        z-index: 1000;
+    }
+    .header{
+        background-color: var(--header-bg-color);
+    }
+}
+
+.header {
+    top: 0;
+    left: 0;
+    right: 0;
+    // overflow: hidden;
+    position: fixed;
+    z-index: 99;
+    height: 64px;
+    padding: 18px 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // opacity: .95;
+    .logo-network {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .chain-network {
+            margin-left: 10px;
+        }
+    }
+    .icon-logo {
+        // width: 104px;
+        // position: absolute;
+        z-index: 2;
+        // left: 20px;
+        height: 16px;
+        // &.center {
+        //     left: 50%;
+        //     transform: translateX(-50%);
+        // }
+    }
+    .icon-logo-sm {
+        height: 30px !important;
+        border-radius: 50%;
+        &.center {
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+    .logo {
+        color: white;
+        font-family: Manrope;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 20px;
+        letter-spacing: 3px;
+        text-transform: uppercase;
+        color: #ffffff;
+    }
+    .message {
+        margin-left: auto;
+        width: 20px;
+        height: 20px;
+        position: relative;
+        .tip {
+            position: absolute;
+            top: 0;
+            right: 0;
+            background: var(--primary-bg-color);
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            border:2px solid var(--white);
+        }
+    }
+    .icon-message,.icon-menu {
+        width: 20px;
+        height: 20px;
+        // color:goldenrod;
+        // color: white;
+    }
+    // .icon-menu {
+    //     margin-left: auto;
+    // }
+    .message ~ .icon-menu {
+        margin-left: 22px;
+    }
+
+    .right{
+        display: flex;
+        align-items: center;
+        color: var(--text-color);
+        .lang-currency {
+            position: relative;
+        }
+        /deep/ .lang-currency .currency-dropdown .current-panel{
+            top: auto;
+            right: auto;
+            left: 50%;
+            transform: translateX(-50%) translateY(40px);
+        }
+        .lang-currency .menu-text img {
+            width: 30px;
+            height: 30px;
+            margin-right: 10px;
+        }
+        .wallet-login {
+            height: 28px;
+            background: var(--login-color);
+            font-size: 14px;
+            color: white;
+            margin-right: 10px;
+        }
+        .wallet-icon-wrapper {
+            margin-right: 10px;
+            position: relative;
+            img {
+                width: 28px;
+                height: 28px;
+            }
+            .svg-icon-wrapper{
+                width: 28px;
+                height: 28px;
+                border-radius: 50%;
+                padding: 6px;
+                font-size: 0px;
+                background-color: var(--primary-color);
+                .wallet-icon{
+                    color: #fff;
+                }
+            }
+            .user-menu {
+                position: absolute;
+                right: 0;
+                top: calc(100% + 10px);
+            }
+        }
+        .theme-icons{
+            margin-right: 10px;
+            display: flex;
+            align-items: center;
+        }
+        .theme-icon {
+            // 24px
+            width: 20px;
+            height: 20px;
+            // padding: 10px;
+        }
+    }
+}
+
+.pop-mask {
+    position: fixed;
+    z-index: 2;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: var(--pop-mask-background-color);
+}
+.fade-enter-active, .fade-leave-active {
+    transition: opacity .5s;
+}
+.fade-leave-active {
+    transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to {
+    opacity: 0;
+}
+.fade-leave-active {
+    transition-delay: .5s;
+}
+
+.menu-enter-active, .menu-leave-active {
+    transition: transform .5s;
+    transition-delay: 0s;
+}
+.menu-enter, .menu-leave-to {
+    transform: translateX(100%);
+}
+.invertClass {
+    filter: invert(1);
+}
+</style>