shcnred/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="../../static/icon/img03.png"></image>
				<input class="input" v-model="username" focus placeholder="请输入手机号" />
			</view>
			<view class="login_input">
				<image class="img" src="../../static/icon/img04.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.userinfo.token);
						console.log(e.data.userinfo.token, 'u++++++++++++++++++++')
						//调用注册接口，成功跳转首页
						getUserInfo({}).then((e) => {
							console.log(e, 'userInfo000000000000000000000')
							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: #fa7e67;

			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;
			padding-bottom: 60rpx;
			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, #fa7e67, #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 #fa7e67;
				border-radius: 40rpx;
				text-align: center;
				margin: 0 auto;
				font-size: 30rpx;
				font-weight: 500;
				color: #fa7e67;
			}

			.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>