<template>
	<view class="container">
		<view class="pamentcode">
			<view class="p_top">
				<u-icon name="error" color="#EAA97D" size="18"></u-icon>
				<view class="tit">
					僅向該地址轉入ETH/ERC20相關資產
				</view>
			</view>
			<!-- 收款碼 -->
			<view class="p_code">
				<view class="towcode">
					<image src="/static/code.png" mode=""></image>
				</view>
			</view>
			<!-- 地址 -->
			<view class="p_address">
				<view class="addresstit">
					收款地址
				</view>
				<view class="address">
					{{Adress}}
				</view>
			</view>
			<!-- 複製 -->
			<view class="p_copy">
				<view class="share" @click="share">
					<u-icon name="share-square" color="#626262" size="26"></u-icon>
					<view class="">
						分享
					</view>
				</view>
				<view class="share" @tap="copyAdress(Adress)">
					<view class="img" style="width: 40rpx;height: 40rpx; margin-right: 5rpx;">
						<image src="/static/copy2.png"></image>
					</view>
					<view class="">
						複製
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Adress: 'jlkadjfljf63416461464131312312'
			};
		},
		methods: {
			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: "/static/code.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			copyAdress(adress) {
				uni.setClipboardData({
					data: adress,
					success: () => {
						uni.showToast({
							title: '複製成功',
							icon: 'success'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		border-top: 1px solid dimgrey;
		width: 100vw;
		min-height: 100vh;
		padding: 20px;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #000033, #51599b);

		image {
			width: 100%;
			height: 100%;
		}

		.pamentcode {
			width: 100%;
			height: 900rpx;
			background-color: #fff;
			border-radius: 30rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.p_top {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fdf7f2;
				width: 100%;
				height: 80rpx;
				font-size: 28rpx;
				border-radius: 20rpx;

				.tit {
					color: #EAA97D;
				}
			}

			.p_code {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 60rpx 0;

				.towcode {
					width: 350rpx;
					height: 350rpx;
				}
			}

			.p_address {
				width: 100%;
				height: 210rpx;
				background-color: #f7f7f7;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding: 30rpx;
				box-sizing: border-box;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				.addresstit {
					color: #BCBCBD;
					margin-bottom: 20rpx;
				}

				.address {
					width: 600rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.p_copy {
				display: flex;
				padding: 0 60rpx;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.share {
					width: 240rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>