ltred/pages/login/login.vue

<template>
	<view class="container">
		<view class="top">
			<view class="login">登录</view>
		</view>
		<view class="center">
			<view class="login_input">
				<image class="img" src="https://zhxc2030.com/img/img08.png"></image>
				<input class="input"  v-model="username" focus placeholder="请输入手机号" />
			</view>
			<view class="login_input">
				<image class="img" src="https://zhxc2030.com/img/img67.png"></image>
				<input class="input"   type="password" v-model="passward" placeholder="请输入密码"  />
			</view>

			<!-- 登录按钮 -->
			<view class="login_buttom" @click="toLogin">
				登录
			</view>
			<!-- 注册按钮 -->
			<view class="register_buttom" @click="register">
				注册账号
			</view>

			<view class="login_else">
				<view class="login_else_border">

				</view>
				其他方式登录
				<view class="login_else_border">

				</view>
			</view>

           <!-- 微信登录 -->
		   <view class="login_wx" @click="appLogin">
		   	<image src="https://zhxc2030.com/img/wxlogin.png"></image>
			
		   </view>
		   <view class="login_wx_text" >
		   	微信登录
		   </view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import { login,getUserInfo } from '@/api/login.js';
export default {
	data() {
		return {
			username: '',
			passward: '',
			// #ifdef APP-PLUS
			// 保存当前是否为微信浏览器
			weixinB:false,
			// #endif
		};
	},
	onLoad() {
		this.weixinB=uni.getStorageSync('weichatBrowser')
	},
	methods: {
		//微信登录
		appLogin: function() {
		    uni.getProvider({
		        service: 'oauth',
		        success: function(res) {
		            console.log(res.provider);
		            //支持微信、qq和微博等
		            if (~res.provider.indexOf('weixin')) {
		                uni.login({
		                    provider: 'weixin',
		                    success: function(loginRes) {
		                        console.log('-------获取openid(unionid)-----');
		                        console.log(JSON.stringify(loginRes));
		                        // 获取用户信息
		                        uni.getUserInfo({
		                            provider: 'weixin',
		                            success: function(infoRes) {
		                                console.log('-------获取微信用户所有-----');
		                                console.log(JSON.stringify(infoRes.userInfo));
		                            }
		                        });
		                    }
		                });
		            }
		        }
		    });
		},
		...mapMutations('user',['setUserInfo','login']),
		//登录
		async toLogin() {
			let obj = this;
			obj.logining = true;
			let reg = /^1[3456789]\d{9}$/;
			if (obj.username == '') {
				obj.$api.msg('请输入手机号');
				return;
			}
			if (!reg.test(obj.username)) {
				obj.$api.msg('请输入正确的手机号');
				return;
			}
			if (obj.passward == '') {
				obj.$api.msg('请输入密码');
				return;
			}
			login({
				account:obj.username,
				password:obj.passward
			})
				.then(function(e) {
					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() {
			uni.navigateTo({
				url: `/pages/login/register`
			});
		},
		//跳转忘记密码
		// forget() {
		// 	uni.navigateTo({
		// 		url: `/pages/public/forget`
		// 	});
		// },
		// 后退
		navBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
	.container {
		line-height: 1;

		.top {
			width: 750rpx;
			height: 500rpx;
			position: relative;
      background-color: $base-color;
			image {
				width: 750rpx;
				height: 500rpx;
			}

			.login {

				font-size: 36rpx;
				font-weight: bold;
				position: absolute;
				top: 270rpx;
				left: 340rpx;
				color:  #FFFFFF;
			}
		}

		.center {
			z-index: 9;
			width: 700rpx;
			height: 840rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-top: -150rpx;
			margin-left: 24rpx;
			position: absolute;

			.login_input {
				width: 560rpx;
				display: flex;
				justify-content: center;
				
				margin: 70rpx auto;
				border-bottom: 2rpx solid #F0F0F0;
				padding-bottom: 9rpx;
				color: #999999;

				.img {
					width: 30rpx;
					height: auto;
					margin-right: 18rpx;
				}

				.input {
					width: 470rpx;
					font-size: $font-base;
					letter-spacing: 3rpx;
				}
			}

			.login_buttom {
				width: 560rpx;
                background: linear-gradient(0deg, #C9101B, #F24D33);
				border-radius: 40rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
				text-align: center;
				line-height: 80rpx;
				color: #FFFFFF;
				font-size: 30rpx;
			}

			.register_buttom {
				width: 560rpx;
				line-height: 80rpx;
				border: 1rpx solid $base-color;
				border-radius: 40rpx;
				text-align: center;
				margin: 0 auto;
				font-size: 30rpx;
				font-weight: 500;
				color: $base-color;
			}
		
		     .login_else{
				 width: 560rpx;
				 margin: 0 auto;
				 margin-top: 100rpx;
				 margin-bottom: 45rpx;
				 font-size: 24rpx;
				 font-weight:500;
				 color:rgba(153,153,153,1);
				 display: flex;
				 justify-content: center;
				 align-items: center;
				 .login_else_border{
					 flex: 1;
					 height:1rpx;
					 background:rgba(238,238,238,1);
				 }
			 }
		     
			 .login_wx{
				 width: 63rpx;
				 height: 63rpx;
				 margin: 0 auto;
				 border: none;
				 position: static;
				 padding: 0;
				 image{
					 width: 63rpx;
					 height: 63rpx;
				 }
			 }
			 .login_wx_text{
				 text-align: center;
				 font-size:24rpx;
				 font-weight:400;
				 color:rgba(153,153,153,1);
				 margin-top: 15rpx;
			 }
		}
	}
</style>