newmyj/pages/public/domApp.vue

<template>
	<view class="box">
		<view class="logo flex-line ">
			<image class="logoImg" src="../../static/img/domLogo.png" mode="aspectFit"></image>
			<view class="text">
				<view class="name">
					母婴界
				</view>
				<view class="content margin-t-20">
					母婴界严选
				</view>
			</view>
			<view class="tipBox">

				<view class="rightO">

				</view>
				<view class="leftX">
					×
				</view>
			</view>
		</view>
		<image class="img" src="../../static/img/bg.png" mode="widthFix"></image>
		<view class="bottom flex-line">
			<view class="buttom" @click="load">
				立即下载
			</view>
			<view class="tip margin-t-20">
				平价惠万民，智能行百里
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAppBBH
	} from "@/api/index.js";
	export default {
		data() {
			return {

			};
		},
		onLoad() {
		
		},
		methods: {
			load(){
				const bo = uni.getStorageSync('weichatBrowser')||false;
				if(bo){
					uni.showModal({
						title: '错误',
						content: '无法在微信浏览器中下载请使用手机自带浏览器',
						showCancel: false,
					});
					return 
				}
				uni.showLoading({
					title: '开始下载',
					mask: true
				});
				getAppBBH().then((res)=>{
					uni.hideLoading()
					let r = res.data;
					console.log(r);
					// 打开下载文件
					window.open(r.file_url.app_file)
				}).catch(()=>{
					uni.hideLoading()
				})
			}
		}
	};
</script>

<style lang="scss">
	.box {
		line-height: 0;
		height: 100vh;
	}

	.logo {
		margin: 0 auto;
		width: 700rpx;
		height: calc(100vh - 535rpx);

		.logoImg {
			width: 100%;
		}

		.tipBox {
			width: 700rpx;
			position: relative;

			.rightO {
				border: 1px solid #04aa6a;
				opacity: 0.8;
				width: 40rpx;
				height: 40rpx;
				border-radius: 100rpx;
				position: absolute;
				right: 0;
				top: -100rpx;
			}

			.leftX {
				color: #04aa6a;
				opacity: 0.8;
				position: absolute;
				left: 10rpx;
				top: 80rpx;
			}
		}
	}

	.img {
		width: 750rpx;
		height: 160rpx;
	}

	.bottom {
		width: 750rpx;
		height: 375rpx;
		background-color: #04aa6a;
		line-height: 1;

		.buttom {
			font-weight: bold;
			background-color: #FFFFFF;
			text-align: center;
			color: #04aa6a;
			padding: 20rpx;
			border-radius: 20rpx;
			width: 450rpx;
			margin: 0 auto;
		}

		.tip {
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}

	.text {
		line-height: 1;
		color: #04aa6a;
		text-align: center;

		.name {
			font-size: 38rpx;
			font-weight: bold;
		}

		.content {
			font-size: 28rpx;
			opacity: 0.5;
		}
	}
</style>