udxcms 1.0.8 → 1.0.10

package/dist/components/businessComponents/NetworkSelect.vue

@@ -1,345 +0,0 @@
-<template>
-	<div class="cms-network-select" :class="[mode]" v-if="networks.length > 0">
-		<div class="network-box">
-			<div :class="['select', !isShowLabel && 'no-label']" @click="toggleVisible">
-				<div class="chain-wrapper">
-					<img
-						v-show="curChain.networkLogo"
-						class="coin-type"
-						:src="curChain.networkLogo"
-						alt=""
-					/>
-					<span class="chain-name" v-if='isShowLabel'>
-						{{ curChain.label || curChain.name || $t("wallet_common_all_networks") }}
-					</span>
-				</div>
-				<a-icon
-					type="caret-down"
-					:class="{ active: dropMenuVisible }"
-				/>
-			</div>
-			<div class="drop-down" v-show="dropMenuVisible">
-				<ul>
-                    <li class='network-title'>{{$t('wallet_withdraw_network')}}</li>
-					<li
-						v-for="item in networks"
-						:key="item.chainId"
-						:class="{
-							active: item.chainId == curChain.chainId,
-						}"
-						@click="change(item)"
-					>
-						<img class="coin-type" :src="item.networkLogo" alt="" />
-						<span class="name">{{ item.label || item.name }}</span>
-					</li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-/**
- * 网络选择组件(视图组件)
- * 网络列表，默认网络ID，均从 props 传入。
- */
-export default {
-	name: "NetworkSelect",
-	props: {
-		networks: {
-			type: Array,
-			default: () => [],
-		},
-		defaultChainId: {
-			type: Number,
-			default: () => null,
-		},
-		mode: {
-			// normal,black
-			type: String,
-			default: () => "normal",
-		},
-        isShowLabel: {
-            type: Boolean,
-            default: true
-        },
-        chainChangeLogin: {
-            type: Boolean,
-            default: false
-        }
-	},
-	data() {
-		return {
-			chainId: null,
-			dropMenuVisible: false,
-		};
-	},
-	watch: {
-		defaultChainId(val) {
-			this.chainId = val;
-		},
-		// TODO 删掉，暂时用来查看哪些地方修改了全局id。
-		// "$store.state.chainId"(val) {
-		// 	this.chainId = val;
-		// },
-	},
-	created() {
-		this.chainId = this.defaultChainId;
-	},
-	computed: {
-        netWorkDefaultChainId() {
-            return this.$store.state.netWorkDefaultChainId || ''
-        },
-        netWorkChainId() {
-            return  this.$store.state.wallet.netWorkChainId || ''
-        },
-        walletChainId() {
-            return this.$store.state.wallet.walletChainId || ''
-        },
-		curChain() {
-			let result = {};
-            // let reqChainIds = [this.netWorkDefaultChainId, this.chainId]
-            // let networks = this.networks.filter(v => reqChainIds.includes(v.chainId))
-            // result = networks[0] || networks[1]
-
-			if (this.chainId) {
-                let filterChainId  = this.netWorkDefaultChainId || this.chainId
-				result = this.networks.find((item) => item.chainId === filterChainId) || null;
-			}
-			if (!result) {
-                let secondChainId  = this.chainId
-                result = this.networks.find((item) => item.chainId === secondChainId) || null;
-			}
-            if  (!result) {
-                result = this.networks[0] || {};
-                this.$emit("change", result.chainId);
-            }
-			return result;
-		},
-	},
-	mounted() {
-		document.addEventListener("click", (e) => {
-			// 组件之外点击
-			if (!this.$el.contains(e.target)) {
-				this.dropMenuVisible = false;
-			}
-		});
-	},
-	methods: {
-		change(item) {
-			this.dropMenuVisible = false;
-			// 有变化才响应，新增btc钱包网络类型判断
-			if (item.chainId !== this.chainId || this.netWorkDefaultChainId && this.netWorkDefaultChainId != item.chainId) {
-                let currentChainId = item.chainId
-                let checkNetworkChainId  = this.netWorkChainId || this.walletChainId
-                if (checkNetworkChainId) {
-                    let wallets = []
-
-                    const networkDetail = this.$store.getters.filterNetworkItem(
-                        checkNetworkChainId,
-                        "L1"
-                    ) || {};
-                    const currentNetwork = this.$store.getters.filterNetworkItem(
-                        currentChainId,
-                        "L1"
-                    ) || {}
-                    wallets = [networkDetail.chainType, currentNetwork.chainType]
-                    if (wallets.includes('btc') && wallets[0] != wallets[1] && this.walletChainId && this.chainChangeLogin) {
-                        this.$emit("change", this.chainId);
-                        this.$store.dispatch('isNeedChangeWallet', item.chainId)
-                    }
-                } else {
-                     // 未登录下的网络登录判断处理
-                    localStorage.removeItem('selectedWallet')
-                    localStorage.removeItem('selectedIcon')
-                }
-				// TODO: 需要删除下一行，业务逻辑应该移到组件之外，历史原因目前阶段临时保留。
-				this.$store.commit("setDefaultChainId", item.chainId);
-                this.chainId = item.chainId;
-				this.$emit("change", this.chainId);
-			}
-		},
-		toggleVisible() {
-			this.dropMenuVisible = !this.dropMenuVisible;
-		},
-	},
-};
-</script>
-
-<style lang="less">
-.cms-network-select {
-	position: relative;
-	&.black {
-		.select {
-			border-color: #222734;
-			span,
-			.icon-down, .anticon {
-				color: var(--white);
-			}
-		}
-
-		.drop-down {
-			background: #222734;
-			color: var(--white);
-            min-width: fit-content;
-            width: 100%;
-			ul {
-                li.network-title {
-                    display: none;
-                }
-				li:hover {
-					background-color: rgba(255, 255, 255, 0.04);
-				}
-				li.active {
-					color: var(--white);
-				}
-			}
-		}
-	}
-	.select {
-		cursor: pointer;
-		// width: 208px;
-		height: 36px;
-		// border: 1px solid #222734;
-		border: 1px solid var(--border-color-base);
-		border-radius: var(--border-radius-base);
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 8px;
-        &.no-label {
-            border-radius: 20px;
-            border: 1px  solid var(--border-color-base);
-        }
-		.chain-wrapper{
-			display: flex;
-			align-items: center;
-		}
-		.chain-name {
-			font-size: 14px;
-			margin-left: 10px;
-			white-space: nowrap;
-		}
-		.anticon {
-			margin-left: 8px;
-			font-size: 12px;
-			transition: 0.3s;
-			transform-origin: center center;
-			&.active {
-				transform: rotate(180deg);
-			}
-		}
-	}
-
-	.coin-type {
-		width: 24px;
-		height: 24px;
-		border: 0;
-	}
-	.drop-down {
-		// width: 208px;
-		// padding: 8px 12px;
-		position: absolute;
-		top: 44px;
-		z-index: 9;
-		// background: #222734;
-		background-color: var(--popup-bg);
-		border-radius: 6px;
-		overflow: hidden;
-		box-shadow: var(--box-shadow-base);
-        min-width: fit-content;
-		ul {
-			li {
-				height: 40px;
-				padding: 8px 12px;
-				display: flex;
-				align-items: center;
-				cursor: pointer;
-
-				overflow: hidden;
-				text-overflow: ellipsis;
-                min-width: fit-content;
-				span {
-					font-size: 14px;
-					line-height: 9px;
-					margin-left: 10px;
-                    white-space: nowrap;
-				}
-				&:hover,
-				&.active {
-					background-color: var(--select-item-bg);
-					color: var(--link-color);
-				}
-			}
-		}
-	}
-
-	.market-bg {
-		background: #3a3a3a;
-	}
-}
-@media screen and (max-width: 768px) {
-    .cms-network-select {
-        .network-box {
-            .drop-down {
-                position: fixed;
-                top: 50%;
-                left: 50%;
-                transform: translateY(-50%) translatex(-50%);
-                min-height: 175px;
-                border-radius: var(--border-radius-base);
-                background: var(--popup-bg);
-                overflow: hidden;
-                width: calc(100% - 50px);
-                ul {
-                    li.network-title {
-                        display: block;
-                        text-align: center;
-                        padding: 16px 0;
-                        text-align: center;
-                        font-family: Font;
-                        font-size: 20px;
-                    }
-                    li {
-                        padding: 10px 24px;
-                        display: flex;
-                        align-items: center;
-                        height: fit-content;
-                        .coin-type {
-                            height: 28px;
-                            width: 28px;
-                        }
-                        span {
-                            margin-left: 12px;
-                            font-size: 14px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-    .cms-network-select .select {
-		cursor: pointer;
-		// width: 208px;
-		height: 30px;
-		padding: 4;
-        img.coin-type {
-            height: 22px;
-            width: 22px;
-        }
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .cms-network-select {
-        .network-box {
-            .drop-down {
-                width: 100%;
-                ul {
-                    li.network-title {display: none}
-                }
-            }
-        }
-    }
-}
-</style>

package/dist/components/businessComponents/Networklist.vue

@@ -1,279 +0,0 @@
-<!--
- * @Descripttion: 
- * @version: 
- * @Author: 
- * @Date: 2021-10-26 16:50:22
- * @LastEditors: Lewis
- * @LastEditTime: 2022-08-06 18:14:46
--->
-<template>
-    <div class='network-box' :style="{visibility: chainShow ? 'visible': 'hidden'}">
-        <div class="coin-select" :style="{visibility: chainShow ? 'visible': 'hidden'}">
-            <div class="select">
-                <div class='chose-top'>
-                    <img v-show="defaultValue.icon" class="coin-type" :src="defaultValue.icon" alt="">
-                    <span class="coin-name">{{defaultValue.chainName || $t('wallet_common_all_networks')}}</span>
-                </div>
-                <img class='network-icon' :src="require('../../assets/img/network-icon.svg')" />
-                <slot></slot>
-                <div class="drop-down">
-                    <ul>
-                        <li v-for="item in netWorkList" :key="item.chainId" :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>
-</template>
-
-<script>
-    let closeFn
-    import { getTradeDefaultChainId } from '../../utils/index'
-    import _ from 'lodash';
-    export default {
-        name: 'ChainNetWork',
-        props: {
-            value: {
-                type: Boolean,
-                default: true
-            }
-        },
-        computed: {
-            layer1NetworkList() {
-                return this.$store.getters.layer1NetworkList;
-            },
-            networkNeedChange() {
-                return this.$route.name + this.$store.state.wallet.walletChainId
-            },
-            networkListChange() {
-                let saveDataType = this.$route.name == 'lending-home' ? 'lending' : 'usdr'
-                return this.$store.getters['lending/networkList'](saveDataType)
-            }
-        },
-        watch: {
-            $route: {
-                handler(val) {
-                    this.type = val.name
-                },
-                immediate: true
-            },
-            networkListChange(val) {
-                if (!this.netWorkList.length) this.setChainArrLists()
-            },
-            networkNeedChange(val) {
-                this.setChainArrLists()
-            },
-            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)
-                    }
-                })
-            }
-        },
-        created() {
-            this.init()
-        },
-        mounted() {
-            // console.log('lending-route-name', this.$route.name)
-            // this.setChainArrLists()
-        },
-        data() {
-            return {
-                chainShow: true,
-                chainId: '',
-                chainInitId: '',
-                netWorkList: [],
-                chainShowArr: ['lending-home', 'lending-usdr'],
-                defaultValue: {},
-                changeNetWorkBox: false,
-                setchainIdAllow: true,
-                timer: null,
-                type: '',
-                isShowList: false
-            }
-        },
-        methods: {
-            init() {
-                this.chainId = this.$store.state.wallet.walletChainId
-                $Vue.$bus.$on('refresh-heade-networklist', () => {
-                    this.setChainArrLists()
-                })
-            },
-            select(item) {
-                if (this.setchainIdAllow) {
-                    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
-                    let routeName = this.$route.name
-                    let saveDataType = routeName == 'lending-home' ? 'lending' : 'usdr'
-                    this.$store.commit('lending/setNetworkId', {
-                        type: saveDataType,
-                        chainId: val
-                    })
-                    let networkConfig = this.$store.getters['lending/networkList'](saveDataType)
-                    this.$store.dispatch('lending/initNetworkConfig', networkConfig && networkConfig.networkList || [])
-                }
-            },
-            async setChainArrLists() {
-                if (!this.layer1NetworkList.length) {
-                    await this.$store.dispatch('fetchNetworkList')
-                }
-                try {
-                    // 网络配置
-
-                    let saveDataType = this.$route.name == 'lending-home' ? 'lending' : 'usdr'
-                    let netWorkConfig = this.$store.getters['lending/networkList'](saveDataType)
-                    this.chainInitId = this.chainId = netWorkConfig.chainId
-                    let isExitChainId = false
-                    this.netWorkList = netWorkConfig.networkList.map(v => {
-                        let network = this.layer1NetworkList.find(item => item.chainId == v.chainId)
-                        v.icon = network.networkLogo
-                        v.chainName = network.name
-                        if (v.chainId == this.chainInitId) {
-                            isExitChainId = true
-                            this.defaultValue = v
-                        }
-                        return v
-                    })
-                    console.log('this.chainInitId', netWorkConfig.chainId, this.netWorkList)
-                } catch (error) {
-                    this.netWorkList = []
-                }
-            }
-        }
-    }
-</script>
-
-<style lang="less" scoped>
-    .network-box {
-        margin-right: 10px;
-    }
-    .select {
-        position: relative;
-        cursor: pointer;
-        min-width: 220px;
-        height: 40px;
-        border: 0px;
-        border-radius: 20px;
-        display: flex;
-        align-items: center;
-        padding: 8px;
-        background: #FFFFFF;
-        justify-content: space-between;
-        span {
-            font-size: 14px;
-            font-family: Font;
-            text-align: left;
-            color: #222222;
-            margin-left: 10px;
-        }
-        .network-icon {
-            float: right;
-            width: 24px;
-            height: 24px;
-        }
-        .icon-down {
-            width: 24px;
-            height: 24px;
-            margin-left: auto;
-            transition: .3s;
-            transform-origin: center center;
-            color: white;
-        }
-        .icon-down.active {
-            transform: rotate(180deg);
-        }
-        .drop-down {
-            display: none;
-            min-width: 220px;
-            position: absolute;
-            padding-top: 20px;
-            z-index: 9;
-            top: 48px;
-            margin-left: -8px;
-            ul {
-                background: white;
-                border: 1px solid #EBEDF2;
-                padding: 0;
-                border-radius: 6px;
-                box-shadow: 0px 4px 12px rgba(17, 51, 83, 0.04);
-                li {
-                    // height: 40px;
-                    padding: 12px 8px;
-                    display: flex;
-                    align-items: center;
-                    cursor: pointer;
-                    span {
-                        font-size: 14px;
-                        font-family: Font;
-                        text-align: left;
-                        color: #222222;
-                        line-height: 9px;
-                        margin-left: 10px;
-                    }
-                    &:not(:last-child) {
-                        border-bottom: 1px solid #EBEDF2;
-                    }
-                }
-                li:hover {
-                    span {
-                        color: rgba(34, 34, 34, .65);
-                    }
-                }
-                li.active {
-                    span {
-                        // color: white;
-                    }
-                }
-            }
-            &:hover {
-                display: block;
-            }
-        }
-        &:hover {
-            .drop-down {
-                display: block;
-                background: yellowgreen;
-            }
-        }
-    }
-    .coin-type {
-        width: 24px;
-        height: 24px;
-        border: 0;
-    }
-</style>