de-net/src/view/iframe/publish/components/top-up2.vue

<!-- 充值 -->
<template>
    <div class="token-content">
        <div class="item">
            <div class="token-l">Recommended Deposit</div>
            <div class="token-r">
                <img
                    class="icon"
                    :src="currentCurrencyInfo.iconPath"
                />{{currentCurrencyInfo.tokenSymbol}}
            </div>
        </div>
        <div class="item" :class="{ position: props.list.length > 1 }" @mouseover="showCurrencyLayer" @mouseout="hideCurrencyLayer">
            <div class="token-l">Network</div>
            <div class="token-r">
                <img class="icon" :src="currentCurrencyInfo.chainInfo.iconPath" />
                {{ currentCurrencyInfo.chainInfo.chainName }}
                <img v-if="props.list.length > 1" class="down" :src=" require('@/assets/svg/icon-botton-up.svg') " />
            </div>
            <div class="currency-pop-select" v-show="showCurrencySelect">
                <currency-select
                    :list="props.list"
                    @selectCurrency="selectCurrency">
                </currency-select>
            </div>
        </div>
        <div class="item none">
            <div class="token-l">Address</div>
        </div>
        <div class="qrCode">
            <div class="canvas">
                <canvas id="canvas"></canvas>
            </div>
            <div class="code">
                <div class="address">{{tokenRechargeAddress}}</div>
                <div class="copy-btn" :data-clipboard-text="tokenRechargeAddress">copy</div>
            </div>
        </div>
        <div class="desc">Make sure you also selected <span class="blod">{{ currentCurrencyInfo.chainInfo.chainName }}</span> as the network on the platform where you are withdrawing funds for this deposit. Otherwise, you'll lose your assets.</div>
    </div>
</template>

<script setup>
/* eslint-disable */
import { defineProps, defineEmits, onMounted, ref, watch } from "vue";
import { getTokenRechargeAddress } from "@/http/pay";
import { ElMessage } from 'element-plus'
import currencySelect from "@/view/components/currency-select.vue";

let QRCode = require('qrcode')
let ClipboardJS = require('clipboard')

let tokenRechargeAddress = ref('');
let showCurrencySelect = ref(false);
const props = defineProps({
    currentCurrencyInfo: {
        type: Object,
        default: () => {

        }
    },
    asyncIng: {
        type: Boolean,
        default: false
    },
    list: {
        type: Array,
        default: []
    },
})

const emits = defineEmits(['topUpDone', 'selectCurrency']);

const createQRCode = (str) => {
    var canvas = document.getElementById('canvas')
    QRCode.toCanvas(canvas, str, {
        width: 130,
        height: 130,
        scale: 1,
        color: {
            dark: '#000', // 二维码前景颜色
            light: '#fff' // 二维码背景颜色
        }
    }, function (error) {
        if (error) console.error(error)
        console.log('success!');
    })
}
const copyToken = () => {
    var clipboard = new ClipboardJS('.copy-btn');
    clipboard.on('success', function (e) {
        ElMessage({
            message: 'copy success',
            grouping: true,
            type: 'success',
            offset: -16,
            appendTo: document.body

        })
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    clipboard.on('error', function (e) {
        ElMessage({
            message: 'copy error',
            grouping: true,
            type: 'error',
            offset: -16
        })
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
}

const selectCurrency = (params) => {
    showCurrencySelect.value = false;
    emits('selectCurrency', params, false);
}

const showCurrencyLayer = () => {
    if (props.list.length > 1) {
        showCurrencySelect.value = true;
    }
}

const hideCurrencyLayer = () => {
    showCurrencySelect.value = false;
}

const doneHandle = () => {
    emits('topUpDone', {});
}

const getTokenAddress = () => {
    getTokenRechargeAddress({
        params: {
            tokenChain: props.currentCurrencyInfo.tokenChain
        },
    }).then((res) => {
        if(res.code == 0) {
            if (res.data && res.data.rechargeAddress) {
                tokenRechargeAddress.value = res.data.rechargeAddress;
                createQRCode(res.data.rechargeAddress)
                copyToken()
            }
        }    
    })
}

onMounted(() => {
    getTokenAddress();
})

</script>

<style scoped lang="scss">
.token-content {
    padding: 0 16px;
    margin-bottom: 16px;
    border-radius: 20px;
    border: 1px solid #E6E6E6;
    .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        clear: both;
        height: 42px;
        box-shadow: inset 0px -1px 0px #E6E6E6;
        &.none {
            box-shadow: unset;
        }
        .token-l {
            font-size: 15px;
            font-weight: 400;
            color: #707070;
        }
        .token-r {
            font-size: 16px;
            font-weight: 500;
            .down {
                width: 9px;
                margin-left: 4px;
            }
        }
        img {
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-right: 6px;
        }
        &.position {
            position: relative;
            cursor: pointer;
            .currency-pop-select {
                position: absolute;
                width: 375px;
                max-height: 480px;
                top: 36px;
                right: 0px;
                z-index: 1000;
                box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
                background-color: #fff;
                border-radius: 20px;
                overflow-y: scroll;
            }
        }
    }
    .desc {
        color: #A9A9A9;
        font-size: 12px;
        font-weight: 400;
        margin-bottom: 20px;
        span {
            color: #ff0016;
            font-weight: bold;
        }
    }
    .qrCode {
        display: flex;
        margin-bottom: 12px;
        .canvas {
            overflow: hidden;
            width: 130px;
            height: 130px;
            canvas {
                transform: scale(1.24);
            }
        }
        .code {
            flex: 1;
            padding: 0 20px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            .address {
                font-size: 16px;
                font-weight: 500;
                line-height: 25px;
                margin-bottom: 20px;
                word-break: break-all;
            }
            .copy-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                width: 100%;
                height: 40px;
                color: #1D9BF0;
                font-size: 17px;
                font-weight: 600;
                text-align: center;
                border: 1px solid #1D9BF0;
                border-radius: 40px;
            }
        }
    }
}
</style>