udxcms 1.0.1

package/dist/components/businessComponents/NetworkSelect.vue

@@ -0,0 +1,345 @@
+<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

@@ -0,0 +1,279 @@
+<!--
+ * @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>