udxcms 1.0.1

package/dist/components/businessComponents/SignaturePopup.vue

@@ -0,0 +1,415 @@
+<template>
+    <dialog-box :title="signatureConfig.title" v-model="showBox" :close="false" :mask="true" class='signature'>
+        <div class='signature-popup-box'>
+            <div class='sign-wallet'>
+                <img :src="walletLogo" alt="" class='user-img'/>
+                <div class='chain-user'>
+                    <span class='title'>{{curChain && curChain.name}}</span>
+                    <span class='val'>{{formatAccount(walletAddress)}}</span>
+                </div>
+                <div class='wallet-val' v-if='signatureConfig.walletbalance'>
+                    <span class='title'>Balance</span>
+                    <span class='val'>{{signatureConfig.walletbalance || '0.00'}} {{signatureConfig.symbol}}</span>
+                </div>
+            </div>
+
+            <div class='sign-site'>
+                <img :src="siteImg" alt="" class='img'/>
+                <span class='site'>{{siteHref}}</span>
+            </div>
+
+            <div class='sign-msg'>
+                <div class='title'>Signature request</div>
+                <div class='msg'>Only sign this message if you fully understand
+the content and trust the requesting site.</div>
+            </div>
+
+            <div class='sign-content'>
+                <div class='title'>You are signing:</div>
+                <div class='message'>
+                    <div class='top-msg'>Message:</div>
+                    <div class='msg-content'>
+                        <slot></slot>
+                    </div>
+                </div>
+            </div>
+            <div class='button-box'>
+                <a-button type='default' @click='cancel' class='btn'>Reject</a-button>
+                <a-button type='primary' @click="confirm" class='btn sure'>Sign</a-button>
+            </div>
+        </div>
+    </dialog-box>
+</template>
+
+<script>
+    import { ethers } from "ethers"
+    import { formatAccount } from '../../utils/index'
+    export default {
+        name: 'signature-popup',
+        props: {
+            value: {
+                type: Boolean,
+                default: false
+            },
+            signatureConfig: {
+                type: Object,
+                defualt: () => {
+                    return {}
+                }
+            }
+        },
+        watch: {
+            showBox(val) {
+                if (!val) {
+                    this.$emit('input', val)
+                }
+            },
+            value(val) {
+                console.log('walletchange', val)
+                this.showBox = val
+            }
+        },
+        computed: {
+            walletNetworks() {
+                return this.$store.getters.walletNetworks;
+            },
+            curChain() {
+                let chainId = this.signatureConfig.chainId
+                let walletNetworks = this.walletNetworks || []
+                return this.signatureConfig.chainId && this.walletNetworks.find(v => v.chainId == chainId)
+            },
+            userInfo() {
+                return this.$store.state.user.userInfo
+            },
+            walletLogo() {
+                let address = this.userInfo.uid || 'wallet-signature'
+                let logoUrl = address && this.$store.getters.getWalletAddressImg(address) || ''
+                return logoUrl
+            },
+            uid() {
+                return this.userInfo.uid
+            },
+            walletAddress() {
+                return this.userInfo.profile && this.userInfo.profile.username || this.userInfo.uid
+            }
+        },
+        data() {
+            return {
+                showBox: false,
+                siteHref: window.location.origin,
+                siteImg: `${this.$t("site_common_logo_base_url")}${window.location.hostname}/en_US/s32.png`,
+                // siteImg: localStorage.getItem('logoImgSrc'),
+                // formatAccount: formatAccount
+            }
+        },
+        mounted() {
+        },
+        methods: {
+            formatAccount,
+            cancel() {
+                this.showBox = false
+                this.$emit('confirm', false)
+            },
+            confirm() {
+                console.log('config msg')
+                this.showBox = false
+                this.$emit('confirm', true)
+            }
+        }
+    }
+</script>
+<style lang="less">
+    .signature-popup-box {
+        .sign-content {
+            .message .msg-content p {
+                word-break: break-all;
+            }
+        }
+    }
+</style>
+<style lang="less" scoped>
+    .signature /deep/ .toast-content {
+        padding: 0px !important;
+        // border: 1px solid var(--border-color-base);
+        // box-shadow: 0px 4px 12px rgba(17, 51, 83, 0.04);
+        // border-radius: 12px;
+        position: fixed;
+        top: 50%;
+        z-index: 2;
+        transform: translateY(-50%) !important;
+        max-height: 94vh;
+        overflow: auto;
+        .title {
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            text-align: center;
+            padding-right: 0;
+            .close{
+                box-sizing: border-box;
+                height: 30px;
+                top: 0px;
+                padding-top: 2px;
+                right: 10px;
+            }
+        }
+    }
+    .signature-popup-box {
+        // max-width: 98%;
+        // border: 1px solid var(--border-color-base);
+        // box-shadow: 0px 4px 12px rgba(17, 51, 83, 0.04);
+        // border-radius: 12px;
+        font-family: Font;
+        .sign-wallet {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            border-bottom: 1px solid var(--border-color-base);
+            border-top: 1px solid var(--border-color-base);
+            width: 100%;
+            .user-img {
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;
+            }
+            .chain-user, .wallet-val {
+                padding-left: 12px;
+                .title {
+                    display: block;
+                    color: var(--text-color-placeholder);
+                    font-size: 12px;
+                    height: 14px;
+                    line-height: 14px;
+                    text-align: left;
+                }
+                .val {
+                    margin-top: 2px;
+                    display: block;
+                    color: var(--text-color);
+                    font-size: 12px;
+                    line-height: 14px;
+                    text-align: left;
+                }
+            }
+            .wallet-val {
+                flex: 1;
+                .title, .val {
+                    text-align: right;
+                    padding-right: 0;
+                }
+            }
+        }
+
+        .sign-site {
+            margin: 16px auto 0;
+            padding: 12px 16px;
+            height: 40px;
+            border-radius: 40px;
+            border: 1px solid var(--border-color-base);
+            display: flex;
+            align-items: center;
+            width: fit-content;
+            .img {
+                width: 20px;
+                height: 20px;
+                border-radius: 4px;
+            }
+            .site {
+                padding-left: 12px;
+                font-size: 12px;
+                color: #C0C3CC;
+                white-space: nowrap;
+            }
+        }
+
+        .sign-msg {
+            margin-top: 20px;
+            .title {
+                text-align: center;
+                font-size: 16px;
+                line-height: 20px;
+                color: var(--text-color);
+                font-family: FontSemiBold;
+            }
+            .msg {
+                width: 90%;
+                margin: 0 auto;
+                font-size: 12px;
+                line-height: 16px;
+                color: var(--text-color-placeholder);
+                text-align: center;
+            }
+        }
+
+        .sign-content {
+            margin-top: 16px;
+            .title {
+                height: 30px;
+                line-height: 30px;
+                text-align: center;
+                color: var(--text-color-secondary);
+                font-size: 12px;
+                border-bottom: 1px solid var(--border-color-base);
+            }
+            .message {
+                padding: 16px;
+                border-bottom: 1px solid var(--border-color-base);
+                .top-msg {
+                    font-size: 12px;
+                    color: var(--text-color-secondary);
+                    line-height: 16px;
+                    text-align: left;
+                }
+                .msg-content {
+                    margin-top: 12px;
+                    color: var(--text-color-secondary);
+                    text-align: left;
+                    line-height: 16px;
+                    font-size: 12px;
+                    p {
+                        max-width: 90%;
+                        white-space: pre-wrap;
+                    }
+                }
+            }
+        }
+        .button-box {
+            margin-top: 44px;
+            border-top: 1px solid var(--border-color-base);
+            padding: 20px;
+            display: flex;
+            justify-content: space-between;
+            .btn {
+                width: 150px;
+                height: 40px;
+                line-height: 40px;
+                border: 1px solid var(--border-color-base);
+                border-radius: 6px;
+                color: var(--text-color);
+                font-size: 14px;
+                &.sure {
+                    border: 0;
+                    color: white;
+                }
+            }
+        }
+    }
+    @media screen and (min-width: 768px) {
+        .signature /deep/ .toast-content {
+            right: 50px;
+            z-index: 2;
+            top: 10px;
+            transform: translateY(0) !important;
+            .title {
+                height: 44px;
+                line-height: 44px;
+                font-size: 16px;
+                .close{
+                    height: 44px;
+                    padding-top: 5px;
+                }
+            }
+        }
+
+        .signature-popup-box {
+            max-width: 360px;
+            .sign-wallet {
+                padding: 16px 20px;
+                .user-img {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 50%;
+                }
+                .chain-user, .wallet-val {
+                    padding-left: 12px;
+                    .title {
+                        font-size: 14px;
+                        height: 16px;
+                        line-height: 16px;
+                    }
+                    .val {
+                        font-size: 14px;
+                        line-height: 16px;
+                    }
+                }
+                .wallet-val {
+                    flex: 1;
+                    .title, .val {
+                        text-align: right;
+                        padding-right: 0;
+                    }
+                }
+            }
+
+            .sign-site {
+                padding: 16px 20px;
+                height: 60px;
+                border-radius: 60px;
+                .img {
+                    width: 28px;
+                    height: 28px;
+                }
+                .site {
+                    font-size: 14px;
+                }
+            }
+
+            .sign-msg {
+                margin-top: 20px;
+                .title {
+                    font-size: 20px;
+                    line-height: 24px;
+                }
+                .msg {
+                    font-size: 14px;
+                    line-height: 18px;
+                }
+            }
+
+            .sign-content {
+                margin-top: 16px;
+                .title {
+                    height: 44px;
+                    line-height: 44px;
+                    font-size: 14px;
+                }
+                .message {
+                    padding: 20px;
+                    .top-msg {
+                        font-size: 14px;
+                        line-height: 20px;
+                    }
+                    .msg-content {
+                        margin-top: 12px;
+                        line-height: 20px;
+                        font-size: 14px;
+                        p {
+                            max-width: 100%;
+                            white-space: pre-wrap;
+                        }
+                    }
+                }
+            }
+            .button-box {
+                margin-top: 44px;
+                border-top: 1px solid var(--border-color-base);
+                padding: 20px;
+                display: flex;
+                justify-content: space-between;
+                .btn {
+                    width: 150px;
+                    height: 40px;
+                    line-height: 40px;
+                    border: 1px solid var(--border-color-base);
+                    border-radius: 6px;
+                    color: var(--text-color);
+                    font-size: 14px;
+                    &.sure {
+                        border: 0;
+                        color: white;
+                    }
+                }
+            }
+        }
+    }
+</style>

package/dist/components/businessComponents/SiteLoading.vue

@@ -0,0 +1,71 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author:
+ * @Date: 2021-04-02 18:58:32
+ * @LastEditors: Lewis
+ * @LastEditTime: 2021-12-08 15:27:23
+-->
+<template>
+    <component :is="componentId"></component>
+</template>
+
+<script>
+/**
+ * 修改为从主题控制中来配置加载态。
+ * 后台主题控制中，页面公共配置，key: loadingComponent
+ */
+import LoadingDefault from './LoadingDefault.vue'
+import LoadingWallet from './LoadingWallet.vue'
+import {unwrapJSONStr} from "@/common_modules/cms-submodule/utils/parse";
+
+export default {
+	name: "site-loading",
+    props: {
+        loadingName: {
+            type: String,
+            default: ''
+        }
+    },
+	components: {
+		LoadingDefault,
+		LoadingWallet,
+	},
+	data() {
+		return {
+			componentId: "LoadingDot",
+		};
+	},
+	created() {
+		// this.getComponentId();
+	},
+	methods: {
+	  	getComponentId() {
+			// TODO：全局解析服务端配置。
+			// 从配置中获取组件。
+			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)) ||
+				{};
+			if (indexConfig_obj.loadingComponent) {
+				this.componentId = indexConfig_obj.loadingComponent;
+			}
+		}
+	}
+};
+</script>

package/dist/components/businessComponents/SiteLoadingTwo.vue

@@ -0,0 +1,74 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author:
+ * @Date: 2021-04-02 19:09:00
+ * @LastEditors: Lewis
+ * @LastEditTime: 2021-04-23 18:57:09
+-->
+<template>
+    <div class='loading'>
+        <!-- <div class='loader'></div> -->
+        <a-spin>
+          <a-icon  slot="indicator" type="loading" style="font-size: 24px" spin />
+        </a-spin>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'site-loading-two'
+    }
+</script>
+
+<style lang="less" scoped>
+    .loading {
+        height: 2em;
+        width: 2em;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: .5em;
+    }
+    .loader, .loader:after {
+        border-radius: 50%;
+        width: 2em;
+        height: 2em;
+    }
+.loader {
+  margin: 60px auto;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid var(--border-line-color);
+  border-right: 1.1em solid var(--border-line-color);
+  border-bottom: 1.1em solid var(--border-line-color);
+  border-left: 1.1em solid #ffffff;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+</style>

package/dist/components/businessComponents/SubMenuMore.vue

@@ -0,0 +1,126 @@
+<template>
+    <div class="menu-dropdown" v-if="menus.length">
+        <div class="submenu-wrapper">
+            <div
+                class="submenu-item"
+                v-for="(subItem, subIndex) in menus"
+                :key="subIndex"
+                @click="onClickMenu(subItem)"
+            >
+                <span class='submenu-title'>
+                    {{ subItem.bar_name }}
+                    <menu-tag :content='subItem.menu_tag' v-if='subItem.menu_tag'></menu-tag>
+                </span>
+                <span class="menu-text"  v-if='subItem.child && subItem.child.length'>
+                    <a-icon
+                        type="caret-down"
+                    />
+                </span>
+                <div class="submore-wrapper" v-if='subItem.child && subItem.child.length'>
+                    <div class='submenu-wrapper'>
+                        <div
+                            class="submenu-item"
+                            v-for="(subTItem, subTIndex) in subItem.child"
+                            :key="subTIndex"
+                            @click.stop="onClickMenu(subTItem)"
+                        >
+                            {{ subTItem.bar_name }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    // TODO:递归组件处理
+    export default {
+        props: {
+            menus: {
+                type: Array,
+                defualt: () => {
+                    return []
+                }
+            },
+            isBasic: {
+                type: Boolean,
+                default: false
+            }
+        },
+        name: 'sub-menu-p',
+        data() {
+            return {}
+        },
+        methods: {
+            onClickMenu(item) {
+                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) return;
+                if (item.click_url.startsWith("http")) {
+                    window.open(item.click_url, "_blank");
+                } else {
+                    this.$router.push({
+                        path: item.click_url,
+                    });
+                }
+            }
+        }
+
+    }
+</script>
+
+<style lang="less" scoped>
+    .menu-dropdown {
+		display: none;
+		position: absolute;
+		top: var(--height);
+		left: 0;
+		min-width: 160px;
+		z-index: 800;
+		&.currency-dropdown {
+			right: 0;
+			left: auto;
+		}
+		.submenu-wrapper {
+			// margin-top: 10px;
+			background: var(--popup-bg);
+			border-radius: var(--border-radius-base);
+			box-shadow: var(--box-shadow-base);
+            overflow: visible;
+			.submenu-item {
+				height: 48px;
+				line-height: 48px;
+				padding: 0 16px;
+				font-size: 16px;
+				white-space: nowrap;
+                position:relative;
+                .submenu-title {
+                    display: flex;
+                }
+                .menu-text {
+                    position: absolute;
+                    right: 0;
+                    top: 20px;
+                    transform: rotate(-90deg) !important;
+                }
+                .submore-wrapper {
+                    position: absolute;
+                    left: 100%;
+                    display: none;
+                    top: 0;
+                }
+				&:hover {
+					background-color: var(--select-item-bg);
+					color: var(--link-color);
+                    & .submore-wrapper {
+                        display: block;
+                    }
+				}
+
+			}
+		}
+	}
+</style>