xxdj1/user/pages/download.vue

<template>
	<view class="download">
		<view class="logo" v-if="!iswx">
			<image src="../../static/logopic.png" mode=""></image>
			<view class="btn" @click="getInfo">
				下载
			</view>
		</view>
		<view class="liulanqi" v-if="iswx">>
			<image src="../../static/liulanqi.png" mode="" class="arrow"></image>
			<view class="">
				<view class="text">
					<view class="">
						1、点击右上角的
					</view>
					<view class="more">
						<image src="../../static/more.png" mode="widthFix"></image>
					</view>
					<view class="">
						按钮
					</view>
				</view>
				<view class="text">
					2、选择在浏览器中打开
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			iswx:false
		}
	},
	methods:{
		getInfo(){
			var ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			    // 微信中打开
				this.iswx = true;
				
			} else {
			    let platform = uni.getSystemInfoSync().platform;
			    if(platform === 'ios'){
			    	window.location.href = "https://apps.apple.com/cn/app/%E5%B8%8C%E5%B8%8C%E5%88%B0%E5%AE%B6/id6450150514"
			      // 苹果
			    } else if(platform === 'android'){
			      // 安卓
			      window.location.href = "https://www.pgyer.com/mhZD6o"
			    } else {
			    
			      // 其他
			    
			    }
			}
			
		},
	
	},
	onLoad(option) {
		
	},
	onShow() {
		var ua = window.navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
		    // 微信中打开
			this.iswx = true;
			
		} else {
			this.iswx = false;
		}
	}
}
</script>

<style lang="scss" scoped>
.download{
	height:calc(100vh);
	
	width:100%;
	.logo{
		width:100%;
		height:100%;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image{
			width:200rpx;
			height:200rpx;
		}
		.btn{
			border-radius: 50px;
			background-color:#17C161;
			font-size: 26rpx;
			padding:30rpx 0;
			text-align: center;
			color:#ffffff;
			width:70%;
			margin:0 auto;
			margin-top:40rpx;
		}
	}
	.liulanqi{
		height:100%;
		position: relative;
		background-color: rgba(0,0,0,0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		.arrow{
			position: absolute;
			right:0;
			height:200rpx;
			width:20%;
			z-index:99;
			top:0;
		}
		.text{
			color:#ffffff;
			font-size:32rpx;
			display: flex;
			align-items: center;
			
			.more{
				background-color: #ffffff;
				z-index:9;
				height:50rpx;
				border-radius:10rpx;
				text-align: center;
				margin:0 10rpx;
				image{
					width:50rpx;
					height:auto;
				}
			}
		}
	}
	
}
</style>