MeiMeiZhuan/pages/public/login.vue

<template>
	<view class="container">
		<view class="container_box flex-center" v-if="!weixinB">
			<view class="logo"></view>
		</view>
		<view class="revert">
			<image src="../../static/img/img03.png"></image>
		</view>
		<view class="loginTitle" >
			<view class="loginTitle-1" :class="isactive ? '' : 'active'" :style="isactive ? 'margin-bottom: 25rpx;' : ''" @click="choice()">
				<view >登录</view>
				<view class="display" v-show ="!isactive" ></view>
			</view>
			<view class="loginTitle-1" :class="isactive ? 'active' : ''" :style="isactive ? '' : 'margin-bottom: 25rpx;'" @click="choice()" >
				<view >注册</view>
				<view class="display" v-show ="isactive"></view>
			</view>
		</view>
		
		<view class="login_text"  v-if="!isactive">
			<view class="login_input flex-start">
				<view class="login_img"><image src="/static/img/img05.png"></image></view>
				<view class="login_name"><input class="uni-input" v-model="username" focus placeholder="请输入手机号" /></view>
			</view>
			<view class="login_input flex-start" style="margin-bottom: 30rpx;">
				<view class="login_img"><image src="/static/img/img06.png"></image></view>
				<view class="login_name"><input class="uni-input" type="password" v-model="passward" focus placeholder="请输入密码" /></view>
			</view>
			<view class="forget flex-end" @click="forget">
				<image src="../../static/img/img04.png"></image>
				<view>忘记密码?</view>
			</view>
			<view><button type="green" class="uni-button uni-button-red" @click="toLogin">登录</button></view>
			<!-- <view><button type="green" class="uni-button uni-button-green uni-button-green-plain" plain="true" hover-class="none" @click="register">注册</button></view> -->
			
			<!-- <view class="forget" @click="register">没有账号？立即创建一个。</view> -->
			<view class="flex other">
				<view class="fenge"></view>
				<view class="qita">其他方式登录</view>
				<view class="fenge"></view>
			</view>
			<!-- <view class="weixin" @click="wxLogin"><image src="../../static/spend/img05.png"></image></view>
			<view class="weixin_text" @click="wxLogin">微信登录</view> -->
			<!-- #ifndef APP-PLUS -->
			<view class="weixin" @click="wecahtLogin"><image src="/static/img/img05.png"></image></view>
			<view class="weixin_text" @click="wecahtLogin">微信登录</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<block v-if="!is_ios">
				<view class="weixin" @click="wecahtLogin"><image src="/static/img/img05.png" mode="scaleToFill"></image></view>
				<view class="weixin_text" @click="wecahtLogin('weixin')">微信登录</view>
			</block>
			<block v-else>
				<view class="ios_login flex" @click="wecahtLogin('weixin')">
					<text class="iconfont iconweixin"></text>
					<text class="weixin_text">微信登录</text>
				</view>
				<view v-if='is_apple_login' class="ios_login flex" @click="wecahtLogin('apple')">
					<image class="loginIcon" src="/static/static/icon/appleIcon.png" mode=" scaleToFill"></image>
					<text class="weixin_text">通过Apple登录</text>
				</view>
			</block>
			<!-- #endif -->
		</view>
		<view class="login_text" v-if="isactive">
			<view class="login_input flex-start">
				<view class="login_img"><image src="/static/img/img05.png"></image></view>
				<view class="login_name"><input class="uni-input" v-model="phone" focus placeholder="请输入手机号" /></view>
			</view>
			<view class="login_input flex-start">
				<view class="login_img"><image src="/static/img/img06.png"></image></view>
				<view class="login_name"><input class="uni-input" type="password" v-model="password" focus placeholder="请输入密码" /></view>
			</view>
			<view class="login_input flex-start">
				<view class="login_img"><image src="/static/img/img06.png"></image></view>
				<view class="login_name"><input class="uni-input" type="password" v-model="repassword" focus placeholder="请重复输入密码" /></view>
			</view>
			<!-- <view class="login_input flex-start">
				<view class="login_img"><image src="/static/img/img06.png"></image></view>
				<view class="login_name"><input class="uni-input" type="password" v-model="spread" focus placeholder="请重复邀请人的id" /></view>
			</view> -->
			<!-- <view class="login_input flex">
				<view class="login_img"><image src="/static/icon/img07.png"></image></view>
				<view class="login_name"><input class="uni-input" type="text" v-model="invitation" focus placeholder="请输入邀请码" /></view>
			</view> -->
			<view class="login_input flex">
				<view class="login_img"><image src="/static/img/img07.png"></image></view>
				<view class="login_name flex">
					<input class="uni-input width" v-model="code" focus placeholder="请输入验证码" />
					<view class="code" @click="verification">{{ countDown == 0 ? '获取验证码' : countDown }}</view>
				</view>
			</view>
			<view><button type="green" @click="register" class="uni-button uni-button-red">注册</button></view>
		<!-- 	<view><button class="uni-button uni-button-green uni-button-green-plain" type="green" plain="true" hover-class="none" @click="login">返回登录</button></view> -->
		</view>
		<!-- <view class="image" @click="wxLogin">
			<image src="../../static/spend/wxin.png"></image>
		</view> -->
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import { login,getUserInfo } from '@/api/login.js';
import { register, verify } from '@/api/login.js';
export default {
	data() {
		return {
			spread:'',//邀请人的id
			phone: '', //用户
			password: '', //密码
			repassword: '',
			invitation: '', //邀请码
			code: '', //验证码
			isactive:false,
			username: '',
			passward: '',
			countDown: 0, //倒计时
			// #ifdef APP-PLUS
			// 保存当前是否为微信浏览器
			weixinB:false,
			// #endif
		};
	},
	watch: {
		// 监听倒计时
		countDown(i) {
			if (i == 0) {
				clearInterval(this.time);
			}
		}
	},
	onLoad() {
		this.weixinB=uni.getStorageSync('weichatBrowser')
	},
	methods: {
		...mapMutations(['setUserInfo','login']),
		//发送验证码
		verification() {
			let obj = this;
			if (this.phone == '') {
				this.$api.msg('请输入电话号码');
				return;
			}
			if (this.phone.length < 11) {
				this.$api.msg('请输入正确的手机号');
				return;
			}
			// 判断是否在倒计时
			if (obj.countDown > 0) {
				return false;
			} else {
				obj.countDown = 60;
				obj.time = setInterval(() => {
					obj.countDown--;
				}, 1000);
				//调用验证码接口
				verify({
					phone: obj.phone,
					type: 'VERIFICATION_CODE'
				})
					.then(({ data }) => {})
					.catch(err => {
						console.log(err);
					});
			}
		},
		//登录
		async toLogin() {
			let obj = this;
			obj.logining = true;
			if (obj.username == '') {
				obj.$api.msg('请输入手机号');
				return;
			}
			if (obj.passward == '') {
				obj.$api.msg('请输入密码');
				return;
			}
			login({
				account:obj.username,
				password:obj.passward
			})
				.then(function(e) {
					console.log(e,100)
					uni.setStorageSync('token',e.data.token);
					getUserInfo({}).then((e)=> {
						obj.login();
						// 保存返回用户数据
						obj.setUserInfo(e.data);
					})
					//调用注册接口，成功跳转首页
					uni.switchTab({
					    url: '/pages/index/index'
					});
				})
				.catch(function(e) {
					console.log(e);
				});
		},
		// 注册
		register() {
			let obj = this;
			if (obj.phone == '') {
				obj.$api.msg('请输入电话号码');
				return;
			}
			if (obj.phone.length != 11) {
				obj.$api.msg('请输入正确的手机号');
				return;
			}
			if (obj.password == '') {
				obj.$api.msg('请输入密码');
				return;
			}
			if (obj.repassword == '') {
				obj.$api.msg('请再次输入密码');
				return;
			}
			if (obj.repassword != obj.password) {
				obj.$api.msg('两次密码不正确');
				return;
			}
			if ((obj.invitation = '')) {
				obj.$api.msg('请输入邀请码');
				return;
			}
			if (obj.code == '') {
				obj.$api.msg('请输入验证码');
				return;
			}
		
			register({
				account: obj.phone, //账号
				captcha: obj.code, //验证码
				password: obj.password ,//密码
				// spread: obj.spread,//邀请人id
			}).then(function(e) {
				uni.showToast({
					title:'注册成功',
					duration:2000,
					position:'top',
					icon:'none'
				});
				setTimeout(function () {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				},1000)
				
			});
			//调用注册接口，成功跳转登录页
		},
		//微信登录
		wxLogins(){
			uni.navigateTo({
				url: '/pages/public/wxLogin'
			});
		},
		// 微信登录
		wxLogin(){
		    let _self = this
		    uni.login({
		        provider:'weixin',
		        success(r){
		            //获取到用户 判断用户是否在系统中  不在则获取用户信息，并跳转到绑定手机号页面
		            if(r.errMsg=='login:ok'){
		                //登录成功 将用户的微信信息存入缓存中
		                //获取用户信息
		                uni.getUserInfo({
		                    provider: 'weixin',
		                    success(r){
		                        uni.setStorageSync("wxinfo",JSON.stringify(r))
		                        let data = {
		                            wx_info:JSON.stringify(r)
		                        }
		                        _self.request({url:"/Registered/bind",data})
		                        .then(r=>{
		                            //前往绑定页面
		                            if(r.code==201){
		                                uni.navigateTo({url:"/pages/public/bindTel"})
		                            }
		                            //存储token
		                            console.log("微信登录返回信息",r)
		                            if(r.code==200){
		                                uni.setStorageSync("token",r.data)
		                                _self.$store.commit("changeState",{
		                                        name:"hasLogin",
		                                        value:true
		                                })
		                                let tabbar = _self.$store.state.tabbar
		                                tabbar.index = 0
		                                _self.$store.commit("changeState",{
		                                        name:"tabbar",
		                                        value:tabbar
		                                })
		                                setTimeout(function(){
		                                        uni.reLaunch({url:"/pages/home/index"})
		                                },100)
		                            }
		                        })
		                        .catch()
		                    },
		                    fail(r){
		                        uni.showModal({
		                                title:"获取微信信息异常",
		                                content:JSON.stringify(r)
		                        })
		                    }
		                })
		            }
		        },
		        fail(r){
		            uni.showModal({
		                    title:"登录异常",
		                    content:JSON.stringify(r)
		            })
		        }
		    })
		},
		// 微信登录
		wecahtLogin(type) {
			let obj = this;
			// #ifdef H5
			let weichatBrowser = uni.getStorageSync('weichatBrowser');
			if (weichatBrowser) {
				loginWinxin();
			}
			// #endif
			// #ifdef APP-PLUS
			uni.login({
				provider: type,
				success(e) {
					uni.getUserInfo({
						provider: type,
						success(es) {
							if(type==='weixin'){
								loginWx(es.userInfo)
									.then(e => {
										uni.setStorageSync('token', e.data.token);
										getUserInfo({}).then(e => {
											obj.login();
											// 保存返回用户数据
											obj.setUserInfo(e.data);
											//成功跳转首页
											uni.switchTab({
												url: '/pages/index/index'
											});
										});
									})
									.catch(e => {
										console.log(e);
										uni.showModal({
											content: JSON.stringify(e),
											success() {},
											fail() {}
										});
									});
							}
							if(type==='apple'){
								console.log(es.userInfo);
								applelogin({
									account: es.userInfo.openId,
								})
									.then(function(e) {
										console.log(e,'token')
										uni.setStorageSync('token', e.data.token);
										getUserInfo({}).then(e => {
											obj.login();
											// 保存返回用户数据
											obj.setUserInfo(e.data);
											//成功跳转首页
											uni.switchTab({
												url: '/pages/index/index'
											});
										});
										
									})
									.catch(function(e) {
										console.log(e);
									});
							}
							
						},
						fail(es) {
							uni.showModal({
								content: JSON.stringify(es),
								success() {
									// obj.login();
									// // 保存返回用户数据
									// obj.setUserInfo(e.data);
									// //成功跳转首页
									// uni.switchTab({
									// 	url: '/pages/index/index'
									// });
								}
							});
						}
					});
				},
				fail(e) {
					uni.showModal({
						title: '提示',
						content: JSON.stringify(e),
						showCancel: false
					});
				}
			});
			// #endif
		},
		choice(){
			if(this.isactive == true){
				this.isactive = false;
			}else{
				this.isactive = true;
			}
		},
		//跳转忘记密码
		forget() {
			uni.navigateTo({
				url: `/pages/public/forget`
			});
		},
		// 后退
		navBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	background-color: #FFFFFF;
}
.container {
	margin-left: -1rpx;
	background-size: 100%;
	.container_box {
		width: 100%;
		height: 600rpx;
		background: url(https://mmz.liuniu946.com/statics/img/img02.png) no-repeat center;
		background-size: 750rpx 600rpx;
		position: relative;
		.logo{
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			background: url(../../static/error/missing-face.png) no-repeat center;
			background-size: 180rpx;
		}
		
	}
	.revert{
		width: 20rpx;
		height: 35rpx;
		position: absolute;
		top:20rpx;
		left:30rpx;
		image{
			width: 20rpx;
			height: 35rpx;
		}
	}
	.loginTitle {
		position: absolute;
		top:500rpx;
		width: 100%;
		color: #333333;
		font-size: 56rpx;
		padding-left: 50rpx;
		font-weight: bold;
		display: flex;
		align-items: flex-end;
		
		.loginTitle-1{
			width: 150rpx;
			font-size:36rpx;
			font-weight:400;
			color:#ffffff;
			text-align: center;
			.display{
				margin: 0 auto;
				margin-top: 20rpx;
				width: 40rpx;
				height: 6rpx;
				border-radius: 5rpx;
				background-color: #FFFFFF;
			}
			.active{
				display: none;
			}
			
		}
		.active{
			font-size:48rpx;
			font-weight:600;
		}
	}
	.login_text {
		margin: 60rpx 50rpx;
		position: relative;
		margin-top:60rpx !important;
		.login_input {
			background:#f2f2f2;
			padding: 35rpx 25rpx;
			margin-bottom: 45rpx;
			border-radius: 15rpx;
			.login_img image {
				height: 37rpx;
				width: 31rpx;
				margin-right: 30rpx;
			}
			.login_name {
				color: #333333;
				.uni-input {
					text-align: left;
					width: 380rpx;
					font-size: 30rpx !important;
					color:#666666;
				}
				.code {
					color: #FC4141;
					font-size: 23rpx;
					border-left: 1px solid #666666;
					width: 180rpx;
					flex-shrink: 0;
					text-align: center;
				}
			}
		}
		.forget {
			font-size:28rpx;
			font-weight:400;
			color:#999999;
			margin-bottom: 50rpx;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
			}
		}
		.forget:hover{
			cursor: pointer;
		}
	}
	.image{
		image{
			width: 150rpx;
			height: 150rpx;
		}
	}
}

.fenge {
	width: 30%;
	height: 2rpx;
	background-color: #eeeeee;
}
.qita {
	font-size: 28rpx;
	color: #999999;
}
.other {
	margin-top: 60rpx;
}
.weixin {
	width: 75rpx;
	height: 75rpx;
	margin: 25rpx auto;
}
.weixin image {
	width: 100%;
	height: 100%;
}
.weixin_text {
	text-align: center;
	font-size: 28rpx;
	color: #999999;
}



.uni-button-red {
	width: 100%;
	color: #FFFFFF;
	background:linear-gradient(90deg,rgba(254,78,70,1) 0%,rgba(252,65,65,1) 100%);
	border-radius: 15rpx;
}
.uni-button-green-plain {
	border: 1px solid #5dbc7c;
	margin: 40rpx 10rpx;
	border-radius: 50rpx;
	color: #5dbc7c;
	background-color: #ffffff;
}
.uni-button {
	height: 100rpx;
	line-height: 100rpx;
}
</style>