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

<!-- 充值 -->
<template>
    <div class="top-up-wrapper">
        <div class="content-wrapper">
            <div class="top">
                <div class="item">
                    <div class="label">
                        Crypto
                    </div>
                    <div class="content">
                        <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="label">Deposit network</div>
                    <div class="content">
                        <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>
            <div class="qrcode-wrapper">
                <canvas id="canvas"></canvas>
                <div class="address">{{tokenRechargeAddress}}</div>
                <div class="copy-btn" :data-clipboard-text="tokenRechargeAddress">copy</div>
            </div>
            <div class="tips-box">
                <img class="icon" :src="require('@/assets/svg/icon-top-up-tips-warning.svg')" >
                <div>
                    Make sure you also selected <span class="blod">BNB Smart Chain (BEP20)</span> as the network on the platform where you are withdrawing funds for this deposit. Otherwise, you'll lose your assets.
                </div>
            </div>
        </div>
        <div class="btn-done" @click="doneHandle">
            DONE
        </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 showCurrencySelect = ref(false);
let tokenRechargeAddress = ref('');

const props = defineProps({
    currentCurrencyInfo: {
        type: Object,
        default: () => {

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

const emits = defineEmits(['doneHandle']);

const createQRCode = (str) => {
    var canvas = document.getElementById('canvas')
    QRCode.toCanvas(canvas, str, {
        width: 180,
        height: 180,
        scale: 10, 
        color: {
            dark: '#000', // 二维码前景颜色
            light: '#F7F7F7' // 二维码背景颜色
        }

    }, 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();
})

watch(
    () => props.currentCurrencyInfo,
    (newVal) => {
        if (newVal) getTokenAddress();
    }
)

</script>

<style scoped lang="scss">
.top-up-wrapper {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 18px;
    position: relative;
    .content-wrapper {
        height: calc(100% - 60px);
        .top {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .item {
                width: 48%;

                .label {
                    color: #A0A0A0;
                    margin-bottom: 6px;
                }

                .content {
                    position: relative;
                    height: 44px;
                    width: 100%;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    border: 1px solid #DBDBDB;
                    padding: 12px 10px;
                    box-sizing: border-box;
                    font-weight: 500;
                    font-size: 14px;
                    img {
                        width: 20px;
                        height: 20px;
                        margin-right: 6px;
                    }
                    .down {
                        position: absolute;
                        right: 10px;
                        width: 12px;
                    }
                }
                &.position {
                    position: relative;
                    cursor: pointer;
                    .currency-pop-select {
                        position: absolute;
                        width: 375px;
                        max-height: 480px;
                        top: 66px;
                        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;
                    }
                }
            }
        }
        .qrcode-wrapper {
            margin-top: 22px;
            height: 290px;
            background: #F7F7F7;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 20px;
            box-sizing: border-box;

            .address {
                padding-bottom: 20px;
                box-sizing: border-box;
                font-weight: 500;
                font-size: 15px;
                height: 38px;
            }

            #canvas {
                margin-top: -25px;
            }

            .copy-btn {
                height: 40px;
                width: 160px;
                border-radius: 1000px;
                border: 1px solid #1D9BF0;
                font-weight: 600;
                font-size: 16px;
                color: #1D9BF0;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
            }
        }
        .tips-box {
            margin-top: 18px;
            font-size: 14px;
            border-radius: 8px;
            background: #FCF5E5;
            padding: 12px 10px;
            box-sizing: border-box;
            display: flex;
            align-items: flex-start;
            .icon {
                margin-right: 10px;
            }
            .blod {
                color: red;
                font-weight: 500;
            }
        }
    }
    .btn-done {
        background: #1D9BF0;
        width: 100%;
        height: 46px;
        text-align: center;
        border-radius: 1000px;
        font-weight: 600;
        font-size: 16px;
        color: #fff;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
}
</style>