de-net-official/components/qrcode.vue

<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>
</template>

<script>
let QRCode = require('qrcode');
let ClipboardJS = require('clipboard');
import Api from '../http/api';
import { postRequest } from '../http/index';
import { Toast } from 'vant';

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();
			});

			clipboard.on('error', function () {
				Toast(`copy error`);
			});
		},
		copy() {
			this.$emit('copy');
		},
	},
};
</script>

<style lang="scss" scoped>
.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;
		}
	}
}
</style>