udxcms 1.0.10 → 1.0.11

package/dist/components/h5Components/Menu.vue

@@ -0,0 +1,449 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-12-11 17:24:07
+ * @LastEditTime: 2022-03-28 22:15:46
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+    <div class="menu theme-light">
+        <div class="mask" @click="close"></div>
+        <div class="menu-content">
+            <div class="close">
+                <svg-icon class="icon-close" icon-class="close-x" @click="close"></svg-icon>
+            </div>
+            <div class="menu-list" v-if="menuType == 'main'">
+                <NavCenter :navList='portfolioList' :styleConf='styleConf' @close='close'></NavCenter>
+            </div>
+            <div class='menu-list' v-if="menuType == 'wallet'">
+                <!-- <UserMenu v-if="userMenus.length > 0" />
+                <userPanel v-else
+                    v-model="walletMenuVisible"
+                    top="0"
+                    :isClickstatus="false"
+                    type="B"
+                /> -->
+                <NavCenter :navList='userMenus' :styleConf='styleConf' @close='close'></NavCenter>
+            </div>
+            <div class="log-in-out-wrapper" v-if="menuType == 'main'">
+                <media-list></media-list>
+            </div>
+            <!-- 防止菜单过多重叠 -->
+            <div class="log-in-out-wrapper theme-light" v-if="menuType == 'wallet'">
+                <div class="log-out" @click="preLogOut" v-show="isLogin">
+                    {{accountIsCustody ? $t('user_menu_log_out') : $t('wallet_common_walletconnect_disconnect')}}
+                </div>
+                <div class="log-out" @click="login" v-show='!isLogin'>
+                    {{accountIsCustody ? $t('user_common_log_in') : $t('wallet_common_connect')}}
+                </div>
+            </div>
+        </div>
+
+        <!-- 退出登录确认弹框 -->
+        <a-modal
+			v-model="logoutModalVisible"
+			:width="320"
+			centered
+			:footer="null"
+			dialogClass="mobile-logout-modal"
+			@ok="logoutModalVisible = false"
+		>
+            <div class="title">{{ $t('common_base_confirmation') }}</div>
+            <p>
+                {{$t('user_menu_log_out_text')}}
+            </p>
+            <div class="btns">
+                <a-button size="small" @click="logoutModalVisible = false">{{$t('user_common_cancel')}}</a-button>
+                <a-button class='theme-dark primary' size="small" @click="logOut">{{ $t('user_common_sure') }}</a-button>
+            </div>
+		</a-modal>
+    </div>
+</template>
+
+<script>
+import { logOut } from "../../api/common";
+
+export default {
+    props: {
+        value: {
+            type: Boolean,
+            default: false,
+        },
+        styleConf: {
+            type: Object,
+            default: function() {
+                return {}
+            }
+        },
+        menuType: {
+            type: String,
+            default: 'main'
+        }
+    },
+    computed: {
+        isLogin() {
+            if(this.$store.state.user.userInfo.uid) {
+                return true;
+            }else {
+                return false;
+            }
+        },
+        isVip() {
+            return this.$store.state.custType==='VIP'
+        },
+        menuList() {
+            return this.$store.state.navigation.header;
+        },
+        ethWallet() {
+            return this.$store.state.wallet.ethWallet
+        },
+        walletType() {
+            return this.$store.state.siteConfig.walletType
+        },
+        isWalletConnect() {
+            return this.$store.state.be_bind_wallet_connect
+        },
+        headerMenus() {
+            return this.$store.state.navigation.header;
+        },
+        navList() {
+            let menuIds = []
+            let headerMenus = this.headerMenus.filter(v => {
+                let hasId = menuIds.includes(v.id)
+                menuIds.push(v.id)
+                return !hasId && (v.type == 'COMMON' || v.type == 'UNMANAGED' && !this.accountIsCustody || v.type == 'MANAGED' && this.accountIsCustody)
+            });
+            let parentNavList = headerMenus.filter(v => !v.parent_id && v.client == 'H5')
+            let childNavList = headerMenus.filter(v => v.parent_id && v.client == 'H5')
+            return parentNavList.map(v => {
+                v.child = childNavList.filter(child => v.id == child.parent_id).sort((a, b) => a.sort - b.sort);
+                return v;
+            }).sort((a, b) => a.sort - b.sort < 0 ? -1 : 1);
+        },
+        accountIsCustody() {
+            return this.$store.getters.accountIsCustody;
+        },
+        userList() {
+            let menuIds = []
+            let userListMenus = this.$store.state.navigation.user.filter(v => {
+                let hasId = menuIds.includes(v.id)
+                menuIds.push(v.id)
+                return !hasId
+            });
+            // let parentNavList = userListMenus.filter(v => !v.parent_id && v.client == 'H5')
+            // let childNavList = userListMenus.filter(v => v.parent_id && v.client == 'H5')
+            let parentNavList = userListMenus.filter(v => !v.parent_id && v.client == 'H5' && (v.type == 'COMMON' || v.type == 'UNMANAGED' && !this.accountIsCustody || v.type == 'MANAGED' && this.accountIsCustody))
+            let childNavList = userListMenus.filter(v => v.parent_id && v.client == 'H5' && (v.type == 'COMMON' || v.type == 'UNMANAGED' && !this.accountIsCustody || v.type == 'MANAGED' && this.accountIsCustody))
+            return parentNavList.map(v => {
+                v.child = childNavList.filter(child => v.id == child.parent_id).sort((a, b) => a.sort - b.sort);
+                return v;
+            }).sort((a, b) => a.sort - b.sort < 0 ? -1 : 1);
+        },
+        userMenus() {
+            if (!this.account) return [];
+            let result = this.userList.filter((item) => item.type === "COMMON");
+            if (this.accountIsCustody) {
+                result = result.concat(
+                    this.userList.filter((item) => item.type === "MANAGED")
+                );
+            } else {
+                result = result.concat(
+                    this.userList.filter((item) => item.type === "UNMANAGED")
+                );
+            }
+            return result.sort((a, b) => a.sort - b.sort);
+        },
+        account() {
+            return this.$store.getters.account || "";
+        },
+        allMenus() {
+            let menuType = 'portfolio'
+            return this.$store.state.navigation[menuType]
+        },
+        portfolioMenus() {
+            // type
+            // COMMON("公共"),
+            // MANAGED("托管"),
+            // UNMANAGED("非托管"),
+            if (!this.account) return [];
+            return this.filterCommonMenuAllType(this.allMenus);
+        },
+        portfolioList() {
+            let portfolioMenus = this.isLogin && this.account && this.portfolioMenus && this.portfolioMenus.length && [{
+                bar_name: this.$t('user_common_portfolio'),
+                client: 'H5',
+                id: 0,
+                sort: 0,
+                child: this.portfolioMenus
+            }] || []
+            return portfolioMenus.concat(this.navList)
+        }
+    },
+    data() {
+        return {
+            logoutModalVisible: false,
+            // navList: [],
+            navName: 'nav_center',
+            indexStyleList: [],
+            active: false,
+            userCenter: window.isUserCenter,
+            commonConf: {},
+            commonStyleConf: {},
+            walletMenuVisible: true
+        }
+    },
+    created() {
+        // this.dealSite()
+    },
+    methods: {
+        // dealSite() {
+        //     let navList = this.$t('site_common_header_navigation_bar') != 'site_common_header_navigation_bar' ? JSON.parse(this.$t('site_common_header_navigation_bar')) : []
+        //     navList.sort((a, b) => a.sort - b.sort);
+        //     // console.log('navList1: ', navList);
+
+        //     let parentNavList = navList.filter(v => !v.parent_id && v.client == 'H5')
+        //     let childNavList = navList.filter(v => v.parent_id && v.client == 'H5')
+        //     this.navList = parentNavList.map(v => {
+        //         v.child = []
+        //         childNavList.map(child => {
+        //             if (v.id == child.parent_id) {
+        //                 v.child.push(child)
+        //             }
+        //         })
+        //         return v
+        //     })
+        //     // this.dealTheme()
+        //     console.log('navList', this.navList)
+        // },
+        dealSietMode() {
+            let siteModel = this.$store.state.siteModel
+            console.log('siteModel', siteModel)
+            // switch (siteModel) {
+            //     case 1:
+            //         this.navName = 'nav_center'
+            //         break;
+
+            //     default:
+            //         break;
+            // }
+        },
+        toUrl(url) {
+            this.$router.push({
+                path:url
+            })
+        },
+        close() {
+            this.$emit("input",false);
+        },
+        preLogOut() {
+            this.logoutModalVisible = true;
+        },
+        logOut() {
+            logOut().catch(e => e).finally(e => {
+                this.$store.commit('user/logout')
+                this.$emit("input",false)
+                this.logoutModalVisible = false
+                this.$router.push({
+                    name: 'home'
+                })
+            })
+        },
+        login() {
+            this.walletTypes = window.walletTypes;
+            this.close()
+        	if (this.walletTypes.length === 1 && this.walletTypes[0] === "MW") {
+				this.$router.push({
+					path: '/user/login'
+				})
+			} else {
+				$Vue.$bus.$emit("linkWallet");
+			}
+        },
+        filterCommonMenuAllType(list) {
+            let result = list.filter((item) => item.type === "COMMON");
+            if (this.accountIsCustody) {
+                result = result.concat(
+                    list.filter((item) => item.type === "MANAGED")
+                );
+            } else {
+                result = result.concat(
+                    list.filter((item) => item.type === "UNMANAGED")
+                );
+            }
+            return result.sort((a, b) => a.sort - b.sort);
+        },
+        filterCommonMenuType(list) {
+            let result = list.filter((item) => item.type === "COMMON");
+            return result.sort((a, b) => a.sort - b.sort);
+        },
+        filterSignleTypeMenuType(list) {
+            let result = [];
+            if (this.accountIsCustody) {
+                result = result.concat(
+                    list.filter((item) => item.type === "MANAGED")
+                );
+            } else {
+                result = result.concat(
+                    list.filter((item) => item.type === "UNMANAGED")
+                );
+            }
+            return result.sort((a, b) => a.sort - b.sort);
+        }
+    }
+}
+</script>
+
+
+<style lang="less">
+
+.mobile-logout-modal {
+    .title{
+        font-size: 24px;
+        text-align: center;
+        margin-bottom: 20px;
+    }
+    .btns {
+        margin-top: 43px;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 20px;
+        .primary {
+            background: var(--primary-bg-color);
+        }
+    }
+}
+</style>
+
+<style lang="less" scoped>
+    .menu {
+        position: fixed;
+        z-index: 5100;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 100vw;
+        // height: 100vh;
+        .mask {
+            width: 100%;
+            height: 100%;
+            background: none;
+        }
+        .menu-content {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 282px;
+            height: 100%;
+            background: #fff;
+            border-left: 1px solid var(--border-color-base);
+            font-family: FontBold;
+            z-index: 5200;
+            display: flex;
+            flex-direction: column;
+            .close {
+                text-align: right;
+                padding: 16px;
+                .icon-close {
+                    width: 20px;
+                    height: 20px;
+                    color: var(--black);
+                }
+            }
+            .menu-wallet {
+                /deep/ .user-menu {
+                    background: white;
+                    box-shadow: none;
+                    .menu-item {
+                        color: var(--text-color);
+                        border-bottom: 1px solid #f5f6fa;
+                        min-height: 46px;
+                        font-size: 14px;
+                        font-family: Font;
+                    }
+                    .log-out {
+                        display: none;
+                    }
+                }
+                /deep/ .user-panel {
+                    background: white;
+                    box-shadow: none;
+                    width: 100%;
+                    top: 60px !important;
+                    .user-p-item {
+                        border-bottom: 1px solid #f5f6fa;
+                        min-height: 46px;
+                        a {
+                            color: var(--text-color);
+                            font-size: 14px;
+                            font-family: Font;
+                        }
+                    }
+                    .user-p-out {
+                        display: none;
+                    }
+                }
+            }
+            .menu-list {
+                // 支持配多个菜单，展开后超出屏幕外可以滚动
+                padding: 0 18px 60px;
+                overflow: hidden;
+                .navList {
+                    overflow-y: auto;
+                    height: 100%;
+                    scrollbar-width: none;
+                    /* firefox */
+                    -ms-overflow-style: none;
+                    /* IE 10+ */
+                }
+                .navList::-webkit-scrollbar {
+                    display: none;
+                }
+                & /deep/ a {
+                    display: block;
+                    padding: 17px 0;
+                    font-size: 14px;
+
+                    text-align: left;
+                    color: var(--text-color);
+                    line-height: 14px;
+                    border-bottom: 1px solid var(--highlight-bg-color);
+                }
+                .prizes {
+                    position: relative;
+                    .icon-gift {
+                        position: absolute;
+                        right: 29px;
+                        top: 50%;
+                        transform: translateY(-50%);
+                        width: 36px;
+                        height: 36px;
+                    }
+                }
+            }
+            .log-in-out-wrapper {
+                background-color: #FFF;
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                height: 48px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                .log-out {
+                    width: 100%;
+                    // width: 244px;
+                    height: 48px;
+                    border-top: 1px solid var(--text-color-placeholder);
+                    // border-radius: 20px;
+                    font-size: 14px;
+                    font-family: FontMedium;
+                    text-align: center;
+                    color: var(--text-color-placeholder);
+                    line-height: 48px;
+                }
+            }
+        }
+    }
+</style>

package/dist/components/h5Components/NavCenter.vue

@@ -0,0 +1,194 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author:
+ * @Date: 2021-04-26 19:23:43
+ * @LastEditors: Lewis
+ * @LastEditTime: 2021-12-10 11:25:45
+-->
+<template>
+    <div class='navList'>
+        <div v-for='(item, index) in navInnner' :key="index" class='link-item'>
+            <div :class="['inner_box', {'active': item.expand}]"  v-theme="styleSet" @click='onClickMenuItem(item, index)'>
+                {{item.bar_name}}
+                <svg-icon class="arrow" icon-class="arrow-right" v-if='item.child && item.child.length'></svg-icon>
+                <menu-tag :content='item.menu_tag' v-if='item.menu_tag' top='-10px'></menu-tag>
+            </div>
+            <div :class="['inner_navlist', {'active': item.expand}]" v-if='item.child && item.child.length' >
+                <div class='link-item' v-for='(innerItem, innerIndex) in item.child' :key='innerIndex' @click='onGoChildPage(innerItem)'>
+                    <span>{{innerItem.bar_name}}</span>
+                    <menu-tag :content='innerItem.menu_tag' v-if='innerItem.menu_tag'></menu-tag>
+                </div>
+                <!-- 商家菜单入口 -->
+                <div v-if="isMerchant && item.child[item.child.length - 1].click_url === '/wallet/transaction-history'" class='link-item' @click='goUrl("/marketing/merchant")'>
+                    <span>{{$t('marketing_navigation_commission_sharing')}}</span>
+                </div>
+            </div>
+        </div>
+        <!-- <div class='link-item'>
+            <div class='inner_box' @click='goPerpetual'>
+                Perpetual
+            </div>
+        </div> -->
+    </div>
+</template>
+
+<script>
+import {isMerchant} from "../../api/common";
+    export default {
+        name: 'nav_center',
+        props: {
+            navList: {
+                type: Array,
+                default: function() {
+                    return []
+                }
+            },
+            styleConf: {
+                type: Object,
+                default: function() {
+                    return {}
+                }
+            }
+        },
+        computed: {
+            account() {
+                return this.$store.getters.account || "";
+            },
+        },
+        watch:{
+            navList(val) {
+                this.navInnner = val.length && val || []
+            },
+            styleConf(obj) {
+                console.log('styleConf', obj)
+                this.styleSet = this.getStyleSetAttrs(['color', 'fontWeight'])
+            },
+            account: {
+                immediate: true,
+                handler (val) {
+                    this.checkIsMerchant();
+                }
+            }
+        },
+        mounted() {
+            this.navInnner = this.navList
+            this.styleSet = this.getStyleSetAttrs(['color', 'fontWeight'])
+        },
+        data() {
+            return {
+                navInnner: [],
+                styleSet: {},
+                isMerchant: false
+            }
+        },
+        methods: {
+            async checkIsMerchant() {
+                const data = await isMerchant({},{
+                    chain_id: this.$store.state.chainId,
+                    layer: "L2",
+                }).then(res => res.data).catch(e => false);
+                this.isMerchant = data;
+            },
+            goPerpetual() {
+                this.$router.push({
+                    path: "/trade/perpetual?symbol=BTC-USDT"
+                });
+            },
+            onClickMenuItem(item, index) {
+                console.log('onClickMenuItem:', item)
+                if (item.child && item.child.length) {
+                    item.expand = !item.expand
+                    this.$set(this.navInnner, index, item)
+                    return
+                }
+                if (item.click_url.startsWith('http')) {
+                    window.open(item.click_url, 'blank')
+                    return
+                }
+                if (item.click_url) {
+                    this.$router.push({ path: item.click_url })
+                    this.$emit('close')
+                } else {
+                    this.$router.push({ name: 'home' })
+                    this.$emit('close')
+                }
+            },
+            onGoChildPage(item) {
+                // console.log('onGoChildPage:', item)
+                this.$emit('close')
+                if (item.click_url.startsWith('http')) {
+                    window.open(item.click_url, "_blank")
+                } else {
+                    this.$router.push({ path: item.click_url });
+                }
+            },
+            goUrl(path) {
+                this.$router.push(path);
+            },
+            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
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+.navList{
+    .link-item {
+        width: 100%;
+        min-height: 46px;
+        font-size: 14px;
+        font-family: Font;
+        color: var(--text-color);
+        border-bottom: 1px solid #f5f6fa;
+    }
+    .inner_box {
+        height: 46px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+    .inner_box.active {
+        .arrow {
+            transform: rotate(270deg);
+        }
+    }
+    .inner_navlist {
+        width:100%;
+        padding-left: 20px;
+        overflow: hidden;
+        height: 0;
+        transition: all .5s;
+        .link-item {
+            display: flex;
+            align-items: center;
+            line-height: 12px;
+            padding: 10px 0;
+            text-align: left;
+        }
+    }
+    .inner_navlist.active {
+        height: 100%;
+    }
+    .arrow {
+        margin-left: 10px;
+        width: 16px;
+        height: 16px;
+        transform: rotate(90deg);
+        color: var(--black);
+        transition: all .5s
+    }
+}
+</style>

package/dist/components/h5Components/NoRecord.vue

@@ -0,0 +1,52 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-11-21 15:39:50
+ * @LastEditTime: 2021-11-17 02:02:14
+ * @LastEditors: Lewis
+ * @Description: 
+-->
+<template>
+    <div class="NoRecord">
+        <img :src="require('../../assets/h5/no-record.svg')" alt="no-record" v-if="!name">
+        <svg-icon class="icon-message" :icon-class="name" v-if="name"></svg-icon>
+        <p>{{newText}}</p>
+    </div>
+</template>
+<script>
+export default {
+    name: 'NoReecord',
+    computed: {
+        newText() {
+            return (this.text || this.$t('common_base_no_record_found'))
+        }
+    },
+    props: {
+        text: {
+            type: String,
+            default: ""
+        },
+        name: {
+            type: String,
+            required:false,
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .NoRecord {
+        text-align: center;
+        img {
+            margin: 0 auto 30px;
+        }
+        p {
+            font-size: 14px;
+            color: var(--text-color-secondary);
+            text-align: center;
+            line-height: 14px;
+        }
+        .icon-message {
+            width: 100px;
+            height: 100px;
+        }
+    }
+</style>