jingcai/pages/user/money/recharge.vue

<template>
	<view class="all">
		<view class="top">
			<view class="topO"> {{$t('userinfo.u4')}} </view>
			<view class="topT">
				<view class="tt">USDT-TRC20</view>
			</view>
			<view class="topS">
				<view class="S">{{$t('userinfo.u1')}}</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" @click="savePic">
					<view class="lef">{{$t('userinfo.u2')}}</view>
				</view>
				<view class="le" style="margin-left: 30rpx;">
					<view class="lef" @click="copy(address)">{{$t('userinfo.u3')}}</view>
				</view>
			</view>
		</view>
		<view class="buttom">
			<view class="but">
				{{$t('userinfo.u5')}}
			</view>
		</view>
	</view>
</template>

<script>
	import UQRCode from "@/components/uqrcodejs/uqrcode.js"; // 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();
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t("tab.a3"),
			});
		},
		methods: {
			// 复制地址
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function () {
						//调用方法成功
						console.log("success");
					},
				});
			},
			savePic(Url){
					// Url = this.address //图片路径，也可以传值进来
					// var triggerEvent = "touchstart"; //指定下载方式
				 //    var blob=new Blob([''], {type:'application/octet-stream'}); //二进制大型对象blob
				 //    var url = URL.createObjectURL(blob); //创建一个字符串路径空位
				 //    var a = document.createElement('a'); //创建一个 a 标签
				 //    a.href = Url;  //把路径赋到a标签的href上
				 //    //正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
				 //    a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0]; 
				 //    /* var e = document.createEvent('MouseEvents');  //创建事件（MouseEvents鼠标事件）
				 //    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //初始化鼠标事件（initMouseEvent已弃用）*/
				    
					// var e = new MouseEvent('click', ( true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));  
					// //派遣后，它将不再执行任何操作。执行保存到本地
				 //    a.dispatchEvent(e); 
				 //    //释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
				 //    URL.revokeObjectURL(url);  
				 
				 
				   var canvas = document.getElementById('qrcode'); // 获取二维码所在的canvas元素
				   var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 将canvas转换为base64格式的图片数据
				 
				   var a = document.createElement('a');
				   a.href = image;
				   a.download = 'qrcode.png'; // 设置下载的文件名
				   
				   var event = new MouseEvent('click');
				   a.dispatchEvent(event);
				 

				},
		},
	};
</script>

<style lang="scss">
	.all {
		width: 750rpx;
		height: 1416rpx;
		background-color: $page-color-base;
	}
	.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-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-weight: bold;
		color: #ffffff;
		line-height: 24rpx;
		margin-left: 23rpx;
		margin-top: 26rpx;
	}
	.SS {
		height: 20rpx;
		font-size: 26rpx;
		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: 100vh;
		background: #191a1f;
		border-radius: 20rpx;
	}
	.but {
		margin-left: 27rpx;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		width: 625rpx;
		// height: 114rpx;
		font-size: 26rpx;
		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>