| | |
| | | <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="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 |
| | |
| | | </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)">{{ |
| | | <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> |
| | | </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"; |
| | | 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: { |
| | | async getData() { |
| | | 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: { |
| | | async getData() { |
| | | await Axios.getBlock({ |
| | | coin_para: this.symbol, |
| | | // coin: this.coin |
| | | }).then((res) => { |
| | | if (res.code == "0") { |
| | | this.chainList = res.data.page.elements; |
| | | this.address = res.data.page.elements[0].address; |
| | | this.blockchain_name = res.data.page.elements[0].blockchain_name; |
| | | |
| | | await Axios.exchange({}).then((res) => { |
| | | console.log(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.symbol=='usdt'){ |
| | | this.chainList=[{ |
| | | address:trc20, |
| | | blockchain_name:'TRC20' |
| | | },{ |
| | | address:erc20, |
| | | blockchain_name:'ERC20' |
| | | }] |
| | | }else if (this.symbol=='btc'){ |
| | | this.chainList=[{ |
| | | address:btc, |
| | | blockchain_name:'BTC' |
| | | }] |
| | | }else if (this.symbol=='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.page.elements; |
| | | this.address = res.data.page.elements[0].address; |
| | | this.blockchain_name = res.data.page.elements[0].blockchain_name; |
| | | let trc20=res.data.page.elements[3].address |
| | | let erc20=res.data.page.elements[0].address |
| | | let btc=res.data.page.elements[1].address |
| | | let eth=res.data.page.elements[2].address |
| | | // debugger |
| | | if(this.symbol=='usdt'){ |
| | | this.chainList=[{ |
| | | address:trc20, |
| | | blockchain_name:'TRC' |
| | | },{ |
| | | address:erc20, |
| | | blockchain_name:'ERC' |
| | | }] |
| | | }else if (this.symbol=='btc'){ |
| | | this.chainList=[{ |
| | | address:btc, |
| | | blockchain_name:'BTC' |
| | | }] |
| | | }else if (this.symbol=='eth'){ |
| | | this.chainList=[{ |
| | | address:eth, |
| | | blockchain_name:"ETH" |
| | | }] |
| | | } |
| | | this.getQRCode(); |
| | | } |
| | | }); |
| | | } |
| | | }).catch((error)=>{ |
| | | console.error(error); |
| | | }) |
| | | }, |
| | | 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() { |
| | | console.log( this.address); |
| | | 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"; |
| | | if (this.symbol == 'usdt') { |
| | | let trc20 = res.data.page.elements[1].address |
| | | let erc20 = res.data.page.elements[0].address |
| | | this.chainList = [{ |
| | | address: trc20, |
| | | blockchain_name: 'TRC' |
| | | }, { |
| | | address: erc20, |
| | | blockchain_name: 'ERC' |
| | | }] |
| | | } else if (this.symbol == 'btc') { |
| | | let btc = res.data.page.elements[0].address |
| | | console.log('123'); |
| | | this.chainList = [{ |
| | | address: btc, |
| | | blockchain_name: 'BTC' |
| | | }] |
| | | } else if (this.symbol == 'eth') { |
| | | let eth = res.data.page.elements[0].address |
| | | this.chainList = [{ |
| | | address: eth, |
| | | blockchain_name: "ETH" |
| | | }] |
| | | } |
| | | this.getQRCode(); |
| | | } |
| | | }); |
| | | // await Axios.exchange({}).then((res) => { |
| | | // console.log(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.symbol=='usdt'){ |
| | | // this.chainList=[{ |
| | | // address:trc20, |
| | | // blockchain_name:'TRC20' |
| | | // },{ |
| | | // address:erc20, |
| | | // blockchain_name:'ERC20' |
| | | // }] |
| | | // }else if (this.symbol=='btc'){ |
| | | // this.chainList=[{ |
| | | // address:btc, |
| | | // blockchain_name:'BTC' |
| | | // }] |
| | | // }else if (this.symbol=='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.page.elements; |
| | | // this.address = res.data.page.elements[0].address; |
| | | // this.blockchain_name = res.data.page.elements[0].blockchain_name; |
| | | // let trc20=res.data.page.elements[3].address |
| | | // let erc20=res.data.page.elements[0].address |
| | | // let btc=res.data.page.elements[1].address |
| | | // let eth=res.data.page.elements[2].address |
| | | // // debugger |
| | | // if(this.symbol=='usdt'){ |
| | | // this.chainList=[{ |
| | | // address:trc20, |
| | | // blockchain_name:'TRC' |
| | | // },{ |
| | | // address:erc20, |
| | | // blockchain_name:'ERC' |
| | | // }] |
| | | // }else if (this.symbol=='btc'){ |
| | | // this.chainList=[{ |
| | | // address:btc, |
| | | // blockchain_name:'BTC' |
| | | // }] |
| | | // }else if (this.symbol=='eth'){ |
| | | // this.chainList=[{ |
| | | // address:eth, |
| | | // blockchain_name:"ETH" |
| | | // }] |
| | | // } |
| | | // this.getQRCode(); |
| | | // } |
| | | // }); |
| | | // } |
| | | // }).catch((error)=>{ |
| | | // console.error(error); |
| | | // }) |
| | | }, |
| | | 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() { |
| | | console.log(this.address); |
| | | 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; |
| | | } |
| | | // 创建一个点击事件并对 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; |
| | | } |
| | | 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("请输入充币数量")); |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | 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; |
| | | .rechargePage { |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | |
| | | ::v-deep .van-uploader__upload { |
| | | @include themify() { |
| | | background: themed("upload_bg"); |
| | | } |
| | | } |
| | | } |
| | | ::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; |
| | | } |
| | | .code-btn { |
| | | width: 280px; |
| | | height: 70px; |
| | | margin-top: 36px; |
| | | margin-bottom: 56px; |
| | | line-height: 70px; |
| | | } |
| | | |
| | | .mt50 { |
| | | margin-top: 50px; |
| | | } |
| | | .mt50 { |
| | | margin-top: 50px; |
| | | } |
| | | |
| | | .mt70 { |
| | | margin-top: 70px; |
| | | } |
| | | .mt70 { |
| | | margin-top: 70px; |
| | | } |
| | | |
| | | .input-view { |
| | | height: 100px; |
| | | width: 100%; |
| | | border: none; |
| | | outline: none; |
| | | padding-left: 20px; |
| | | box-sizing: border-box; |
| | | } |
| | | .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; |
| | | } |
| | | .name-btn { |
| | | width: 210px; |
| | | height: 80px; |
| | | line-height: 80px; |
| | | margin-top: 30px; |
| | | margin-bottom: 50px; |
| | | } |
| | | |
| | | .img-box { |
| | | margin-top: 32px; |
| | | margin-bottom: 90px; |
| | | } |
| | | .img-box { |
| | | margin-top: 32px; |
| | | margin-bottom: 90px; |
| | | } |
| | | |
| | | .hint-box { |
| | | @include themify() { |
| | | background: themed("tab_background"); |
| | | } |
| | | .hint-box { |
| | | @include themify() { |
| | | background: themed("tab_background"); |
| | | } |
| | | |
| | | padding-top: 35px; |
| | | padding-bottom: 52px; |
| | | } |
| | | padding-top: 35px; |
| | | padding-bottom: 52px; |
| | | } |
| | | |
| | | .mtb27 { |
| | | margin: 27px 0; |
| | | } |
| | | .mtb27 { |
| | | margin: 27px 0; |
| | | } |
| | | |
| | | .next-btn { |
| | | width: 100%; |
| | | height: 100px; |
| | | margin-top: 35px; |
| | | border: none; |
| | | outline: none; |
| | | } |
| | | </style> |
| | | .next-btn { |
| | | width: 100%; |
| | | height: 100px; |
| | | margin-top: 35px; |
| | | border: none; |
| | | outline: none; |
| | | } |
| | | </style> |