PKR/pages/user/money/recharge备份.vue

<template>
	<view class="all padding-c-30 padding-v-30">
		<view class="top">
			<view class="topO"> {{$t('userinfo.u4')}} </view>
			<view class="topT flex-start padding-t-30">
				<view class="tt">USDT-TRC20</view>
			</view>
			<view class="topS flex-start">
				<view class="S">{{$t('userinfo.u1')}}</view>
				<view class="SS clamp padding-c-10">{{ address }}</view>
				<image class="SSS" src="/static/icon/cz.png" mode="" @click="copy(address)">
				</image>
			</view>
			<!-- 根据地址生成二维码 -->
			<view class="qr flex-center">
				<uqrcode h5DownloadName='myqrcode' ref="qrcode" canvas-id="qrcode" :value="address" size="240" sizeUnit='rpx'>
				</uqrcode>
			</view>

			<view class="last flex">
				<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 {
		qianBao
	} from "@/api/wallet.js"
	export default {
		data() {
			return {
				address: '',
				qr:''
			};
		},
		mounted() {},
		onReady() {},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t("tab.a3"),
			});
			this.qianBao()
		},
		methods: {
			// 二维码地址
			async qianBao() {
				const res = await qianBao()
				this.address = res.data.back.USDT.money.address;
			},
			// 复制地址
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function() {
						//调用方法成功
						console.log("success");
					},
				});
			},
			savePic(Url) {
				this.$refs.qrcode.save({});
			},
		},
	};
</script>

<style lang="scss">
	.all {
		line-height: 1;
		color: #ffffff;
	}

	.top {
		padding: 40rpx 30rpx;
		background: #191a1f;
		border-radius: 20rpx;

		.topO {
			font-size: $font-lg;
			font-weight: bold;
		}

		.topT {
			.tt {
				padding: 20rpx 24rpx;
				border-radius: 10rpx;
				border: 2px solid #ddba82;
				font-size: 26rpx;
				font-weight: bold;
				color: #feb041;
			}
		}

		.topS {
			padding-top: 30rpx;

			.S {
				font-size: $font-lg;
				font-weight: bold;
				flex-shrink: 0;
			}

			.SS {
				font-size: $font-sm;
				flex-grow: 1;
			}

			.SSS {
				flex-shrink: 0;
				width: 29rpx;
				height: 29rpx;
			}
		}
	}

	.qr {
		margin: 0 auto;
		margin-top: 34rpx;
		width: 275rpx;
		height: 275rpx;
		background-color: #fff;
	}

	.last {
		margin-top: 50rpx;
		padding: 0 30rpx;

		.le {
			padding: 20rpx 0;
			width: 250rpx;
			border: 2px solid #DDBA82;
			text-align: center;
			border-radius: 10rpx;

			.lef {
				font-size: 26rpx;
				font-weight: bold;
				color: #FEB041;
			}
		}
	}

	.buttom {
		background: #191a1f;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 30rpx;
		.but {
			font-size: 26rpx;
			font-weight: 500;
			line-height: 45rpx;
		}
	}
</style>