partnerApp/pages/register/registerSuccess.vue

<template>
	<view class="pageBody">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view>
			<view class="info">
				<view class="ok-btn">
					<image src="/static/image/register/ok.png" alt="注册成功" mode="widthFix"></image>
				</view>
				<p class="entry-con">感谢您加入掌柜</p>
				<h2 class="entry-hd">恭喜注册成功</h2>
				<view class="info-list">
					<view>您的掌柜会员号：{{id}}</view>
					<view>您的关联手机：{{phone}}</view>
				</view>
			</view>
			<view class="download">
				<h3 class="entry-hd">立即下载晋掌柜</h3>
				<p class="entry-con">即可享受保险特别特别优惠</p>
				<p class="entry-con">点击下方按钮复制会员号并下载</p>
				<view class="download-btn d-flex a-center j-center">
					<!-- <view><image src="/static/image/register/ios-btn.png" alt="苹果版下载" mode="widthFix"></image></view> -->
					<view>
						<image id="android" src="/static/image/register/android-btn.png" @tap="downloadApp('android')"
							alt="安卓版下载" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="app">
				<image src="/static/image/register/app.jpg" mode="widthFix" alt="应用预览"></image>
				<p class="entry-con">下载完成后，在晋掌柜中登录<br>进行账号认证即可正常使用<br>如有下载困难，请致电：4006-333-016</p>
			</view>
			<view class="footer-bg">
				<p class="entry-con">注：微信用户请在右上角选择“在浏览器中打开”，再选择下载应用</p>
			</view>

		</view>
		<view id="weixin-tip">
			<p>
				<image src="/static/image/register/live_weixin.png" alt="微信打开" mode="widthFix"></image>
				<span id="close" title="关闭" class="close" @tap="hideDownload">×</span>
			</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				phone: "",
			}
		},
		onLoad(params) {
			this.id = params.id;
			this.phone = params.phone;
			if (!!this.id) {
				uni.setClipboardData({
					data: this.id
				})
			}
		},
		methods: {
			// 判断是不是微信
			weixinTip(ele) {
				var ua = navigator.userAgent;
				var isWeixin = !!/MicroMessenger/i.test(ua);
				if (isWeixin) {
					ele.onclick = function(e) {
						window.event ? window.event.returnValue = false : e.preventDefault();
						document.getElementById('weixin-tip').style.display = 'block';
					}
				} else {
					if (!!this.id) {
						uni.setClipboardData({
							data: this.id
						})
					}
					window.open('http://baoxianzhanggui.com:8080/app/android/zgcx.apk');
				}
			},
			downloadApp(typeId) {
				var btn = document.getElementById(typeId);
				this.weixinTip(btn);
			},
			hideDownload() {
				document.getElementById('weixin-tip').style.display = 'none';
			}
		}
	}
</script>

<style scoped>
	/*核心css*/
	.wxtip {
		background: rgba(0, 0, 0, 0.8);
		text-align: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 998;
		display: none;
	}

	.wxtip-icon {
		width: 52px;
		height: 67px;
		background: url(http://caibaojian.com/d/uploads/2016/01/weixin-tip.png) no-repeat;
		display: block;
		position: absolute;
		right: 30px;
		top: 20px;
	}

	.wxtip-txt {
		padding-top: 107px;
		color: #fff;
		font-size: 16px;
		line-height: 1.5;
	}

	.pageBody {
		max-width: 750rpx;
		min-height: 100vh;
		background: #f5f5f5;
		font-family: "Arial,Helvetica,sans-serif,PingFangSC";
	}

	.info {
		background: url(/static/image/register/success-bg.jpg) no-repeat center bottom;
		background-size: cover;
		color: #fff;
		padding: 100rpx 0;
	}

	.info .ok-btn {
		width: 130rpx;
		margin: 0 auto;
		padding-bottom: 30rpx;
		text-align: center;
	}

	.info .ok-btn image {
		width: 100%;
	}

	.info .entry-con {
		font-size: 28rpx;
		text-align: center;
	}

	.info .entry-hd {
		font-size: 50rpx;
		letter-spacing: 15rpx;
		font-weight: bold;
		text-align: center;
	}

	.info .info-list {
		margin: 40rpx 80rpx 0;
		list-style: none;
		font-size: 28rpx;
		text-align: center;
	}

	.info .info-list>view {
		padding-top: 30upx;
		border-bottom: 1px solid #D1EAEE;
		padding-bottom: 10upx;
	}

	.download {
		color: #4D4D4D;
		background-color: #FFFFFF;
		padding: 50upx 50upx 70upx;
	}

	.download .entry-con {
		font-size: 28upx;
		text-align: center;
	}

	.download .entry-hd {
		font-size: 50upx;
		letter-spacing: 5upx;
		font-weight: bold;
		text-align: center;
	}

	.download .download-btn {
		padding-top: 30upx;
	}

	.download .download-btn>view {
		width: 325upx;
		padding: 0 32.5rpx;
		box-sizing: border-box;
		display: inline-block;
		vertical-align: top;
		text-align: center;
	}

	.download .download-btn>view>image {
		width: 100%;
	}

	.app {
		background-color: #FFFFFF;
	}

	.app>image {
		width: 640upx;
		margin: 0 auto;
		display: block;
		margin-bottom: 26upx;
	}

	.app .entry-con {
		font-size: 28upx;
		text-align: center;
	}

	.footer-bg {
		background: #2D2D2D;
		color: #E4E4E4;
		padding: 25upx 15upx;
		text-align: center;
	}

	.footer-bg .entry-con {
		font-size: 24upx;
		text-align: center;
	}

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

	#weixin-tip p {
		text-align: center;
		margin-top: 75upx;
		padding: 0 40upx;
		position: relative;
	}

	#weixin-tip .close {
		color: #fff;
		padding: 5px;
		font: bold 20px/20px simsun;
		text-shadow: 0 1px 0 #ddd;
		position: absolute;
		top: 0;
		left: 5%;
	}
</style>