<template>
|
<div class="rechargePage box-border font-26">
|
<assets-head :title="$t('快速充币')"/>
|
<div class="mt-30 w-full text-center font-36 textColor">{{ coin.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',
|
}),
|
},
|
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: ""
|
}
|
},
|
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.data.content;
|
}).catch(err => {
|
if (err.code === 'ECONNABORTED') {
|
this.$toast(this.$t('网络超时！'));
|
} else if (err !== undefined) {
|
this.$toast(this.$t(err));
|
}
|
})
|
},
|
methods: {
|
getData() {
|
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: "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) {
|
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.blockchain_name,
|
img: this.submitImg,
|
coin: this.coin,
|
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>
|
