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

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

        <v-head :title="'Deposit'"></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_symbol }}</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.token_chain }}</span> -->
                        <span>BNB Smart Chain (BEP20)</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="tips-icon">
                    <img :src="require('@/assets/svg/icon-top-up-tips-warning.svg')" alt="">
                </div>
                <div class="tips-content">
                    <p>Make sure you also selected </p>
                    <p style="color: red;">BNB Smart Chain (BEP20) </p>
                    <p>as the Network on the platform where you are withdrawing funds for this deposiit. Otherwise,
                        you'll lose your assets.</p>
                </div>
            </div>
        </div>

        <!-- 底部 -->
        <div class="footer">
            <a-button class="confirm-btn" type="primary" shape="circle" :loading="state.loading" @click="clickDone">Done
            </a-button>
        </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 { getTokenRechargeAddress } from "@/http/pay";
import { message } from 'ant-design-vue';
import Report from "@/logcenter/log";
import { syncChainTokenRechargeRecord } from "@/http/publishApi";


let top_up_info = inject('top_up_info')

const router = useRouter()
var QRCode = require('qrcode')
var ClipboardJS = require('clipboard')
let state = reactive({
    token_address: ''
})
const asyncTokenRechRecord = (cb) => {
    syncChainTokenRechargeRecord({
        params: {
            currencyCode: top_up_info.currency_code
        }
    }).then(res => {
        state.loading = false
        switch (res.code.toString()) {
            case "0":
                router.back()
                break
            default:
                // message.error(res.msg)
                break
        }
    })
}

const clickDone = () => {
    state.loading = true
    asyncTokenRechRecord()
}

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(() => {
    Report.reportLog({
        pageSource: Report.pageSource.denetSelector,
        businessType: Report.businessType.pageView,
    });
    getTokenRechargeAddress({
        params: {
            "tokenChain": top_up_info.token_chain
        },
    }).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%;
    overflow-y: auto;

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

        .area-input-1 {
            

            .token {
                
            }

            .net {
                margin-top: 12px;
            }

            .token,
            .net {


                .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: 12px;

            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: #1D9BF0;

                border: 1px solid #1D9BF0;
                border-radius: 100px;

            }
        }

        .tips {
            margin-top: 12px;
            font-size: 13px;
            height: 118;
            overflow: auto;
            background: #FCF5E5;
            display: flex;
                padding: 10px;
                border-radius: 10px;

            .tips-icon {
            
                width: 30px;
                img {
                    width: 20px;
                    height: 20px;
                }
            }

            .tips-content {
                flex: 1;
            }

            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;
            border-radius: 100px;
            background: #1D9BF0;
            font-weight: 600;
            font-size: 18px;
            color: #fff;

            cursor: pointer;
        }
    }
}
</style>