udxcms 1.0.1

package/dist/components/businessComponents/TopMessage.vue

@@ -0,0 +1,79 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: 
+ * @Date: 2022-08-24 00:01:40
+ * @LastEditors: Lewis
+ * @LastEditTime: 2022-08-24 00:44:57
+-->
+<template>
+    <div class='top-message' v-if='updateVertionIng'>
+        <img src="../../assets/img/tip.png" alt="" />
+        <span>{{$store.state.common && $store.state.common.updateText}}</span>
+        <svg-icon class='close-icon' icon-class='close-x' @click='closeFunc'></svg-icon>    
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'top-message',
+        props: {
+            show: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data(){
+            return {
+
+            }
+        },
+        computed: {
+            updateVertionIng() {
+                return this.$store.state.common && this.$store.state.common.updateVertionStatus
+                // return true
+            }
+        },
+        methods: {
+            closeFunc() {
+                this.$store.commit('setUpdateVertionStatus', false)
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .top-message {
+        position: absolute;
+        width: 100%;
+        z-index: 500;
+        top: 100%;
+        text-align: center;
+        padding: 8px 0;
+        background: #FEF6D8;
+        img {
+            width: 20px;
+            height: 20px;
+        }
+        span {
+            margin-left: 4px;
+            font-size: 14px;
+            color: #474D57;
+            font-family: Font;
+        }
+        &.active {
+            top: -60px !important;
+            transform: translateY(120px);
+            position: fixed;
+            transition: transform 0.3s ease;
+            z-index: 200;
+        }
+        .close-icon {
+            float: right;
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+            margin-right: 20px;
+        }
+    }
+</style>

package/dist/components/businessComponents/TradeChainNetWork.vue

@@ -0,0 +1,137 @@
+<template>
+    <div class='trade-chain'>
+        <NetworkSelect :mode="themeMode" :networks="showNetWorklist" :defaultChainId="chainId * 1" @change="changeChain" :isShowLabel='isShowLabel' />
+    </div>
+</template>
+
+<script>
+    import { isPhone } from '../../utils/index'
+    export default {
+        name: 'trade-chain-network',
+        props: {
+            // 交易对配置
+            symbolConfig: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            },
+            isShowLabel: {
+                type: Boolean,
+                default: false
+            },
+            showAllNetwork: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            themeMode() {
+                return this.$store.getters.themeOfRoute(this.$route.name) == 'dark' ? 'black' : '';
+            },
+            walletNetworks() {
+                return this.$store.getters.walletNetworks;
+            },
+            supportChains() {
+                return this.symbolConfig.support_chains || ''
+            },
+            showNetWorklist() {
+                let supportChains = this.supportChains
+                let showAllNetwork = this.showAllNetwork
+                return showAllNetwork ? this.walletNetworks : this.walletNetworks.filter(v => !supportChains || supportChains.includes(v.chainId))
+            },
+            symbol() {
+                return this.symbolConfig.display_name || ''
+            },
+            chainId() {
+                return this.$store.state.trade.tradeChainId
+            },
+            originChainId() {
+                return this.$store.state.chainId // 全局id
+            }
+        },
+        created() {
+            // 设置默认网络
+            // this.setDefaultTrade()
+        },
+        watch: {
+            // '$store.state.trade.tradeChainId'(val) {
+            //     this.chainId = val * 1
+            // },
+            symbol(val) {
+                // this.symbolChange()
+            },
+            supportChains(val) {
+                if (val == this.chainId) {
+                    // this.setDefaultTrade()
+                }
+            },
+            originChainId(val, oldVal) {
+                if (val != oldVal) {
+                    this.changeChain(val)
+                }
+            }
+        },
+        data() {
+            return {
+                // chainId: this.$store.state.trade.tradeChainId
+            }
+        },
+        methods: {
+            // 设置默认的chainId
+            setDefaultTrade() {
+                let $store = this.$store
+                let { tradeMode } = this.$route.params;
+                let siteConfig = $store.state.siteConfig
+                let isAggregated = siteConfig.supportMultiChain && $store.state.trade.isMultiChains;
+                let chainId = this.chainId + '' || $store.state.chainId + ''
+                tradeMode = tradeMode || $store.state.trade.tradeMode
+                // if (isAggregated) {
+                //     $store.commit('trade/updateTradeChainId', chainId)
+                // } else {
+                //     let chainIdConfig = (!tradeMode || tradeMode == 'spot') ? `market_api` : `market_${tradeMode}_api`
+                //     chainIdConfig = chainIdConfig.replace(/\_(\w)/g, function(a, b){
+                //         return b.toUpperCase()
+                //     })
+                //     if (Object.keys(siteConfig[chainIdConfig]).includes(chainId)) {
+                //         $store.commit('trade/updateTradeChainId', chainId)
+                //     } else {
+                //         let supportChainId = Object.keys(siteConfig[chainIdConfig]).find(v => v != '0')
+                //         $store.commit('trade/updateTradeChainId', supportChainId)
+                //     }
+                // }
+                let chainIdConfig = (!tradeMode || tradeMode == 'spot') ? `market_api` : `market_${tradeMode}_api`
+                chainIdConfig = chainIdConfig.replace(/\_(\w)/g, function(a, b){
+                    return b.toUpperCase()
+                })
+                if (Object.keys(siteConfig[chainIdConfig]).includes(chainId)) {
+                    $store.commit('trade/updateTradeChainId', chainId)
+                } else {
+                    // if (isAggregated) {
+                    //     $store.commit('trade/updateTradeChainId', chainId)
+                    // } else {
+                        let supportChainId = Object.keys(siteConfig[chainIdConfig]).find(v => v != '0')
+                        $store.commit('trade/updateTradeChainId', supportChainId)
+                    // }
+                }
+            },
+            changeChain(chainId) {
+                this.$store.commit('trade/updateTradeChainId', chainId)
+                if (isPhone()) {
+                    this.$store.commit('setChainId', chainId)
+                }
+            },
+            symbolChange() {
+                let chainId = this.$store.state.chainId;
+                if (!this.supportChains) this.chainId = chainId
+                else {
+                    this.chainId = this.supportChains.includes(chainId) ? chainId : this.supportChains.split(',')[0]
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+
+</style>

package/dist/components/businessComponents/userPanel.vue

@@ -0,0 +1,358 @@
+<!--
+ * @Author:
+ * @Date: 2020-11-17 10:20:07
+ * @LastEditTime: 2022-08-12 02:31:04
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+    <div :class="[type == 'C' ? 'wallet-panel': 'user-panel']" :style="{top: top + 'px', left: left + 'px', position: active ? 'fixed': 'absolute'}" v-if='value'>
+        <div v-if="(type == 'B' || type == 'C') && uid && (walletType == 'L1' && isEthWallet || wallet) && token && isWalletConnect">
+            <div class='user-p-item'>
+                <router-link to='/wallet'>{{$t("wallet_menu_overview")}}</router-link>
+            </div>
+            <div v-if="supportLayer2" class='user-p-item'>
+                <router-link to='/wallet/deposit'>{{$t("wallet_menu_deposit")}}</router-link>
+            </div>
+            <div v-if="supportLayer2" class='user-p-item'>
+                <router-link to='/wallet/withdraw/index'>{{$t("wallet_menu_withdraw")}}</router-link>
+            </div>
+            <!-- 托管钱包 -->
+            <div v-if="accountIsCustody" class='user-p-item'>
+                <router-link to='/custody/send'>{{$t("wallet_common_send_l1")}}</router-link>
+            </div>
+            <div v-if="supportLayer2" class='user-p-item'>
+                <router-link to='/wallet/send'>{{$t("wallet_common_send_l2")}}</router-link>
+            </div>
+            <div class='user-p-item' v-if='supportBridge'>
+                <router-link to='/wallet/bridge'>{{$t('wallet_menu_bridge')}}</router-link>
+            </div>
+            <div class='user-p-item' v-if='supportNFT'>
+                <router-link to='/wallet?tabId=nft'>{{$t('wallet_menu_nft')}}</router-link>
+            </div>
+            <div class='user-p-item'>
+                <router-link to='/wallet/security'>{{$t('wallet_common_security')}}</router-link>
+            </div>
+            <div class='user-p-item'>
+                <router-link to='/wallet/transaction-history'>{{$t("wallet_menu_transaction")}}</router-link>
+            </div>
+        </div>
+        <div v-if="type == '2mr' && uid && (walletType == 'L1' || wallet) && token">
+            <template v-if='isWalletConnect && isEthWallet'>
+                <div class='user-p-item'>
+                    <router-link :to="{name: 'wallet-overview', params: {tabId: 'token'}}">{{$t("wallet_menu_overview")}}</router-link>
+                </div>
+                <div class='user-p-item'>
+                    <router-link to='/your-tickets'>{{$t('event_menu_your_tickets')}}</router-link>
+                </div>
+                <div class='user-p-item'>
+                    <router-link :to="{name: 'wallet-overview', params: {tabId: 'nft'}}">{{$t('event_menu_your_nft')}}</router-link>
+                </div>
+                <div class='user-p-item'>
+                    <router-link to='/wallet/transaction-history'>{{$t("wallet_menu_transaction")}}</router-link>
+                </div>
+                <div class='user-p-item'>
+                    <router-link to='/user/profile'>{{$t('user_menu_user_profile')}}</router-link>
+                </div>
+            </template>
+            <template v-if='!isWalletConnect'>
+                <div class='user-p-item'>
+                    <router-link :to="{name: 'wallet-overview', params: {tabId: 'token'}}">{{$t("wallet_menu_overview")}}</router-link>
+                </div>
+                <div class='user-p-item'>
+                    <router-link to='/custody/receive'>Receive</router-link>
+                </div>
+                <div class='user-p-item'>
+                    <router-link to='/custody/send'>{{$t("wallet_common_send")}}</router-link>
+                </div>
+                <div class='user-p-item'>
+                    <router-link to='/your-tickets'>{{$t('event_menu_your_tickets')}}</router-link>
+                </div>
+                <div class='user-p-item'>
+                    <router-link :to="{name: 'wallet-overview', params: {tabId: 'nft'}}">{{$t('event_menu_your_nft')}}</router-link>
+                </div>
+                <div class='user-p-item'>
+                    <router-link to='/wallet/transaction-history'>{{$t("wallet_menu_transaction")}}</router-link>
+                </div>
+                <div class='user-p-item'>
+                    <router-link to='/user/security'>{{$t('index_header_menu_user_account_security')}}</router-link>
+                </div>
+                <div class='user-p-item'>
+                    <router-link to='/user/profile'>{{$t('user_menu_user_profile')}}</router-link>
+                </div>
+            </template>
+        </div>
+        <div v-if="uid && token && !isWalletConnect && type == 'B'">
+            <div class='user-p-item'>
+                <router-link to='/user/security'>{{$t("index_header_menu_user_account_security")}}</router-link>
+            </div>
+            <div class='user-p-item'>
+                <router-link to='/marketing'>{{$t("index_header_menu_user_referral_reward")}}</router-link>
+            </div>
+        </div>
+        <div v-if="(!(walletType == 'L1' && isEthWallet || wallet) || !token || !uid) && isWalletConnect  && l1Login">
+            <div class='user-p-item user-p-unlock' @click='connectWallet'>
+                <span>{{$t("wallet_menu_unlock_account")}}</span>
+            </div>
+        </div>
+        <div class='user-p-item user-p-out' @click='logOutFunc'>
+            {{$t('wallet_menu_log_out')}}
+        </div>
+    </div>
+</template>
+
+<script>
+    import { logOut } from '../../api/common'
+    import { mapState } from 'vuex'
+    import { isUserCenter, emitEvents, onEvents} from '../../utils/index'
+    import conf from '../../config/index'
+    let closeFn
+    export default {
+        name: "userPanel",
+        props: {
+            top: {
+                type: String,
+                default: '0'
+            },
+            right: {
+                type: String | Number,
+                default: '0'
+            },
+            left: {
+                type: String | Number,
+                default: '0'
+            },
+            isClickstatus: {
+                type: Boolean,
+                default: true
+            },
+            value: {
+                type:Boolean,
+                default: false
+            },
+            active: {
+                type:Boolean,
+                default: false
+            },
+            type: {
+                type: String,
+                default: 'B'
+            }
+        },
+        computed: {
+            ...mapState('user', ['userInfo']),
+            accountIsCustody() {
+                return this.$store.getters.accountIsCustody;
+            },
+            userCenter() {
+                return isUserCenter()
+            },
+            isWalletConnect() {
+                return this.$store.state.be_bind_wallet_connect
+            },
+            uid() {
+                return this.userInfo && this.userInfo.uid
+            },
+            supportLayer2() {
+                return this.$store.getters.supportLayer2;
+            },
+            supportBridge() {
+                return this.$store.getters.supportBridge;
+            },
+            supportNFT() {
+                return this.$store.getters.supportNFT;
+            },
+            isEthWallet() {
+                let ethWallet = this.$store.state.wallet.ethWallet || {}
+                return Object.keys(ethWallet).length > 0
+            },
+            walletType() {
+                return this.$store.state.siteConfig.walletType
+            },
+            l1Login() {
+                return this.$store.state.siteConfig.l1Login
+            }
+        },
+        data() {
+            return {
+                wallet: this.walletData.getSyncWallet() && 1,
+                token: localStorage.getItem('TOKEN'),
+                walletL1Menu: []
+            }
+        },
+        mounted() {
+            this.getWalletMenu()
+            this.$nextTick(() => {
+                this.judgWallet()
+                onEvents('refresh', events => {
+                    console.log("---userPanel events:", events);
+                    if (events.includes('userPenal')) {
+                        this.judgWallet()
+                    }
+                })
+                // $Vue.$bus.$on("refresh", (events) => {
+                //     this.judgWallet();
+                // });
+            })
+        },
+        watch: {
+            type(val) {
+                if (val == 'C') {
+                    this.getWalletMenu()
+                }
+            },
+            value: function(val,oldValue) {
+                if (!val) {
+                    document.removeEventListener('click',closeFn)
+                }
+                let clickCount = 0
+                closeFn = (e)=>{
+                    if(!this.$el.contains(e.target) && (e.target.id !== 'userPannel') || (e.target.id === 'userPannel' && clickCount % 2)) {
+                        this.closeCallBack()
+                    }
+                    clickCount++
+                }
+                this.$nextTick(()=>{
+                    if(val) {
+                        document.addEventListener('click',closeFn)
+                    }else {
+                        document.removeEventListener('click',closeFn)
+                    }
+                })
+            }
+        },
+        methods: {
+            getWalletMenu() {
+                if (this.type !== 'C') return
+                console.log('window.wallet_config', window.wallet_config)
+                this.walletL1Menu = window.wallet_config.walletMenu || []
+            },
+            connectWallet() {
+                emitEvents('linkLogin', {
+                    type: 'unlock',
+                    fn: () => {
+                        this.loginBack()
+                    }
+                })
+            },
+            loginBack() {
+                let name = this.$route.name
+                let backRouteName = this.$store.state.cmsstore.backRouteName
+                if (backRouteName && name == 'login_wallet') {
+                    this.$store.commit('setBackRouteName', '')
+                    this.$router.push({
+                        name: backRouteName
+                    })
+                } else {
+                    // this.$router.push({
+                    //     name: 'home'
+                    // })
+                }
+            },
+            logOutFunc() {
+                this.closeCallBack()
+                let message = this.$t("user_menu_log_out_text")
+                this.$Powx.toast.confirm(message, 'logOut', this)
+            },
+            logOut(val) {
+                if (val) {
+                    this.closeCallBack()
+                    this.$Powx.toast.hide()
+                    logOut().catch(e => e).finally(final => {
+                        this.$store.commit('user/logout')
+                        this.walletData.set({
+                            syncWallet: undefined,
+                            syncProvider: undefined,
+                            accountState: undefined
+                        })
+                        if (!conf.notNeedLoginRoute.includes(this.$route.name)) {
+                            this.$router.push({
+                                name: 'home'
+                            })
+                        }
+                    })
+                }
+            },
+            closeCallBack() {
+                if (this.isClickstatus) this.$emit('input', false)
+            },
+            judgWallet() {
+                console.log('judgWallet');
+                this.wallet = this.walletData.getSyncWallet() && 1
+                this.token = localStorage.getItem('TOKEN')
+            }
+        },
+        beforeDestroy() {
+            document.removeEventListener('click',closeFn)
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .user-panel {
+        position: absolute;
+        top: 0;
+        // right: 0;
+        min-width: 180px;
+        left: 0;
+        box-sizing: border-box;
+        background: var(--popup-bg);
+        z-index: 999;
+        border-radius: var(--border-radius-base);
+        // border: 1px solid var(--border-color-base);
+        box-shadow: var(--box-shadow-base);
+        // transform: translateX(-12px);
+        overflow: hidden;
+    }
+
+    .wallet-panel {
+        position: absolute;
+        top: 0;
+        right: 0;
+        min-width: 200px;
+        box-sizing: border-box;
+        background: white;
+        z-index: 999;
+        border-radius: 6px;
+        border: 1px solid var(--border-color-base);
+        box-shadow:  0px -1px 0px 0px var(--border-color-base) inset, 0px 1px 0px 0px var(--border-color-base) inset;
+        overflow: hidden;
+    }
+
+    .user-p-item {
+        height: 48px;
+        line-height: 48px;
+        font-size: 16px;
+        // cursor: pointer;
+        display: flex;
+        align-items: center;
+        // justify-content: center;
+        a {
+            display: block;
+            flex: auto;
+            color: var(--text-color);
+            padding:0 20px;
+            // color: var(--text-color);
+            cursor: pointer;
+            white-space: nowrap;
+        }
+    }
+    .user-p-item:hover{
+        background-color: var(--select-item-bg);
+        a {
+            color: var(--link-color);
+        }
+    }
+    .user-p-unlock{
+        padding:0 20px;
+    }
+    .user-p-out {
+        padding:0 20px;
+        text-align: center;
+        color: var(--error-color);
+        border-top: 1px solid var(--border-color-base);
+        &:hover {
+            color: var(--error-color);
+        }
+    }
+</style>