jingcai/pages/recharge/recharge.vue

<template>
	<view class="all">
		<view class="top">
			<view class="topO"> 鏈名稱 </view>
			<view class="topT">
				<view class="tt">USDT-TRC20</view>
			</view>
			<view class="topS">
				<view class="S">收款地址</view>
				<view
					class="SS"
					>{{ address }}</view
				>
				<image
					class="SSS"
					src="../../static/icon/cz.png"
					mode=""
					@click="copy(address)">
				</image>
			</view>
			<!-- 根据地址生成二维码 -->
			<view class="topF">
				<view class="qr">
					<canvas
						id="qrcode"
						canvas-id="qrcode"
						style="width: 120px; height: 120px"></canvas>
				</view>
			</view>
			
			<view class="last">
				<view class="le" >
					<view class="lef">保存相冊</view>
				</view>
				<view class="le" style="margin-left: 30rpx;">
					<view class="lef" @click="copy(address)">複製地址</view>
				</view>
			</view>
		</view>
		<view class="buttom">
			<view class="but">
				提示：充值大於5000U，請先充值一筆小額的，到賬之後再進行大額充值。充值地址每個人都是唯一的！請一定要仔細確認避免充錯！
			</view>
		</view>
	</view>
</template>

<script>
	import UQRCode from "uqrcodejs"; // npm install uqrcodejs
	export default {
		data() {
			return {
				address: "ca87ca68ca68c6a986c98a678c7a8",
			};
		},
		mounted() {},
		onReady() {
			// 获取uQRCode实例
			var qr = new UQRCode();
			// 设置二维码内容
			qr.data = this.address;
			// 设置二维码大小，必须与canvas设置的宽高一致
			qr.size = 120;
			// 调用制作二维码方法
			qr.make();
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件，this必须传入
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
			// 我之前写的保存的是地址 没让保存图片 他要保存图片的话 浏览器应该会给出长安保存选项  或者他自己截图 不用管这个了
			// 我这个收款地址，二维码怎么改变
		},
		methods: {
			// 复制地址
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function () {
						//调用方法成功
						console.log("success");
					},
				});
			},
		},
	};
</script>

<style lang="scss">
	.all {
		width: 750rpx;
		height: 1416rpx;
		background-color: #000000;
	}
	.top {
		margin-left: 28rpx;
		padding-top: 50rpx;
		width: 690rpx;
		height: 720rpx;
		background: #191a1f;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.topO {
		height: 31rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		line-height: 24rpx;
		margin-left: 21rpx;
		margin-top: 37rpx;
	}
	.topT {
		margin-left: 20rpx;
		margin-top: 30rpx;
		width: 218rpx;
		height: 68rpx;
		border: 2px solid #ddba82;
		border-radius: 10rpx;
	}
	.tt {
		width: 168rpx;
		height: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #feb041;
		line-height: 24rpx;
		margin-top: 20rpx;
		margin-left: 23rpx;
	}
	.topS {
		display: flex;
		justify-content: start;
	}
	.S {
		height: 31rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		line-height: 24rpx;
		margin-left: 23rpx;
		margin-top: 26rpx;
	}
	.SS {
		height: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 24rpx;
		margin-left: 23rpx;
		margin-top: 26rpx;
	}
	.SSS {
		width: 29rpx;
		height: 29rpx;
		margin-left: 23rpx;
		margin-top: 24rpx;
	}

	.buttom {
		margin-left: 30rpx;
		margin-top: 30rpx;
		width: 690rpx;
		height: 226rpx;
		background: #191a1f;
		border-radius: 20rpx;
	}
	.but {
		margin-left: 27rpx;
		padding-top: 50rpx;
		width: 625rpx;
		height: 114rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 45rpx;
	}
	.topF {
		// flex: 1;
		margin-top: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.qr{
		width: 275rpx;
		height: 275rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}
	
	.last {
		display: flex;
		justify-content: center;
	}
	.le {
		margin-top: 43rpx;
		width: 201rpx;
		height: 59rpx;
		border: 2px solid #DDBA82;
		border-radius: 10rpx;
	}
	.lef {
		margin-top: 12rpx;
		margin-left: 49rpx;
		height: 25rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FEB041;
		line-height: 24rpx;
	}
</style>