siyu_app/pages/index/appDownload.vue

<template>
	<view class="container">
		<view class="appname" :style="{paddingTop: paddingTop}">芳华未来</view>
		<image class="appdownload-txt" src="@/static/appdownload-txt.png" mode="heightFix"></image>
		<view class="downbtn" @click="downApp()">打开应用市场</view>
		<view class="downbtn" @click="downApp('down')">直接下载APP</view>
	</view>
</template>

<script>
	import { getAppVersion } from '@/api/common'
	export default {
		data() {
			return {
				paddingTop: 0,
			}
		},
		onLoad() {
			const top = uni.getSystemInfoSync().windowHeight
			this.paddingTop = top < 568 ? '700rpx' : '770rpx'
		},
		methods: {
			downApp(type) {
				if(type=='down') {
					const isWechat = String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger"
					if(isWechat) {
						uni.showToast({
							title: '点击右上角按钮，选择在浏览器中打开',
							icon: "error",
							duration: 3000
						})
						return
					}
					let platform = uni.getSystemInfoSync().platform;
					let isAndroid=platform=="android";
					let type=isAndroid?1:2;
					getAppVersion(type).then(srcData => {
							if(srcData.code==200){
								let data = srcData.data;
								if(data&&data.url) {
									window.location.href=data.url//升级包地址;
								} else {
									uni.showToast({
										title: '暂无下载地址',
										icon: "none"
									})
								}
							} else {
								uni.showToast({
									title: '获取下载地址失败',
									icon: "none"
								})
							}								
						},
						rej => {}
					).catch(()=>{
						//联网失败, 结束加载
						uni.showToast({
							title: '获取下载地址失败',
							icon: "none"
						})
					});
				} else {
					window.location.href="https://a.app.qq.com/o/simple.jsp?pkgname=com.mytek.rtlive";
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100%;
		background: url("@/static/appdownload.png") no-repeat 50%;
		background-size: cover;
		background-color: linear-gradient( 180deg, #E93C21 0%, #FF5600 100%);;
		// overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 40rpx;
		color: #FFFFFF;
		.appname {
			padding-top: 700rpx;
			margin-bottom: 14rpx;
		}
		.appdownload-txt {
			height: 32rpx;
			width: 378rpx;
			margin-bottom: 94rpx;
		}
		.downbtn {
			width: 528rpx;
			min-height: 96rpx;
			background: linear-gradient( 180deg, #FFFFFD 0%, #FEE7CC 100%);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #EE4219;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 24rpx;
		}
	}
</style>