renshouH5/pages/register/index.vue

<template>
	<view v-if="config" style="overflow: hidden;margin-bottom: 20rpx;min-height: 100vh;position: relative;">
		<!-- 背景图 -->
		<image class="wdbg" src="../../static/bg.png" mode="widthFix"></image>
		<!-- 表单 -->
		<view class="form-bar">
			<view class="logo-box">
				<view class="logo-image"><image :src="config.CONFIG_PROJECT_LOGO"></image></view>
				<view class="logo-text">{{ config.CONFIG_PROJECT_TITLE }}</view>
			</view>

			<view v-if="mobileRegister" class="form-box">
				<view class="form-item">
					<view class="or-text or-text-b">
						<view>
							<text>您已使用</text>
							{{ mobileRegister }}
							<text>完成注册</text>
						</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view class="submit-btn" @click="downloadApp()">下载APP</view>
			</view>
			<view v-else class="form-box">
				<view class="form-item">
					<text class="number86">+86</text>
					<input placeholder="请输入手机号" v-model="mobile" type="number" maxlength="11" placeholder-class="placeholder" class="ipt" />
				</view>
				<view class="form-item">
					<input v-model="code" type="number" maxlength="6" placeholder="请输验证码" placeholder-class="placeholder" class="ipt" />
					<view class="code-btn gary-text" @click="getCode()" v-text="sendMsg"></view>
				</view>
				<view class="form-item noborder" v-if="userInfo">
					<image class="form-icon" src="../../static/member.png"></image>
					<text class="gary-text">
						邀请人
						<span style="color: #333;margin-left: 10rpx;">{{ userInfo.nickName }}</span>
					</text>
				</view>
				<!-- 按钮 -->
				<view class="submit-btn" @click="submitRegister()">注册并下载APP</view>
			</view>
		</view>
		<view class="gary-text footer-bar">
			<view>
				<text style="margin-right: 10rpx;" @click="jump('/pages/userAgreement/index?appId=' + appId)">服务协议</text>
				和
				<text style="margin-left: 10rpx;" @click="jump('/pages/privacyAgreement/index?appId=' + appId)">隐私政策</text>
			</view>
			<view>{{ config.CONFIG_RECORD_NUMBER }}</view>
		</view>
	</view>
</template>

<script>
const req = require('../../utils/request.js');
const util = require('../../utils/util.js');
export default {
	data() {
		return {
			appId: '',
			userId: '', //推荐人用户Id；
			config: '',
			mobile: '', //手机号
			code: '', //code
			sendMsg: '获取验证码',
			isGetCodeDisabled: false,

			mobileRegister: '', //用户注册缓存的手机号

			userInfo: '', //被邀请人对象
			pickleChannel: '', //投放渠道
			packageChannel: '' //包的渠道
		};
	},

	onLoad(opt) {
		this.mobileRegister = req.getStorage('mobileRegister');
		this.appId = opt.appId;
		// this.appId = 'ZQWYx7XoOOhv4Ns';
		this.userId = opt.userId;
		this.pickleChannel = opt.pickleChannel;
		this.packageChannel = opt.packageChannel;
		req.setStorage('pickleChannel', this.pickleChannel);
		req.setStorage('packageChannel', this.packageChannel);

		this.getConfig();
		if (this.userId) {
			this.getUeserInfo();
		}
	},

	methods: {
		getConfig() {
			req.getRequest(
				'/api/config',
				this.appId,
				{},
				data => {
					req.setStorage('config', data);
					this.config = data;
				},
				true
			);
		},

		jump(url) {
			uni.navigateTo({
				url: url
			});
		},

		getUeserInfo() {
			req.getRequest(
				'/api/user/getInfo',
				this.appId,
				{ userId: this.userId },
				data => {
					this.userInfo = data;
				},
				true
			);
		},

		getCode() {
			if (this.isGetCodeDisabled == true) return false;
			if (!this.mobile) {
				req.msg('请输入手机号');
				return;
			}
			if (!util.isMobile(this.mobile)) {
				req.msg('请输入11位有效手机号');
				return;
			}
			req.postRequest(
				'/api/sms/login',
				this.appId,
				{
					mobile: this.mobile
				},
				data => {
					req.msg('验证码获取成功');
					let time = 60;
					let interval = setInterval(() => {
						time--;
						if (time == 0) {
							this.isGetCodeDisabled = false;
							this.sendMsg = '获取验证码';
							clearInterval(interval);
						} else {
							this.isGetCodeDisabled = true;
							this.sendMsg = time + '秒后再获取';
						}
					}, 1000);
				},
				true
			);
		},
		submitRegister() {
			if (!this.mobile) {
				req.msg('请输入手机号');
				return;
			}
			if (!this.code) {
				req.msg('请输入验证码');
				return;
			}
			var dataP = {
				mobile: this.mobile,
				code: this.code,
				parentId: this.userId
			};
			req.postRequest(
				'/api/mobileLogin',
				this.appId,
				dataP,
				data => {
					if (data.isNewRegister) {
						req.setStorage('mobileRegister', util.phoneHintText(this.mobile));
						this.downloadApp();
					} else {
						req.msg('当前手机号已经注册过了');
					}
				},
				true
			);
		},

		/**
		 * 下载app
		 */
		downloadApp() {
			this.jump('/pages/downloadApp/index?appId=' + this.appId);
		},

		// // 去下载
		// downloadApp() {
		// 	var u = navigator.userAgent;
		// 	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
		// 	var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
		// 	// 这里是iOS浏览器
		// 	if (isIOS) {
		// 		if (this.config.download_app_ios_url) {
		// 			window.location.href = this.config.download_app_ios_url; // 跳AppStore下载地址
		// 		} else {
		// 			this.showModal('后台暂未开放IOS App版本下载');
		// 		}
		// 	} else {
		// 		// 是微信内部webView
		// 		// if (is_weixn()) {
		// 		// 	this.showModal('请点击右上角“...”按钮, 选择在浏览器打开');
		// 		// } else {
		// 		if (this.config.download_app_android_url) {
		// 			window.location.href = this.config.download_app_android_url; // 跳AppStore下载地址
		// 		} else {
		// 			this.showModal('后台暂未开放Android App版本下载');
		// 		}
		// 		// }
		// 	}
		// },

		// // 是微信浏览器
		// is_weixn() {
		// 	var ua = navigator.userAgent.toLowerCase();
		// 	if (ua.match(/MicroMessenger/i) == 'micromessenger') {
		// 		return true;
		// 	} else {
		// 		return false;
		// 	}
		// },

		// IsPC() {
		// 	var userAgentInfo = navigator.userAgent;
		// 	var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
		// 	var flag = true;
		// 	for (var v = 0; v < Agents.length; v++) {
		// 		if (userAgentInfo.indexOf(Agents[v]) > 0) {
		// 			flag = false;
		// 			break;
		// 		}
		// 	}
		// 	return flag;
		// },

		showModal(msg) {
			uni.showModal({
				title: '提示',
				content: msg,
				confirmText: '关闭',
				showCancel: false,
				success(res) {}
			});
		}
	}
};
</script>

<style>
page {
	background: transparent;
}
.wdbg {
	display: block;
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.logo-box {
	padding-top: 40rpx;
}
.logo-image {
	width: 100rpx;
	height: 100rpx;
	margin: auto;
}
.logo-text {
	text-align: center;
	margin-top: 10rpx;
}
.logo-image image {
	width: 100%;
	height: 100%;
}
.form-bar {
	background-color: #fff;
	border-radius: 50rpx;
	margin: 600rpx 50rpx 50rpx 50rpx;
	z-index: 2;
}
.form-bar::before {
	content: '';
	display: block;
	clear: both;
}
.form-ba::after {
	content: '';
	display: block;
	clear: both;
}
.form-box {
	padding: 30rpx 40rpx 100rpx 40rpx;
}
.form-box .form-item {
	display: flex;
	padding: 20rpx 10rpx;
	border-bottom: 1rpx solid #ebebeb;
	align-items: center;
}
.form-box .form-item:last-of-type {
	border-bottom: none;
}
.form-box .form-item input {
	flex: 1;
}
.form-box .form-item .form-icon {
	width: 30rpx;
	height: 30rpx;
	margin-right: 10rpx;
}
.placeholder {
	color: #999;
}
.ipt {
	font-size: 30rpx;
	color: #333;
	height: 70rpx;
	line-height: 70rpx;
}

.number86 {
	font-size: 30rpx;
	padding-right: 20rpx;
	margin-right: 20rpx;
	border-right: 1rpx solid #ebebeb;
}
.code-btn {
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
	border: 2rpx solid #999;
}

.or-text {
	color: #ff7116;
	font-size: 30rpx;
	padding-left: 10rpx;
	padding-right: 10rpx;
}
.or-text-b {
	margin: 20rpx auto;
	text-align: center;
}

.or-text-b text {
	color: #333;
}

.gary-text {
	color: #999;
	font-size: 24rpx;
}
.noborder {
	border: none !important;
}
.submit-btn {
	background-color: #ff7116;
	color: #fff;
	border-radius: 50rpx;
	padding: 20rpx 50rpx;
	text-align: center;
	font-weight: bold;
	margin-top: 50rpx;
}
.footer-bar {
	/* margin: 50rpx auto; */
	position: absolute;
	bottom: 20rpx;
	width: 100%;
	text-align: center;
}
.footer-bar text {
	color: #333;
	text-decoration: underline;
}
.footer-bar view {
	margin: 10rpx auto;
}
</style>