<template>
|
<div class="rechargePage box-border font-26">
|
<assets-head :title="$t('快速充币')" />
|
<div class="mt-30 w-full text-center font-36 textColor">
|
{{ symbol.toUpperCase() + " " + $t("充值") }}
|
</div>
|
<div
|
class="pl-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-30 pr-30">
|
<div class="flex flex-col items-center justify-center">
|
<div class="textColor font-30 mt50" ref="address">{{ address }}</div>
|
<div
|
v-clipboard:copy="address"
|
v-clipboard:success="onCopy"
|
v-clipboard:error="onError"
|
class="font-26 border-solid-grey text-center code-btn rounded-6 textColor"
|
>
|
{{ $t("复制地址") }}
|
</div>
|
</div>
|
<!-- <div>
|
<div class="font-26 textColor">{{ $t("转出地址(选填)") }}</div>
|
<div style="position: relative" class="mt-26 mb-60">
|
<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: #2c78f8;
|
transform: translateY(-50%);
|
"
|
@click="enterAddress = address"
|
>
|
{{ $t("粘贴") }}
|
</div>
|
</div>
|
</div> -->
|
<div class="mb-60">
|
<div class="font-26 textColor">{{ $t("充币数量") }}</div>
|
<div>
|
<input
|
v-model="amount"
|
class="input-view w-full font-26 textColor inputBackground"
|
:placeholder="$t('请输入充币数量')"
|
/>
|
</div>
|
</div>
|
<div>
|
<div class="font-26 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-26 textColor">
|
{{ $t("付款凭证（上传支付详情截图）") }}
|
</div>
|
<div class="img-box">
|
<van-uploader
|
accept="image/*"
|
style="width: 100%; height: 100%"
|
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-26 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>
|
</template>
|
|
<script>
|
import QRCode from "qrcode";
|
import { Icon } from "vant";
|
import * as imageConversion from "image-conversion";
|
import { Uploader } from "vant";
|
import Axios from "@/API/recharge.js";
|
import axios from "axios";
|
import assetsHead from "@/components/assets-head";
|
//import Config from "@/config";
|
import { BASE_URL } from "@/config";
|
import { signatureGenerate } from "@/utils/signatureUtil";
|
import { mapGetters } from "vuex";
|
|
export default {
|
name: "rechargePage",
|
components: {
|
[Uploader.name]: Uploader,
|
[Icon.name]: Icon,
|
assetsHead,
|
},
|
computed: {
|
...mapGetters({
|
userInfo: "user/userInfo",
|
}),
|
},
|
state: {
|
status: 0, // 状态
|
gasObj: {}, //
|
userInfo: {
|
usercode: "", //
|
token: "", // 登录token
|
username: "",
|
perpetual_contracts_status: 0,
|
account: "", // 钱包地址
|
},
|
},
|
getters: {
|
mingStatus: (state) => state.status,
|
isToken: (state) => state.token,
|
userInfo: (state) => state.userInfo,
|
},
|
data() {
|
return {
|
BASE_URL,
|
tip: "",
|
fileList: [],
|
address: "",
|
uploadImgUrl: "",
|
nowUrl: "",
|
session_token: "",
|
amount: "", //充币数量
|
from: "", //客户转出地址
|
submitImg: "",
|
coin: "", //币种
|
blockchainIndex: 0,
|
blockchain_name: "",
|
chainList: [],
|
QRCodeMsg: "",
|
imgshow: false,
|
img: "",
|
enterAddress: "",
|
symbol: "",
|
};
|
},
|
mounted() {
|
//获取域名
|
this.nowUrl = "https://" + window.location.hostname;
|
this.coin = this.$route.query.coin;
|
this.symbol = 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.data.content;
|
})
|
.catch((err) => {
|
if (err.code === "ECONNABORTED") {
|
// this.$toast(this.$t("网络超时！"));
|
} else if (err !== undefined) {
|
// this.$toast(this.$t(err));
|
}
|
});
|
},
|
methods: {
|
getData() {
|
Axios.getBlock({
|
coin_para: this.symbol,
|
}).then((res) => {
|
this.chainList = res.page.elements
|
this.address = res.page.elements[0].address;
|
this.blockchain_name = res.page.elements[0].blockchain_name;
|
// if(this.symbol=='usdt'){
|
// this.chainList=[{
|
// address:'TFUtRvjVpRZArFhXGd5n5ZDEX3PrmudQgb',
|
// blockchain_name:'TRC20'
|
// },{
|
// address:'0xdbE11ac592416EEEa120Bf9526b16a2F6dBCE0A6',
|
// blockchain_name:'ERC20'
|
// }]
|
// }else if (this.symbol=='btc'){
|
// this.chainList=[{
|
// address:'im14x5MUw9PycfD1io7AKBjvTSxfBRUpmPc3zSP',
|
// blockchain_name:'BTC'
|
// }]
|
// }else if (this.symbol=='eth'){
|
// this.chainList=[{
|
// address:'0xdbE11ac592416EEEa120Bf9526b16a2F6dBCE0A6',
|
// blockchain_name:"ETH"
|
// }]
|
// }else if (this.symbol=='usdc'){
|
// this.chainList=[{
|
// address:'TFUtRvjVpRZArFhXGd5n5ZDEX3PrmudQgb',
|
// blockchain_name:'TRC20'
|
// },{
|
// address:'0xdbE11ac592416EEEa120Bf9526b16a2F6dBCE0A6',
|
// blockchain_name:'ERC20'
|
// }]
|
// }
|
this.address = this.chainList[0].address;
|
this.blockchain_name = this.chainList[0].blockchain_name;
|
this.getQRCode();
|
});
|
// Axios.exchange({}).then((res) => {
|
// if (res.data&&res.data.filter(item => {
|
// return item.userid == this.userInfo.usercode
|
// }).length >0) {
|
// Axios.user_wallet({}).then((res) => {
|
// let trc20=res.data["wallet_address_USDT(trc20)"].contract_address
|
// let erc20=res.data["wallet_address_USDT(erc20)"].contract_address
|
// let btc=res.data["wallet_address_BTC"].contract_address
|
// let eth=res.data["wallet_address_ETH"].contract_address
|
// if(this.coin=='usdt'){
|
// this.chainList=[{
|
// address:trc20,
|
// blockchain_name:'TRC20'
|
// },{
|
// address:erc20,
|
// blockchain_name:'ERC20'
|
// }]
|
// }else if (this.coin=='btc'){
|
// this.chainList=[{
|
// address:btc,
|
// blockchain_name:'BTC'
|
// }]
|
// }else if (this.coin=='eth'){
|
// this.chainList=[{
|
// address:eth,
|
// blockchain_name:"ETH"
|
// }]
|
// }
|
// this.address = this.chainList[0].address;
|
// this.blockchain_name = this.chainList[0].blockchain_name;
|
// this.getQRCode();
|
// })
|
// } else {
|
// Axios.getBlock({
|
// coin: this.coin
|
// }).then((res) => {
|
// if (res.code == "0") {
|
// this.chainList = res.data;
|
// this.address = res.data[0].address;
|
// this.blockchain_name = res.data[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.data.session_token;
|
});
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
onCopy(e) {
|
this.$toast(this.$t("复制成功"));
|
},
|
onError(e) {
|
this.$toast(this.$t("复制失败"));
|
},
|
//上传前
|
beforeRead(file) {
|
let types = [
|
"image/jpeg",
|
"image/jpg",
|
"image/gif",
|
"image/bmp",
|
"image/png",
|
];
|
const isImage = types.includes(file.type);
|
if (!isImage) {
|
this.$toast(this.$t("上传图片只能是JPG、JPEG、gif、bmp、PNG格式!"));
|
return false;
|
}
|
return true;
|
},
|
//上传完成
|
async afterRead(file) {
|
const { timestamp, signature } = signatureGenerate();
|
const blob = await imageConversion.compressAccurately(file.file, 500);
|
const formData = new FormData();
|
formData.append("file", blob);
|
const BASE_URL = this.BASE_URL;
|
await axios
|
.post(`${BASE_URL}public/uploadimg!execute.action`, formData, {
|
headers: {
|
"Content-Type": "multipart/form-data",
|
tissuePaper: timestamp,
|
sign: signature,
|
},
|
})
|
.then((res) => {
|
if (res.data.code == 0) {
|
this.submitImg = res.data.data;
|
// this.uploadImgUrl = this.nowUrl+'/wap/public/showimg!showImg.action?imagePath=' + res.data.data;
|
this.uploadImgUrl = `${BASE_URL}public/showimg!showImg.action?imagePath=${res.data.data}`;
|
this.$toast(this.$t("上传成功"));
|
console.log(this.uploadImgUrl);
|
} else {
|
this.$toast(this.$t("上传失败"));
|
}
|
});
|
},
|
//生成二维码
|
getQRCode() {
|
let opts = {
|
errorCorrectionLevel: "H", //容错级别
|
type: "image/png", //生成的二维码类型
|
quality: 0.3, //二维码质量
|
margin: 4, //二维码留白边距
|
width: 200, //宽
|
height: 200, //高
|
text: "", //二维码内容
|
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) {
|
this.$toast(this.$t("请输入数量"));
|
return;
|
}
|
|
let numReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
|
if (!numReg.test(this.amount)) {
|
this.$toast(this.$t("请输入数字"));
|
return;
|
}
|
|
if (this.amount) {
|
Axios.rechargeApply({
|
session_token: this.session_token,
|
amount: this.amount,
|
from: this.enterAddress,
|
// blockchain_name: this.coin.toUpperCase(),
|
blockchain_name: this.blockchain_name,
|
img: this.submitImg,
|
coin: this.symbol.toUpperCase(),
|
channel_address: this.address,
|
tx: "",
|
})
|
.then((res) => {
|
if (res.code == 0) {
|
this.$router.push({
|
path: "/recharge/rechargeSubmit",
|
});
|
} else {
|
this.getToken();
|
this.$toast(this.$t(res.msg));
|
}
|
})
|
.catch((error) => {
|
if (error.code === "ECONNABORTED") {
|
this.$toast(this.$t("网络超时！"));
|
} else if (error.msg !== undefined) {
|
this.$toast(this.$t(error.msg));
|
}
|
this.getToken();
|
});
|
} else {
|
this.$toast(this.$t("请输入充币数量"));
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.rechargePage {
|
width: 100%;
|
box-sizing: border-box;
|
|
::v-deep .van-uploader__upload {
|
@include themify() {
|
background: themed("upload_bg");
|
}
|
}
|
}
|
|
.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 {
|
@include themify() {
|
background: themed("tab_background");
|
}
|
|
padding-top: 35px;
|
padding-bottom: 52px;
|
}
|
|
.mtb27 {
|
margin: 27px 0;
|
}
|
|
.next-btn {
|
width: 100%;
|
height: 100px;
|
margin-top: 35px;
|
border: none;
|
outline: none;
|
}
|
</style>
|
