<template>
	<view class="container downContainer">
			<view class="logoContainer">
				<image src="/static/downlogo.png" mode="widthFix"></image>
			</view>
			<view class="logoName">CFFP财富中心</view>
			<view class="downBtn" @click="handleBtnDown">立即下载</view>
			<view class="qrcodeContainer">
				<image :src="'/static/'+ (iosFlag ? 'iosDownLoadQrcode' : 'androidDownLoadQrcode')+'.png'" mode="widthFix"></image>
			</view>
			<view class="footerTitle">【成为注册家庭财务策划师】</view>
			<view class="footerSubtitle">金融·风险管理·咨询·投资组合</view>
			<!-- 遮罩 -->
			<view class="markContainer" v-if="markFlag">
				<view class="tipsIcon">
					<image src="/static/Group132.png" mode="widthFix"></image>
				</view>
				<view class="tipsContent">
					<view style="display: flex;justify-content: center;align-items: center;">戳这里，点击<image src="/static/browser.png" mode="widthFix" style="width:100rpx!important;height:100rpx;margin:0 30rpx"></image>按钮</view>
					<view class="">
						<view>使用系统浏览器即可安装</view>
					</view>
				</view>
				<view class="confirmBtn">知道了</view>
			</view>
		</view>

</template>

<script>
	export default {
		data() {
			return {
				markFlag:false,
				iosFlag:false,
				browser:{}
			}
		},
		methods: {
			// 下载app
			handleBtnDown() {
				if (browser.versions.weixin){
					this.markFlag = true;
					return;
				}
				if (browser.versions.android) {
					window.location.href = "https://mdev.anjibao.cn/app.apk";
				}else if (browser.versions.ios) {
					console.log('ios')
					window.location.href = "http://itunes.apple.com/us/app/id399608199";
				} 
			}

		},
		onLoad() {
			this.browser = {
				versions: function() {
							let u = navigator.userAgent,
								app = navigator.appVersion;
							return {
								trident: u.indexOf('Trident') > -1,
								/*IE内核*/
								presto: u.indexOf('Presto') > -1,
								/*opera内核*/
								webKit: u.indexOf('AppleWebKit') > -1,
								/*苹果、谷歌内核*/
								gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
								/*火狐内核*/
								mobile: !!u.match(/AppleWebKit.*Mobile.*/),
								/*是否为移动终端*/
								ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
								/*ios终端*/
								android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
								/*android终端或者uc浏览器*/
								iPhone: u.indexOf('iPhone') > -1,
								/*是否为iPhone或者QQHD浏览器*/
								iPad: u.indexOf('iPad') > -1,
								/*是否iPad*/
								webApp: u.indexOf('Safari') == -1,
								/*是否web应该程序，没有头部与底部*/
								souyue: u.indexOf('souyue') > -1,
								superapp: u.indexOf('superapp') > -1,
								weixin: u.toLowerCase().indexOf('micromessenger') > -1,
								Safari: u.indexOf('Safari') > -1
							};
						}(),
						language: (navigator.browserLanguage || navigator.language).toLowerCase()
			}
			if (browser.versions.ios){
				this.iosFlag = true
			}else{
				this.iosFlag = false
			}
			if (browser.versions.weixin){
				return;
			}
			//页面初始化进入app，进不去就说明没安装app，然后可以点击下载去应用市场去下载
			if (browser.versions.ios) {
				console.log('ios')
				// window.location.href = "http://itunes.apple.com/us/app/id399608199";
			} else if (browser.versions.android) {
				console.log('android')
				// window.location.href = "cffpapp://"  //manifest.json配置的schemes
			}

		}
	}
</script>

<style lang="scss">
.downContainer{
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		.markContainer{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0,0,0,0.6);
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			.tipsIcon{
				width: 200rpx;
				height: 200rpx;
				position: absolute;
				right: 0;
				top:0;
			}
			.tipsContent{
				display: flex;
				flex-direction: column;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 2;
				margin-bottom: 10%;
				margin-top: 150rpx;
			}
			.confirmBtn{
				width: 40%;
				height: 80rpx;
				margin: 0 auto;
				border: 4rpx dotted #fff;
				border-radius: 132rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				margin-top: 38rpx;
			}
		}
		.downBtn{
			height: 80rpx;
			background-color: #20279B;
			color: #fff;
			border-radius: 92rpx;
			width: 80%;
			margin: 15% auto 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.logoContainer{
			margin-top: 30%;
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
		}
		.logoName{
			font-size: 36rpx;
			color: #333;
			margin-top: 30rpx;
		}
		.qrcodeContainer{
			margin: 20% auto;
			width: 280rpx;
			height: 280rpx;
			background-color: #999;
		}
		.footerTitle{
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 16rpx;
		}
		.footerSubtitle{
			font-size: 26rpx;
			color: #666;
		}
	}

</style>
