|
@@ -1,131 +1,136 @@
|
|
<template>
|
|
<template>
|
|
- <div class="border">
|
|
|
|
- <div class="ercode">
|
|
|
|
- <canvas id="canvas"></canvas>
|
|
|
|
- </div>
|
|
|
|
- <div class="info">
|
|
|
|
- <div class="font">{{tokenRechargeAddress}}</div>
|
|
|
|
- <div class="copy copy-btn" @click="copy" :data-clipboard-text="tokenRechargeAddress">Copy</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="border">
|
|
|
|
+ <div class="ercode">
|
|
|
|
+ <canvas id="canvas"></canvas>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="info">
|
|
|
|
+ <div class="font">{{ tokenRechargeAddress }}</div>
|
|
|
|
+ <div class="copy copy-btn" @click="copy" :data-clipboard-text="tokenRechargeAddress">Copy</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-let QRCode = require('qrcode')
|
|
|
|
-let ClipboardJS = require('clipboard')
|
|
|
|
|
|
+let QRCode = require('qrcode');
|
|
|
|
+let ClipboardJS = require('clipboard');
|
|
import Api from '../http/api';
|
|
import Api from '../http/api';
|
|
import { postRequest } from '../http/index';
|
|
import { postRequest } from '../http/index';
|
|
import { Toast } from 'vant';
|
|
import { Toast } from 'vant';
|
|
|
|
|
|
export default {
|
|
export default {
|
|
- name: 'qrCode',
|
|
|
|
- props: ['tokenChain', 'rechargeAddress'],
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- tokenRechargeAddress: ''
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
- this.getTokenAddress()
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- getTokenAddress() {
|
|
|
|
- if (this.rechargeAddress !== '') {
|
|
|
|
- // 有过查询
|
|
|
|
- this.tokenRechargeAddress = this.rechargeAddress;
|
|
|
|
- this.createQRCode(this.rechargeAddress)
|
|
|
|
- this.copyToken()
|
|
|
|
- } else {
|
|
|
|
- // 没查询过
|
|
|
|
- postRequest(Api.getTokenRechargeAddress, {
|
|
|
|
- params: {
|
|
|
|
- tokenChain: this.tokenChain
|
|
|
|
- }
|
|
|
|
- }).then(res => {
|
|
|
|
- let { code, data } = res;
|
|
|
|
- if (code === 0) {
|
|
|
|
- this.tokenRechargeAddress = data.rechargeAddress;
|
|
|
|
- this.createQRCode(data.rechargeAddress)
|
|
|
|
- this.copyToken()
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- createQRCode(str) {
|
|
|
|
- var canvas = document.getElementById('canvas')
|
|
|
|
- QRCode.toCanvas(canvas, str, {
|
|
|
|
- width: 110,
|
|
|
|
- height: 110,
|
|
|
|
- scale: 1,
|
|
|
|
- color: {
|
|
|
|
- dark: '#000', // 二维码前景颜色
|
|
|
|
- light: '#fff' // 二维码背景颜色
|
|
|
|
- }
|
|
|
|
- }, function (error) {
|
|
|
|
- if (error) console.error(error)
|
|
|
|
- console.log('success!');
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- copyToken() {
|
|
|
|
- var clipboard = new ClipboardJS('.copy-btn');
|
|
|
|
- clipboard.on('success', function (e) {
|
|
|
|
- Toast(`copy success`)
|
|
|
|
- e.clearSelection();
|
|
|
|
- });
|
|
|
|
|
|
+ name: 'qrCode',
|
|
|
|
+ props: ['tokenChain', 'rechargeAddress'],
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ tokenRechargeAddress: '',
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.getTokenAddress();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ getTokenAddress() {
|
|
|
|
+ if (this.rechargeAddress !== '') {
|
|
|
|
+ // 有过查询
|
|
|
|
+ this.tokenRechargeAddress = this.rechargeAddress;
|
|
|
|
+ this.createQRCode(this.rechargeAddress);
|
|
|
|
+ this.copyToken();
|
|
|
|
+ } else {
|
|
|
|
+ // 没查询过
|
|
|
|
+ postRequest(Api.getTokenRechargeAddress, {
|
|
|
|
+ params: {
|
|
|
|
+ tokenChain: this.tokenChain,
|
|
|
|
+ },
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ let { code, data } = res;
|
|
|
|
+ if (code === 0) {
|
|
|
|
+ this.tokenRechargeAddress = data.rechargeAddress;
|
|
|
|
+ this.createQRCode(data.rechargeAddress);
|
|
|
|
+ this.copyToken();
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ createQRCode(str) {
|
|
|
|
+ var canvas = document.getElementById('canvas');
|
|
|
|
+ QRCode.toCanvas(
|
|
|
|
+ canvas,
|
|
|
|
+ str,
|
|
|
|
+ {
|
|
|
|
+ width: 110,
|
|
|
|
+ height: 110,
|
|
|
|
+ scale: 1,
|
|
|
|
+ color: {
|
|
|
|
+ dark: '#000', // 二维码前景颜色
|
|
|
|
+ light: '#fff', // 二维码背景颜色
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ function (error) {
|
|
|
|
+ if (error) console.error(error);
|
|
|
|
+ console.log('success!');
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
+ },
|
|
|
|
+ copyToken() {
|
|
|
|
+ var clipboard = new ClipboardJS('.copy-btn');
|
|
|
|
+ clipboard.on('success', function (e) {
|
|
|
|
+ Toast(`copy success`);
|
|
|
|
+ e.clearSelection();
|
|
|
|
+ });
|
|
|
|
|
|
- clipboard.on('error', function (e) {
|
|
|
|
- Toast(`copy error`)
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- copy() {
|
|
|
|
- this.$emit('copy');
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
+ clipboard.on('error', function () {
|
|
|
|
+ Toast(`copy error`);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ copy() {
|
|
|
|
+ this.$emit('copy');
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
.border {
|
|
.border {
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- padding: 12px;
|
|
|
|
- border-radius: 8px;
|
|
|
|
- border: 1px solid #ECECEC;
|
|
|
|
- .ercode {
|
|
|
|
- overflow: hidden;
|
|
|
|
- width: 110px;
|
|
|
|
- height: 110px;
|
|
|
|
- canvas {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- transform: scale(1.24);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .info {
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- justify-content: center;
|
|
|
|
- flex: 1;
|
|
|
|
- margin-left: 15px;
|
|
|
|
- word-break: break-all;
|
|
|
|
- .font {
|
|
|
|
- font-size: 14px;
|
|
|
|
- line-height: 22px;
|
|
|
|
- font-weight: 400;
|
|
|
|
- }
|
|
|
|
- .copy {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- color: #1D9BF0;
|
|
|
|
- font-size: 16px;
|
|
|
|
- font-weight: 600;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 35px;
|
|
|
|
- margin-top: 13px;
|
|
|
|
- border-radius: 35px;
|
|
|
|
- border: 1px solid #1D9BF0;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 12px;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ border: 1px solid #ececec;
|
|
|
|
+ .ercode {
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ width: 110px;
|
|
|
|
+ height: 110px;
|
|
|
|
+ canvas {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ transform: scale(1.24);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .info {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ flex: 1;
|
|
|
|
+ margin-left: 15px;
|
|
|
|
+ word-break: break-all;
|
|
|
|
+ .font {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ line-height: 22px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ }
|
|
|
|
+ .copy {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ color: #1d9bf0;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 35px;
|
|
|
|
+ margin-top: 13px;
|
|
|
|
+ border-radius: 35px;
|
|
|
|
+ border: 1px solid #1d9bf0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
+</style>
|