lxwx_front/pages/register/register.vue

<template>
	<view class="register" :style="{height:height+'px'}">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="title">
			注册
		</view>
		<view class="toptitle">
			留学万象
		</view>
		<view class="contentForm">
			<text>登录</text>
			<view class="inputstyle">
				<u--input
					placeholder="请输入手机号码"
					border="bottom"
					type="number"
					v-model="mobileNum"
					clearable
				></u--input>
			</view>
			<view class="codeBtn" @click="getCode">
				获取验证码
			</view>
		</view>
		<view class="check">
			<u-checkbox-group v-model="checked">
				<u-checkbox :name="1"  size="22" activeColor="#0076F6" shape="circle"></u-checkbox>
			</u-checkbox-group>
			<view class="info">
				登录即同意<text class="line"  @click="goRichtext(1)">用户协议</text>和<text class="line" @click="goRichtext(2)">隐私协议</text>
			</view>
		</view>
		<!-- #ifdef APP-NVUE || APP-PLUS -->
		<view class="changeType">
			<view class="top">
				<view class="devideLine"></view>
				<view class="devideText">
					其他登录方式
				</view>
				<view class="devideLine"></view>
			</view>
			<view class="wxImg" @click="appwxLogin">
				<image src="../../static/wxImg.png" mode="widthFix"></image>
				<view class="wxText">
					微信
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {wxapplogin} from '@/common/api.js'
	export default {
		data() {
			return {
				checked:[1],
				mobileNum:'',
				height:0
			};
		},
		onShow() {
			const res = uni.getSystemInfoSync()
			console.log(res,"hhh")
			this.height = res.screenHeight
		},
		methods:{
			goRichtext(ids){
				uni.navigateTo({
					url:'/pages/my/richText?id='+ids
				})
			},
			getCode(){
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;//11位手机号码正则
				if(!this.mobileNum){
					uni.$u.toast('请输入手机号码');
					return;
				}
				if (!reg_tel.test(this.mobileNum)){
					uni.$u.toast('请填写正确的手机号码');
					return;
				}
				if(this.checked.length==0){
					uni.$u.toast('请先勾选同意用户协议和隐私政策');
					return;
				}
				uni.navigateTo({
					url:'/pages/register/register1?mobileNum='+this.mobileNum
				})
				
			},
			appwxLogin(){
					var that = this
					if(this.checked.length==0){
						uni.$u.toast('请先勾选同意用户协议和隐私政策')
					}else{
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								console.log('-------获取openid(unionid)-----');
								console.log(loginRes);
								const params={
									access_token: loginRes.authResult.access_token,
									openid: loginRes.authResult.openid,
									event:'login'
								}
								console.log(params)
								wxapplogin(params,{}).then(res=>{
									console.log(res)
									that.$store.commit('login',res.userinfo)
									uni.setStorageSync('source','phone')
									uni.reLaunch({
										url:'/pages/my/my'
									})
								})
							}
						});
						
					}
				}
			,
			appwxLogin1(){
				if(this.checked.length==0){
					uni.$u.toast('请先勾选同意用户协议和隐私政策');
					return;
				}
				var that = this
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						//支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log('-------获取openid(unionid)-----');
									console.log(loginRes);
									// 获取用户信息
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											console.log(infoRes.userInfo);
											that.$store.commit('login',infoRes.userInfo)
											uni.setStorageSync('source','wx')
											uni.reLaunch({
												url:'/pages/my/my'
											})
										}
									});
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.register{
	height:calc(100vh);
	// border:2px solid yellow;
	background-color: #FFFFFF;
	position:relative;
	.title{
		font-size: 36upx;
		font-weight: bold;
		color: #222222;
		padding:25upx;
		// margin-top: 1%;
	}
	.toptitle{
		font-size: 80upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0076F6;
		text-align: center;
		padding-top: 10%;
	}
	.contentForm{
		margin-top:13%;
		margin-left:53upx;
		margin-right: 53upx;
		&>text{
			font-size: 48upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			
		}
		.inputstyle{
			margin-top:96upx;
			/deep/.u-input--no-radius{
				padding:30upx 0 !important;
			}
		}
		.codeBtn{
			margin-top:50upx;
			background: #0076F6;
			border-radius: 50upx;
			font-size: 30upx;
			font-weight: 500;
			color: #FFFFFF;
			padding:34upx 0;
			text-align: center;
		}
		
	}
	.check{
		display: flex;
		width: 85%;
		margin: 65upx auto 20upx auto;
		align-items: center;
		/deep/.uni-checkbox-input{
			border-radius:50%;
		}
		.info{
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			letter-spacing: 2upx;
			margin-left:26upx;
			.line{
				color:#0076F6
			}
		}
	}
	.changeType{
		position:absolute;
		width:calc(100% - 106upx);
		padding:0 53upx;
		bottom: 7%;
		.top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.devideLine{
				width:26%;
				height: 2upx;
				background-color: #CCCCCC;
			}
			.devideText{
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				// flex:1;
			}
			
		}
		.wxImg{
			text-align: center;
			margin-top:60upx;
			image{
				width:80upx;
				height:auto;
			}
			.wxText{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-top:24upx;
			}
		}
	}
}
</style>