applet/uni-app/问星数据.../components/applet-mask/applet-mask....

<template>
	<view class="mask" @click="$emit('closeMask')">
		<template v-if="isWeixin">
			<wx-open-launch-weapp id="launch-btn" username="gh_7b8ac119fda1" :path="wx_page+'?source=h5_wx'" class="open_button">
				<script type="text/wxtag-template">
					<style>
						.btn{display: block;margin:auto;font-size:16px;line-height:49px;text-align:center;background:transparent;border:none;color:#ffffff;}
					</style>
					<button class="btn">打开小程序</button>
				  </script>
			</wx-open-launch-weapp>
		</template>
		<view class="content" v-else>
			<image src="../../static/img/close.png" mode="widthFix" class="close" @click="closeMask"></image>
			<view class="title">
				微信搜索<text style="color:#FF5A14">问星数据</text>小程序
			</view>
			<view class="title">免费查看更多视频号数据</view>
			<image src="https://kx-bigdata.oss-cn-beijing.aliyuncs.com/phone/h5_mask.png" mode="widthFix" class="image"></image>
			<button type="default" class="copyButton" @click="copyCon(1)">第一步：点击复制【问星数据】</button>
			<button type="default" class="copyButton" @click="copyCon(2)" style="margin-top:20rpx">第二步：打开微信</button>
			<view class="hint">如无法跳转，请手动打开微信APP</view>
		</view>
	</view>
</template>

<script>
	
	import { setClipboardData } from 'uni-clipboard'
	export default {
		props:{
			url_scheme:{
				type:String,
				default:'weixin://dl/business/?t=o3aIVwrmPmt'
			},
			wx_page:{
				type:String,
				default:'/pages/index/index'
			}
		},
		data() {
			return {
				isWeixin:false
			}
		},
		created() {
			if(navigator.userAgent.toLowerCase().match(/micromessenger/i)){
				this.isWeixin = true
			}
		},
		mounted() {
			// #ifdef H5
			if(navigator.userAgent.toLowerCase().match(/micromessenger/i)){
				this.$nextTick(function(){
					var btn = document.getElementById('launch-btn');
					btn.addEventListener('launch', function (e) {
						burialPoint({project_name:'移动端h5',button_name:'微信端点击按钮',key_value:parseQueryString('key')?parseQueryString('key'):'',page_name:'推广落地页',url_value:window.location.href,browser:userAgent()})
						_hmt?_hmt.push(['_trackEvent','移动端h5', '微信端点击按钮', parseQueryString('key')?parseQueryString('key'):'','']):'';
					});
				})
			}
			// #endif
		},
		methods: {
			copyCon(type){
				if(type==1){
					setClipboardData('问星数据').then((res)=>{
						this.$burialPoint({project_name:'小程序版h5',button_name:'复制成功',key_value:uni.getStorageSync('key')?uni.getStorageSync('key'):'',page_name:'弹框',url_value:window.location.href})
						_hmt?_hmt.push(['_trackEvent','小程序版h5', '复制成功', uni.getStorageSync('key'),'']):'';
						uni.showToast({
							title: '复制成功'
						})
					})
				}
				if(type==2){
					this.$burialPoint({project_name:'小程序版h5',button_name:'点击弹框打开微信',key_value:uni.getStorageSync('key')?uni.getStorageSync('key'):'',page_name:'弹框',url_value:window.location.href})
					_hmt?_hmt.push(['_trackEvent','小程序版h5', '点击弹框打开微信', uni.getStorageSync('key'),'']):'';
					var sUserAgent = navigator.userAgent.toLowerCase();
					if(sUserAgent.indexOf("baidu") > 0 || sUserAgent.indexOf("ucbrowser") > 0 ) {
						this.appletMaskFlag = true;
					}else{
						if (!navigator.userAgent.toLowerCase().match(/micromessenger/i)) {
						   location.href = this.url_scheme
						}
					}
				}
			},
			closeMask(){
				this.$emit('closeMask')
			},
			getWxInfo(){
				
			}
		}
	}
</script>

<style>
	.open_button{
		width: 560rpx;
		height: 100rpx;
		background: linear-gradient(270deg, #FF8B4F 0%, #FF5227 100%);
		border-radius: 10rpx;
		position: fixed;
		display: block;
		top: 65vh;
		left: 0;
		right: 0;
		margin: auto;
		border: none;
		color: #FFFFFF;
		font-size: 16rpx;
		z-index: 99;
		text-align: center;
		line-height: 50rpx;
	}
.mask{
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}
.content{
	width: 622rpx;
	height: 700rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding-top: 84rpx;
}
.close{
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	top: 20rpx;
	right: 20rpx;
}
.title{
	color: #000000;
	font-size: 40rpx;
	line-height: 44rpx;
	text-align: center;
	font-weight: bold;
}
.image{
	width: 468rpx;
	height: 234rpx;
	display: block;
	margin: auto;
	margin-top: 40rpx;
}
.copyButton{
	width: 540rpx;
	height: 80rpx;
	background: #2762FF;
	border-radius: 8rpx;
	color: #FFFFFF;
	font-size: 32rpx;
	line-height: 80rpx;
	text-align: center;
	margin-top: 40rpx;
}
.hint{
	text-align: center;
	line-height: 60rpx;
	color: #999;
	font-size: 22rpx;
}
</style>