yizhizan-h5/pages/public/invite/download.vue

<template>
	<view class="download">
		<view class="box">
			<image src="/static/images/logo2.png" class="logo"></image>
		</view>
		<image src="/static/images/download1.png" class="img1"></image>
		<image src="/static/images/download2.png" class="img2"></image>
		<view class="download-btn" @click="download">下载亿职赞APP</view>
		
		<view v-if="showTip" @click="handleHideTip" class="downloadbox" style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: 1000;background: rgba(000,000,000,0.6);">
			<image src="/static/images/tip.png" style="position: fixed;top:30px;right: 30px;width: 80%;" mode="widthFix"/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showTip: false
			};
		},
		methods: {
			download() {
				//#ifndef H5
					return;
				//#endif
				
				const u = window.navigator.userAgent;
				const ua = u.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手机
						that.showTip = true;
					} else if (u.indexOf('iPhone') > -1) { //苹果手机
						this.$queue.showToast('iOS系统请在APPStore搜索“亿职赞”');
					}
				} else {
					if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手机
						// 小米应用商店
						if (ua.match(/xiaomi/i) == 'xiaomi') {
							window.location.href = 'https://app.mi.com/details?id=uni.app.UNI0B0096D';
						
						// vivo应用商店
						} else if (ua.match(/vivo/i) == 'vivo') {
							window.location.href = 'https://h5coml.vivo.com.cn/h5coml/appdetail_h5/browser_v2/index.html?appId=3629014';
							return this.$queue.showToast('vivo系统请在应用商店搜索“亿职赞”');
							
						// OPPO应用商店
						} else if (ua.match(/oppo/i) == 'oppo') {
							window.location.href = 'https://api.appstore.oppomobile.com/app/detail?packageName=uni.app.UNI0B0096D';
						
						// 荣耀应用商店
						} else if (ua.match(/honor/i) == 'honor') {
							window.location.href = 'https://appgallery.huawei.com/app/C116155907'; // 替换为实际应用ID
						
						// 华为应用市场
						} else if (ua.match(/huawei/i) == 'huawei') {
							window.location.href = 'https://appgallery.huawei.com/app/C116155907'; // 替换为实际应用ID
						
						// 三星应用商店
						} else if (ua.match(/samsung/i) == 'samsung') {
							window.location.href = 'https://galaxystore.samsung.com/detail/uni.app.UNI0B0096D';
						
						// 魅族应用商店
						} else if (ua.match(/meizu/i) == 'meizu') {
							window.location.href = 'https://app.meizu.com/apps/uni.app.UNI0B0096D';
						
						// 默认跳转（Google Play或官方下载页）
						} else {
							this.$queue.showToast('请在手机应用市场内搜索“亿职赞”')
						}
						
					} else if (u.indexOf('iPhone') > -1) { //苹果手机
						this.$queue.showToast('iOS系统请在APPStore搜索“亿职赞”')
					}
						
				}
			},
			handleHideTip() {
				this.showTip = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.download {
		min-height: 100vh;
		background-image: url('/static/images/bg1.png'), linear-gradient(135deg, #0d27f7, #12c1ea);
		background-size: 100%;
		background-repeat: repeat;
		.box {
			padding-top: 40rpx;
		}
		.logo {
			display: block;
			width: 136rpx;
			height: 136rpx;
			margin-left: 64rpx;
		}
		.img1 {
			display: block;
			width: 516rpx;
			height: 258rpx;
			margin: 16rpx auto 68rpx;
		}
		.img2 {
			display: block;
			width: 750rpx;
			height: 554rpx;
			margin-bottom: 80rpx;
		}
		.download-btn {
			width: 700rpx;
			height: 88rpx;
			color: #016bf6;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 88rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 88rpx;
			margin: 0 auto 40rpx;
		}
	}
</style>