<template>
	<view class="content">
		<block v-if="isclose">
			<view v-if="info.hj_state==2" class="model" @click="close"></view>
			<view class="model_s flex-center" v-else @click="close">
				<view class="">
					<view class="wave ripple danger">
						<view class="circle"></view>
						<view class="circle"></view>
						<view class="circle"></view>
						<view class="circle"></view>
						<view class="circle"></view>
						<view class="circle"></view>
						<view class="model_s_pa flex-center">
							<image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
						</view>
					</view>
					<view class="model_s_text">
						点击进入
					</view>
				</view>
			</view>
		</block>
		<web-view :src="info.url"></web-view>
	</view>
</template>

<script>
	// #ifdef H5
	import getWXSign from "@/static/js/config.js";
	// #endif 
	export default {
		data() {
			return {
				info: {},
				url: "",
				URL: getApp().globalData.URL,
				isclose: true,
			}
		},
		onLoad(e) {
			function getUrlParam(paraName) {
				let url = window.location.href;
				var arrObj = url.split("?");
				if (arrObj.length > 1) {
					var arr;
					for (var i = 0; i < arrObj.length; i++) {
						arr = arrObj[i].split("=");
						console.log(arr)
						if (arr != null && arr[0] == paraName) {
							return arr[1];
						}
					}
					return "";
				} else {
					return "";
				}
			}
			this.https(getUrlParam('card_num'));
		},

		methods: {
			https(card_num) {
				this.request({
					url: "picture/sacn",
					data: {
						card_num: card_num,
					},
				}).then(res => {
					console.log(res)
					this.info = res.data;
				}).catch((res) => {
					// this.iscopy = false
					// console.log(res, "card_num=20ttp")
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
			
			// 遮盖层复制
			close(e) {
				console.log(e)
				let content = this.info.way_power;
				this.isclose = false;
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("input")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				console.log("gggg", result)
				textarea.remove();
				window.location.href = this.info.url;
				return result
			},
		}

	}
</script>

<style>
	page {
		height: 100%;
		width: 100%;
	}

	.container_main {
		height: 100%;
		width: 100%;
		text-align: center;
	}

	.iFrame {
		height: 100%;
		width: 100%;
		border: none;
	}

	.container_main .container_img {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 999;
		left: 0;
	}

	.model {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 999;
		left: 0;
	}


	.model_s {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.model_s_pa {
		position: absolute;
		width: 300rpx;
		height: 300rpx;
	}

	.model_s_sz {
		width: 160rpx;
		height: 160rpx;
		margin-top: 52rpx;
		margin-left: 24rpx;
	}

	.model_s_text {
		font-size: 40rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.container_title {
		font-size: 48rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		margin-top: 90rpx;
		padding: 0 20rpx;
	}

	.container_desc {
		padding: 0 20rpx;
		margin-top: 50rpx;
		font-size: 38rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
	}

	.go_btn_pf {
		/* position: fixed; */
		/* bottom: 40rpx; */
		width: 100%;
		margin-top: 130rpx;
		font-size: 32rpx;
	}

	.go_btn {
		width: 630rpx;
		background: rgb(64, 158, 255);
		color: #FFFFFF;
	}



	/************以下为具体实现************/

	.wave {
		position: relative;
		width: 300rpx;
		height: 300rpx;
		text-align: center;
		font-size: 28rpx;
		margin: 0 auto;
	}

	.wave .circle {
		position: absolute;
		border-radius: 50%;
		opacity: 0;
	}

	/* 波纹效果 */

	.wave.ripple .circle {
		width: calc(100% - 6px);
		/* 减去边框的大小 */
		height: calc(100% - 6px);
		/* 减去边框的大小 */
		border: 3px solid #fff;
	}

	.wave.ripple .circle:first-child {
		animation: circle-opacity 2s infinite;
	}

	.wave.ripple .circle:nth-child(2) {
		animation: circle-opacity 2s infinite;
		animation-delay: 0.3s;
	}

	.wave.ripple .circle:nth-child(3) {
		animation: circle-opacity 2s infinite;
		animation-delay: 0.6s;
	}

	.wave.ripple .circle:nth-child(4) {
		animation: circle-opacity 2s infinite;
		animation-delay: 0.8s;
	}

	.wave.ripple .circle:nth-child(5) {
		animation: circle-opacity 2s infinite;
		animation-delay: 1s;
	}

	.wave.ripple .circle:nth-child(6) {
		animation: circle-opacity 2s infinite;
		animation-delay: 1.2s;
	}

	.wave.ripple.danger {
		color: #FFFFFF;
	}

	.wave.ripple.danger .circle {
		border-color: #FFFFFF;
	}

	.wave.ripple.warning {
		color: orange;
	}

	.wave.ripple.warning .circle {
		border-color: orange;
	}

	/* 波动效果 */

	/* 
.wave.solid .circle {
  width: 100%;
  height: 100%;
  background: #fff;
}

.wave.solid .circle:first-child {
  animation: circle-opacity 2s infinite;
}

.wave.solid.danger {
  color: red;
}

.wave.solid.danger .circle {
  background: red;
}

.wave.solid.warning {
  color: orange;
}

.wave.solid.warning .circle {
  background: orange;
} */

	@keyframes circle-opacity {
		from {
			opacity: 1;
			transform: scale(0);
		}

		to {
			opacity: 0;
			transform: scale(1);
		}
	}
</style>
