From b1a373f220bcafea8f41fa735b42d4eeafb2ee4e Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Wed, 22 Oct 2025 14:06:15 +0800
Subject: [PATCH] 2
---
src/views/cryptos/Recharge/rechargePage.vue | 345 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 345 insertions(+), 0 deletions(-)
diff --git a/src/views/cryptos/Recharge/rechargePage.vue b/src/views/cryptos/Recharge/rechargePage.vue
new file mode 100644
index 0000000..edbf4c5
--- /dev/null
+++ b/src/views/cryptos/Recharge/rechargePage.vue
@@ -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>
--
Gitblit v1.9.3