de-net/src/view/popup/top-up/info.vue

<template>
    <!-- 公共组件 -->
    <div class="info">

        <v-head :title="'Top Up'"></v-head>

        <!-- 内容 -->
        <div class="content">
            <div class="area-input-1">
                <div class="token">
                    <div class="title">Token</div>
                    <div class="box">
                        <img :src="top_up_info.icon_token" alt="">
                        <span>{{ top_up_info.token }}</span>
                    </div>
                </div>

                <div class="net">
                    <div class="title">NetWork</div>
                    <div class="box">
                        <img :src="top_up_info.icon_net" alt="">
                        <span>{{ top_up_info.net }}</span>
                    </div>
                </div>
            </div>
            <div class="info">
                <canvas id="canvas"></canvas>
                <div class="txt">{{ state.token_address }}</div>
                <div class="copy-btn" :data-clipboard-text="'{{ state.token_address }}'">Copy</div>
            </div>

            <div class="tips">
                <div class="tip-title">TIPS</div>
                <p>1、请通过客户端或在线钱包将您需要充值的相应币种数目发送到该地址。</p>
                <p>2、发送完成后，系统会自动在此交易获得 相应数量确认后将该笔虚拟币充值到您在本站的账户，相应数量的确认需要大约 0.5 到 1 小时时间，请耐心等待</p>
                <p>3、同一个地址可多次充值，不影响到账。最小充值金额 0.0001。</p>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <div class="confirm-btn" @click="clickDone">
                Done
            </div>
        </div>
    </div>

</template>

<script setup>
import { onMounted, reactive, inject } from "vue";
import VHead from '@/view/popup/components/head.vue'
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { getTokenRechargeAddress } from "@/http/pay";
import { message } from 'ant-design-vue';


let top_up_info = inject('top_up_info')

const router = useRouter()
const route = useRoute()
var QRCode = require('qrcode')
var ClipboardJS = require('clipboard')
let state = reactive({
    token_address: ''
})

const clickDone = () => {
    router.back()
}

const createQRCode = (str) => {
    var canvas = document.getElementById('canvas')
    QRCode.toCanvas(canvas, str, {
        width: 150,
        height: 150,
        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) {
        console.log(1)
        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);
    });
}

onMounted(() => {
    getTokenRechargeAddress({
        params: {
            "tokenChain": top_up_info.net
        },
    }).then((res) => {
        switch (res.code.toString()) {
            case '0':
                if (res.data && res.data.rechargeAddress) {
                    state.token_address = res.data.rechargeAddress
                    createQRCode(state.token_address)
                    copyToken()
                }
                break;

            default:
                break;
        }
    })

})


</script>


<style lang='scss' scoped>
.info {
    position: relative;
    height: 100%;

    .content {
        padding: 16px 16px 0 16px;

        .area-input-1 {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;

            .token,
            .net {
                width: 165px;

                .title {
                    font-weight: 500;
                    font-size: 12px;
                    margin-bottom: 6px;
                    color: #8B8B8B;
                }

                .box {
                    border: 1px solid #DBDBDB;
                    border-radius: 8px;
                    height: 44px;
                    display: flex;
                    align-items: center;
                    padding: 0 15px 0 10px;
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: space-between;

                    img {
                        width: 20px;
                        height: 20px;
                    }

                    .up {
                        width: 13px;
                        height: 12px;
                        cursor: pointer;
                    }

                    span {
                        flex: 1;
                        margin-left: 6px;
                        font-size: 14px;
                        font-weight: 500;
                    }
                }
            }
        }

        .info {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            background: #F7F7F7;
            border-radius: 18px;
            padding-bottom: 20px;
            margin-top: 20px;

            canvas {
                margin-top: 17px;
            }

            .txt {
                margin-top: 5px;
                font-weight: 400;
                font-size: 15px;
                width: 100%;
                text-align: center;
                word-break: break-all;
            }

            .copy-btn {
                cursor: pointer;
                margin-top: 5px;
                width: 160px;
                height: 40px;
                line-height: 38px;
                text-align: center;
                font-size: 16px;
                color: #389AFF;

                border: 1px solid #389AFF;
                border-radius: 100px;

            }
        }

        .tips {
            margin-top: 14px;
            font-size: 13px;
            height: 80px;
            overflow: auto;

            .tip-title {
                color: #000000;
            }

            p {
                margin: 0;
                padding: 0;
            }
        }

    }

    .footer {
        height: 80px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;

        .confirm-btn {
            width: 335px;
            height: 46px;
            text-align: center;
            line-height: 46px;
            border-radius: 100px;
            background: #389aff;
            font-weight: 600;
            font-size: 18px;
            color: #fff;

            cursor: pointer;
        }
    }
}
</style>