school/pages/public/login.vue

<template>
	<view class="container">
		<view class="container_box" v-if="!weixinB"></view>
		<view class="loginTitle" v-if="!weixinB"><text>请登录。</text></view>
		<view class="login_text" v-if="!weixinB">
			<view class="login_input flex">
			<!-- 	<view class="login_img"><image src="/static/icon/img03.png"></image></view> -->
				<view class="login_name"><input class="uni-input" v-model="username" focus placeholder="请输入用户名" /></view>
			</view>
			<view class="login_input flex" style="margin-bottom: 75rpx;">
				<!-- <view class="login_img"><image src="/static/icon/img04.png"></image></view> -->
				<view class="login_name"><input class="uni-input" type="password" v-model="passward" focus placeholder="请输入密码" /></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="forget">忘记密码?</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"><image src="https://37shop.liuniu946.com/front/img/img05.png"></image></view>
			<view class="weixin_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: {
		...mapMutations(['setUserInfo','login']),
		//登录
		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) {
					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/public/register`
			});
		},
		//跳转忘记密码
		forget() {
			uni.navigateTo({
				url: `/pages/public/forget`
			});
		},
		// 后退
		navBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style>
page {
	height: 100%;
	background-color: #FFFFFF;
}
.container {
	width: 100%;
	height: 100%;
	background-size: 100%;
}
.container_box {
	width: 100%;
	height: 200rpx;
}
.login_text {
	margin: auto 30rpx;
	position: relative;
	margin-top: 150rpx !important;

}
.login_input {
	border: 1px solid #f0f0f0;
	padding: 35rpx 25rpx;
	margin-bottom: 45rpx;
	border-radius: 15rpx;
}
.login_img image {
	height: 35rpx;
	width: 29rpx;
	margin-right: 20rpx;
}
.uni-input {
	text-align: left;
	width: 470rpx;
	font-size: 28rpx !important;
}
.login_name {
	color: #333333;
}
.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;
}
.forget {
	font-size: 28rpx;
	width: 100%;
	text-align: left;
	color: #313131;
	margin-bottom: 25rpx;
}
.forget:hover{
	cursor: pointer;
}

.loginTitle {
	position: absolute;
	width: 100%;
	text-align: left;
	color: #333333;
	font-size: 56rpx;
	padding-left: 25rpx;
	font-weight: bold;
}
.uni-button-red {
	color: #FFFFFF;
	background-color: #BC253A;
	margin: 40rpx 10rpx;
	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;
	background-color: #1CC7C7;
}
</style>