| | |
| | | <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 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" /> |
| | | <!-- <img :src="img" alt="" v-show="imgshow" class="QRcodeImg" /> --> |
| | | <img src="../../assets/cz.jpg" alt="" style="width: 300px;height: 300px;" /> |
| | | </div> |
| | | <div |
| | | <!-- <div |
| | | class="code-btn btnMain text-center font-26 text-white" |
| | | @click="download('#QRcodeCanvas')" |
| | | > |
| | | {{ $t("保存二维码") }} |
| | | </div> |
| | | </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 |
| | | <!-- <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" |
| | | > |
| | | > --> |
| | | <div @click="onCopy(address)" |
| | | class="font-26 border-solid-grey text-center code-btn rounded-6 textColor"> |
| | | {{ $t("复制地址") }} |
| | | </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('请输入充币数量')" |
| | | /> |
| | | <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'" |
| | | <div v-if="item.blockchain_name!='ERC20'" |
| | | :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> |
| | |
| | | {{ $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" |
| | | /> |
| | | <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="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" |
| | | > |
| | | <button class="btnMain text-white next-btn font-30 rounded-lg" @click="nextBtn"> |
| | | {{ $t("下一步") }} |
| | | </button> |
| | | </div> |
| | |
| | | |
| | | <script> |
| | | import QRCode from "qrcode"; |
| | | import { Icon } from "vant"; |
| | | import { |
| | | Icon |
| | | } from "vant"; |
| | | import Clipboard from 'clipboard'; |
| | | import * as imageConversion from "image-conversion"; |
| | | import { Uploader } from "vant"; |
| | | 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 { |
| | | BASE_URL |
| | | } from "@/config"; |
| | | import { |
| | | signatureGenerate |
| | | } from "@/utils/signatureUtil"; |
| | | import { |
| | | mapGetters |
| | | } from "vuex"; |
| | | |
| | | export default { |
| | | name: "rechargePage", |
| | |
| | | // this.$toast(this.$t(err)); |
| | | } |
| | | }); |
| | | |
| | | this.clipboard = new Clipboard(this.$refs.copyBtn, { |
| | | text: () => this.address, // 设置复制的内容 |
| | | }); |
| | | |
| | | // 监听复制成功和失败事件 |
| | | this.clipboard.on('success', (e) => { |
| | | console.log('复制成功'); |
| | | this.$toast(this.$t("复制成功")); // 如果你使用了 vue-toast |
| | | e.clearSelection(); // 清除选中的文本 |
| | | }); |
| | | |
| | | this.clipboard.on('error', (e) => { |
| | | console.error('复制失败', e); |
| | | this.$toast(this.$t("复制失败")); |
| | | }); |
| | | |
| | | }, |
| | | methods: { |
| | | getData() { |
| | |
| | | }).then((res) => { |
| | | console.log(res); |
| | | this.chainList = res.page.elements |
| | | if (this.symbol == "usdt") { |
| | | this.blockchainIndex = 1; |
| | | this.address = res.page.elements[1].address; |
| | | this.blockchain_name = res.page.elements[1].blockchain_name; |
| | | } else { |
| | | this.address = res.page.elements[0].address; |
| | | this.blockchain_name = res.page.elements[0].blockchain_name; |
| | | } |
| | | |
| | | this.getQRCode(); |
| | | }); |
| | | // Axios.exchange({}).then((res) => { |
| | |
| | | onClickLeft() { |
| | | this.$router.go(-1); |
| | | }, |
| | | onCopy(e) { |
| | | // onCopy(e) { |
| | | // // const clipboard = new Clipboard(this.$refs.copyBtn); |
| | | // // clipboard.on('success', (e) => { |
| | | // // console.log('复制成功'); |
| | | // // // this.$toast(this.$t("复制成功")); |
| | | // // e.clearSelection(); |
| | | // // }); |
| | | // // clipboard.on('error', (e) => { |
| | | // // console.error('复制失败', e); |
| | | // // this.$toast(this.$t("复制失败")); |
| | | // // }); |
| | | |
| | | // }, |
| | | async onCopy() { |
| | | try { |
| | | // 使用现代浏览器 API navigator.clipboard.writeText |
| | | await navigator.clipboard.writeText(this.address); |
| | | this.$toast(this.$t("复制成功")); |
| | | } catch (err) { |
| | | console.error('复制失败', err); |
| | | this.$toast(this.$t("复制失败")); |
| | | } |
| | | }, |
| | | onError(e) { |
| | | this.$toast(this.$t("复制失败")); |
| | |
| | | }, |
| | | //上传完成 |
| | | async afterRead(file) { |
| | | const { timestamp, signature } = signatureGenerate(); |
| | | const { |
| | | timestamp, |
| | | signature |
| | | } = signatureGenerate(); |
| | | const blob = await imageConversion.compressAccurately(file.file, 500); |
| | | const formData = new FormData(); |
| | | formData.append("file", blob); |
| | |
| | | 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.uploadImgUrl = |
| | | `${BASE_URL}public/showimg!showImg.action?imagePath=${res.data.data}`; |
| | | this.$toast(this.$t("上传成功")); |
| | | console.log(this.uploadImgUrl); |
| | | } else { |