yqdsh/pages/index/down.vue

<template>
	<view class="content">
		<div class="div">
			<img class="img" src="http://ygs.hqgjsmc.com/baseimg/hqyg.png" />
			<!-- <a href="#" id="donwa" > -->
			<div class="button" @click="goDown">Android版本下载</div>
			<!-- </a> -->
		</div>
		<!-- <image src="../../static/img/live_weixin.png" alt="微信打开" style="width: 750rpx;"/> -->
		<div class="weixin-tip" :style="{'display':iswx?'block':'none'}">
			<p>
				<img src="http://ygs.hqgjsmc.com/baseimg/live_weixin.png" alt="微信打开" />
			</p>
		</div>
	</view>
</template>

<script>
	import {
		getApp,
		getconfig
	} from "@/api/public";
	export default {
		data() {
			return {
				appurl: '',
				iswx: false,
			}
		},
		onLoad() {
			this.getApp()
			this.iswx = this.is_weixin()
			console.log(this.iswx)
		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			getApp() {
				getApp().then(res => {
					console.log(res)
					this.appurl = res.data.apk
				})
			},
			goDown() {
				window.location.href = this.appurl
			},
			is_weixin() {
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					return true;
				} else {
					return false;
				}
			}
		}
	}
</script>

<style lang="scss">
	.div {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.button {
		margin-left: 10%;
		position: fixed;
		bottom: 120rpx;
		width: 80%;
		text-align: center;
		z-index: 999;
		height: 140rpx;
		font-size: 32rpx;
		line-height: 140rpx;
		letter-spacing: 5rpx;
		background-color: #e1004b;
		border-radius: 5rpx;
		color: white;

	}

	.img {
		position: absolute;
		width: 300rpx;
		top: 50rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	img {
		// max-width: 100%;
		width: 300rpx;
		height: auto;
	}

	.weixin-tip {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.8);
		filter: alpha(opacity=80);
		height: 100%;
		width: 100%;
		z-index: 100;
	}

	.weixin-tip p {
		text-align: center;
		margin-top: 10%;
		padding: 0 5%;
	}

	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box
	}
</style>