mgrading/src/views/downLoad.vue

<template>
	<div class="studentDownLoad" :class="[wxStatus ? 'wxContainer' : '']">
		<div class="container">
			<!-- <p class="tips">正在打开酷乐秀～</p>
			<p class="ps" v-if="isWx">ps：若无法自动跳转，请在本地浏览器中打开。</p> -->
			<img src="../assets/images/downLoad/downLoad_bg.png" class="downloadBg" />

			<van-button type="primary" @click="downloadClick" round block>点击下载APP</van-button>
		</div>
		<div class="wxpopup" v-if="wxStatus" @click="wxStatus = false">
			<img src="../assets/images/wx_bg.png" alt />
		</div>
	</div>
</template>
<script>
	import {
		browser
	} from "@/utils/common";
	export default {
		data() {
			return {
				isWx: browser().weixin,
				wxStatus: false,
				msg: "此浏览器不支持自动转发,请更换浏览器尝试",
				src: ""
			};
		},
		mounted() {
			this.downloadApp();
		},
		methods: {
			downloadApp() {
				let url = null;
				let params = this.$route.query
				if (params.url && params.hash) {
					url = params.url + '/#/' + params.hash
				}
				// http://mkjtest.dayaedu.com/#/downLoad?memo=2
				// http://mkjtest.dayaedu.com/#/downLoad?url=http://mkjtest.dayaedu.com&hash=appDetail&id=xxx&memo=1
				if (params.id) {
					url += '?id=' + params.id
				}
				if(params.memo == 1) {
					url = `memo=1&url=` + url
				} else if(params.memo == 2) { // 准考证页
					url = `memo=2`
					if(params.examRegistrationId) {
						url += '&examRegistrationId=' + params.examRegistrationId
					}
				}
				// url = encodeURIComponent(url);
				if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
					window.location.href = `StudentsExam://linkUrl=${url}`;
				} else if (/(Android)/i.test(navigator.userAgent)) {
					window.location.href = `studentexam://html:8888/SplashActivity?${url}`;
				} else {
					this.$toast("请用手机或移动设备打开");
				}
			},
			downloadClick() {
				if (browser().weixin) {
					this.wxStatus = true;
					return;
				}
				if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
					window.location.href = "https://apps.apple.com/cn/app/%E9%85%B7%E4%B9%90%E7%A7%80/id1528132269";
					// this.$toast('APP暂未开放下载通道')
				} else if (/(Android)/i.test(navigator.userAgent)) {
					window.location = "https://sj.qq.com/myapp/detail.htm?apkName=com.jinmingyunle.colexiu"; //如果超时就跳转到app下载页
					// this.$toast('APP暂未开放下载通道')
				} else {
					this.$toast("请用手机或移动设备打开");
				}
			}
		}
	};
</script>
<style lang="less" scoped>
	@import url("../assets/commonLess/variable");
	.studentDownLoad {
		// min-height: 100vh;
	}
	.container {
		overflow: hidden;
		background: url("../assets/images/downLoad/bg.png") top center no-repeat #fff;
		background-size: contain;
		min-height: 100vh;
		text-align: center;
		.downloadBg {
			width: 100%;
		}
	}

	.wxContainer {
		overflow: hidden;
		height: 100vh;
	}

	.van-button--primary {
		margin: .36rem 0 .18rem;
		background-color: @--main-color;
		border: 1px solid @--main-color;
		color: #FFFFFF;
		font-size: .18rem;
		height: .5rem;
		line-height: .52rem;
		width: 60%;
		margin-left: 20%;
	}

	.wxpopup {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);

		img {
			width: 88%;
			margin: 0 6%;
		}
	}
</style>