CBB3/pages/login/register.vue

<template>
	<view class="app">
		<view class="top-view">
			<image class="bg" src="/static/img/login-bg.png"></image>
			<view class="inner">
				<view class="statusBar" :style="'height:'  + statusBarHeight + 'px'"></view>
				<view class="inner-body fx-h fx-bc fx-ac">
					<view class="prv" @tap="utils.navigateBack()">
						<image src="/static/img/ic_back_white.png" class="icon-back"></image>
					</view>
					<view class="logo">
						<image src="/static/img/cbb_white.png"></image>
					</view>
					<view class="label-text">注册长城易趣</view>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="h120"></view>
			<view class="input-view">
				<view class="login-input fx-r">
					<view class="left fx-r fx-bc ">
						<view class="label">+86</view>
						<image class="loginv" src="/static/img/login-v.png"></image>
					</view>
					<input type="number" v-model="form.mobile" placeholder="请输入手机号" />
				</view>
				
				
				<view class="login-input yzm fx-r fx-bc">
					<view class="left fx-h fx-ac">
						<image class="icon" style="margin-left: 20rpx;" src="/static/img/login-password.png"></image>
					</view>
					<input type="text" v-model="form.verify"  placeholder="请输入验证码" />
					<view class="line"></view>
					<view v-if="verifyCount <= 0" class="sbtn" @tap="getVcode">验证码</view>
					<view v-else class="no-sbtn">{{ verifyCount }} S</view>
				</view>
				
				
				
				<view class="login-input pass fx-r fx-bc">
					<view class="left fx-h fx-ac">
						<image class="icon" style="margin-left: 20rpx;" src="/static/img/login-password.png"></image>
					</view>
					<input  type="text" v-model="form.password" password="*"  placeholder="请输入密码" />
					<view class="fx-g1"></view>
					<image @tap="showPass = !showPass" :src="showPass ? '/static/img/mis_pass.png' : '/static/img/ck_pass.png' " class="miss-pass"></image>
				</view>
				<view class="login-input fx-r" v-if="showData">
					<view class="left fx-h fx-ac">
						<image class="icon" style="margin-left: 20rpx;" src="/static/img/login-password.png"></image>
					</view>
					<input  type="text" v-model="form.code"  placeholder="请输入邀请码(非必填)" />
				</view>
				<view class="btn ihover" @tap="tapSubmit">注册账号</view>
				<view class="agament fx-r fx-bc fx-ac">
					<view @tap="isRead = !isRead" class="fx-r fx-ac fx-bc">
						<image  v-if="!isRead" src="/static/img/radio_buttons.png"></image>
						<image  v-else src="/static/img/radio_buttons_btn.png"></image>
						注册及同意
					</view>
				<text  @tap="tapOpen" data-url="/pages/operation/user">《用户协议》</text>
				，认真阅读<text  @tap="tapOpen" data-url="/pages/operation/package">《长城易趣产品购买协议》</text>
				</view>
				<view id="captcha"></view>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	page{background: #fff;}
	.top-view{
		position: relative;
		width: 100vw;
		height: 62vw;
		.bg{width: 100vw;height: 62vw;}
		.inner{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			.inner-body{
				position:relative;
				.prv{
					position: absolute;
					left: 20rpx;
					top: 20rpx;
					.icon-back{
						width: 60rpx;
						height: 60rpx;
					}
				}
				.logo{
					width: 200rpx;
					height: 119rpx;
					margin-bottom: 40rpx;
					margin-top: 60rpx;
					image{width: 100%;height: 100%;}
				}
				.label-text{
					font-size: 42rpx;
					color: #FFFFFF;
				}
			}
			
			
		}
	}
	
	.body{
		position: relative;
		background: #fff;
		border-radius: 80rpx 80rpx 0px 0px;
		top: -120rpx;
		z-index: 9;
		height: 500px;
		.h120{height: 100rpx;}
		
		.input-view{
			padding: 0px 60rpx;
			.login-input{
				border-radius: 70rpx;
				border: 1px solid #E0E0E0;
				padding: 30rpx 46rpx;
				margin-bottom: 50rpx;
				.left{
					.label{
						font-size: 28rpx;
						color: #DB292B;
						font-weight: bold;
					}
					.loginv{width: 15rpx;height: 12rpx;margin-left: 14rpx;}
					.icon{width: 30rpx;height: 33rpx;}
					width: 90rpx;
				}
				input{
					width: calc(100% - 90rpx);
				}
				
				&.yzm{
					input{
						width: calc(100% - 90rpx - 22rpx - 80rpx);
					}
					.line{
						width: 1px;
						height: 36rpx;
						background: #eee;
						margin-right: 20rpx;
					}
					.sbtn{
						font-size: 12px;
						color: #DB292B;
					}
					.no-sbtn{
						font-size: 12px;
						color: #999999;
					}
				}
				
					
				&.pass{
					input{
						width: calc(100% - 180rpx);
					}
					.miss-pass{width: 60rpx;height: 60rpx}
				}
			}
		}
		
		.btn{
			background: #DB292B;
			border-radius: 60rpx;
			text-align: center;
			font-weight: bold;
			font-size: 28rpx;
			padding: 30rpx 0;
			color: #FAFAFA;
		}
		
		.agament{
			margin-top: 40rpx;
			image{width: 36rpx;height: 36rpx;margin-right: 20rpx;}
			color: #999999;
			font-size:24rpx;
			text{color: #DB292B;}
		}
		
	}
	.miss-pass{width: 30px;height: 30px;}
	.mb-view{font-size: 14px; margin-top: 30px;padding: 0px 5px;}
	.mb-view .link{color: #DB292B;}
	
</style>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue';
	import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
	import customerWiget from '@/components/ui-public/customer-wiget.vue';
	import { mapState, mapMutations } from 'vuex';
	export default {
		components: {
			uParse,
			maoScroll,
			customerWiget
		},
		computed:mapState(['showData']),
		data() {
			return {
				statusBarHeight: 20,
				form:{
					mobile 	 : "",
					password : "",
					verify : "",
					code : ""
				},
				isRead : false,
				verifyCount : 0,
				showPass : false,
				captchaIns : null,
				validate : "",
			}
		},
		onLoad() {
			this.initView();
			this.$nextTick(()=>{
				this.initNeCaptcha();
			});
		},
		methods: {
			...mapMutations(['setSys','setUser']),
			initView: function() {
				uni.getSystemInfo({
					success: (res) => {
						this.statusBarHeight = res.statusBarHeight;
					}
				});	
			},
			initNeCaptcha () {
				// #ifdef H5
					const options = {
						captchaId: 'c6af8490405544f8a169504b11c86fdc',
						element: '#captcha',
						protocol: 'https',
						onVerify: (err, data) => {
							if(data != null || data != "") {
								this.validate = data.validate;
								this.getVcode2();
							}
						}
					}
					options.mode = 'popup';
					initNECaptcha({ ...options }, ins => {
						this.captchaIns = ins
					})
				// #endif
				
				
				// #ifdef APP
					this.captchaIns = uni.requireNativePlugin('YD-Captcha')
					this.captchaIns.init({
						captcha_id: 'c6af8490405544f8a169504b11c86fdc',
						is_no_sense_mode: false
					});
				// #endif
			},
				
			/**
			 * 注册
			 */
			tapReg:function(){
				uni.navigateTo({ url:"./register" });
			},
			
			getVcode:function(){
				if (this.verifyCount > 0) return;
				if (!this.utils.isPoneAvailable(this.form.mobile)) {
					return uni.showToast({
						title: '请输入正确的手机号码！',
						mask: true,
						icon: 'none'
					});
				}
				
				// #ifdef H5
					this.captchaIns.popUp();
				// #endif
				
				// #ifdef APP
					this.captchaIns.showCaptcha((data)=>{
					var method = data.method;
					if(method == "onSuccess"){
						var data = data.data;
						this.validate = data.validate;
						this.getVcode2();
					}
				})
				// #endif
			},
			getVcode2: function() {
				uni.showLoading({
					title: "获取中..."
				});
				this
					.request
					.post("getYzm", { mobile: this.form.mobile,validate : this.validate})
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							if (res.data.status == 2) {
								this.utils.CountDowm(res.data.time, (e, s) => {
									this.verifyCount = e;
								});
							}
			
							if (res.data.status == 1) {
								this.utils.CountDowm(120, (e, s) => {
									this.verifyCount = e;
								});
							}
						} else {
							uni.showToast({
								title: res.msg,
								mask: true,
								icon: 'none'
							});
						}
					})
					.catch(err => {
						uni.showToast({
							title: '获取失败',
							mask: true,
							icon: 'none'
						});
						uni.hideLoading();
					});
			},
			/**
			 * 打开Open
			 * @param {Object} ev
			 */
			tapOpen: function(ev) {
				let url = ev.currentTarget.dataset.url;
				this.utils.navigateTo(url);
			},
			
			
			/**
			 * 提交数据
			 */
			tapSubmit:function(){
				//手机号码
				if(this.form.mobile == ""){
					uni.showToast({
						title:"请输入手机号码",icon:"none",mask:true
					})
					return;
				}
				//手机验证号码
				//this.form.mobile
				if(!this.utils.isPoneAvailable(this.form.mobile) ){
					uni.showToast({
						title:"请输入正确的手机号码",icon:"none",mask:true
					})
					return;
				}
				
				if (this.form.password == '') {
					uni.showToast({
						title: '请输入密码',
						mask: true,
						icon: 'none'
					});
					return;
				}
								
				// if (this.form.code == '') {
				// 	uni.showToast({
				// 		title: '请填写推荐码',
				// 		mask: true,
				// 		icon: 'none'
				// 	});
				// 	return;
				// }	
						
				if(!this.isRead){
					uni.showToast({
						title:"请阅读并同意相关政策",icon:"none",mask:true
					})
					return;
				}
				
				uni.showLoading({ title: '登录中..' });
				this.request
				.post("register",this.form)
				.then(res=>{
					uni.hideLoading();
					if(res.code == 200) {
						this.setUser(res.data);
						this.webSocket.connect();
						uni.reLaunch({ url:"../index/index"});
					} else {
						uni.showToast({ title:res.msg,icon:"none",mask:true});
					}
				})
				.catch(res=>{
					uni.hideLoading();
					uni.showModal({title: '系统提示',content: '加载失败，重新点击尝试！',showCancel: false});
				});
				
			}
			
		}
	}
</script>