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

<!-- 充值 -->
<template>
    <div class="top-up-wrapper">
        <div class="content-wrapper">
            <div class="top">
                <div class="item">
                    <div class="label">
                        Token
                    </div>
                    <div class="content">
                        <img
                            class="icon"
                            :src="currentCurrencyInfo.iconPath"
                        />{{currentCurrencyInfo.tokenSymbol}}
                    </div>  
                </div>
                <div class="item">
                    <div class="label">
                        Network
                    </div>
                    <div class="content">
                        <img
                            class="icon"
                            :src="require('@/assets/svg/icon-BNB.svg')"
                        />
                        BNB Chain
                    </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 :src="require('@/assets/svg/icon-top-up-tips-warning.svg')" >
                Make sure you also selected BNB Smart Chain (BEP20) as the Network on the platform where you are withdrawing funds for this deposiit. Otherwise, you'll lose your assets.
            </div>
        </div>
        <a-button class="btn-done" 
            type="primary" 
            shape="circle" 
            :loading="asyncIng" 
            @click="doneHandle">
            DONE
        </a-button>
    </div>
</template>

<script setup>
/* eslint-disable */
import { defineProps, defineEmits, onMounted, ref } from "vue";
import { getTokenRechargeAddress } from "@/http/pay";
import { message } from 'ant-design-vue';

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

let tokenRechargeAddress = ref('');

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

        }
    },
    asyncIng: {
        type: Boolean,
        default: false
    }
})

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) {
        message.success('copy success');
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    clipboard.on('error', function (e) {
        message.error('copy error');
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
}


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">
.top-up-wrapper {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 18px;
    position: relative;
    .content-wrapper {
        height: calc(100% - 60px);
        overflow-y: scroll;
        .top {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .item {
                width: 48%;

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

                .content {
                    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;
                    }
                }

            }
        }
        .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;
        }
    }
    .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;
        cursor: pointer;
    }
}
</style>