2

李凌

2025-10-22 b1a373f220bcafea8f41fa735b42d4eeafb2ee4e

 src/views/cryptos/Recharge/rechargePage.vue

New file
@@ -0,0 +1,345 @@
<template>
    <div id="cryptos">
        <div class="rechargePage box-border px-30 font-28">
            <assets-head goHome="ture" :title="$t('快速充币')">
                <van-icon name="orders-o" @click="openRecord" class="list-icon"></van-icon>
            </assets-head>
            <div class="mt-30 w-full text-center font-36 textColor">{{ coin.toUpperCase() + ' ' + $t('充值') }}</div>
            <div class="pl-30 pt-30 pr-30 text-center flex flex-col items-center justify-center mt40">
                <div>
                    <canvas id="QRcodeCanvas" v-show="!imgshow"></canvas>
                    <img :src="img" alt="" v-show="imgshow" class="QRcodeImg" />
                </div>
                <div class="code-btn btnMain text-center font-26 text-white" @click="download('#QRcodeCanvas')">{{
                    $t('保存二维码') }}</div>
            </div>
            <div class="border-light-grey"></div>
            <div class="pl-10 pr-10 font-28">
                <div class=" flex flex-col items-center justify-center font-28">
                    <div class="textColor font-30 mt50" style="word-break: break-all;" ref="address">{{ address }}</div>
                    <div @click="copy(address)"
                        class="font-26 border-solid-grey text-center code-btn rounded-6 textColor">
                        {{ $t('复制地址') }}</div>
                </div>
                <!-- <div>
                    <div class="font-26 textColor font-28">{{ $t('转出地址(选填)') }}</div>
                    <div style="position: relative;" class="mt-26 mb-20 font-28">
                        <input style="padding-right: 80px;" v-model="enterAddress"
                            class="input-view font-26 textColor inputBackground" :placeholder="$t('请输入转出地址')" />
                        <div style="position: absolute;right: 10px;top: 50%;color: #1194F7;transform: translateY(-50%)"
                            @click="enterAddress = address">
                            {{ $t('粘贴') }}</div>
                    </div>
                </div> -->
                <div class="mb-20">
                    <div class="font-28 textColor">{{ $t('充币数量') }}</div>
                    <div>
                        <input v-model="amount" class="input-view w-full font-28 textColor inputBackground"
                            :placeholder="$t('请输入充币数量')" />
                    </div>
                </div>
                <div>
                    <div class="font-28 textColor">{{ $t('链名称') }}</div>
                    <div class="flex ">
                        <div :class="blockchainIndex == index ? 'borderMain colorMain' : 'border-solid-dark-grey border-r-grey'"
                            class="mr-20 flex-wrap font-32 text-center name-btn rounded textColor"
                            v-for="(item, index) in chainList" :key="index" @click="changeBlockchain(index)">{{
                                item.blockchain_name }}</div>
                    </div>
                </div>
                <div>
                    <div class="font-28 textColor">{{ $t('付款凭证（上传支付详情截图）') }}</div>
                    <div class="img-box">
                        <van-uploader accept="image/*" v-model="fileList" multiple :max-count="1"
                            :before-read="beforeRead" :after-read="afterRead" />
                    </div>
                </div>
            </div>
            <div class="hint-box">
                <div class="pl-30 pr-30">
                    <!-- <div class="font-30 mb-27 textColor">{{ $t('重要提示') }}</div> -->
                    <!-- <div class="font-28 text-grey" v-html="tip"></div> -->
                    <button class="btnMain text-white next-btn font-30 rounded-lg" @click="nextBtn">{{ $t('下一步')
                        }}</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import QRCode from "qrcode";
import { Icon } from 'vant';
import { Uploader, showToast } from 'vant';
import Axios from "@/service/recharge.js";
import assetsHead from "@/components/Transform/assets-head/index.vue";
import { _uploadImage } from "@/service/upload.api.js";
import { BASE_URL } from "@/config";
export default {
    name: "rechargePage",
    components: {
        [Uploader.name]: Uploader,
        [Icon.name]: Icon,
        assetsHead,
    },
    data() {
        return {
            BASE_URL,
            tip: '',
            fileList: [],
            address: "",
            nowUrl: "",
            session_token: "",
            amount: "", //充币数量
            from: "", //客户转出地址
            coin: "", //币种
            blockchainIndex: 0,
            blockchain_name: "",
            chainList: [],
            QRCodeMsg: "",
            imgshow: false,
            img: "",
            enterAddress: ""
        }
    },
    mounted() {
        //获取域名
        this.nowUrl = 'https://' + window.location.hostname;
        this.coin = this.$route.query.symbol;
        this.getData();
        this.getToken();
        // https://www.wbfjsfhjdbsh.site/wap/api/cms!get.action?language=en&content_code=002&token=fe3c35583f8a4f12a86b0c13faa75ee6
        Axios.getRechargeTips({
            language: this.$i18n.locale,
            token: this.$store.state.user.userInfo.token,
            content_code: '002',
        }).then(res => {
            console.log('充值提示', res)

            this.tip = res?.content || '';
        })
    },
    methods: {
        openRecord() {
            this.$router.push({
                path: '/cryptos/assetsCenter/rechargeWithdrawRecord',
                query: {
                    back: "1"
                }
            });
        },
        getData() {
            Axios.getBlock({
                coin: this.coin
            }).then((res) => {

                this.chainList = res;
                this.address = res[0].address;
                this.blockchain_name = res[0].blockchain_name;
                this.getQRCode();

            });
        },
        changeBlockchain(index) {
            this.blockchainIndex = index;
            this.address = this.chainList[this.blockchainIndex].address;
            this.blockchain_name = this.chainList[this.blockchainIndex].blockchain_name;
            this.getQRCode();
        },
        getToken() {
            Axios.getRechargeToken().then((res) => {
                this.session_token = res.session_token;
            });
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        copy(val) {
            if (!val) {
                return
            }
            navigator.clipboard.writeText(val).then(() => {
                showToast(this.$t('复制成功'));
            })
        },
        //上传前
        beforeRead(file) {
            let types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/bmp', 'image/png']
            const isImage = types.includes(file.type);
            if (!isImage) {
                showToast(this.$t('上传图片只能是JPG、JPEG、gif、bmp、PNG格式!'));
                return false;
            }
            return true;

        },
        //上传完成
        async afterRead(file) {
            file.status = 'uploading'
            file.message = this.$t('uploading')

            _uploadImage(file).then(data => {
                file.status = 'success'
                file.message = this.$t('uploadSuccess')
                showToast(this.$t('uploadSuccess'));
                file.resURL = data
            }).catch(err => {
                file.status = 'failed'
                file.message = this.$t('uploadFailed')
            })
        },
        //生成二维码
        getQRCode() {
            let opts = {
                errorCorrectionLevel: "H",//容错级别
                type: "image/png",//生成的二维码类型
                quality: 0.3,//二维码质量
                margin: 4,//二维码留白边距
                width: 200,//宽
                height: 200,//高
                text: "http://www.xxx.com",//二维码内容
                color: {
                    dark: "#333333",//前景色
                    light: "#fff"//背景色
                }
            };
            this.QRCodeMsg = this.address; //生成的二维码为URL地址js
            let msg = document.getElementById("QRcodeCanvas");    // 将获取到的数据（val）画到msg（canvas）上
            QRCode.toCanvas(msg, this.QRCodeMsg, opts, function (error) {
                console.log(error)
            });
            // 将canvas转成图片格式，可以长按保存
            this.img = msg.toDataURL('image/png');
            this.imgshow = true;
        },
        download(selector) {
            // 通过 API 获取目标 canvas 元素
            const canvas = document.querySelector(selector);
            // 创建一个 a 标签，并设置 href 和 download 属性
            const el = document.createElement('a');
            // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
            el.href = canvas.toDataURL();
            el.download = '123';

            // 创建一个点击事件并对 a 标签进行触发
            const event = new MouseEvent('click');
            el.dispatchEvent(event);
        },
        nextBtn() {
            if (!this.amount) {
                showToast(this.$t('请输入数量'));
                return;
            }

            let numReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
            if (!numReg.test(this.amount)) {
                showToast(this.$t('请输入数字'));
                return;
            }
            if (this.amount) {
                Axios.rechargeApply({
                    session_token: this.session_token,
                    amount: this.amount,
                    from: this.enterAddress,
                    blockchain_name: this.blockchain_name,
                    img: this.fileList[0].resURL,
                    coin: this.coin,
                    channel_address: this.address,
                    tx: "",
                }).then((res) => {
                    this.$router.push({
                        path: "/cryptos/recharge/rechargeSubmit"
                    });

                }).catch((error) => {
                    if (error.code === 'ECONNABORTED') { showToast(this.$t('网络超时！')); }
                    else if (error.msg !== undefined) { showToast(this.$t(error.msg)); }
                    this.getToken();
                });
            } else {
                showToast(this.$t('请输入充币数量'));
            }
        },
    }
}
</script>
<style lang="scss" scoped>
@import "@/assets/init.scss";

#cryptos {
    background-color: $mainbgWhiteColor;

    .rechargePage {
        width: 100%;
        box-sizing: border-box;

        ::deep .van-uploader__upload {
            background-color: $inp-b !important;
        }
    }

    .code-btn {
        width: 280px;
        height: 70px;
        margin-top: 36px;
        margin-bottom: 56px;
        line-height: 70px;
    }

    .mt50 {
        margin-top: 50px;
    }

    .mt70 {
        margin-top: 70px;
    }

    .input-view {
        height: 100px;
        width: 100%;
        border: none;
        outline: none;
        padding-left: 20px;
        box-sizing: border-box;
    }

    .name-btn {
        width: 210px;
        height: 80px;
        line-height: 80px;
        margin-top: 30px;
        margin-bottom: 50px;
    }

    .img-box {
        margin-top: 32px;
        margin-bottom: 90px;


    }

    .hint-box {
        // background-color: $tab_background;
        background-color: $inp-b;
        padding-top: 35px;
        padding-bottom: 52px;
    }

    .mtb27 {
        margin: 27px 0;
    }

    .next-btn {
        width: 100%;
        height: 100px;
        margin-top: 35px;
        border: none;
        outline: none;
    }

    .list-icon {
        color: $text_color;
        font-size: 36px !important;
    }
}
</style>