udxcms 1.0.9 → 1.0.10

package/dist/components/h5Components/Top.vue

@@ -1,648 +0,0 @@
-<!--
- * @Author: Sneed
- * @Date: 2020-12-22 21:38:13
- * @LastEditTime: 2025-08-29 11:14:53
- * @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 "@/common_modules/cms-submodule/utils/parse";
-import themeMixin from "@/common_modules/cms-submodule/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>