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(this.$base.baseUrl+'/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>