share_h5/pages/down.vue

<template>
	<view class="bg">
		<!-- <navbar backColor="#fff" :config="config"></navbar> -->
		<!-- v-if="showHint" -->
		<view class="view-alert" v-if="showHint">
			<view class="alert-text">
				点击右上角按钮，然后在弹出的菜单中，点击在浏览器中打开，即可下载安装
			</view>
			<image class="alert-arrow" src="../static/alert-arrow.png" mode="aspectFit"></image>
		</view>

		<view class="top-box">
			<image src="/static/down/downApps.png" mode="aspectFit" class="logo"></image>
		</view>
		<view class="btn-row">
			<button class="btn" @click="downLoad(0)">
				<image src="/static/login/btn_01.png" mode="aspectFit" class="logo"></image>
				<text>安卓下载</text>
			</button>
			<button class="btn" @click="downLoad(1)">
				<image src="/static/login/btn_02.png" mode="aspectFit" class="logo"></image>
				<text>IOS下载</text>
			</button>
			<view class="" style="width: 100%; height: 30rpx;">

			</view>
			<!-- <wx-open-launch-weapp username="gh_9b86ebba08b0" path="pages/homeQX/index" >宜格服务小程序</wx-open-launch-weapp> -->
			<button class="btn" @click.stop="onWeChat()">
				<image src="/static/login/btn_03.png" mode="aspectFit" class="logo"></image>
				<text>宜格服务小程序</text>
			</button>


		</view>
	</view>
</template>
<!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->

<script>
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '"宜格服务"懂宜昌，更懂你！',
					color: "#1A1A1A",
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: "#1A1A1A",
				},
				appInfo: null,
				showHint: false
			};
		},
		onLoad(options) {
			const ua = navigator.userAgent.toLowerCase()
			const isWeixin = ua.indexOf('micromessenger') != -1;
			this.showHint = isWeixin

		},

		methods: {
			getData(type) {
				this.$http.get("/app/version/newest", {
					type: type
				}).then((res) => {
					if (res && res.data && res.code == 200) {
						window.location.href = res.data.downloadLink
					} else {
						this.$mUtil.toast("暂无下载地址")
					}
				});
			},
			downLoad(type) {
				this.getData(type)
				// window.location.href = type == 1 ? this.appInfo.android_link : this.appInfo.ios_link;
			},

			onWeChat() {
				console.log("wx  = " , wx)
				// wx.config({
				// 	// debug: true, // 调试时可开启
				// 	appId: '小程序 AppID', // <!-- replace -->
				// 	timestamp: 0, // 必填，填任意数字即可
				// 	nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
				// 	signature: 'signature', // 必填，填任意非空字符串即可
				// 	jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
				// 	openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
				// })
			},

		},
	};
</script>
<style>
	page {
		width: 750rpx;
		min-height: 100vh;
		overflow: hidden;
	}
</style>
<style lang='scss' scopd>
	* {
		padding: 0;
		margin: 0;
	}

	.view-alert {
		/* position: absolute;
		left: 0;
		top: 0;
		z-index: 9; */
		width: 750rpx;
		background: rgb(52, 52, 52);
		margin-left: 0px;
		margin-right: 0px;
		padding: 60rpx 30rpx 60rpx 60rpx;
		box-shadow: rgba(22, 22, 23, 0.62) 0px -10px 16px inset;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		box-sizing: border-box;

		.alert-text {
			flex: 1;
			color: #7f7e7e;
			font-weight: 400 !important;
			padding-right: 60rpx;
			line-height: 1.5;
		}

		.alert-arrow {
			flex-shrink: 0;
			width: 60rpx;
			height: 60rpx;
			margin-top: -30rpx;
		}
	}

	.bg {
		width: 100%;
		min-height: 100vh;

		background: url('../static/down/downBG.png') no-repeat top center;
		background-size: 100% 100%;
		padding-bottom: 118rpx;
	}

	.top-box {
		/* 	position: absolute;
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		top: 400rpx;
		left: 50%;
		transform: translateX(-50%); */
		/* margin: 117rpx auto; */
		padding: 117rpx 74px 0 44rpx;
		width: 632rpx;

		.logo {
			width: 632rpx;
			height: 993rpx;
		}
	}

	.btn-row {
		display: flex;
		width: 100%;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
		/* position: fixed; */
		/* 
		bottom: 400rpx;
		left: 50%;
		transform: translateX(-50%); */

		.btn {
			border-radius: 60rpx;
			width: 401rpx;
			height: 97rpx;
			background: linear-gradient(189deg, #a7f4ff 0%, #45e3ff 100%), #edf4fc;
			border-radius: 20rpx;
			margin-top: 49rpx;
			display: flex;
			align-items: center;
			/* justify-content: center; */
			font-family: AlimamaShuHeiTi, AlimamaShuHeiTi-Bold;
			font-weight: 700;
			color: #333333;
			padding: 0 34rpx 0 54rpx;

			image {
				flex-shrink: 0;
				width: 60rpx;
				height: 60rpx;
				/* margin-right: 10rpx; */
			}

			text {
				flex: 1;
				text-align: center;
			}
		}
	}
</style>