udxcms 1.0.1

package/dist/components/businessComponents/ChainNetWork.vue

@@ -0,0 +1,365 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author:
+ * @Date: 2021-10-26 16:50:22
+ * @LastEditors: Lewis
+ * @LastEditTime: 2022-08-20 04:28:11
+-->
+<template>
+    <!-- <div class='networklist' v-if="type == 'chainNetWork' || !multiChain && tradeChainShow">
+         -->
+    <div class='networklist'>
+        <div class='network-box' :style="{visibility: chainShow ? 'visible': 'hidden'}" v-if="!lendingShow">
+            <!-- <Select v-model="chainId" class='network-panel' :value='chainId' @on-change='checkChainData'>
+                <Option v-for="item in netWorkList" :value="item.chainId" :key="item.chainId">{{ item.chainName }}</Option>
+            </Select> -->
+            <div class="coin-select" :style="{visibility: chainShow ? 'visible': 'hidden'}">
+                <div class="select" @click="changeStatu">
+                    <img v-show="defaultValue.icon" class="coin-type" :src="defaultValue.icon" alt="">
+                    <span class="coin-name">{{defaultValue.chainName || $t('wallet_common_all_networks')}}</span>
+                    <svg-icon :class="{'icon-down':true, active: changeNetWorkBox}" icon-class="arrow-down-w"></svg-icon>
+                </div>
+                <div :class="['drop-down', $route.name == 'market-home' ? 'market-bg' : '']" v-show="changeNetWorkBox">
+                    <ul>
+                        <li v-for="item in showNetWorklist" :key="item.chainName" :class="{'active': item.chainId == defaultValue.chainId}" @click="select(item)">
+                            <img class="coin-type" :src="item.icon" alt="">
+                            <span class="name">{{item.chainName}}</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div v-else>
+            <Networklist class='networklist-select' name='lending'>
+                <svg-icon :class="{'icon-down':true, active: changeNetWorkBox}" icon-class="arrow-down-w"></svg-icon>
+            </Networklist>
+        </div>
+    </div>
+</template>
+
+<script>
+    let closeFn
+    import { getTradeDefaultChainId } from '../../utils/index'
+    import _ from 'lodash';
+    export default {
+        name: 'ChainNetWork',
+        props: {
+            value: {
+                type: String,
+                default: ''
+            },
+            chainType: {
+                type: String,
+                default: 'chainNetWork' // ''
+            },
+            // 交易对配置
+            symbolConfig: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            },
+        },
+        computed: {
+            layer1NetworkList() {
+                return this.$store.getters.layer1NetworkList;
+            },
+            supportChains() {
+                return this.symbolConfig.support_chains || ''
+            },
+            symbol() {
+                return this.symbolConfig.display_name || ''
+            },
+            showNetWorklist() {
+                let supportChains = this.supportChains
+                return this.netWorkList.filter(v => !supportChains || supportChains.includes(v.chainId))
+            }
+            // networkLogo() {
+            //     const network = this.layer1NetworkList.find(item => item.chainId == this.defaultValue.chainId);
+            //     return network && network.networkLogo;
+            // }
+        },
+        watch: {
+            $route: {
+                handler(val) {
+                    let routeName = val.name
+                    this.type = routeName
+                    this.tradeChainShow = this.tradeMultiChain.indexOf(routeName) != -1
+                    this.chainShow = (this.chainShowArr.indexOf(routeName) != -1 && this.chainType == 'chainNetWork' && !this.multiChain || this.chainType == 'tradeChain')
+                    this.lendingShow = this.lendingShowArr.indexOf(routeName) != -1
+                },
+                immediate: true
+            },
+            symbol(val) {
+                this.symbolChange()
+            },
+            '$store.state.chainId'(val) {
+                this.chainId = val
+            },
+            changeNetWorkBox: function(val) {
+                if(val) {
+                    this.queryWord = "";
+                }else {
+                    document.removeEventListener('click',closeFn)
+                }
+                closeFn = (e)=>{
+                    if(!this.$el.contains(e.target)){
+                        this.changeNetWorkBox = false
+                    }
+                }
+                this.$nextTick(()=>{
+                    if(val) {
+                        document.addEventListener('click',closeFn)
+                    }else {
+                        document.removeEventListener('click',closeFn)
+                    }
+                })
+            },
+            layer1NetworkList() {
+                console.log('change')
+            },
+            value() {
+                this.setChainArrLists()
+            }
+        },
+        created() {
+        },
+        mounted() {
+            this.chainId = this.$store.state.chainId;
+            this.setChainArrLists()
+        },
+        data() {
+            return {
+                chainShow: false,
+                lendingShow: false,
+                tradeChainShow: false,
+                chainId: '',
+                chainInitId: '',
+                netWorkList: [],
+                chainShowArr: ['pools-home', 'pools-add', 'pools-detail'],
+                lendingShowArr: ['lending-home', 'lending-usdr'],
+                tradeMultiChain: ['market-home', 'trade'],
+                defaultValue: {},
+                changeNetWorkBox: false,
+                setchainIdAllow: true,
+                timer: null
+            }
+        },
+        methods: {
+            select(item) {
+                if (this.setchainIdAllow) {
+                    console.log('item', item)
+                    this.defaultValue = item
+                    this.checkChainData(item.chainId)
+                    this.changeNetWorkBox = false
+                    this.setchainIdAllow = false
+                } else {
+                    this.setchainIdAllow = false
+                    if (this.timer) return
+                }
+                this.timer = setTimeout(() => {
+                    this.setchainIdAllow = true
+                    clearTimeout(this.timer)
+                    this.timer = null
+                }, 2 * 1000)
+            },
+            changeStatu() {
+                this.changeNetWorkBox = !this.changeNetWorkBox
+            },
+            checkChainData(val) {
+                let chainId = this.chainInitId
+                if (val && val != chainId) {
+                    this.chainInitId = val
+                    this.$store.commit('setChainId', val)
+                    // localStorage.setItem('lastChainId', val)
+                }
+            },
+            async setChainArrLists() {
+                if (!this.layer1NetworkList.length) {
+                    await this.$store.dispatch('fetchNetworkList')
+                }
+                try {
+                    this.chainInitId = this.chainId = this.$store.state.chainId + ''
+                    let netWorkLists = window.site_config['networks']
+                    this.netWorkList = JSON.parse(netWorkLists || '[]')
+                    let isExitChainId = false
+                    this.netWorkList = this.netWorkList.map(v => {
+                        let network = this.layer1NetworkList.find(item => item.chainId == v.chainId)
+                        let networkData = {
+                            chainId: network.chainId,
+                            chainName: network.name,
+                            icon: network.networkLogo
+                        }
+                        if (v.chainId == this.chainInitId) {
+                            isExitChainId = true
+                            this.defaultValue = networkData
+                        }
+                        return networkData
+                    })
+
+                    if (!isExitChainId) {
+                        this.chainInitId = this.chainId = getTradeDefaultChainId(this.$store)
+                        this.defaultValue = this.netWorkList.find(v => v.chainId == this.chainInitId)
+                    }
+                    // this.$store.commit('setChainId', this.chainId)
+                    // localStorage.setItem('lastChainId', this.chainId)
+                } catch (error) {
+                    console.log('netWorkList', error)
+                    this.netWorkList = []
+                }
+            },
+            getNetworkLogo(chainId) {
+                const network = this.layer1NetworkList.find(item => item.chainId == chainId);
+                return network && network.networkLogo;
+            },
+            symbolChange() {
+                if (Object.keys(this.defaultValue).length) {
+                    // let chainId = window.ethereum && window.ethereum.chainId
+                    let chainId = this.$store.state.chainId;
+                    let networkItem = this.showNetWorklist.find(v => v.chainId == parseInt(chainId)) || this.showNetWorklist[0]
+                    this.select(networkItem)
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .select {
+        cursor: pointer;
+        width: 208px;
+        height: 40px;
+        border: 1px solid var(--border-color-base);
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        padding: 8px 12px;
+        span {
+            font-size: 12px;
+            font-family: Font;
+            text-align: left;
+            color: var(--text-color);
+            margin-left: 10px;
+        }
+
+        .icon-down {
+            width: 24px;
+            height: 24px;
+            margin-left: auto;
+            transition: .3s;
+            transform-origin: center center;
+            color: var(--text-color);
+        }
+        .icon-down.active {
+            transform: rotate(180deg);
+        }
+    }
+    .coin-type {
+        width: 24px;
+        height: 24px;
+        border: 0;
+    }
+    .drop-down {
+        width: 208px;
+        position: absolute;
+        z-index: 500;
+        background: var(--popup-bg);
+        border-radius: var(--border-radius-base);
+        overflow: hidden;
+        box-shadow: var(--box-shadow-base);
+        top: 110%;
+        ul {
+            li {
+                height: 40px;
+                padding: 8px;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                span {
+                    font-size: 14px;
+                    font-family: Font;
+                    text-align: left;
+                    color: var(--text-color-secondary);
+                    line-height: 9px;
+                    margin-left: 10px;
+                }
+            }
+            li:hover {
+                background-color: var(--select-item-bg);
+                span {
+                   color: var(--text-color);
+                }
+            }
+            li.active {
+                background-color: var(--select-item-bg);
+                span {
+                    color: var(--text-color);
+                }
+            }
+        }
+    }
+    /deep/ .networklist-select {
+        cursor: pointer;
+        width: 208px;
+        height: 40px;
+        border: 1px solid var(--text-color);
+        border-radius: 6px;
+        // margin-left: -40px;
+        .coin-select {
+            .select {
+                min-width: 208px;
+                max-width: 208px;
+                border-radius: 6px;
+                border: 1px solid var(--text-color);
+                background: var(--header-bg-color);
+                div.chose-top {
+                    display: flex;
+                    z-index: 10;
+                    align-items: center;
+                    span {
+                        display: inline-block;
+                        max-width: 160px;
+                        overflow : hidden;
+                        text-overflow: ellipsis;
+                        color: var(--text-color);
+                    }
+                }
+                .icon-down {
+                    z-index: 10;
+                }
+                .network-icon {
+                    display: none;
+                }
+                .drop-down {
+                    min-width: 208px;
+                    padding:0 12px;
+                    position: absolute;
+                    z-index: -1;
+                    background: var(--header-bg-color);
+                    border-radius: 6px 6px;
+                    box-shadow: 0px 1px 2px 0px rgba(144,161,184,0.2);
+                    top: 0;
+                    padding-top: 48px;
+                    ul {
+                        background: none;
+                        border: 0;
+                        li {
+                            span {
+                                color: var(--text-color-secondary);
+                                line-height: 1;
+                            }
+                            border-bottom: 0;
+                        }
+                        li:hover span {
+                            color: var(--text-color-placeholder);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .market-bg {
+        background: #3a3a3a;
+    }
+</style>

package/dist/components/businessComponents/CoinSelectList.vue

@@ -0,0 +1,291 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-11-06 17:26:50
+ * @LastEditTime: 2022-08-06 18:58:44
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+	<div class="coin-select">
+		<div class="select" @click="changeStatu">
+			<img class="coin-type" :src="curToken.icon_url" alt="" v-if='curToken.icon_url'/>
+			<span class="coin-name">{{ curToken.symbol || '' }}</span>
+			<span>{{ curToken.name || ''}}</span>
+			<img :class="{ 'icon-down': true, active: showChoseBox }" src="../../assets/img/icon-down.png" alt=""/>
+		</div>
+		<div class="coin-mask" v-show="showChoseBox" @click="changeStatu"></div>
+		<div class="drop-down" v-show="showChoseBox">
+			<div class="search" v-if='showSearch'>
+				<input type="text" :placeholder="$t('wallet_security_search_coin_name')" v-model="queryWord"/>
+				<svg-icon class="img" icon-class="query"></svg-icon>
+				<svg-icon class="clear" icon-class="clear" v-show="queryWord" @click="clear"></svg-icon>
+			</div>
+			<ul>
+				<li v-for="item in list" :key="item.name" :class="{ disabled: item.disabled }" @click="select(item)">
+					<img class="coin-type" :src="item.icon_url" alt="" />
+					<span class="name">{{ item.symbol }}</span>
+					<span v-if='item.name'>{{ item.name }}</span>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+let closeFn;
+
+export default {
+    props: {
+        showSearch: {
+            type: Boolean,
+            default: false
+        },
+        curToken: {
+            type: Object,
+            default: function() {
+                return {}
+            }
+        },
+        list: {
+            type: Array,
+            default: () => []
+        },
+    },
+    data() {
+        return {
+            queryWord: "",
+            showChoseBox: false
+        }
+    },
+	computed: {
+	},
+    watch: {
+        value: function(val,oldValue) {
+            if(val) {
+                this.queryWord = "";
+            }else {
+                document.removeEventListener('click',closeFn)
+            }
+            closeFn = (e)=>{
+                if(!this.$el.contains(e.target)){
+                    this.$emit('input',false)
+                }
+            }
+            this.$nextTick(()=>{
+                if(val) {
+                    document.addEventListener('click',closeFn)
+                }else {
+                    document.removeEventListener('click',closeFn)
+                }
+            })
+        },
+        queryWord: function(val) {
+            this.query(val)
+        }
+    },
+    created() {
+    },
+    methods: {
+        changeStatu() {
+            this.showChoseBox = !this.showChoseBox
+        },
+        select(item) {
+            if(item.disabled) {
+                return;
+            }
+            this.$emit("input", item)
+        },
+        query(val) {
+            let curToken = this.list.filter(item=>{
+                return item.symbol.toLowerCase().indexOf(val.toLowerCase()) > -1
+            })
+            this.showChoseBox = false
+            this.$emit("input", curToken)
+        },
+        clear() {
+            this.queryWord = ''
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.coin-select {
+	position: relative;
+}
+.select {
+	cursor: pointer;
+	height: 48px;
+	border: 1px solid var(--border-color-base);
+	border-radius: 12px;
+	display: flex;
+	align-items: center;
+	padding: 12px 16px;
+	span {
+		font-size: 16px;
+		font-family: FontMedium;
+		text-align: left;
+		color: var(--text-color-secondary);
+		line-height: 20px;
+		align-self: flex-end;
+	}
+	.coin-name {
+		margin-left: 10px;
+		margin-right: 4px;
+		font-size: 16px;
+		color: var(--text-color-secondary);
+		line-height: 20px;
+		align-self: center;
+	}
+
+	.icon-down {
+		width: 20px;
+		height: 20px;
+		margin-left: auto;
+		transition: 0.3s;
+		transform-origin: center center;
+	}
+	.icon-down.active {
+		transform: rotate(180deg);
+	}
+}
+.coin-type {
+	width: 24px;
+	height: 24px;
+}
+.drop-down {
+	margin-top: 4px;
+	// width: 425px;
+	background: var(--drop-down-bg-color);
+	border-top-left-radius: 6px;
+	border-top-right-radius: 6px;
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	min-height: fit-content;
+	z-index: 5000;
+	.search {
+		margin: 20px;
+		position: relative;
+		input {
+			outline: none;
+			display: block;
+			width: 100%;
+			height: 50px;
+			background: #ffffff;
+			border: 1px solid var(--border-color-base);
+			border-radius: 6px;
+			padding-left: 56px;
+			font-size: 18px;
+			font-family: Font;
+
+			text-align: left;
+			color: var(--text-color);
+			line-height: 18px;
+		}
+		input:focus {
+			border: 1px solid var(--primary-color);
+		}
+		input::placeholder {
+			font-size: 16px;
+			font-family: Font;
+
+			text-align: left;
+			color: #c0c3cc;
+			line-height: 16px;
+		}
+		.img {
+			position: absolute;
+			top: 50%;
+			left: 16px;
+			width: 24px;
+			height: 24px;
+			transform: translateY(-50%);
+		}
+		.clear {
+			width: 20px;
+			height: 20px;
+			position: absolute;
+			top: 50%;
+			right: 16px;
+			transform: translateY(-50%);
+		}
+	}
+	ul {
+		padding: 0 16px;
+		height: 50vh;
+		overflow: auto;
+		li {
+			padding: 12px 0;
+			display: flex;
+			align-items: center;
+			cursor: pointer;
+			span {
+				font-size: 16px;
+				font-family: FontMedium;
+				text-align: left;
+				color: var(--text-color-placeholder);
+				line-height: 16px;
+			}
+			.name {
+				margin-left: 10px;
+				margin-right: 6px;
+				font-size: 18px;
+				font-family: FontMedium;
+
+				text-align: left;
+				color: var(--text-color);
+				line-height: 18px;
+			}
+			.status {
+				margin-left: auto;
+				font-size: 14px;
+				font-family: Font;
+
+				text-align: left;
+				color: #c0c3cc;
+				line-height: 14px;
+			}
+		}
+		li.disabled {
+			cursor: not-allowed;
+			span {
+				color: #c0c3cc;
+			}
+			.name {
+				color: #c0c3cc;
+			}
+			.status {
+				color: #c0c3cc;
+			}
+		}
+	}
+}
+
+@media screen and (min-width: 768px) {
+	.coin-select {
+		position: relative;
+		.coin-mask {
+			display: none;
+		}
+		.drop-down {
+			border-radius: 6px;
+			position: absolute;
+			right: 0;
+			left: 0;
+			top: auto;
+			bottom: auto;
+			z-index: 2000;
+			border: 1px solid var(--border-color-base);
+			box-shadow: 0px 1px 2px 0px rgba(144, 161, 184, 0.2);
+			ul {
+				height: auto;
+				max-height: none;
+			}
+		}
+	}
+}
+@media screen and (min-width: 1200px) {
+}
+</style>